<template>
  <!-- 账户管理 -->
  <div class="user-index">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--  -->
      <el-tab-pane label="基础信息" name="jcxx" class="jcxx">
        <el-form
          style="width: 50%"
          label-position="left"
          label-width="120px"
          :model="infoForm"
        >
          <el-form-item label="手机号">
            <el-input v-model="userInfo.mobile" disabled></el-input>
          </el-form-item>

          <el-form-item label="店铺名称">
            <el-input
              v-model="userform.title"
              disabled
              :placeholder="userform.title ? userform.title : '请输入客户名称'"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="userInfo.nickname" @blur="nicknameBlur"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="userform.contacts"
              :placeholder="userform.contacts ? userform.contacts : '请输入联系人'"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input
              v-model="userform.phone"
              :placeholder="userform.phone ? userform.phone : '请输入电话号码'"
            ></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input
              v-model="userform.email"
              :placeholder="userform.email ? userform.email : '请输入电子邮箱'"
            ></el-input>
            <!-- <p class="text">请完善资料，将有助于更好地为您服务！</p> -->
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="infosevaForm" size="small"
                >修改</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="会员等级" name="hydj" class="hydj">
        <div class="vipList">
          <ul>
            <li
              :style="{ background: item.bgr }"
              v-for="(item, index) in vipList"
              :key="index"
            >
              <p :style="{ color: item.color }">
                <span v-if="vipGrade == index + 1">当前等级</span>
                <span>{{ item.grade }}</span>
              </p>
              <img :src="item.img" alt />
              <div class="time" v-if="vipGrade == index + 1">{{ item.time }}更新</div>
            </li>
          </ul>
        </div>
        <div class="vipGoos">
          <div class="title">会员尊享</div>
          <ul>
            <li v-for="(item, index) in vipGoodsList" :key="index">
              <div class="left">
                <img :src="item.icon" alt />
              </div>
              <div class="right">
                <p>{{ item.title }}</p>
                <span>{{ item.label }}</span>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="修改密码" name="xgmm" class="xgmm">
        <el-form
          style="width: 50%"
          label-position="left"
          ref="passwordForm"
          :rules="rules"
          label-width="120px"
          :model="passwordForm"
        >
          <el-form-item label="旧密码" prop="old_password">
            <el-input
              clearable
              v-model="passwordForm.old_password"
              placeholder="请输入旧密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_password">
            <el-input
              show-password
              clearable
              v-model="passwordForm.new_password"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="again_new_password">
            <el-input
              show-password
              clearable
              v-model="passwordForm.again_new_password"
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: flex-end; margin-top: 40px">
              <el-button type="primary" @click="editPassword('passwordForm')" size="small"
                >保 存</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="更换手机号" name="ghsjh" class="ghsjh">
        <el-form
          style="width: 50%"
          label-position="left"
          ref="phoneForm"
          :rules="rules"
          label-width="120px"
          :model="phoneForm"
        >
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="phoneForm.password"
              show-password
              placeholder="请输入登录密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="phoneForm.mobile" placeholder="请输入新手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div style="display: flex; justify-content: flex-end">
              <el-input v-model="phoneForm.code" placeholder="请输入验证码"></el-input>
              <div class="code" @click="getCodeKey">
                <span v-if="isShowCode">发送验证码</span>
                <span v-else>{{ counter }}s重新获取</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: flex-end; margin-top: 40px">
              <el-button type="primary" @click="editMobile('phoneForm')" size="small"
                >保 存</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="切换店铺" name="qhzh" class="qhzh">
        <div class="examine" v-if="passList.length">
          <div class="title">正常使用</div>
          <ul>
            <li
              v-for="(item, index) in passList"
              :key="index"
              @click="changeDrugstore(item, index)"
              :class="{ card_bg: changeDrugstoreIndex == index }"
            >
              <span>{{ item.title }}</span>
              <div class="right">
                <div style="color: #67c23a">通过</div>
                <div class="del" @click="clickStop(item.id)">停用</div>
                <!-- <div
                  style="color: #67c23a"
                  @click="editDrugstore({ id: item.id, isEdit: true })"
                >
                  详情
                </div> -->
              </div>
            </li>
          </ul>
        </div>

        <div class="examine" v-if="examineList.length">
          <div class="title">待审核</div>
          <ul>
            <li v-for="(item, index) in examineList" :key="index">
              <span>{{ item.title }}</span>
              <div class="right">
                <div class="edit" @click="editDrugstore({ id: item.id, isEdit: true })">
                  修改
                </div>
                <div class="del" @click="clickDelete(item.id)">删除</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="examine" v-if="rejectList.length">
          <div class="title">已驳回</div>
          <ul>
            <li v-for="(item, index) in rejectList" :key="index">
              <span>{{ item.title }}</span>
              <div class="right">
                <div class="edit" @click="editDrugstore({ id: item.id, isEdit: true })">
                  修改
                </div>
                <div class="del" @click="clickDelete(item.id)">删除</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="examine" v-if="deactivateList.length">
          <div class="title">已停用</div>
          <ul>
            <li v-for="(item, index) in deactivateList" :key="index">
              <span>{{ item.title }}</span>
              <div class="right">
                <div class="edit" @click="clickStart(item.id)">启用</div>
                <div class="del" @click="clickDelete(item.id)">删除</div>
              </div>
            </li>
          </ul>
        </div>
        <el-button
          style="margin-top: 65px"
          type="primary"
          @click="clickAddFactory"
          size="small"
          >新增</el-button
        >
      </el-tab-pane>
      <!--  -->
      <!-- <el-tab-pane label="支付密码" name="zfmm" class="zfmm">
        <el-form
          style="width: 50%"
          label-position="left"
          ref="payForm"
          :rules="rules"
          label-width="120px"
          :model="payForm"
        >
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="payForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div style="display: flex; justify-content: flex-end">
              <el-input v-model="payForm.code" placeholder="请输入验证码"></el-input>
              <div class="code" @click="getEditPay">
                <span v-if="isShowCode">发送验证码</span>
                <span v-else>{{ counter }}s重新获取</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="原支付密码" prop="password" v-if="isSetPassword">
            <el-input
              show-password
              clearable
              v-model="payForm.password"
              placeholder="请输入6位数字密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付密码" prop="new_password">
            <el-input
              show-password
              clearable
              v-model="payForm.new_password"
              placeholder="请输入6位数字密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="again_password">
            <el-input
              show-password
              clearable
              v-model="payForm.again_password"
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: flex-end; margin-top: 40px">
              <el-button type="primary" @click="editPayPassword('payForm')" size="small"
                >保 存</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>
    <Dialog ref="dialog" :contentText="contentText" @clickConfirm="submit()"></Dialog>
  </div>
