<template>
  <div class="main-container">
    <div class="hsd-title">
          <img src="../assets/Ui/log.svg"  style="height: 40px;padding-top: 30px;"/>
    </div>

    <div class="head-cg">
      <img src="@/assets/Ui/信息界面/报名成功.svg" style="margin-top: -20px; margin-bottom: 20px;"/>
    </div>
    <div class="main-content">
      <div class="main-text">
        {{ userInfo.userName }}，您已成功报名!
        <p style="margin-top: 18px;">
          感谢您参与本次
          <em style="font-style: normal; color: white; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作!
        </p>
      </div>
    </div>
    <div class="main-icon">
      <div class="main-item">
        <van-row wrap>
          <van-col span="6" v-if="showIcon.show0">
            <img @click="show0 = true" src="../assets/Ui/信息界面/图标/个人信息.svg" alt="" 
            style=" height: 43px; width: 43px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
    border-radius: 12px; /* 圆角 */
    padding: 8px; /* 内边距 */
    background: rgba(255, 255, 255, 0.1); /* 透明背景 */
    transition: all 0.2s; /* 悬停过渡效果 */
  "/>
            <van-dialog
              title="个人信息"
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              v-model:show="show0"
            >
              <div class="tishi">
                <van-form @submit="onSubmit">
                  <van-cell-group inset>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.userName"
                      v-model="userInfo.userName"
                      name="userName"
                      label="姓名"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/姓名.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      readonly
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.identityId"
                      v-model="userInfo.identityId"
                      name="userCardId"
                      label="身份证号"
                      :type="showIdentityId ? 'text' : 'text'"
                    >
                    <template #right-icon>
                        <van-icon class="icon" :name="showIdentityId ? 'eye-o' : 'closed-eye'"  @click="toggleIdentityId"/>
                    </template>
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/身份证号.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                 
                    </van-field>
                    <!--                   <van-field-->
                    <!--                       style="height: 35px; line-height: 100%"-->
                    <!--                       v-model="user.sex"-->
                    <!--                       readonly-->
                    <!--                       name="picker"-->
                    <!--                       label="性别"-->

                    <!--                   />-->
                    <!--                   <van-field-->
                    <!--                       style="height: 35px; line-height: 100%"-->
                    <!--                       readonly-->
                    <!--                       v-model="user.age"-->
                    <!--                       name="age"-->
                    <!--                       label="年龄"-->
                    <!--                       type="text"-->

                    <!--                   />-->
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.phone"
                      v-model="userInfo.phone"
                      name="phone"
                      label="手机号"
                      type="text"
                    >
                    <template #right-icon>
                        <van-icon class="icon" :name="showphone ? 'eye-o' : 'closed-eye'" @click="togglephone"/>
                    </template>
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/手机号.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                 
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.jobTitle"
                      v-model="userInfo.jobTitle"
                      readonly
                      name="picker"
                      label="职称"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/职称.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.office"
                      v-model="userInfo.office"
                      name="office"
                      label="职务"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/职务.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.workName"
                      v-model="userInfo.workName"
                      name="workName"
                      label="单位名称"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/单位名称.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.workPhone"
                      v-model="userInfo.workPhone"
                      name="workPhoen"
                      label="单位电话"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/单位电话.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.pyCard"
                      readonly
                      v-model="userInfo.pyCard"
                      name="pyCard"
                      label="银行卡号"
                      type="text"
                    >
                    <template #right-icon>
                        <van-icon class="icon" :name="showpyCard ? 'eye-o' : 'closed-eye'" @click="togglepyCard"/>
                    </template>
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/劳务信息/图标/银行卡号.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>

                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.bankAddress"
                      v-model="userInfo.bankAddress"
                      name="bankAddress"
                      label="开户所在地"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/劳务信息/图标/开户银行所在地.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.bankName"
                      v-model="userInfo.bankName"
                      name="bankName"
                      label="开户行"
                      type="text"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/劳务信息/图标/开户银行.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.carStatus === 1"
                      v-model="userInfo.carNumber"
                      name="carNumber"
                      label="车牌号"
                      type="text"
                      height="40px"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/确认信息/图标/车牌.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      name="dormitoryStatus"
                      v-if="userInfo.dormitoryStatus === 1"
                      :readonly="true"
                      style="height: 35px; line-height: 50%"
                      label="是否住宿"
                    >
                      <template #input>
                        <van-radio-group
                          checked-color="#8D2328"
                          style="height: 35px; line-height: 50%"
                          v-model="userInfo.dormitoryStatus"
                          direction="horizontal"
                        >
                          <!--                    <van-radio name="1">是</van-radio>-->
                          <!--                    <van-radio name="0">否</van-radio>-->
                          {{ userInfo.dormitoryStatus === 1 ? '是' : '否' }}
                        </van-radio-group>
                      </template>
                      <template #left-icon>
                      <img src= "../assets/Ui/信息/确认信息/图标/住宿.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  
                    </van-field>
                    <van-field
                      v-if="userInfo.studentId"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.studentId"
                      name="studentId"
                      label="学号"
                      type="text"
                      height="40px"
                    >
                    <template #left-icon>
                <img 
                    src= "@/assets/Ui/信息/个人信息/图标/工号.svg"
                    style="width: 16px; height: 16px;"
                  />
                  </template>
                  </van-field>
                    <van-field
                      v-if="userInfo.teacherId"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.teacherId"
                      name="teacherId"
                      label="工号"
                      type="text"
                      height="40px"
                    >
                    <template #left-icon>
                      <img src= "../assets/Ui/信息/个人信息/图标/工号.svg"
                      style="width: 16px; height: 16px;"/>
                    </template>
                  </van-field>
                    <van-field
                      v-if="userInfo.mealCard"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.mealCard"
                      name="teacherId"
                      label="饭卡"
                      type="text"
                      height="40px"
                    />
                  </van-cell-group>
                </van-form>
              </div>

              <span class="dialog-close-content" @click="show0 = false, showIdentityId = false, showphone = false , showpyCard =false ">×</span>
            </van-dialog>
            <p style="color: white;">个人信息</p>
          </van-col>

          <van-col span="6" v-if="showIcon.show1">
            <img @click="show1 = true" src="../assets/Ui/信息界面/图标/师大地图.svg" alt=""  style="width: 43px;height: 43px;
            border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */
            "/>
            <div class="ditu-img" v-if="show1">
              <span @click="show1 = false"> 关闭&ensp;✕ </span>
              <div class="card-img">
                <img src="@/assets/Ui/地图.png" style="width: 100%; height: 100%" alt="师大地图" />
              </div>
            </div>
            <p style="color: white;">师大地图</p>
          </van-col>

          <!-- <van-col span="6" v-if="showIcon.show2">
            <img @click="show2 = true" src="../assets/Ui/信息界面/图标/通行证.svg" alt="" style="height: 43px;width: 43px;border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */
             "/>
            <div class="txz-img2" v-if="show2">
              <span @click="show2 = false"> 关闭&ensp;✕ </span> -->
              <!--             <div class="card-pai">黑A·35648</div>-->
              <!-- <div class="card-pai">{{ carNum() }}</div>
              <div class="card-tishi">该车辆为评卷教师车辆，已向学校报备，请放行！</div>
            </div>
            <p style="color: white;">通行证</p>
          </van-col> -->

          <van-col span="6" v-if="showIcon.show3">
            <img @click="showGroup" src="../assets/Ui/信息界面/图标/所属分组.svg" alt=""
            style=" width: 43px; height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */" />
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show3"
              :style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
            >
              <span class="dialog-close-content" @click="show3 = false">×</span>
              <div class="grop-by">
                分组信息
                <p v-if="!group">暂时未分组</p>
                <p v-else>{{ group }}</p>
              </div>
            </van-dialog>
            <p style="color: white;">所属分组</p>
          </van-col>
          <van-col span="6" v-if="showIcon.show4">
            <img @click="showDormitory" src="../assets/Ui/信息界面/图标/宿舍.svg" alt="" 
            style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */"/>
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show4"
              :style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
            >
              <span class="dialog-close-content" @click="show4 = false">×</span>
              <div class="grop-by">
                宿舍分配
                <p v-if="!dormitory">暂时未分配</p>
                <p v-else>{{ dormitory }}</p>
              </div>
            </van-dialog>
            <p style="color: white;">宿舍</p>
          </van-col>
          <van-col span="6" v-if="showIcon.show5">
            <img @click="show5 = true" src="../assets/Ui/信息界面/图标/评卷地图.svg" alt="" 
            style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */"/>
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show5"
              :style="{ maxWidth: '70vw', width: 'auto', padding: '1rem' }"
            >
              <div class="grop-by">
                评卷地点信息
                <p>暂时未发布</p>
                <p v-if="!group">暂时未发布</p>
                <p v-else>{{ group }}</p>
              </div>
              <!--             <img src="@/assets/img/dt.jpg"/>-->
              <span class="dialog-close-content" @click="show5 = false">×</span>
            </van-dialog>
            <p style="color: white;">评卷地点</p>
          </van-col>

          <!-- <van-col span="6">
            <img @click="show6 = true" src="../assets/Ui/信息界面/图标/校园生活.svg" alt="" 
            style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */"/>
            <div class="xysh-img" :class="handoffValue" v-if="show6" @click="toggleShow">
              <span @click="show6 = false"> 关闭&ensp;✕ </span> -->
              <!--              <em class="em-next"></em>-->
            <!-- </div>
            <p style="color: white;">校园生活</p>
          </van-col> -->

          <van-col span="6" v-if="showIcon.show7">
            <img @click="show7 = true" src="../assets/Ui/信息界面/图标/致谢.svg" alt="" style="width: 43px;height: 43px; border: 2px solid rgba(255, 255, 255, 0.3); /* 白色半透明边框（0.7 透明度） */
            border-radius: 12px; /* 圆角 */
            padding: 8px; /* 内边距 */
            background: rgba(255, 255, 255, 0.1); /* 透明背景 */
            transition: all 0.2s; /* 悬停过渡效果 */"/>
            <div class="zhixie-img" v-if="show7">
              <span @click="show7 = false"> 关闭&ensp;✕ </span>
              <div class="card-img">
                <img src="@/assets/Ui/致谢.png" style="width: 100%; height: 100%" />
              </div>
            </div>

            <p style="color: white;">致谢</p>
          </van-col>
          <!-- <div class="hsd-title">
            <img src="../assets/图层 1.svg"  />
          </div> -->

          <!--        <van-col span="6" v-if="showIcon.show8">-->
          <!--          <img @click="show8 = true" src="@/assets/imgs/zz.svg" alt="">-->
          <!--          <van-dialog-->
          <!--              style="height: 80%;"-->
          <!--              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"-->
          <!--              :show-confirm-button="false"-->
          <!--              cancel-button-text="长按图片保存"-->
          <!--              cancel-button-color="#e34032"-->
          <!--              v-model:show="show8" show-cancel-button>-->
          <!--            <img src="@/assets/img/ryzs.png"/>-->
          <!--            <span class="dialog-close-content" @click="show8 = false">×</span>-->
          <!--          </van-dialog>-->
          <!--          <p>证书</p>-->
          <!--        </van-col>-->
        </van-row>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { useUserStore } from '@/store';
  import { getUser, getGroupName, getDormitoryName } from '@/api';

  const store = useUserStore();
  const show0 = ref(false);
  const show1 = ref(false);
  const show2 = ref(false);
  const show3 = ref(false);
  const show4 = ref(false);
  const show5 = ref(false);
  const show6 = ref(false);
  const show7 = ref(false);
  const show8 = ref(false);
  const showDitu = ref(false);
  const handoff = ref(false);
  const handoffValue = ref('xysh-img1');
  const showIdentityId = ref(false);
  const showphone = ref(false);
  const showpyCard = ref(false);

  function toggleShow() {
    if (handoff.value) {
      handoffValue.value = 'xysh-img2';
      handoff.value = false;
    } else {
      handoffValue.value = 'xysh-img1';
      handoff.value = true;
    }
  }

  const user = store.LoginUser;
  /*
   * 1. 获取用户信息
   * 2. 获取用户分组信息
   * 3. 获取用户宿舍信息
   * 4. 获取用户评卷地点信息
   * 5. 获取用户校园生活信息
   * 6. 获取用户致谢信息
   * 7. 获取用户证书信息
   * */
  const group = ref('');
  const dormitory = ref('');
  const showIcon = reactive({
    show0: false,
    show1: false,
    show2: false,
    show3: false,
    show4: false,
    show5: false,
    show6: false,
    show7: false,
    show8: false,
  });
  let userInfo = reactive({
    userName: '', // 用户名
    majorId: 0, // 专业ID
    phone: '', // 手机号
    studentId: '', // 学号
    groupId: 0, // 分组ID
    teacherId: '', // 工号
    jobTitle: '', // 职称
    identityId: '', // 身份证号
    office: '', // 职务
    workName: '', // 单位名称
    workPhone: '', // 单位电话
    pyCard: '', // 银行卡号
    bankAddress: '', // 开户所在地
    bankName: '', // 开户行
    carNumber: '', // 车牌号
    dormitoryStatus: 0, // 是否住宿（1：是，0：否）
    mealCard: '', // 饭卡
    dormitoryId: '',
    identityIdFull:'',
    phoneFull:'',
    pyCardFull:'',
    identityIdMasked:'',
    phoneMasked:'',
    pyCardMasked:'',
    
  });

  const showGroup = () => {
    show3.value = true;
    getGroupName(userInfo.groupId).then(
      (res) => {
        group.value = res.result;
      },
      (err) => {
        console.log(err);
      },
    );
  };
  const showDormitory = () => {
    show4.value = true;
    getDormitoryName(userInfo.dormitoryId).then(
      (res) => {
        dormitory.value = res.result;
      },
      (err) => {
        console.log(err);
      },
    );
  };
  const carNum = () => {
    let carNum = userInfo.carNumber;
    if (carNum) {
      var s = carNum.substring(0, 2);
      var s1 = carNum.substring(2);
      return s + '·' + s1;
    } else {
      return '暂没有车牌号';
    }
  };

  // 页面加载时获取用户信息
  onMounted(() => {
    getUser(store.getUserId).then(
      (res) => {
        console.log('获取到的用户信息', res);
        Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性

        // 保存完整的用户信息
        userInfo.identityIdFull = userInfo.identityId;  // 完整身份证号
        userInfo.phoneFull = userInfo.phone;  // 完整手机号
        userInfo.pyCardFull = userInfo.pyCard;  // 完整银行卡号
        // 隐藏敏感信息
        userInfo.identityIdMasked = userInfo.identityId.substring(0, 5) + '****' + userInfo.identityId.substring(13, 18);
        userInfo.phoneMasked = userInfo.phone.substring(0, 3) + '****' + userInfo.phone.substring(7, 11);
        userInfo.pyCardMasked = userInfo.pyCard.substring(0, 4) + '***********' + userInfo.pyCard.substring(15, 19);
        
        //设置初始为隐藏
        userInfo.phone = userInfo.phoneMasked;
        if(userInfo.identityIdFull != '' && userInfo.pyCardFull != ''){
          userInfo.identityId = userInfo.identityIdMasked;
          userInfo.pyCard = userInfo.pyCardMasked;
        }
        console.log("userInfo.phone",userInfo.phone);
        store.setMajorId(store.LoginUser.majorId);
        Object.assign(showIcon, res.result);
      },
      (err) => {
        console.log(err);
      },
    );
  });

  function getUserInfo(majorId: number) {
    let majorName = '';
    majors.forEach((item) => {
      if (item.value === majorId) {
        majorName = item.name;
      }
    });
    return majorName;
  }
   // 切换显示和隐藏身份证号
   const toggleIdentityId = () => {
      showIdentityId.value = !showIdentityId.value;
      if(showIdentityId.value){
        userInfo.identityId = userInfo.identityIdFull;  // 显示完整身份证号
      }else{
        userInfo.identityId = userInfo.identityIdMasked;  // 显示完整身份证号
      }
    };
    // 切换显示和隐藏身份证号
   const togglephone = () => {
      showphone.value = !showphone.value;
      if(showphone.value){
        userInfo.phone = userInfo.phoneFull;  // 显示完整身份证号
      }else{
        userInfo.phone = userInfo.phoneMasked;  // 显示完整身份证号
      }
    };
    // 切换显示和隐藏身份证号
   const togglepyCard = () => {
      showpyCard.value = !showpyCard.value;
      if(showpyCard.value){
        userInfo.pyCard = userInfo.pyCardFull;  // 显示完整身份证号
      }else{
        userInfo.pyCard = userInfo.pyCardMasked;  // 显示完整身份证号
      }
    };

  const majors = [
    {
      id: 1,
      name: '语文',
      value: 1,
    },
    {
      id: 2,
      name: '地理',
      value: 4,
    },
    {
      id: 3,
      name: '历史',
      value: 7,
    },
    {
      id: 4,
      name: '政治',
      value: 8,
    },
  ];
