dati/components/overtimu/index.vue

<template>
	<view>
		<view class="tan">
			<view class="tan-mask" @tap="tap_handler(0)"></view>
			<view class="tan-modal">
				<view class="tan-title">
					<view>是否退出</view>
				</view>
				<view class="tan-content">
					<view class="exam-tan-content">
						<view class="exam-tan-content-flex">
							<span>答题数</span>
							<view>{{timuinfo.yida_num}}题</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>正确率</span>
							<view>{{timuinfo.zhengquelv}}%</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>正确</span>
							<view class="pub-green">{{timuinfo.right_num}}</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>错误</span>
							<view class="pub-red">{{timuinfo.error_num}}</view>
						</view>
					</view>
					<view class="exam-tan-button">
						<view class="exam-tan-button-l" @tap="tap_handler(0)">继续答题</view>
						<view class="exam-tan-button-r" @tap="tap_handler(1)">结束答题</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			timuinfo: {
				type: Object,
				default: {
					library_name: '',
					total_num: 0,
					zhengquelv: 0,
					right_num: 0,
					error_num: 0,
					yida_num: 0
				}
			}
		},
		computed: {},
		methods: {
			tap_handler(type) {
				this.$emit('tap_handler', type)
			}
		}
	}
</script>

<style>
	/*弹窗*/
	.tan-mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.tan-modal {
		position: fixed;
		z-index: 999;
		width: 80%;
		max-width: 300px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}

	.tan-title {
		padding: 15px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.tan-title view {
		font-weight: 400;
		font-size: 17px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tan-content {
		width: 90%;
		margin: 0 auto;
		font-size: 14px;
	}

	.exam-tan-content-flex {
		display: flex;
		width: 91%;
		margin: 0 auto;
		padding: 13px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.exam-tan-content-flex span {
		color: #767676;
		width: 42%;
		text-align: left;
	}

	.exam-tan-button {
		color: #fff;
		padding: 12px 0;
		margin: 10px 0;
		border-radius: 4px;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.exam-tan-button-l {
		background: #3c7bfc;
		width: 48%;
		padding: 8px 0;
		border-radius: 2px;
	}

	.exam-tan-button-r {
		background: #e4e4e4;
		color: #000;
		width: 48%;
		padding: 8px 0;
		border-radius: 2px;
	}
</style>