考试系统（uniapp）第一节 （考试目录）

采用的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>

这么好的福利不点个赞吗？