JayChou
8 months ago
parent
6012514386
commit
eb2b7f4b2a
7 changed files with 445 additions and 44 deletions
|
After Width: | Height: | Size: 39 KiB |
@ -1,12 +1,412 @@ |
||||
<template> |
||||
<div class="container-1420">1</div> |
||||
<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> |
||||
<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> |
||||
<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> |
||||
|
||||
Loading…
Reference in new issue