start.vue 2.46 KB
<template>
	<view class="backView">
		<view class="topView">
			<view class="icon">
				<text class="iconText">规则</text>
			</view>
		</view>
		<view class="topView">
			<text class="contentText">{{content}}</text>
		</view>
		<text class="noticeText">{{notice}}</text>
		<view class="imageView">
			<image class="image" :src="image_url" mode=""></image>
		</view>
		<view class="bottomView">
			<view class="bottomBtn" @click="startClick()">
				<text class="bottomText">开始考试答题</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'系统随机给出20道考试题目,每道题5分,每题答题时间100秒,在规定时间内答对题目的记分。',
				notice:'这是一场严肃的考试希望您认真对待,预祝您能够顺利通过考试!',
				image_url:'https://qn-static.banshouhui.com/exam_start.png',
			}
		},
		onLoad(e) {
			getApp().trackPage('入驻开始考试页')
			
		},
		methods: {
			
			//开始考试 点击
			startClick: function () {
				uni.navigateTo({
					url: '/pages/exam/index'
				})
			},
			
			
			
		}
	}
</script>

<style>
	.backView{
		overflow: hidden;
		background-color: #FFFFFF;
		width: 100%;
		height:100vh;
		display: flex;
		flex-direction: column;
	}
	
	.topView{
		width: 100%;
		display: flex;
	}
	
	.icon{
		background-color: #2272FF;
		width: 120rpx;
		height: 64rpx;
		border-radius: 8rpx;
		margin-top: 60rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.iconText{
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
	.contentText{
		padding-top: 44rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #333333;
	}
	
	.noticeText{
		color: #666666;
		font-size: 28rpx;
		padding-top: 34rpx;
		padding-left: 30rpx;
		padding-right: 46rpx;
	}
	
	.imageView{
		padding-top: 48rpx;
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}
	
	.image{
		width: 706rpx;
		margin-left: 44rpx;
		margin-right: 0;
		height: 766rpx;
	}
	
	.bottomView{
		position: fixed;
		bottom:0;
		left:0;
		padding-top: 64rpx;
		padding-bottom: 68rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bottomBtn{
		background-color: #2272FF;
		width: 600rpx;
		height: 104rpx;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bottomText{
		color: #FFFFFF;
		font-size: 32rpx;
	}
	
</style>