CEES-H5-New/src/views/leaderShip.vue

<template>
  <div class="main-container">
    <div class="hsd-title">
      <img src="../assets/Ui/log.svg"  style="height: 40px;padding-top: 30px;"/>
    </div>
    <div class="main-text">
      <div class="main-page">
        <p
          ><span style="color: black">{{ userInfo.userName }}</span> 同志：</p
        >
        <div v-if="userInfo.beforeDuty">
          <p style="text-indent: 2em">2023年，您在哈尔滨师范大学评卷点</p>
          <p v-for="(item, index) in beforeData" :key="index + 1"
            ><span style="font-weight: 600">{{ item.group }}</span
            >中担任<span style="font-weight: 600">{{ item.duty }}</span
            >职务</p
          >
        </div>
        <div v-if="userInfo.duty">
          <p style="text-indent: 2em">本次，您在哈尔滨师范大学评卷点</p>
          <p v-for="(item, index) in nowData" :key="index"
            ><span style="font-weight: 600">{{ item.duty }}</span
            >中担任<span style="font-weight: 600">{{ item.group }}</span
            >职务</p
          >
        </div>
        <p style="text-indent: 2em"> 您的信息已在我校2024年评卷人员数据库存档，感谢您对本次评卷工作的支持。 </p>
      </div>
    </div>

    <div class="main-icon">
      <div class="main-item">
        <van-row>
          <van-col span="8">
            <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/orangeUi/ditu.jpg" style="width: 100%; height: 100%" />
              </div>
            </div>
            <p>师大地图</p>
          </van-col>

          <van-col span="8">
            <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" v-if="show6">
              <span @click="show6 = false"> 关闭&ensp;✕ </span>
            </div>
            <p>校园生活</p>
          </van-col>

          <van-col span="8">
            <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>致谢</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <!--<div class="footer">
      <img class="bot-img" src="@/assets/orangeUi/index_footer.svg" />
    </div>-->
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { getUser } from '@/api';
  import { useUserStore } from '@/store';

  const store = useUserStore();
  const show1 = ref(false);
  const show6 = ref(false);
  const show7 = ref(false);

  let userInfo = reactive({
    userName: '', // 用户名
    duty: '',
    beforeDuty: '',
    beforeGroupLevel: '',
    groupLevel: '',
  });
  const showIcon = reactive({
    show1: false,
    show6: false,
    show7: false,
  });
  let beforeData = reactive([]); // 23年数据
  let nowData = reactive([]); // 24年数据

  // 页面加载时获取用户信息
  onMounted(() => {
    getUser(store.getUserId).then(
      (res) => {
        console.log('获取到的用户信息', res);
        Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性
        Object.assign(showIcon, res.result);
        // 处理23年数据
        if (userInfo.beforeGroupLevel && userInfo.beforeDuty) {
          // 组别
          let beforeGroupLevelArr = userInfo.beforeGroupLevel.split('|');
          // 职务
          let beforeDutyArr = userInfo.beforeDuty.split('|');
          beforeGroupLevelArr.forEach((item, index) => {
            beforeData.push({
              group: beforeGroupLevelArr[index],
              duty: beforeDutyArr[index],
            });
          });
        }

        // 处理24年数据
        if (userInfo.groupLevel && userInfo.duty) {
          // 组别
          let groupArr = userInfo.groupLevel.split('|');
          // 职务
          let dutyArr = userInfo.duty.split('|');
          dutyArr.forEach((item, index) => {
            nowData.push({
              group: dutyArr[index],
              duty: groupArr[index],
            });
          });
        }
        console.log(userInfo, 'userInfo');
      },
      (err) => {
        console.log(err);
      },
    );
  });
</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; /* 图片顶部对齐 */
    align-items: center;
    justify-content: space-between;
    .hsd-title {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      //padding-top: 20px; // 调整顶部间距

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

    .main-text {
      //border: 1px solid #1800f5;
      width: 100vw;
      //height: 28vh;
      .main-page {
        width: 95vw;
        //margin-top: 15px;
        //  边框radius是10px，边框阴影10px
        border-radius: 10px;
        box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.2);
        background-size: 100%;
        margin: 50px auto;
        margin-top: 10;
        color: #180b0e;
        font-weight: 500;
        font-size: 27px;
        text-align: left;
        padding-bottom: 10px;
        p {
          all: unset; /* 所有属性重置为默认值 */
          //text-indent: 2em;

          //margin: 0 30px;
          text-align: left;
          line-height: 1.7;
          padding: 0;
          padding-left: 23px;
          margin: 0;
          display: block;
          span {
            font-weight: 700;
            //color: red;
            text-decoration: underline;
          }
        }
        span {
          text-align: center;
          font-weight: 700;
        }
      }
    }

    //icon图片
    .main-icon {
      //width: 100vw;
      //height: 20vh;
      //border: 1px solid #8D2328;
      //position: absolute;
      width: 97vw;
      height: 20vh;
      text-align: center;

      .main-item {
        img {
          width: 40%;
          margin-top: 15%;
        }
        p {
          margin-top: -5px;
          font-size: 0.7rem;
          font-weight: 600;
        }
        //地图
        .ditu-img {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          background-color: white;
          z-index: 999;
          img {
            margin-top: 50%;
          }
          span {
            position: absolute;
            left: 80%;
            font-weight: 700;
            color: #262626;
            font-size: 20px;
          }
        }
        //校园生活
        .xysh-img {
          background: url('@/assets/orangeUi/xysh.jpg') no-repeat center center;
          background-size: cover;
          //background: url("@/assets/orangeUi/xysh.svg") no-repeat center;
          ////background-size: cover;
          position: fixed;
          z-index: 999;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: white;
          //background: url() no-repeat;
          .card-img {
            //padding-top: 10%;
            width: 100%;
            height: 100%;
          }
          span {
            width: 30vw;
            //border: 1px solid red;
            font-weight: 700;
            color: #262626;
            font-size: 20px;
            position: absolute;
            right: 5px;
            top: 0;
          }
        }
        .zhixie-img {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          background-color: white;
          z-index: 999;
          img {
            margin-top: 20%;
          }
          span {
            position: absolute;
            left: 80%;
            font-weight: 700;
            color: #262626;
            font-size: 20px;
          }
        }
      }
    }

    //底部
    .footer {
      //position: absolute;
      //bottom: 0;
      margin-top: 5vh;
      width: 100%;
      height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      //border: 1px solid #000;
      .bot-img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .head-cg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 50%;
      margin-top: 5vh;
      margin-bottom: 2vh;
    }
  }
</style>