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