WashingCar-frontend-Ver3.0/pages/preferentialDetail/preferentialDetail.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="preferentialDetail">
		<view class="tops"></view>
		<img class="first" src="https://www.jiubaotongxue.love/image/demo11.png" alt="" />
		<view class="titlex">
			兑换说明
		</view>
		<view class="body-q">
			<input class="q-input" type="text" placeholder="请输入兑换码" />
			<img class="q-img" src="https://www.jiubaotongxue.love/image/demo12.png" alt="" />
			<view class="btns">
				验证
			</view>
		</view>
		<view class="txts">
			<view class="title">
				兑换说明
			</view>
			<view class="p">
				1.兑换码只能兑换一次，并在有效期内兑换
			</view>
			<view class="p">
				2.自动识别兑换成相应的优惠券或年卡
			</view>
			<view class="p">
				3.兑换的产品不支持退款，只能用于消费
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"



	const titles = ref('优惠详情')
	const bgcolor = ref('#fff')
	const color = ref('#000')
</script>

<style lang="scss">
	.preferentialDetail {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;

		.tops {
			width: 100%;
			height: 11%;
		}

		.first {
			display: block;
			width: 100%;
			height: 564rpx;
		}

		.body-q {
			width: 90%;
			height: 100rpx;
			position: relative;
			margin-left: 50%;
			transform: translateX(-50%);
			// border: 1rpx solid #4475ee;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			background-color: #f7f7f7;

			.q-input {
				width: 58%;
				height: 80rpx;

				margin-left: 30rpx;
				line-height: 80rpx;
				font-size: 28rpx;
			}

			.q-img {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				margin-right: 10rpx;
			}

			.btns {
				width: 136rpx;
				height: 80rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				background-color: #4475ee;
				margin-left: 10rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				color: white;
				margin-right: 20rpx;
			}
		}

		.titlex{
			width: 100%;
			height: 66rpx;
			line-height: 66rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 700;
			padding-left:30rpx;
			margin-top: 38rpx;
		}
		.txts {
			width: 100%;
			font-size: 28rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
			margin-top: 80rpx;

			.title {
				width: 100%;
				height: 66rpx;
				line-height: 66rpx;
				font-weight:700;
			}

			.p {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 26rpx;
				color: #242526;
			}
		}

	}
</style>