</script>
<style scoped lang="scss">
  .main-container {
    height: 100vh;
    width: 100vw;
    background: url('@/assets/Ui/信息/个人信息/背景.svg') no-repeat;
    background-size: cover;
    background-position: center center; /* 图片顶部对齐 */
  }

  .hsd-title {
    // height: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px; // 调整顶部间距

    // img {
    //   width: 65%;
    //   margin-top: 8vh;
    // }
  }

  .head-cg {
    width: 100%;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    align-items: center;

    img {
      width: 90%;
      margin-top: 5vh;
    }
  }

  .main-content {
    margin-top: 30px;
    width: 100vw;
    height: 10vh;
    text-align: center;
    //border: 1px solid orange;
    color: white;
    font-weight: 600;
    font-size: 40px;
  }

  .main-icon {
    width: 97vw;
    height: 20vh;
    text-align: center;
    margin-top: 120px;
  

    .main-item {
      img {
        width: 50%;
        margin-top: 15%;
      }

      p {
        margin-top: -5px;
        font-size: 0.7rem;
        font-weight: 600;
      }
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
    }
  }

  /* 弹窗样式 */
  .dialog-close-content {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #949494;
    cursor: pointer;
  }
  .txz-img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    //border: 5px solid red;
    background-image: url('@/assets/orangeUi/txz.svg');
    background-repeat: no-repeat;
    background-size: cover; /* 修改这里 */
    z-index: 999;

    span {
      width: 30vw;
      //border: 1px solid red;
      font-weight: 700;
      color: #262626;
      font-size: 20px;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .card-pai {
      position: absolute;
      left: 8.5vw;
      top: 71vh;
      //font-size: 24px;
      font-family: 微软雅黑;
      text-align: center;
      font-weight: 600;
      font-size: 35px;
      height: 2.5rem;
      width: 80%;
      opacity: 1;
      //color: rgba(141, 35, 40, 0.6);
      //color: rgba(255, 255, 255, 0.8);
      color: white;

      font-weight: 600;
      border-radius: 132px;
      background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
      border: 4px solid rgba(255, 255, 255, 0.7);
      box-shadow:
        0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 3px 7px rgba(0, 0, 0, 0.1),
        0px 12px 12px rgba(0, 0, 0, 0.09),
        0px 27px 16px rgba(0, 0, 0, 0.05),
        0px 47px 19px rgba(0, 0, 0, 0.01),
        0px 74px 21px rgba(0, 0, 0, 0);
    }

    .card-tishi {
      position: absolute;
      top: 80vh;
      left: 10vw;
      text-align: left;
      width: 80vw;
      font-size: 28px;
      color: white;
      margin: 0 auto;
      text-indent: 34px;
    }
  }

  /* 地图、通行证等弹窗样式 */
  .ditu-img,
  .txz-img,
  .zhixie-img,
  .xysh-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 20px;
      font-weight: 700;
      color: #262626;
      cursor: pointer;
    }

    img {
      max-width: 90%;
      max-height: 90%;
    }
  }
  .icon {
    font-size: 24px; 
    color: #666; 
    margin-right: -20px;
  }

</style>
