Skip to content

T
thinkApp
Commit 24b90cb5 authored by zhengke's avatar zhengke
Browse files
Options

no message

parent 4e7cafc5
Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 0 deletions
src/components/index/scoreDetails/examDetailsComponents.vue 0 → 100644
View file @ 24b90cb5
<template>
<view class="examDetailsComponents-box">
<view class="examDetailsComponents activeTwo mismatchActive flex">
<view class="examDetailsComponents-time-box flex">
<view class="examDetailsComponents-time flex">
<view>周</view>
<text>潇潇</text>
</view>
<view class="examDetailsComponents-line">
<view class="examDetailsComponents-point"></view>
</view>
</view>
<view class="examDetailsComponents-center-box">
<view class="Mismatch-box">
<view class="Mismatch-title flex">
<van-icon name="warning" />
<text>学员不匹配</text>
</view>
</view>
<view class="examDetailsComponents-center flex">
<view class="examDetailsComponents-left flex">
<view class="operation-state flex">
<view class="operation-state-img"></view>
<view class="operation-state-text">未批阅</view>
</view>
<view class="operation-name">2022-05-22</view>
</view>
<view class="examDetailsComponents-right flex">
<view class="homework-score flex">
<view class="homework-score-title">
得分 <text>86</text> 分
</view>
</view>
<view class="homework-score flex">
<view class="homework-score-title">
得分率 <text>86</text> 分
</view>
</view>
</view>
</view>
</view>
</view>
<view class="examDetailsComponents activeOne flex">
<view class="examDetailsComponents-time-box flex">
<view class="examDetailsComponents-time flex">
<view>周</view>
<text>潇潇</text>
</view>
<view class="examDetailsComponents-line">
<view class="examDetailsComponents-point"></view>
</view>
</view>
<view class="examDetailsComponents-center-box">
<view class="examDetailsComponents-center flex">
<view class="examDetailsComponents-left flex">
<view class="operation-state flex">
<view class="operation-state-img"></view>
<view class="operation-state-text">批阅</view>
</view>
<view class="operation-name">2022-05-22</view>
</view>
<view class="examDetailsComponents-right flex">
<view class="homework-score flex">
<view class="homework-score-title">
得分 <text>86</text> 分
</view>
</view>
<view class="homework-score flex">
<view class="homework-score-title">
得分率 <text>86</text> 分
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
reactive,
toRefs,
onMounted,
getCurrentInstance,
inject
} from "vue";
export default {
props: {
},
components: {},
setup() {
let data = reactive({
obj: {
Name: '',
Photo: '',
},
showPhone: false,
showLogin: true, //多次点击
});
let methods = {
}
return {
...toRefs(data),
...methods
};
},
};
</script>
<style scoped>
.homework-score-title text{
font-size: 46rpx;
font-weight: 800;
font-style: italic;
padding: 0 10rpx 0 17rpx;
}
.homework-score-title{
color: #282828;
font-size: 20rpx;
font-weight: 400;
letter-spacing: 1px;
}
.homework-score:first-child{
margin-right: 16rpx;
}
.homework-score{
align-items: center;
justify-content: space-between;
}
.examDetailsComponents-right{
height: 88rpx;
background: #FCEEEF;
padding: 0 22rpx;
border-radius: 25rpx;
justify-content: space-between;
flex-shrink: 0;
}
.operation-state-text{
font-size: 20rpx;
letter-spacing: 2px;
}
.examDetailsComponents.activeThree .operation-state-img{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_480.png')no-repeat;
background-size: 22rpx 22rpx;
}
.examDetailsComponents.activeTwo .operation-state-img{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_781.png')no-repeat;
background-size: 22rpx 22rpx;
}
.examDetailsComponents.activeOne .operation-state-img{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_44.png')no-repeat;
background-size: 22rpx 22rpx;
}
.operation-state-img{
width: 22rpx;
height: 22rpx;
margin-right: 9rpx;
margin-top: 4rpx;
}
.operation-state{
font-size: 20rpx;
white-space: nowrap;
color: #282828;
}
.operation-name{
font-size: 16rpx;
letter-spacing: 1px;
font-weight: 500;
color: #C2BCBA;
}
.examDetailsComponents-left{
justify-content: space-between;
align-items: center;
margin-bottom: 17rpx;
}
.examDetailsComponents-center{
flex-direction: column;
}
.examDetailsComponents.mismatchActive .Mismatch-box{
display: block;
}
.Mismatch-title van-icon{
font-size: 42rpx;
margin-right: 8rpx;
}
.Mismatch-title{
height: 100%;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: bold;
color: #C91727;
letter-spacing: 1rpx;
}
.Mismatch-box{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: none;
}
.examDetailsComponents.mismatchActive .examDetailsComponents-center-box{
background: rgba(200, 23, 39, 0.1);
border: 2px solid #FD3869;
position: relative;
}
.examDetailsComponents .examDetailsComponents-center-box{
background: #FFFFFF;
}
.examDetailsComponents-center-box{
flex-grow: 1;
border-radius: 30rpx;
padding: 17rpx 26rpx 23rpx 21rpx;
margin-bottom: 40rpx;
box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
border-radius: 20px;
}
.examDetailsComponents.activeThree .examDetailsComponents-point{
background: #C1C1C1;
}
.examDetailsComponents.activeTwo .examDetailsComponents-point{
background: #282828;
}
.examDetailsComponents.activeOne .examDetailsComponents-point{
background: #C81727;
box-shadow: 0px 0px 12px 0px rgba(200, 23, 39, 0.46);
}
.examDetailsComponents .examDetailsComponents-point{
width: 19rpx;
height: 19rpx;
position: absolute;
top: 20rpx;
left: -13rpx;
border-radius: 50%;
border: 3px solid #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.46);
}
.examDetailsComponents-line{
width: 4rpx;
height: 100%;
background: #F1F1F1;
margin-left: 46rpx;
margin-right: 46rpx;
position: relative;
}
.examDetailsComponents-time text{
font-size: 20rpx;
font-weight: bold;
white-space: nowrap;
margin-top: 18rpx;
margin-left: 4rpx;
}
.examDetailsComponents-time{
color: #282828;
font-size: 36rpx;
font-weight: bold;
letter-spacing: 1rpx;
}
.examDetailsComponents-time-box{
}
.examDetailsComponents{
justify-content: space-between;
padding: 0 50rpx;
}
</style>
src/pages/index/examDetails.vue 0 → 100644
View file @ 24b90cb5
<template>
<view class="jobDetails-box">
<navbar class="navbarSticky" bg="#F6F6F6">
<view class="jobDetails-header-box">
<van-icon class="jobDetails-header-left" name="arrow-left" @click="back"/>
<text class="jobDetails-header-title">考试详情</text>
</view>
</navbar>
<view class="jobDetails-content">
<view class="jobDetails-content-header">
<view class="jobDetails-conten-title flex">
<text>2022年5月28日</text>
<view>化学第一次测试</view>
</view>
<view class="jobDetails-num-box flex">
<view class="jobDetails-num flex">
<text>人数</text>
<view>15</view>
</view>
<view class="jobDetails-num flex">
<text>平均得分</text>
<view>12</view>
</view>
</view>
</view>
<view class="index-student-information">
<examDetailsComponents></examDetailsComponents>
</view>
</view>
</view>
</template>
<script>
import examDetailsComponents from '@/components/index/scoreDetails/examDetailsComponents'
import {
reactive,
toRefs,
onMounted,
getCurrentInstance,
inject
} from "vue";
export default {
props: {
},
components: {
examDetailsComponents
},
setup() {
let data = reactive({
obj: {
Name: '',
Photo: '',
},
showPhone: false,
showLogin: true, //多次点击
});
let methods = {
back(){
uni.reLaunch({
url: '/pages/index/workSituation?tabNme=' + '考试信息'
});
}
}
return {
...toRefs(data),
...methods
};
}
};
</script>
<style scoped>
.index-student-information{
min-height: 800rpx;
background: #FFFFFF;
border-radius: 50rpx 50rpx 0 0;
padding: 71rpx 0 30rpx 0;
}
.jobDetails-num view{
font-size: 36rpx;
font-weight: 800;
font-style: italic;
margin-top: 15rpx;
}
.jobDetails-num text{
font-size: 20rpx;
font-weight: 400;
}
.jobDetails-num{
flex-direction: column;
color: #CE8086;
}
.jobDetails-num-box{
justify-content: space-between;
padding: 70rpx 185rpx 35rpx 185rpx;
}
.jobDetails-conten-title view{
font-size: 50rpx;
font-weight: 800;
}
.jobDetails-conten-title text{
font-size: 36rpx;
font-weight: 400;
margin-bottom: 10rpx;
}
.jobDetails-conten-title{
padding: 50rpx 50rpx 0 50rpx;
flex-direction: column;
color: #282828;
letter-spacing: 1rpx;
}
.jobDetails-content-header{
}
.jobDetails-content{
position: relative;
z-index: 2;
}
.jobDetails-box{
background: #FCEEEF;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.jobDetails-header-title{
position: absolute;
left: 0;
right: 0;
top: 0;
padding: 37rpx 31rpx;
text-align: center;
letter-spacing: 1rpx;
font-size: 32rpx;
font-weight: 500;
color: #282828;
}
.jobDetails-header{
margin: 50rpx 50rpx 0 50rpx;
align-items: center;
}
.jobDetails-header-left{
font-size: 40rpx;
position: relative;
z-index: 3;
}
.jobDetails-header-box{
padding: 37rpx 31rpx;
position: relative;
}
.navbarSticky {
display: sticky;
top: 0;
z-index: 9;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment