mp-ui-user/pages/process/index.vue

<template>
	<view>
		<u-navbar title="兑奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<view class="process">
			<view class="flex box-wrap">
				<view class="box">
					<view class="hand">
						<view class="ing" @click="toChoice">刮开测手气</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="put">放入我的票包，暂不兑奖</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				id: ''
			};
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			put() {
				uni.navigateBack({
					delta: 1
				})
			},

			toChoice() {
				uni.redirectTo({
					url: `/pages/choice/index?id=${ this.id }`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.process {
		width: 100%;
		height: calc(100vh - 50px);
		background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-a6f5c8b5b66fe87e4e79c1fc82a61a36_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649658373&t=f216ee4825d5b36e62aa3a490516bfb1) center center;
	}

	.box-wrap {
		padding: 100rpx 0 100rpx;

		.box {
			position: relative;
			width: 80%;
			height: 900rpx;
			background-color: $uni-bg-color;
		}

		.hand {
			position: absolute;
			bottom: 20rpx;
			width: 100%;
			height: 100rpx;

			.ing {
				margin: auto;
				width: 80%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 50rpx;
				font-weight: bold;
				background-color: #FFFFFF;
			}
		}
	}

	.btn {
		margin: auto;
		width: 380rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		color: rgba(140, 140, 140, 100);
		font-size: 28rpx;
		text-align: center;
		border: 1px solid rgba(140, 140, 140, 100);
		background-color: #FFFFFF;
	}
</style>