</template>

<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import validator from "@/mixins/validator";
export default {
  name: "index",
  auth: "guest",
  mixins: [validator],
  data() {
    return {
      // 基本信息
      activeName: "jcxx",
      infoForm: {},
      // 会员等级
      vipGrade: 1,
      vipList: [
        {
          bgr: "linear-gradient(180deg, #EBEAFF 0%, #DCD1FB 49%, #9FC0FF 100%)",
          img: require("@/assets/images/v1.png"),
          grade: "V1",
          time: "2022-09-12",
          color: "#4615D7",
        },
        {
          bgr: "linear-gradient(180deg, #FEE2B2 0%, #FED691 49%, #F8D282 100%)",
          img: require("@/assets/images/v2.png"),
          grade: "V2",
          time: "2022-09-13",
          color: "#E47A1A",
        },
        {
          bgr: "linear-gradient(180deg, #FEF9F3 0%, #F0F2F7 34%, #9FC0FF 100%)",
          img: require("@/assets/images/v3.png"),
          grade: "V3",
          time: "2022-09-14",
          color: "#1C89F6",
        },
      ],
      vipGoodsList: [
        {
          icon: require("@/assets/images/gmsp.png"),
          title: "购买商品",
          label: "积分翻倍",
        },
        {
          icon: require("@/assets/images/xgsp.png"),
          title: "限购商品",
          label: "翻倍购",
        },
      ],

      // 修改密码
      passwordForm: {
        old_password: "",
        new_password: "",
        again_new_password: "",
      },
      rules: {
        old_password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
      },

      // 更换手机号码
      phoneForm: {
        password: "",
        mobile: "",
        key: "",
        code: "",
      },
      isShowCode: true,
      counter: 60,
      timer: null,
      // 切换账号
      allList: [],
      examineList: [], //待审核
      passList: [], //通过
      deactivateList: [], //停用
      rejectList: [], //驳回
      contentText: "",
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      drugstoreStatus: undefined,
      drugstoreId: undefined,

      changeDrugstoreIndex: 0,
      chengeDrugstoreId: undefined, //切换店铺时使用
      userform: {}, //根据药店id获取个人信息

      //修改支付密码
      isSetPassword: undefined,
      payForm: {
        password: "",
        new_password: "",
        again_password: "",
        mobile: "",
        key: "",
        code: "",
      },
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "账户与安全-" + this.$store.state.titleCon,
    };
  },
  created() {},
  mounted() {
    if (JSON.parse(localStorage.getItem("drugstoreObj")) != null) {
      let obj = JSON.parse(localStorage.getItem("drugstoreObj"));
      if (obj.id) {
        this.changeDrugstoreIndex = obj.index ? obj.index : 0;
        this.chengeDrugstoreId = obj.id;
        this.getDrugstoreId();
        this.getDrugstore();
      }
    }

    // this.getIsSetPassword();
    // let local = this.$cookies.get("auth.strategy");
    // this.myHeaders = {
    //   Authorization: this.$cookies.get(`auth._token.${local}`),
    // };
    // this.userInfo = this.$auth.user;
    // this.getCodeKey();
  },
  methods: {
    //修改用户昵称
    nicknameBlur() {
      let obj = {
        nickname: this.userInfo.nickname,
      };
      this.$axios.post(`/member/modifynickname`, obj).then((res) => {
        this.$axios.post("/member/info").then((r) => {
          localStorage.setItem("userInfo", JSON.stringify(r.data));
          this.$router.go(0);
          this.$message.success("昵称修改成功");
        });
      });
    },
    // 切换药店
    changeDrugstore(item, index) {
      this.changeDrugstoreIndex = index;
      this.chengeDrugstoreId = item.id;
      let obj = { id: item.id, index: index };
      localStorage.setItem("drugstoreObj", JSON.stringify(obj));
      this.getDrugstoreId();
    },
    // 根据药店id获取个人信息
    getDrugstoreId() {
      let obj = {
        id: this.chengeDrugstoreId,
      };
      this.$axios.post(`/member/getStoreInfo`, obj).then((res) => {
        this.userform = res.data;
        console.log(this.userform);
      });
    },

    // 初始化查询药店数据
    getDrugstore() {
      // 清空数据
      this.examineList = []; //待审核
      this.passList = []; //通过
      this.deactivateList = []; //停用
      this.rejectList = []; //驳回

      this.$axios
        .post(`/member/getStoreList`)
        .then((res) => {
          this.allList = res.data;
          console.log(res.data);
          // if (res.data.length == 0) {

          // }
          //  examineList: [], //待审核
          //  passList: [], //通过
          //  deactivateList: [], //停用
          //  rejectList: [], //驳回
          // status 0待审核  1通过  2驳回 3停用
          res.data.forEach((item) => {
            switch (item.status) {
              case 0:
                this.examineList.push(item);
                break;
              case 1:
                this.passList.push(item);
                break;
              case 2:
                this.rejectList.push(item);
                break;
              case 3:
                this.deactivateList.push(item);
                break;
            }
          });
          this.chengeDrugstoreId = this.passList[0].id;
          this.getDrugstoreId();
          console.log(this.deactivateList, `deactivateList`);
          console.log(this.examineList, `examineList`);
          console.log(this.passList, `passList`);
          console.log(this.rejectList, `rejectList`);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改药店
    editDrugstore(obj) {
      this.$router.push({
        path: "/addFactory",
        query: obj,
      });
    },

    // 点击删除
    clickDelete(id) {
      this.contentText = "确认要删除吗？";
      this.drugstoreStatus = "del";
      this.drugstoreId = id;
      this.$refs.dialog.dialogShow = true;
    },

    // 停用
    clickStop(id) {
      this.contentText = "确认停用所选店铺吗？停用后，店铺不能再继续使用。";
      this.drugstoreStatus = "stop";
      this.drugstoreId = id;
      this.$refs.dialog.dialogShow = true;
    },
    // 启用
    clickStart(id) {
      this.contentText = "确认启用所选店铺吗？";
      this.drugstoreStatus = "start";
      this.drugstoreId = id;
      this.$refs.dialog.dialogShow = true;
    },

    submit() {
      let obj = {
        id: this.drugstoreId,
      };
      // 删除
      if (this.drugstoreStatus == "del") {
        this.$axios
          .post("/member/delStore", obj)
          .then((res) => {
            this.$message.success(res.message);
            this.getDrugstore();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
      // 停用
      else if (this.drugstoreStatus == "stop") {
        this.$axios
          .post("/member/stopStore", obj)
          .then((res) => {
            this.$message.success(res.message);
            this.getDrugstore();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
      //启用
      else if (this.drugstoreStatus == "start") {
        this.$axios
          .post("/member/startStore", obj)
          .then((res) => {
            this.$message.success(res.message);
            this.getDrugstore();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },

    // 点击新增药厂
    clickAddFactory() {
      this.$router.push({ path: "/addFactory" });
    },
    // 保存/修改基本信息
    infosevaForm() {
      let { id, contacts, phone, email } = { ...this.userform };
      let obj = {
        id,
        contacts,
        phone,
        email,
      };
      this.$axios
        .post(`/member/editStoreOther`, obj)
        .then((res) => {
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改密码
    editPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { old_password, new_password } = { ...this.passwordForm };
          let obj = { old_password, new_password };
          this.$axios
            .post(`/member/modifypassword`, obj)
            .then((res) => {
              this.$message.success(res.message);
              localStorage.removeItem("auth.strategy");
              localStorage.removeItem("auth._token.local1");
              localStorage.removeItem("token");
              localStorage.removeItem("userInfo");
              this.$router.push({ path: "/login" });
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    clickPasswordForm() {},
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 修改手机号获取验证码的key
    getCodeKey() {
      this.$refs.phoneForm.validateField("mobile");
      let obj = {
        mobile: this.phoneForm.mobile,
      };
      this.$axios
        .post(`/member/bindmobliecode`, obj)
        .then((res) => {
          console.log(res.data.key);
          this.isShowCode = false;
          this.StartCounter();
          this.phoneForm.key = res.data.key;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改支付密码获取验证码的key
    getEditPay() {
      this.$refs.payForm.validateField("mobile");
      // this.$refs.payForm.validateField("code");
      let obj = {
        mobile: this.payForm.mobile,
      };
      this.$axios
        .post(`/member/paypwdcode`, obj)
        .then((res) => {
          this.isShowCode = false;
          this.StartCounter();
          this.payForm.key = res.data.key;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 检查是否设置支付密码
    // getIsSetPassword() {
    //   this.$axios.post(`/member/issetpayaassword`).then(res => {
    //     this.isSetPassword = res.data;
    //   });
    // },
    editPayPassword(formName) {
      console.log(this.payForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { key, code, password, again_password } = { ...this.payForm };
          let obj = {
            key,
            code,
            password: again_password,
          };
          // 已设置支付密码
          // if (this.isSetPassword) {
          //   // 检测原支付密码是否正确
          //   this.$axios
          //     .post(`/member/checkpaypassword`, { pay_password: password })
          //     .then(r => {
          //       this.$axios
          //         .post(`/member/modifypaypassword`, obj)
          //         .then(res => {
          //           this.$message.success(res.message);
          //           this.payForm = {};
          //           this.getIsSetPassword();
          //         })
          //         .catch(err => {
          //           this.$message.error(err);
          //         });
          //     })
          //     .catch(e => {
          //       this.$message.error(e);
          //     });
          // }
          // 未设置支付密码
          // else {
          this.$axios
            .post(`/member/modifypaypassword`, obj)
            .then((res) => {
              this.$message.success(res.message);
              this.payForm = {};
              this.isShowCode = true;
              this.counter = 60;
            })
            .catch((err) => {
              this.$message.error(err);
            });
          // }
        } else {
          return false;
        }
      });
    },
    StartCounter() {
      this.timer = setInterval(() => {
        this.counter--;
        if (this.counter <= 0) {
          this.counter = 0;
          clearInterval(this.timer);
          //清除定时器
          this.isShowCode = true;
          this.phoneForm.code = "";
          this.counter = 60;
        }
      }, 1000);
    },
    // 修改手机号
    editMobile(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = { ...this.phoneForm };
          this.$axios
            .post(`/member/modifymobile`, obj)
            .then((res) => {
              this.$message.success(res.message);
              this.phoneForm = {};
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    handleSuccess(data) {
      if (data.status == 400) {
        return this.$message.error(data.msg);
      }
      this.$axios
        .post("user/edit", {
          avatar: data.data.url,
          nickname: this.userInfo.nickname,
        })
        .then((res) => {
          let jsonData = JSON.parse(JSON.stringify(this.userInfo));
          jsonData.avatar = data.data.url;
          this.$auth.$storage.setUniversal("user", jsonData);
          this.userInfo = this.$auth.user;
          this.$message.success("修改成功");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleExceed(files, fileList) {
      this.$message.warning("请勿频繁重复上传");
    },
    handleError(file, fileList) {
      this.$message.error("上传失败");
    },

    // 修改密码
    bindPassword() {
      let that = this;
      if (!that.passwordData.code) return this.$message.error("请填写验证码");
      if (!that.passwordData.newPassword) return this.$message.error("请填写新密码");
      this.$axios
        .post("register/reset", {
          account: that.userInfo.phone,
          captcha: that.passwordData.code,
          password: that.passwordData.newPassword,
        })
        .then((res) => {
          this.$message.success(res.msg);
          this.isPassword = false;
          this.passwordData.phone = "";
          this.passwordData.code = "";
          this.passwordData.newPassword = "";
        })
        .catch((err) => {
          return this.$message.error(err);
        });
    },
    handleClose() {
      this.isPassword = false;
      this.isPhone = false;
      this.passwordData.phone = "";
      this.passwordData.code = "";
      this.passwordData.newPassword = "";
      this.phoneData.code = "";
      this.phoneData.newPhone = "";
    },
    // 发送验证码
    async getCode(type) {
      let that = this;
      if (type == 0) {
        await this.$axios
          .post("/register/verify", {
            phone: that.userInfo.phone,
            type: "mobile",
            key: that.keyCode,
          })
          .then((res) => {
            this.$message.success(res.msg);
            that.sendCode();
          })
          .catch((res) => {
            this.$message.error(res);
          });
      } else {
        await this.$axios
          .post("/register/verify", {
            phone: that.phoneData.newPhone,
            type: "mobile",
            key: that.keyCode,
          })
          .then((res) => {
            this.$message.success(res.msg);
            that.sendCode();
          })
          .catch((res) => {
            this.$message.error(res);
          });
      }
    },
    // 绑定新手机号码
    async bindNewPhone() {
      let that = this;
      if (!that.phoneData.newPhone) return this.$message.error("请填写新手机号码");
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phoneData.newPhone))
        return this.$message.error("请输入正确的手机号码");
      if (!that.phoneData.code) return this.$message.error("请填写验证码");
      this.$axios
        .post("user/updatePhone", {
          phone: that.phoneData.newPhone,
          captcha: that.phoneData.code,
          key: that.keyCode,
        })
        .then((res) => {
          this.$message.success(res.msg);
          this.isPhone = false;
          this.phoneData.newPhone = "";
          this.phoneData.code = "";
        })
        .catch((err) => {
          return this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__label {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .el-button--primary {
    background-color: var(--themeColor);
    border-color: var(--themeColor);
  }
  .el-tabs__item.is-active {
    color: var(--themeColor);
  }
  .el-tabs__active-bar {
    background-color: var(--themeColor);
  }
  .el-tabs__item:hover {
    color: var(--themeColor);
  }
}
.user-index {
  padding: 10px 30px 0;
  .jcxx {
    .nickName {
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .text {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      letter-spacing: 1px;
    }
  }
  .hydj {
    .vipList {
      ul {
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        margin-top: 10px;
        li {
          width: 280px;
          height: 165px;
          margin-bottom: 30px;
          border-radius: 23px;
          position: relative;
          margin-right: 10px;
          p {
            position: absolute;

            left: 20px;
            top: 20px;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          img {
            position: absolute;
            width: 128px;
            height: 105px;
            right: -28px;
            top: 25px;
          }
          .time {
            position: absolute;
            bottom: 20px;
            left: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .vipGoos {
      .title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #222222;
      }
      ul {
        display: flex;
        flex-flow: wrap;
        margin-top: 20px;
        li {
          margin-right: 40px;
          width: 200px;
          height: 82px;
          background: linear-gradient(90deg, #fff9f4 0%, #ffefe5 100%);
          border-radius: 15px;
          border: 1px solid #fde5d3;
          display: flex;
          align-items: center;
          cursor: pointer;
          .left {
            margin-left: 20px;
            img {
              width: 35px;
              height: 35px;
            }
          }
          .right {
            margin-left: 17px;
            p {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #783a13;
              margin-bottom: 5px;
            }
            span {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #bf8c6c;
            }
          }
        }
      }
    }
  }
  .xgmm {
    margin-top: 5px;
  }
  .ghsjh {
    .code {
      width: 100px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 4px;
      border: 1px solid var(--themeColor);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: var(--themeColor);
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .qhzh {
    .examine {
      .card_bg {
        background: #efefef;
      }
      .title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #222222;
        margin-top: 20px;
      }
      ul {
        display: flex;
        // justify-content: space-between;
        flex-flow: wrap;
        margin-top: 20px;
        li {
          margin-right: 17px;
          margin-bottom: 20px;
          width: 290px;
          height: 74px;
          background: #fbfbfb;
          border-radius: 8px;
          border: 1px solid #e7e7e7;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 12px 0 20px;
          span {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
          }
          .right {
            .edit,
            .del {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              cursor: pointer;
              color: #00a9dd;
            }
            .del {
              color: #ff2f2f;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .zfmm {
    .code {
      width: 100px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 4px;
      border: 1px solid var(--themeColor);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: var(--themeColor);
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
