采用的vue+uniapp+uview1.0 去做的
下面是ui
里面的图标我没有放上去,你们得自己替换
<template>
<view style="position: relative;">
<u-navbar :is-back="true" title="考试系统" :background="background" title-color="#FFFFFF" back-icon-color="#FFFFFF"></u-navbar>
<span class="record" @click="careful">考试记录</span>
<view class="box" >
<view class="box_top">
<i class="text">沐卿゚课堂--前端初级班试卷 (线下平台提供)</i>
<span @click="showbox">考试</span>
</view>
<view class="top_bottom">
<label>总分:100分</label>
<label style="margin-left: 13%">
达标分数:
<i style="font-style: normal;color: red;">60分</i>
</label>
<label style="margin-left: 19%; position: relative;">
<image src="../../../static/images/icon/iconkao1.png" style="position: absolute;left: 0;width: 16px;height: 16px;left: -18px;top: 2px;">
35分钟</label>
</view>
</view>
<u-popup v-model="show" length="80%" mode="center" style="border-radius: 5px;">
<span style="width: 100%; text-align: center;display: block;height: 30px;line-height: 53px;font-weight: bold;">注意事项</span>
<view class="box1" @click="showbox" style="height: 243px;padding-bottom: 20px;">
<view class="box_top">
<i class="text">沐卿゚课堂--前端初级班试卷 (线下平台提供)</i>
<!-- <span>考试</span> -->
</view>
<view class="top_bottom" style="width: 95%;">
<label>总分:100分</label>
<label style="margin-left: 8%">
达标分数:
<i style="font-style: normal;color: red;">60分</i>
</label>
<label style="margin-left: 12%;">35分钟</label>
</view>
<span>本次考核主要是针对陈善洪老师的白蚁防治初级班进行考核,60分达标。除了简答题是人工阅卷外,单选、多选和判断题为机器阅卷。</span>
<u-button style="margin-top: 10px;background-color: rgba(254, 0, 54, 1);color: #fff;" @click="showhide">知道了,开始考试</u-button>
<span style="display: block;width: 100%;height: 10px;"></span>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
background: {
backgroundColor: '#FF0036'
},
show: false
};
},
methods: {
careful(){
uni.navigateTo({
url:'examination_careful'
})
},
showbox() {
this.show = true;
},
showhide(){
this.show=false
uni.navigateTo({
url:'questionnaire'
})
},
}
};
</script>
<style>
page {
background-color: #e2e2e2;
}
.box {
width: 90%;
height: 110px;
margin-left: 5%;
margin-top: 15px;
border-radius: 10px;
background-color: #fff;
}
.box1 {
width: 90%;
height: 110px;
margin-left: 5%;
margin-top: 15px;
background-color: #fff;
/* border-left: 2px solid rgba(255, 75, 114, 1); */
}
.box_top {
width: 96%;
height: 64px;
margin-left: 2%;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(226, 228, 234, 1);
display: flex;
justify-content: cneter;
align-items: center;
}
.text {
padding-top: 10px;
display: block;
width: 224px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-style: normal;
font-weight: bold;
}
.box_top span {
display: inline-block;
background-color: rgba(254, 0, 54, 1);
border: 1px solid red;
color: #fff;
border-radius: 5px;
padding: 7px 11px;
margin-top: 10px;
margin-left: 26px;
}
.top_bottom {
width: 92%;
height: 50px;
margin-left: 4%;
padding-bottom: 10px;
display: flex;
justify-content: cneter;
align-items: center;
}
.record {
position: absolute;
top: 13px;
right: 18px;
z-index: 999;
color: #fff;
}
</style>
这么好的福利不点个赞吗?