security_study_h5/examination/report.vue

<template>
	<view class="pages">
		<img src="../static/img/report-ico.png" alt="">
		<view class="title">恭喜你！答题完成</view>
		<view class="score u-flex">
			<view class="score-item">
				<view class="up">
					<text class="num">{{result.score}}</text>分
				</view>
				<view class="down">本次答题成绩</view>
			</view>
			<view class="score-item ">
				<view class="up">
					<text class="num" style="color: #FFB100;">{{result.credit}}</text>个
				</view>
				<view class="down">成功获得积分</view>
			</view>
		</view>
		<u-button 
			type="primary" 
			:plain="true" 
			:customStyle="btnCustomStyle" 
			shape="circle" 
			@click="$u.route('/examination/answersheet',{type:'reLaunch',id:paperScoreId})"
			text="查看答题卡">
		</u-button>
		<u-button 
			type="primary" 
			shape="circle" 
			@click="$u.route('/examination/typelist',{type:'reLaunch'})"
			:customStyle="btnCustomStyle" 
			text="继续答题">
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnCustomStyle:{
					width:'400rpx',
					'margin-bottom':'20rpx'
				},
				paperScoreId:'',
				result:{
					score:'',
					credit:''
				},
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.result = JSON.parse(page.result);
			// console.log('this.result',this.result);
			this.paperScoreId = this.result.paperScoreId;
		},
		methods: {

		}
	}
</script>
<style>
	page{
		background: url(../static/img/report-bg.png) no-repeat;
		background-size: 100% auto;
		text-align: center;
		padding-top: 58rpx;
	}
</style>
<style lang="scss" scoped>
.title{
	margin: 20rpx auto 40rpx;
	font-size: 34rpx;
	font-weight: 600;
	color: #333333;
	line-height: 48rpx;
}
.score{
	margin: 40rpx 30rpx 40rpx;
	padding: 46rpx 20rpx 50rpx;
	background: #F5F9FC;
	border-radius: 24rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
	.score-item{
		flex: 1;
		.up{
			margin-bottom: 10rpx;
		}
		.num{
			font-size: 60rpx;
			font-weight: 600;
			color: #009AEF;
			line-height: 84rpx;
			margin-right: 10rpx;
		}
		& + .score-item{
			border-left: 1px solid #eee;
		}
	}
}
</style>