wuliu/pages/user/cancel/cancel.vue

<template>
	<view>
		<view class="box" v-for="(item,index) in 2">
			<view class="texts">
				<text class="text">发货地：</text><text class="text1">江苏省南京市雨花台区赛虹桥街道街道188号街道</text>
			</view>
			<view class="texts">
				<text class="text">收货地：</text><text class="text1">江苏省南京市雨花台区赛虹桥街道街道188号街道</text>
			</view>
			<view class="biaoqian">
				<view class="biaoqian1" :style="{background:item.background,color:item.color}"
					v-for="(item,index) in biaqqian" :key="index">
					{{item.text}}
				</view>
			</view>
			<view class="xinxis">
				<view class="xinxis1t">
					<text class="xinxis1">发布时间：</text><text class="text1">2024-06-22 16:20</text> <view class="wanc">已取消</view>
				</view>
				<view class="xinxis1t">
					<text class="xinxis1">下单时间：</text><text class="text1">2024-06-22 16:20</text>
				</view>
				<view class="xinxis1t">
					<text class="xinxis1">发货电话：</text><text class="text1">13845645666</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				biaqqian: [{
						text: '车型：13.6',
						background: '#E2ECFA',
						color: '#0D5DC9'
					},
					{
						text: '装载量：20m³',
						background: '#E7F4F9',
						color: '#14B2EC'
					},
					{
						text: '运费价格：￥500',
						background: '#F9EEEE',
						color: '#E45050'
					},
					{
						text: '今日达',
						background: '#F9F3EB',
						color: '#FA9512'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.wanc{
		width: 150rpx;
		height: 56rpx;
		background: #999999;
		border-radius: 28rpx 0rpx 0rpx 28rpx;
		display: inline-block;
		float: right;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
	}
	.cg {
		text-align: center;
	}

	.cgwenzi {
		margin-top: 30rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
	}

	.wenzi {
		margin-top: 20rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 36rpx;
		color: #222222;
	}

	.popbox {
		width: 660rpx;
		height: 450rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.close {
		text-align: right;
		margin: 22rpx;
	}

	.btn {
		margin-top: 29rpx;
		width: 602rpx;
		height: 90rpx;
		background: #0D5DC9;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(39, 58, 132, 0.28);
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.btndis {
		margin-top: 29rpx;
		width: 602rpx;
		height: 90rpx;
		background: #999C9F;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(39, 58, 132, 0.28);
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.xinxis {
		margin-top: 30rpx;
		font-size: 26rpx;
	}

	.xinxis1t {
		margin-top: 23rpx;
	}

	.xinxis1 {
		color: #999999;

	}

	.biaoqian {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.biaoqian1 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.box {
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	.texts {
		font-size: 30rpx;
		margin-bottom: 29rpx;
	}

	.text {
		color: #999999;
	}
</style>