mp-ui-user/pages/prize/detail.vue

<template>
	<view>
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="卡券详情"></u-navbar>
		<view class="detail">
			<view class="flex detail-item">
				<image src="../../static/logo.png" mode=""></image>
				<view class="flex info">
					<view class="flex desc">
						<view class="title">200元代金券</view>
						<view class="txt">使用期限：2022.03.02-2022.04.01</view>
						<view class="txt">适用范围：星巴克xxx店</view>
					</view>
					<view class="flex btn">
						<view class="amt"><text>￥</text>100</view>
					</view>
				</view>
			</view>
			<view class="flex detail-code">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F211e185f4b9df58bfe5dd69803b1df006b6cffd8b1b2-RtehJE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649408501&t=2dcfddb70458864d1c284b0020a3977d" mode=""></image>
			</view>
			<view class="detail-explain">
				<view class="txt">使用说明：</view>
				<view class="txt">1. 仅限星巴克杭州地区门店可使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		margin: 20rpx;
		padding: 26rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		
		&-item {
			justify-content: space-between;
			padding-bottom: 26rpx;
			border-bottom: 1px dashed rgba(236, 236, 236, 100);
			
			image {
				width: 94rpx;
				height: 132rpx;
			}
		
			.info {
				position: relative;
				justify-content: space-between;
				flex: 1;
			}
		
			.desc {
				height: 132rpx;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				padding-left: 20rpx;
			}
		
			.txt {
				font-size: 24rpx;
			}
		
			.btn {
				flex-direction: column;
			}
		
			.amt {
				font-size: 48rpx;
				font-weight: bold;
				line-height: 72rpx;
			}
		
			text {
				font-size: 24rpx;
			}
		}
		
		&-code{
			padding: 60rpx 0;
			
			image{
				width: 426rpx;
				height: 426rpx;
			}
		}
		
		&-explain{
			font-size: 24rpx;
			
			.txt{
				line-height: 50rpx;
			}
		}
	}
</style>