uniapp开发 uview 卡券列表样式 记录下来以供复用

<template>
	<div class="couponbody">
		<div class="couponbodyhead">
			<div class="couponbodyheadl">发放卡券</div>
			<div class="couponbodyheadr">
				<u-icon @click="goadd" name="plus" size="18" color="#338AFA"></u-icon>
			</div>
		</div>
		<view class="couponlist">
			<div class="couponlistitem" v-for="(item,index) in 3" :key="index">
				<u-icon class='icon-right' name="arrow-right" size="14" color="#338AFA"></u-icon>
				<div class="couponlistitem1">
					<div class="coupontitle">卡券类型:</div>
					<div class="coupondesc">满减券</div>
				</div>
				<div class="couponlistitem1">
					<div class="coupontitle">数量:</div>
					<div class="coupondesc">888889</div>
				</div>
				<div class="couponlistitem1">
					<div class="coupontitle">开始时间:</div>
					<div class="coupondesc">2022-01-12</div>
				</div>
				<div class="couponlistitem1">
					<div class="coupontitle">结束时间:</div>
					<div class="coupondesc">2022-02-12</div>
				</div>
				<div class="couponlistitem2">
					<div class="coupontitle">卡券内容:</div>
					<div class="coupondesc">满减券满痲券满减券满减券满臧券满减券满减券满减券满减券</div>
				</div>
				<div class="couponlistitem2">
					<div class="coupontitle">使用地址:</div>
					<div class="coupondesc">万象城店使月</div>
				</div>
			</div>
		</view>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		components: {},
		data() {
			return {
				list: [],
			};
		},
		mounted() {
			var that = this;
		},
		methods: {
			goadd() {
				uni.navigateTo({
					url: '/pages/coupon/add'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.couponbody {
		width: 100%;
		width: 630rpx;
		margin: 30rpx auto;

		.couponbodyhead {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			.couponbodyheadl {
				font-size: 26rpx;
				color: #000;
			}

			.couponbodyheadr {}
		}
	}

	.couponlist {
		width: 630rpx;
		margin: 30rpx auto;

		.couponlistitem {
			background: #FAFAFA;
			padding: 30rpx;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: row;
			margin-bottom: 30rpx;

			.couponlistitem1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				height: 60rpx;
				width: 50%;

				.coupontitle {
					color: #A9A9A9;
					font-size: 24rpx;
					width: 130rpx;
					flex-shrink: 0;
				}

				.coupondesc {
					color: #4E4E4E;
					font-size: 24rpx;
				}
			}


			.couponlistitem2 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				height: 60rpx;
				width: 90%;

				.coupontitle {
					color: #A9A9A9;
					font-size: 24rpx;
					width: 130rpx;
					flex-shrink: 0;
				}

				.coupondesc {
					color: #4E4E4E;
					font-size: 24rpx;
				}
			}
		}
	}

	.icon-right {
		position: absolute;
		right: 10rpx;
		top: 50%;
	}
</style>