Skip to content

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

no message

parent bf478106
Show whitespace changes
Inline Side-by-side
Showing with 631 additions and 2 deletions
src/components/index/JobComponents.vue 0 → 100644
View file @ c29fa95d
<template>
<view class="JobComponents-box">
<view class="JobComponents activeOne flex">
<view class="JobComponents-time-box flex">
<view class="JobComponents-time">
<view>05/25 17:13</view>
</view>
<view class="JobComponents-line">
<view class="JobComponents-point"></view>
</view>
</view>
<view class="JobComponents-center-box">
<view class="JobComponents-center-line"></view>
<view class="JobComponents-center flex">
<view class="JobComponents-left">
<view class="operation-name">作业名称作业名称作业名称作业名称</view>
<view class="operation-state flex">
<view class="operation-state-img"></view>
<view class="operation-state-text">批阅</view>
</view>
</view>
<view class="JobComponents-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>
</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, //多次点击
});
return {
...toRefs(data),
};
},
};
</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:first-child{
margin-right: 16rpx;
}
.JobComponents-right{
height: 122rpx;
background: #FFFFFF;
padding: 22rpx 26rpx 15rpx 26rpx;
border-radius: 30rpx;
justify-content: space-between;
flex-shrink: 0;
margin-left: 11rpx;
}
.JobComponents.activeThree .operation-state-text{
color: #CD3D47;
}
.JobComponents.activeTwo .operation-state-text{
color: #4E4A4A;
}
.JobComponents.activeOne .operation-state-text{
color: #FFFFFF;
}
.operation-state-text{
font-size: 20rpx;
letter-spacing: 2px;
}
.JobComponents.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;
}
.JobComponents.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;
}
.JobComponents.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{
margin-top: 35rpx;
font-size: 20rpx;
}
.JobComponents.activeThree .operation-name{
color: #282828;
}
.JobComponents.activeTwo .operation-name{
color: #282828;
}
.JobComponents.activeOne .operation-name{
color: #FFFFFF;
}
.operation-name{
font-size: 26rpx;
height: 75rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin-top: 9rpx;
letter-spacing: 1px;
font-weight: 500;
}
.JobComponents-left{
flex-grow: 1;
}
.JobComponents-center{
justify-content: space-between;
}
.JobComponents-center-line{
width: 4px;
height: 23px;
background: #FEFEFE;
position: absolute;
left: 0;
top: 33rpx;
}
.JobComponents.activeThree .JobComponents-center-box{
background: #EEEEEE;
}
.JobComponents.activeTwo .JobComponents-center-box{
background: #F9E0E2;
}
.JobComponents.activeOne .JobComponents-center-box{
background: #E64150;
}
.JobComponents-center-box{
flex-grow: 1;
position: relative;
border-radius: 30rpx;
padding: 21rpx 18rpx 21rpx 24rpx;
margin-bottom: 50rpx;
}
.JobComponents.activeThree .JobComponents-point{
background: #C1C1C1;
}
.JobComponents.activeTwo .JobComponents-point{
background: #282828;
}
.JobComponents.activeOne .JobComponents-point{
background: #C81727;
box-shadow: 0px 0px 12px 0px rgba(200, 23, 39, 0.46);
}
.JobComponents .JobComponents-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);
}
.JobComponents-line{
width: 4rpx;
height: 100%;
background: #F1F1F1;
margin-left: 46rpx;
margin-right: 46rpx;
position: relative;
}
.JobComponents-time{
width: 61rpx;
height: 55rpx;
color: #CCC8C6;
font-size: 20rpx;
border-radius: 20rpx;
padding: 14rpx 13rpx;
background: #F6F6F6;
}
.JobComponents-time-box{
}
.JobComponents{
justify-content: space-between;
padding: 0 50rpx;
}
.JobComponents-box{
background: #FFFFFF;
}
</style>
src/components/index/commentsComponents.vue 0 → 100644
View file @ c29fa95d
<template>
<view class="CommentsComponents-box">
<view class="CommentsComponents activeOne flex">
<view class="CommentsComponents-time-box flex">
<view class="CommentsComponents-time">
<view>05/25 17:13</view>
</view>
<view class="CommentsComponents-line">
<view class="CommentsComponents-point"></view>
</view>
</view>
<view class="CommentsComponents-center-box">
<view class="CommentsComponents-center-line"></view>
<view class="CommentsComponents-center flex">
<view class="CommentsComponents-left flex">
<van-image width="38rpx" height="38rpx" fit="cover" class="operation-img"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_713.png"/>
<view class="operation-name">周老师的评语</view>
</view>
<view class="CommentsComponents-right">
你是个做事小心翼翼，感情细腻丰富的女孩
，每次看你认真的样子老师都很感动。你也是幸运的，周
边有很多人都在关爱着你，所以，对他们，尤其是父母，记得不要
太莽撞，不要太任性，要学着体谅，学着换位思考
，学着懂事。另外，今后要多运动、多锻炼，有健康才能成就美好未来！
</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, //多次点击
});
return {
...toRefs(data),
};
},
};
</script>
<style scoped>
.CommentsComponents-right{
color: #FFFFFF;
font-size: 20rpx;
line-height: 35rpx;
letter-spacing: 1rpx;
}
.CommentsComponents.activeThree .operation-name{
color: #282828;
}
.CommentsComponents.activeTwo .operation-name{
color: #282828;
}
.CommentsComponents.activeOne .operation-name{
color: #FFFFFF;
}
.operation-name{
font-size: 26rpx;
letter-spacing: 1px;
font-weight: 500;
flex-grow: 1;
}
.operation-img{
margin-right: 12rpx;
border-radius: 50%;
flex-shrink: 0;
}
.CommentsComponents-left{
flex-grow: 1;
margin-top: -5rpx;
margin-bottom: 10rpx;
}
.CommentsComponents-center{
flex-direction: column;
}
.CommentsComponents-center-line{
width: 4px;
height: 23px;
background: #FEFEFE;
position: absolute;
left: 0;
top: 33rpx;
}
.CommentsComponents.activeOne .CommentsComponents-center-box{
background: #52C1CA;
}
.CommentsComponents-center-box{
flex-grow: 1;
position: relative;
border-radius: 30rpx;
padding: 31rpx 18rpx 21rpx 24rpx;
margin-bottom: 50rpx;
}
.CommentsComponents.activeOne .CommentsComponents-point{
background: #1E7BF5;
box-shadow: 0px 0px 12px 0px rgba(30, 123, 245, 0.46);
}
.CommentsComponents-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);
}
.CommentsComponents-line{
width: 4rpx;
height: 100%;
background: #F1F1F1;
margin-left: 46rpx;
margin-right: 46rpx;
position: relative;
}
.CommentsComponents-time{
width: 61rpx;
height: 55rpx;
color: #CCC8C6;
font-size: 20rpx;
border-radius: 20rpx;
padding: 14rpx 13rpx;
background: #F6F6F6;
}
.CommentsComponents{
justify-content: space-between;
padding: 0 50rpx;
}
.CommentsComponents-box{
background: #FFFFFF;
}
</style>
src/components/index/examComponents.vue 0 → 100644
View file @ c29fa95d
<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">
<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>
</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, //多次点击
});
return {
...toRefs(data),
};
},
};
</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-grow: 1;
}
.examComponents-center{
flex-direction: column;
}
.examComponents-center-line{
width: 4px;
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;
}
</style>
src/pages/index/index.vue
View file @ c29fa95d
<template>
<view class="indexpage">
<navbar class="navbarSticky" bg="#FFF">
<navbar class="navbarSticky" bg="#F6F6F6">
<view class="index-header-box">
<view class="index-header-img">
<van-image width="100%" height="100%" fit="cover" class="img"
......@@ -21,11 +21,19 @@
</view>
</view>
<course-card></course-card>
<view class="index-student-information">
<JobComponents></JobComponents>
<examComponents></examComponents>
<commentsComponents></commentsComponents>
</view>
</view>
</template>
<script>
import courseCard from '../../components/index/course-card'
import JobComponents from '@/components/index/JobComponents'
import examComponents from '@/components/index/examComponents'
import commentsComponents from '@/components/index/commentsComponents'
import vue, {
ref,
reactive,
......@@ -61,7 +69,10 @@
indexassembly,
navbar,
bottom,
courseCard
courseCard,
JobComponents,
examComponents,
commentsComponents
},
setup(props) {
let {
......@@ -295,6 +306,12 @@
</script>
<style scoped>
.index-student-information{
background: #FFFFFF;
border-radius: 50rpx 50rpx 0 0;
padding: 71rpx 0 0 0;
border: 1px solid #eeee;
}
.index-header-name{
font-size: 30rpx;
color: #474747;
......
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