<template>
  <div>
    <div style="margin:15px 0;display: inline-block;">
      <span>推广人：</span>
      <el-input
        style="width: 180px;"
        clearable
        placeholder="请输入推广人"
        v-model="search.userName"
      ></el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="margin:15px 0;display: inline-block;">
      <span>推广码：</span>
      <el-input
        style="width: 180px;"
        clearable
        placeholder="请输入推广码"
        v-model="search.promoCode"
      ></el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="margin:15px 0;display: inline-block;">
      <span>手机号码：</span>
      <el-input
        style="width: 180px;"
        clearable
        placeholder="请输入手机号码"
        v-model="search.phone"
      ></el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="display: inline-block;">
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询
      </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置
      </el-button>
    </div>
    <div style="margin:5px 0 15px 0;">
      <!-- <el-button
        :disabled="!isAuth('deliveryAddress:import')"
        size="mini"
        type="primary"
        icon="document"
        @click="daoruCheck"
        >导入
      </el-button> -->
      <el-button
        :disabled="!isAuth('promotion:export')"
        size="mini"
        type="warning"
        icon="document"
        @click="exportList"
      >
        导出Excel
      </el-button>
      <el-button
        :disabled="!isAuth('promotion:add')"
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="addAddress"
        >新增
      </el-button>
    </div>
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <!-- <el-table-column type="selection">  @selection-change="changeFun"
			</el-table-column> -->
      <!-- <el-table-column prop="id" label="编号" width="80"></el-table-column> -->
      <el-table-column prop="promoCode" label="推广码"> </el-table-column>
      <el-table-column prop="userName" label="推广人"> </el-table-column>
      <el-table-column prop="idCard" label="身份证号"> </el-table-column>
      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="promoCount" label="推广人次"> </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="260">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('promotion:tuiguang')"
            @click="promotionDetail(scope.row)"
            style="margin: 3px;"
            >推广明细
          </el-button>
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('promotion:update')"
            @click="updates(scope.row)"
            style="margin: 3px;"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!isAuth('promotion:delete')"
            @click="deleteuser(scope.row)"
            style="margin: 3px;"
            v-if="scope.row.id != 14"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalCount"
      >
      </el-pagination>
    </div>

    <!-- 新增 -->
    <el-dialog :title="addTitle" :visible.sync="addDialog" center width="600px">
      <el-form :model="addForm" :rules="rules" ref="ruleForm">
        <el-form-item label="推广码：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.promoCode"
            style="width: 250px"
            placeholder="请输入推广码"
          >
            <el-button
              @click="generateVerificationCode"
              style="color: #3e8ef7;"
              slot="append"
              >自动生成</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item label="推广人：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.userName"
            style="width: 250px"
            placeholder="请输入推广人"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.idCard"
            style="width: 250px"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.phone"
            style="width: 250px"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex;flex-direction: row-reverse;">
        <el-button type="primary" @click="amendAddress">确 定</el-button>
        <el-button @click="addDialog = false" style="margin-right: 20px;"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 推广明细 -->
    <el-dialog
      title="推广明细"
      :visible.sync="promotionDialog"
      center
      width="1000px"
    >
      <div style="margin:15px 0;display: inline-block;">
        <span>手机号码：</span>
        <el-input
          style="width: 160px;"
          clearable
          placeholder="请输入手机号码"
          v-model="promotionSearch.userPhone"
        ></el-input
        >&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div style="margin:15px 0;display: inline-block;">
        <span>开通时间：</span>
        <el-date-picker
          v-model="promotionSearch.time"
          type="datetimerange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="promotionSelect"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="promotionCleans"
          >重置
        </el-button>
      </div>
      <el-table v-loading="tableDataLoading" :data="promotionTable.list">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="userName" label="用户名"> </el-table-column>
        <el-table-column prop="userPhone" label="手机号码"> </el-table-column>
        <el-table-column prop="createTime" label="开通时间"> </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="promotionSizeChange"
          @current-change="promotionCurrentChange"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="promotionLimit"
          :current-page="promotionPage"
          layout="total,sizes, prev, pager, next"
          :total="promotionTable.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 导出限制 -->
    <el-dialog
      custom-class="export"
      :visible.sync="exportVisible"
      center
      :title="exportTitle"
      :close-on-click-modal="false"
    >
      <div class="con" v-show="exportFlag == 1">
        <img src="../../assets/img/error.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >当前导出条数超过50000条，暂不支持导出</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：数据中的图片、附件只能以链接的形式导出）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 2">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出中...</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 3">
        <img src="../../assets/img/success.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出成功</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 4">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >版本迭代中，导出暂时无法使用</span
        >
      </div>
      <div class="btn">
        <el-button type="primary" @click="exportAffirm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 导入 -->
    <el-dialog
      custom-class="daoru"
      :visible.sync="daoruVisible"
      center
      title="导入收货地址"
      :close-on-click-modal="false"
      width="700px"
    >
      <div style="margin-bottom: 55px;">
        <el-button
          style="margin-bottom: 20px;"
          type="warning"
          @click="daoruTemplate"
          >导入模板下载</el-button
        >
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          v-model="daoruFile"
          :http-request="daoruChange"
          action="#"
          :before-upload="daoruBeforeUpload"
          :on-remove="handleRemove"
        >
          <!-- <el-button type="primary">点击上传</el-button> -->
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传execl文件
          </div>
        </el-upload>
      </div>
      <div class="btn" style="display: flex;flex-direction: row-reverse;">
        <el-button type="primary" @click="daoruAffirm">确定</el-button>
        <el-button @click="daoruCancel" style="margin-right: 20px;"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../allocation/quill-config.js";
