dati/components/if-continue/index.vue

<template>
	<view>
		<view class="tan">
			<view class="tan-mask" @tap="tap_handler(0)"></view>
			<view class="tan-modal">
				<view class="tan-content">
					<view class="exam-tan-content">
						<view>您上次答到第</view>
						<view class="exam-tan-content-title">{{timu_order-1}}</view>
						<view>道题</view>
					</view>
					<view class="exam-tan-button">
						<view class="exam-tan-button-r" @tap="tap_handler(4)">重新答题</view>
						<view class="exam-tan-button-l" @tap="tap_handler(3)">继续上次</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timu_order: this.timuorder
			}
		},
		props: {
			timuorder: 0
		},
		/*    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: 18px 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 {
		margin-top: 24px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 25px;
	}

	.exam-tan-content-title {
		color: #ff7412;
		font-weight: bold
	}

	.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: #ffd947;
		color: #000;
		width: 48%;
		padding: 8px 0;
		border-radius: 2px;
	}

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