talk_appAmin/pages/mine/studentCard/stuCardInfo.vue

144 lines
4.4 KiB
Vue

<template style="position: relative;">
<view class="cardss">
<view class="cards">
<image :src="z23" class="image23"></image>
<up-image shape="circle" :src="QNDomain + infoDocument" width="200rpx" height="200rpx"
class="image24"></up-image>
<view class="xh"><span class="text1">{{ infoCode }}</span></view>
</view>
<view class="cardz">
<view class="Userinfo">
<view class="flex alignCenter justifyBetween" style="margin-bottom: 47rpx;">
<span class="text1">姓名</span>
<span class="text2">{{ infoName }}</span>
</view>
<view class="flex alignCenter justifyBetween" style="margin-bottom: 47rpx;">
<span class="text1">学校</span>
<span class="text2">{{ infoSchool }}</span>
</view>
<view class="flex alignCenter justifyBetween" style="margin-bottom: 47rpx;">
<span class="text1">系别</span>
<span class="text2">{{ infoDepartment }}</span>
</view>
<view class="flex alignCenter justifyBetween" style="margin-bottom: 47rpx;">
<span class="text1">年级</span>
<span class="text2">{{ infoGrade }}</span>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, getCurrentInstance } from 'vue';
import { getDicts } from "@/api/system/dict/data";
import { onShow, onLoad } from '@dcloudio/uni-app'
import image from 'uview-plus/libs/config/props/image';
import { useStore } from 'vuex';
const store = useStore();
const { proxy } = getCurrentInstance();
const QNDomain = proxy.$store.state.user.QNDomain
const isOfficial = ref(true)
const iconConfig = proxy.iconConfig;
const z23 = iconConfig.z23;
const auditInfo = ref(proxy.$store.state.userInfo.auditInfo)//审核状态
const imgInfo = () => {
return QNDomain.value + infoDocument.value
}
const name = ref(proxy.$store.state.user.name)
const nickName = ref(proxy.$store.state.user.nickName)
const sex = ref(proxy.$store.state.user.sex)
const infoSchool = ref(proxy.$store.state.userInfo.infoSchool)//学校
const infoDepartment = ref(proxy.$store.state.userInfo.infoDepartment)//系别
const infoGrade = ref(proxy.$store.state.userInfo.infoGrade)//年纪
const infoName = ref(proxy.$store.state.userInfo.infoName)//名字
const infoCode = ref(proxy.$store.state.userInfo.infoCode)//学号
const infoDocument = ref(proxy.$store.state.userInfo.infoDocument)//学生证
const infoRank = ref(proxy.$store.state.userInfo.infoRank)
const remark = ref(proxy.$store.state.userInfo.remark)//签名
const infoAssist = ref(proxy.$store.state.userInfo.infoAssist)//获赞
const followCount = ref(proxy.$store.state.userInfo.followCount)//关注
const fanCount = ref(proxy.$store.state.userInfo.fanCount)//粉丝
</script>
<style lang="scss" scoped>
page {
background-color: #F4F5F6;
}
.image24 {
position: absolute;
top: 48rpx;
left: 275rpx;
}
.cardss {
margin-top: 60rpx;
.cards {
width: 630rpx;
height: 382rpx;
margin: 0 auto;
.image23 {
width: 100%;
height: 382rpx;
}
.xh {
position: absolute;
top: 272rpx;
left: 269rpx;
width: 212rpx;
height: 50rpx;
border-radius: 24rpx 24rpx 24rpx 24rpx;
border: 2rpx dashed #ffffff;
/* 添加虚线白色边框 */
display: flex;
justify-content: center;
align-items: center;
.text1 {
font-weight: 400;
font-size: 24rpx;
text-align: center;
color: #FFFFFF !important;
}
}
}
}
.cardz {
margin: 0 auto;
width: 630rpx;
height: 400rpx;
width: 630rpx;
height: 400rpx;
border-radius: 0 0 16rpx 16rpx;
background: #ffffff;
.Userinfo {
padding: 60rpx 100rpx;
;
.text1 {
font-weight: 600;
font-size: 24rpx;
text-align: left;
color: #999999 !important;
}
.text2 {
font-weight: 600;
font-size: 24rpx;
text-align: right;
color: #3DD6C1 !important;
}
}
}
</style>