337 lines
9.8 KiB
Vue
337 lines
9.8 KiB
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"> 关闭 ✕ </span>
|
||
<div class="card-img">
|
||
<img src="@/assets/Ui/地图.png" 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"> 关闭 ✕ </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"> 关闭 ✕ </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>
|