Skip to content

T
thinkApp
Commit ef9d42a2 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 6cca94d2
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 196 deletions
src/components/index/examComponents.vue
View file @ ef9d42a2
<template> <template>
<view class="examComponents-box"> <view class="examComponents-box">
<view class="examComponents activeOne flex"> <view class="examComponents activeOne flex">
<view class="examComponents-time-box flex"> <view class="examComponents-time-box flex">
<view class="examComponents-time"> <view class="examComponents-time">
<view>05/25 17:13</view> <view>{{jobData.CreateTime}}</view>
</view> </view>
<view class="examComponents-line"> <view class="examComponents-line">
<view class="examComponents-point"></view> <view class="examComponents-point"></view>
<view class="examComponents-year"> <view class="examComponents-year">
2021 年 2021 年
</view> </view>
</view> </view>
</view> </view>
<view class="examComponents-center-box" @click="scoreDetails"> <view class="examComponents-center-box" @click="scoreDetails">
<view class="examComponents-center-line"></view> <view class="examComponents-center-line"></view>
<view class="examComponents-center flex"> <view class="examComponents-center flex">
<view class="examComponents-left"> <view class="examComponents-left">
<view class="operation-name">考试名称</view> <view class="operation-name">{{jobData.Title}}</view>
</view> </view>
<view class="examComponents-right flex"> <view class="examComponents-right flex">
<view class="homework-score"> <view class="homework-score">
<view class="homework-score-title">总分</view> <view class="homework-score-title">总分</view>
<view class="homework-score-num flex"> <view class="homework-score-num flex">
<view>86</view><view>分</view> <view>{{jobData.DataObj.Score}}</view>
</view> <view>分</view>
</view> </view>
<view class="homework-score"> </view>
<view class="homework-score-title">得分率</view> <view class="homework-score">
<view class="homework-score-num flex"> <view class="homework-score-title">得分率</view>
<view>86</view><view>%</view> <view class="homework-score-num flex">
</view> <view>{{jobData.DataObj.Score_p}}</view>
</view> <view>%</view>
<view class="homework-score"> </view>
<view class="homework-score-title">排名</view> </view>
<view class="homework-score-num flex"> <view class="homework-score">
<view>15</view><view></view> <view class="homework-score-title">排名</view>
</view> <view class="homework-score-num flex">
</view> <view>{{jobData.DataObj.ExamRank}}</view>
<view class="homework-score"> <view></view>
<view class="homework-score-title">领先度</view> </view>
<view class="homework-score-num flex"> </view>
<view>86</view><view>%</view> <view class="homework-score">
</view> <view class="homework-score-title">领先度</view>
</view> <view class="homework-score-num flex">
</view> <view>{{jobData.DataObj.ExamRankRate}}</view>
</view> <view>%</view>
</view> </view>
</view> </view>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
...@@ -60,167 +64,190 @@ ...@@ -60,167 +64,190 @@
} from "vue"; } from "vue";
export default { export default {
props: { props: ["jobData"],
},
components: {}, components: {},
setup() { setup() {
let data = reactive({ let data = reactive({
showPhone: false, showPhone: false,
showLogin: true, //多次点击 showLogin: true, //多次点击
}); });
let methods={ let methods = {
scoreDetails(){ scoreDetails() {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/scoreDetails' url: '/pages/index/scoreDetails'
}); });
} }
} }
return { return {
...toRefs(data), ...toRefs(data),
...methods ...methods
}; };
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.homework-score-num view:last-child{ .homework-score-num view:last-child {
font-size: 23rpx; font-size: 23rpx;
margin-top: 25rpx; margin-top: 25rpx;
} }
.homework-score-num view:first-child{
margin-right: 10rpx; .homework-score-num view:first-child {
font-size: 46rpx; margin-right: 10rpx;
font-weight: 800; font-size: 46rpx;
} font-weight: 800;
.homework-score-num{ }
color: #3E3D3D;
} .homework-score-num {
.homework-score-title{ color: #3E3D3D;
color: #484646; }
font-size: 20rpx;
margin-bottom: 23rpx; .homework-score-title {
font-weight: 400; color: #484646;
letter-spacing: 1px; font-size: 20rpx;
} margin-bottom: 23rpx;
.homework-score{ font-weight: 400;
margin-right: 16rpx; letter-spacing: 1px;
} }
.homework-score:last-child{
margin-right: 0; .homework-score {
} margin-right: 16rpx;
.examComponents-right{ }
height: 122rpx;
background: #FFFFFF; .homework-score:last-child {
padding: 22rpx 26rpx 15rpx 26rpx; margin-right: 0;
border-radius: 30rpx; }
justify-content: space-between;
} .examComponents-right {
.examComponents.activeThree .operation-name{ height: 122rpx;
color: #282828; background: #FFFFFF;
} padding: 22rpx 26rpx 15rpx 26rpx;
.examComponents.activeTwo .operation-name{ border-radius: 30rpx;
color: #282828; justify-content: space-between;
} }
.examComponents.activeOne .operation-name{
color: #FFFFFF; .examComponents.activeThree .operation-name {
} color: #282828;
.operation-name{ }
font-size: 26rpx;
letter-spacing: 1px; .examComponents.activeTwo .operation-name {
font-weight: 500; color: #282828;
margin-bottom: 20rpx; }
}
.examComponents-left{ .examComponents.activeOne .operation-name {
flex: 1; color: #FFFFFF;
flex-grow: 1; }
}
.examComponents-center{ .operation-name {
flex-direction: column; font-size: 26rpx;
} letter-spacing: 1px;
.examComponents-center-line{ font-weight: 500;
width: 4rpx; margin-bottom: 20rpx;
height: 23px; }
background: #FEFEFE;
position: absolute; .examComponents-left {
left: 0; flex: 1;
top: 33rpx; flex-grow: 1;
} }
.examComponents.activeThree .examComponents-center-box{
background: #EEEEEE; .examComponents-center {
} flex-direction: column;
.examComponents.activeTwo .examComponents-center-box{ }
background: #DBE9FB;
} .examComponents-center-line {
.examComponents.activeOne .examComponents-center-box{ width: 4rpx;
background: #1E7BF5; height: 23px;
} background: #FEFEFE;
.examComponents-center-box{ position: absolute;
flex-grow: 1; left: 0;
position: relative; top: 33rpx;
border-radius: 30rpx; }
padding: 31rpx 18rpx 21rpx 24rpx;
margin-bottom: 50rpx; .examComponents.activeThree .examComponents-center-box {
} background: #EEEEEE;
.examComponents-year{ }
width: 127rpx;
line-height: 111rpx; .examComponents.activeTwo .examComponents-center-box {
text-align: center; background: #DBE9FB;
position: absolute; }
left: -125rpx;
top: -110rpx; .examComponents.activeOne .examComponents-center-box {
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653476346000_445.png')no-repeat; background: #1E7BF5;
background-size: 100% 100%; }
color: #FFFFFF;
font-size: 30rpx; .examComponents-center-box {
font-weight: bold; flex-grow: 1;
position: relative;
} border-radius: 30rpx;
.examComponents.activeThree .examComponents-point{ padding: 31rpx 18rpx 21rpx 24rpx;
background: #C1C1C1; margin-bottom: 50rpx;
} }
.examComponents.activeTwo .examComponents-point{
background: #282828; .examComponents-year {
width: 127rpx;
} line-height: 111rpx;
.examComponents.activeOne .examComponents-point{ text-align: center;
background: #1E7BF5; position: absolute;
box-shadow: 0px 0px 12px 0px rgba(30, 123, 245, 0.46); left: -125rpx;
} top: -110rpx;
.examComponents-point{ background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653476346000_445.png')no-repeat;
width: 19rpx; background-size: 100% 100%;
height: 19rpx; color: #FFFFFF;
position: absolute; font-size: 30rpx;
top: 20rpx; font-weight: bold;
left: -13rpx;
border-radius: 50%; }
border: 3px solid #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.46); .examComponents.activeThree .examComponents-point {
} background: #C1C1C1;
.examComponents-line{ }
width: 4rpx;
height: 100%; .examComponents.activeTwo .examComponents-point {
background: #F1F1F1; background: #282828;
margin-left: 46rpx;
margin-right: 46rpx; }
position: relative;
} .examComponents.activeOne .examComponents-point {
.examComponents-time{ background: #1E7BF5;
width: 61rpx; box-shadow: 0px 0px 12px 0px rgba(30, 123, 245, 0.46);
height: 55rpx; }
color: #CCC8C6;
font-size: 20rpx; .examComponents-point {
border-radius: 20rpx; width: 19rpx;
padding: 14rpx 13rpx; height: 19rpx;
background: #F6F6F6; position: absolute;
} top: 20rpx;
.examComponents{ left: -13rpx;
justify-content: space-between; border-radius: 50%;
padding: 0 50rpx; border: 3px solid #FFFFFF;
} box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.46);
.examComponents-box{ }
background: #FFFFFF;
margin-top: 30rpx; .examComponents-line {
} width: 4rpx;
height: 100%;
background: #F1F1F1;
margin-left: 46rpx;
margin-right: 46rpx;
position: relative;
}
.examComponents-time {
width: 61rpx;
height: 55rpx;
color: #CCC8C6;
font-size: 20rpx;
border-radius: 20rpx;
padding: 14rpx 13rpx;
background: #F6F6F6;
}
.examComponents {
justify-content: space-between;
padding: 0 50rpx;
}
.examComponents-box {
background: #FFFFFF;
margin-top: 30rpx;
}
</style> </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