import { regionData } from "element-china-area-data";
export default {
  name: "news",
  components: {
    quillEditor
  },
  data() {
    return {
      limit: 10,
      page: 1,
      tableDataLoading: false,
      search: {
        userName: "",
        promoCode: "",
        phone: ""
      },
      stationList: [],
      tableData: {
        list: []
      },
      switchValue: 0,

      formLabelWidth: "100px",
      addDialog: false,
      addTitle: "新增收货地址",
      options: regionData,
      componentKey: 0,

      storeAddre: [],
      storeAddreStr: "",

      province: "",
      city: "", //市
      district: "", //区
      addForm: {
        id: "",
        promoCode: "",
        userName: "",
        idCard: "",
        phone: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },

      // 推广明细
      promotionLimit: 10,
      promotionPage: 1,
      promoCodeId: "",
      promotionDialog: false,
      promotionSearch: {
        time: "",
        userPhone: ""
      },
      promotionTable: "",

      // 导出限制
      exportTitle: "导出错误",
      exportVisible: false,
      exportFlag: 1, //1 超出限制  2导出中

      daoruVisible: false,
      daoruFile: []
    };
  },
  methods: {
    switchType() {},

    stationsData() {
      this.$http({
        url: this.$http.adornUrl("admin/riderStation/selectStationList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          size: 1000
        })
      }).then(({ data }) => {
        console.log(data, "骑手站点");
        let returnData = data.data.list;
        this.stationList = returnData;
      });
    },
    // 多选
    changeFun(val) {},

    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 查询
    select() {
      this.page = 1;
      this.dataSelect();
    },
    // 重置
    cleans() {
      this.page = 1;
      this.search = {
        userName: "",
        promoCode: "",
        phone: ""
      };
      this.dataSelect();
    },

    // 删除
    deleteuser(row) {
      let delid = [row.id];
      this.$confirm(`确定删除此推广?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/vip-promo"),
            method: "delete",
            // data: delid
            data: this.$http.adornData(delid)
          }).then(({ data }) => {
            if (data.msg == "success") {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取数据列表
    dataSelect() {
      this.tableDataLoading = false;
      this.$http({
        url: this.$http.adornUrl("admin/vip-promo/pages"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          userName: this.search.userName,
          promoCode: this.search.promoCode,
          phone: this.search.phone
        })
      }).then(({ data }) => {
        console.log(data, "会员推广列表");
        if (data.msg == "success") {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 获取随机六位数
    generateVerificationCode() {
      let code = "";
      for (let i = 0; i < 6; i++) {
        code += Math.floor(Math.random() * 10);
      }
      this.$set(this.addForm, "promoCode", code);
      // return code;
    },
    // 新增收货地址
    addAddress() {
      this.addTitle = "新增推广";
      this.addForm = {
        id: "",
        promoCode: "",
        userName: "",
        idCard: "",
        phone: ""
      };
      this.addDialog = true;
    },

    // 编辑
    updates(row) {
      console.log(row);
      this.addTitle = "编辑推广";
      this.addForm = {
        id: row.id,
        promoCode: row.promoCode,
        userName: row.userName,
        idCard: row.idCard,
        phone: row.phone
      };
      this.addDialog = true;
    },

    // 确定收货地址
    amendAddress() {
      if (
        this.addForm.promoCode == "" ||
        /^\s+$/.test(this.addForm.promoCode)
      ) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "推广码不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.userName == "" || /^\s+$/.test(this.addForm.userName)) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "推广人不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.idCard == "" || /^\s+$/.test(this.addForm.idCard)) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "身份证号不能为空",
          type: "warning"
        });
        return;
      }
      if (this.addForm.phone == "" || /^\s+$/.test(this.addForm.phone)) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "手机号码不能为空",
          type: "warning"
        });
        return;
      }

      if (this.addForm.id) {
        this.$http({
          url: this.$http.adornUrl("admin/vip-promo"),
          method: "put",
          data: this.$http.adornData({
            id: this.addForm.id,
            idCard: this.addForm.idCard, //会员卡号不能为空
            phone: this.addForm.phone, //手机号不能为空
            promoCode: this.addForm.promoCode,
            userName: this.addForm.userName
          })
        }).then(({ data }) => {
          console.log(data, "编辑推广");
          if (data.msg == "success") {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          }
        });
      } else {
        this.$http({
          url: this.$http.adornUrl("admin/vip-promo"),
          method: "post",
          data: this.$http.adornData({
            idCard: this.addForm.idCard, //会员卡号不能为空
            phone: this.addForm.phone, //手机号不能为空
            promoCode: this.addForm.promoCode,
            userName: this.addForm.userName
          })
        }).then(({ data }) => {
          console.log(data, "新增会员推广");
          if (data.msg == "success") {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {
                this.addDialog = false;
                this.dataSelect();
              }
            });
          }
        });
      }
    },

    // 推广明细
    promotionDetailList() {
      this.$http({
        url: this.$http.adornUrl("admin/vip-promo/record/pages"),
        method: "get",
        params: this.$http.adornParams({
          page: this.promotionPage,
          limit: this.promotionLimit,
          startTime: this.promotionSearch.time[0],
          endTime: this.promotionSearch.time[1],
          userPhone: this.promotionSearch.userPhone,
          promoCodeId: this.promoCodeId
        })
      }).then(({ data }) => {
        console.log(data, "推广明细列表");
        if (data.msg == "success") {
          let returnData = data.data;
          this.promotionTable = returnData;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    promotionDetail(row) {
      console.log(row);
      this.promotionDialog = true;
      this.promoCodeId = row.id;
      this.promotionDetailList();
    },
    promotionSizeChange(val) {
      this.promotionLimit = val;
      this.promotionDetailList();
    },
    promotionCurrentChange(val) {
      this.promotionPage = val;
      this.promotionDetailList();
    },
    // 查询
    promotionSelect() {
      this.promotionPage = 1;
      this.promotionDetailList();
    },
    // 重置
    promotionCleans() {
      this.promotionPage = 1;
      this.promotionSearch = {
        time: "",
        userPhone: ""
      };
      this.promotionDetailList();
    },

    exportList() {
      console.log(this.tableData.totalCount, "导出条数");
      this.exportTitle = "导出";
      this.exportVisible = true;
      if (this.tableData.totalCount >= 50000) {
        this.exportTitle = "导出错误";
        this.exportFlag = 1;
      } else {
        this.exportTitle = "导出";
        this.exportFlag = 2;
        this.exportVisible = true;
        this.$http({
          url: this.$http.adornUrl("admin/export/exportVipPromoRecord"),
          method: "get",
          // responseType: "blob",
          params: this.$http.adornParams({
            page: 1,
            limit: 5000,
            userName: this.search.userName,
            promoCode: this.search.promoCode,
            phone: this.search.phone
          })
        }).then(({ data }) => {
          console.log(data, "导出");
          if (data.code == 0) {
            this.exportTitle = "导出成功";
            this.exportFlag = 3;
          }
          // let blob = new Blob([data], {
          //   type:
          //     "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          // });
          // if (window.navigator.msSaveOrOpenBlob) {
          //   navigator.msSaveBlob(data);
          // } else {
          //   let url = window.URL.createObjectURL(data);
          //   let elink = document.createElement("a");
          //   elink.download = "会员推广列表.xlsx";
          //   elink.style.display = "none";
          //   elink.href = url;
          //   document.body.appendChild(elink);
          //   elink.click();
          //   document.body.removeChild(elink);
          // }
        });
      }
    },
    exportAffirm() {
      this.exportVisible = false;
    },

    daoruCheck() {
      this.daoruVisible = true;
      this.daoruFile = [];
      this.$nextTick(() => {
        this.$refs.upload.clearFiles();
      });
    },
    // 导入模板下载
    daoruTemplate() {
      this.$http({
        url: this.$http.adornUrl(
          "admin/inside-address/downloadInsideAddressExcel"
        ),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        console.log(data, "导出");
        const link = document.createElement("a");
        link.href = data.data;
        // link.download = "模板文件.xlsx"; // 设置下载后的文件名
        link.target = "_blank"; // 在新标签页中打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    // 确定导入
    daoruAffirm() {
      console.log(this.daoruFile, "导入收货地址");

      let formData = new FormData();
      formData.append("file", this.daoruFile);
      this.$http({
        url: this.$http.adornUrl("admin/inside-address/import"),
        method: "post",
        // headers: {
        //   'Content-Type': 'multipart/form-data'
        // },
        data: formData
      }).then(({ data }) => {
        console.log(data, "导入收货地址");
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.addDialog = false;
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    daoruCancel() {
      this.daoruVisible = false;
      this.$refs.upload.clearFiles();
    },
    // 导入文件
    daoruChange(file) {
      console.log(file, "上传成功");
      this.daoruFile = file.file;
    },
    daoruBeforeUpload(file) {
      console.log(file, "上传之前");
      // 检查文件类型
      const isExcel =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel";

      // 检查文件数量
      const isSingleFile = this.daoruFile ? this.daoruFile.length === 0 : true;

      if (!isExcel) {
        this.$message.error("只能上传Excel文件！");
        return false;
      }

      if (!isSingleFile) {
        this.$message.error("只能上传一个文件！");
        return false;
      }

      return true;
      // return this.$processImage(this, file, false); // 导入图片处理
    },
    // 文件移除处理
    handleRemove(file, fileList) {
      this.daoruFile = [];
    }
  },
  mounted() {
    this.dataSelect();
    // this.stationsData();
  }
};
</script>

<style>
.imgs {
  position: relative;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: inline-block;
}
.times {
  position: relative;
  border: 1px dashed rgba(206, 214, 222, 1);
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(245, 246, 247, 1);
  margin-right: 10px;
  display: inline-block;
}

.dels {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.dels .el-icon-delete {
  line-height: 148px;
  padding-left: 58px;
  font-size: 25px;
  color: #fff;
}

.imgs:hover .dels {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  opacity: 0.5;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.el-upload--picture-card {
  vertical-align: unset !important;
}
.tianshang {
  margin-left: 690px;
  margin-top: -20px;
  width: 69px;
  height: 26px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(62, 142, 247, 1);
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/* 导出限制 */
.export {
  width: 500px;
}
.export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.export .con .gundong {
  animation: gundong 3s linear infinite;
}
@keyframes gundong {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    transform: rotate(0deg);
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    transform: rotate(360deg);
  }
}
.export img {
  width: 70px;
}
.export .btn {
  display: flex;
  flex-direction: row-reverse;
}
</style>
