214 lines
4.5 KiB
Vue
214 lines
4.5 KiB
Vue
<!-- 当前学生组件 -->
|
||
<template>
|
||
<view class="ech-card" :class="{'purple':props.bgIndex % 3 === 0,'green':(props.bgIndex-1) % 3 === 0,'blue':(props.bgIndex-2) % 3 === 0}">
|
||
<view class="change-stu">
|
||
<view class="person-tag" :style="{color:(props.bgIndex % 3 === 0?'#6B86FF':(props.bgIndex-1) % 3 === 0?'#45CB9F':(props.bgIndex-2) % 3 === 0?'#22C1F2':'')}">
|
||
执器于身，共建未来
|
||
</view>
|
||
<view class="change" v-if="props.isChange&&listLength!==1" @click="changeStudent">
|
||
<view class="change-icon"></view>
|
||
<view class="change-text">切换学生</view>
|
||
</view>
|
||
<view class="person-contain">
|
||
<view class="stu-img">
|
||
<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode="学生头像"></image>
|
||
</view>
|
||
<view class="person-info">
|
||
<view class="school">
|
||
<view class="house-icon"></view>
|
||
<view class="school-name">{{props.datas.SchoolName}}</view>
|
||
</view>
|
||
<view class="person-ma">
|
||
<text>{{props.datas.RealName}}</text> | {{props.datas.Grade+props.datas.ClassName}}
|
||
</view>
|
||
</view>
|
||
<view class="person-btn" v-if="!props.isChange">
|
||
<view class="look" @click="openStuInfo()">查看</view>
|
||
<view class="un-bind" @click="unBind()">解绑</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from 'vue'
|
||
const props = defineProps({
|
||
isChange: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
datas: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
bgIndex: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
listLength: {
|
||
type: Number,
|
||
// required: true
|
||
}
|
||
})
|
||
const emit = defineEmits(['changeStu','onOpenStu','onUnBind'])
|
||
// 点击切换
|
||
const changeStudent=()=>{
|
||
emit('changeStu')
|
||
}
|
||
// 点击查看
|
||
const openStuInfo=()=>{
|
||
emit('onOpenStu')
|
||
}
|
||
// 点击解绑
|
||
const unBind=()=>{
|
||
emit('onUnBind')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ech-card {
|
||
width: 343px;
|
||
height: 121px;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.purple{
|
||
background: url('@/static/education/purple-bg.png') no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
.look{
|
||
color: #6B86FF !important;
|
||
}
|
||
}
|
||
.green{
|
||
background: url('@/static/education/green-bg.png') no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
.look{
|
||
color: #45CB9F !important;
|
||
}
|
||
}
|
||
.blue{
|
||
background: url('@/static/education/blue-bg.png') no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
.look{
|
||
color: #22C1F2 !important;
|
||
}
|
||
}
|
||
.person-tag{
|
||
position: absolute;
|
||
left: 38rpx;
|
||
top: 10rpx;
|
||
font-size: 20rpx;
|
||
letter-spacing: 22rpx;
|
||
}
|
||
.change-stu{
|
||
.change {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #999;
|
||
font-size: 11px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
.change-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: url('@/static/education/change.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.person-contain {
|
||
position: absolute;
|
||
left: 5px;
|
||
bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 95%;
|
||
.stu-img {
|
||
width: 90px;
|
||
height: 90px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 68px;
|
||
height: 68px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.person-info {
|
||
width: 52%;
|
||
.school {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.house-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: url('@/static/education/house.png');
|
||
background-size: 100% 100%;
|
||
margin-right: 5px;
|
||
}
|
||
.school-name {
|
||
height: 20px;
|
||
color: #FFF;
|
||
font-size: 15px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
letter-spacing: 0.84px;
|
||
}
|
||
.person-ma {
|
||
margin-top: 8px;
|
||
height: 20px;
|
||
color: #FFF;
|
||
font-size: 13px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
letter-spacing: 0.72px;
|
||
text{
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.person-btn{
|
||
margin:10px 0 0 20px;
|
||
.look {
|
||
width: 55px;
|
||
height: 22px;
|
||
border-radius: 21px;
|
||
background: #FFF;
|
||
box-shadow: 0px 1px 5px 0px rgba(182, 187, 214, 0.66);
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
line-height: 22px;
|
||
letter-spacing: 0.6px;
|
||
text-align: center;
|
||
}
|
||
.un-bind{
|
||
margin-top: 8px;
|
||
width: 55px;
|
||
height: 22px;
|
||
border-radius: 21px;
|
||
background: rgba(0,0,0,0);
|
||
border: 1px solid #fff;
|
||
box-shadow: 0px 1px 5px 0px rgba(182, 187, 214, 0.66);
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
line-height: 22px;
|
||
letter-spacing: 0.6px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |