ContestPortal/src/views/userInfo/index.vue

<template>
  <div class="top-bg">
    <h1 class="title">个人中心</h1>
    <div class="desc">{{ userInfo.realname }}欢迎回来~</div>
    <div class="icon">
      <SvgIcon name="荣誉资质" width="300" height="300" />
    </div>
  </div>
  <div class="container-1420">
    <div class="top">
      <!-- 比赛信息 -->
      <el-card class="com">
        <div class="title">当前参加的比赛</div>
        <div class="content">
          <div class="card-annual">
            <div class="annual">2023年度</div>
            <div class="title-box">
              <div class="text">河南省大学生创新创业大赛</div>
              <img src="../../assets/images/编组.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="info-box">
              <div class="name">比赛年度</div>
              <div class="title">2024年度</div>
              <div class="name">比赛名称</div>
              <div class="title">河南省大学生创新创业大赛</div>
              <div class="date-box">
                <div class="label">开始报名时间：</div>
                <div class="date">2323.6.1 18:00</div>
              </div>
              <div class="date-box">
                <div class="label">开始截至时间：</div>
                <div class="date">2323.6.1 18:00</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 项目信息 -->
      <el-card class="com">
        <div class="title">项目信息</div>
        <div class="content track">
          <div class="card-annual">
            <p>红色之旅赛道</p>
          </div>
          <div class="right">
            <div class="info-box">
              <div class="name">项目名称</div>
              <div class="title">红色之旅赛道</div>
              <div class="name">要求人数</div>
              <div class="title">1人</div>
              <div class="date-box">
                <div class="label">开始报名时间：</div>
                <div class="date">2323.6.1 18:00</div>
              </div>
              <div class="date-box">
                <div class="label">开始截至时间：</div>
                <div class="date">2323.6.1 18:00</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-card>
      <div class="user-info-main">
        <div class="left">
          <div class="personage-info">
            <div class="head">
              <div class="title">个人信息</div>
              <div class="icon">
                <el-button
                
                  type="primary"
                  link
                >
                 编辑
                </el-button>
              </div>
            </div>
            <div class="info-box">
              <div class="label">姓名</div>
              <div class="text">{{ userInfo.realname }}</div>
            </div>

            <div class="info-box">
              <div class="label">姓别</div>
              <div class="text">{{ userInfo.sex === 1 ? '男' : '女' }}</div>
            </div>

            <div class="info-box">
              <div class="label">学号</div>
              <div class="text">{{ userInfo.workNo }}</div>
            </div>

            <div class="info-box">
              <div class="label">手机号</div>
              <div class="text">{{ userInfo.phone }}</div>
            </div>

            <div class="info-box">
              <div class="label">院系</div>
              <div class="text">国际教育学院</div>
            </div>

            <div class="info-box">
              <div class="label">专业</div>
              <div class="text">软件工程</div>
            </div>

            <div class="info-box">
              <div class="label">邮箱</div>
              <div class="text">{{ userInfo.email }}</div>
            </div>

           


          </div>
        </div>
        <div class="right">
          <div class="personalAbilityEvaluationCollectList gradient" @click="Router.push('/personalAbilityEvaluationCollectList')">
            个人积分管理
          </div>
          <div class="personalAbilityEvaluationCollectList gradient"  @click="Router.push('/personalEvaluateList')">
            个人能力评价
          </div>
          <div class="personalAbilityEvaluationCollectList gradient"  @click="Router.push('/personalReport')">
            个人能力报告
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router';
import userStore from '@/store/module/user'
const useUserStore = userStore()
const userInfo = ref<any>({})
console.log(useUserStore.userInfo,'useUserStore');
userInfo.value = useUserStore.userInfo
const Router = useRouter()
</script>

<style lang="scss" scoped>
.top-bg {
  position: relative;
  width: 100%;
  height: 290px;
  background-color: #fff;
  background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%);
  margin-top: 80px;
  padding: 20px 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .title {
    font-size: 32px;
    font-weight: 700;
  }
  .desc {
    margin-top: 20px;
    font-size: 16px;
  }
  .icon {
    position: absolute;
    right: 300px;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 25px 0;
  height: 300px;

  .com {
    width: 697px;
    height: 300px;
    border-radius: 6px 6px 6px 6px;
    padding-top: 22px;
    padding-left: 32px;

    .title {
      height: 28px;
      font-family:
        Microsoft YaHei UI,
        Microsoft YaHei UI;
      font-weight: bold;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      line-height: 28px;
      margin-bottom: 18px;
    }

   //  margin-right: 22px;

    .content {
      display: flex;
      gap: 22px;

      .card-annual {
        padding: 28px 0 0 28px;
        width: 340px;
        height: 182px;
        background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%);
        border-radius: 8px;
        overflow: hidden;

        .annual {
          height: 19px;
          font-family: Inter, Inter;
          font-weight: bold;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 19px;
        }

        .title-box {
          margin-top: 13px;
          display: flex;
          align-items: center;
          gap: 28px;

          .text {
            width: 202px;
            font-family: Inter, Inter;
            font-weight: normal;
            font-size: 32px;
            color: #ffffff;
            line-height: 39px;
          }
        }
      }

      .right {
        .info-box {
          .name {
            height: 20px;
            font-family:
              Microsoft YaHei UI,
              Microsoft YaHei UI;
            font-weight: 400;
            font-size: 14px;
            color: #acacac;
            line-height: 20px;
            margin-bottom: 8px;
          }

          .title {
            height: 20px;
            font-family:
              Microsoft YaHei UI,
              Microsoft YaHei UI;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            line-height: 20px;
            margin-bottom: 12px;
          }

          .date-box {
            margin-bottom: 12px;
            display: flex;
            align-items: center;

            .label {
              height: 20px;
              font-family:
                Microsoft YaHei UI,
                Microsoft YaHei UI;
              font-weight: 400;
              font-size: 14px;
              color: #acacac;
              line-height: 20px;
            }

            .date {
              font-family:
                Microsoft YaHei UI,
                Microsoft YaHei UI;
              font-weight: bold;
              font-size: 18px;
              color: #333333;
            }
          }
        }
      }
    }

    .track {
      .card-annual {
        background: url(../../assets/images/item.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        p {
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: bold;
          font-size: 40px;
          color: #76dae5;
        }
      }
    }
  }
}
.user-info-main {
  width: 100%;
  height: 300px;
  display: flex;
  .left {
    flex: 1;
    .personage-info {
      margin: 30px 0 0 32px;
      // width: 780px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      row-gap: 32px;

      .head {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          height: 28px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: bold;
          font-size: 20px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 28px;
        }

        .icon {
          padding: 5px;
          cursor: pointer;
        }
      }

      .info-box {
        &.remark {
          width: 377.333px;
        }

        width: 176px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .label {
          height: 22px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          line-height: 22px;
        }

        .text {
          height: 22px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 22px;
        }
      }
    }
  }
  .right {
    width: 300px;
    padding: 25px;
   //  background-color: pink;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   .personalAbilityEvaluationCollectList{
      width: 180px;
      // background-color: pink;
      height: 38px;
      text-align: center;
      line-height: 38px;
      font-size: 16px;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
      transition: all .2s;
   }
   .personalAbilityEvaluationCollectList:hover{
      transform: scale(1.1);
   }
  }
}
</style>