wx-qhb/pageB/list/list.vue

<template>
	<!-- 拼包列表 -->
	<view class="back">
		<view class="label">
			<view class="" style="display: flex;">
				<view class="left flexc">
					<text class="bourn">目的地</text>
					<view class="addres">澳大利亚</view>
				</view>
				<view class="" style="flex: 1;margin-left: 20rpx;">
					<view class="u-flex u-row-between">
						<view class="">
							<text class='bigtitle'>特殊包裹</text>
							<text style="margin: 0 8rpx;">|</text>
							<text class='bigtitle'>海运散货</text>
						</view>
						<view class="mon">
							<text class="timeb">单价</text>
							<text>￥</text>
							<text style="font-size: 32rpx;">28</text>
							<text>.00</text>
						</view>
					</view>
					<view class="" style="margin-top: 34rpx;">
						<u-line-progress activeColor='rgba(255, 21, 21, 1)' :percentage="percentage" height="6"
							:showText="false"></u-line-progress>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 20rpx;">
						<view class="u-flex">
							<view class="">
								<text class='timeb'>已拼 </text>
								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>200kg</text>
							</view>
							<text style="margin: 0 8rpx;">|</text>
							<view class="">
								<text class='timeb'>剩余重量 </text>
								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>400kg</text>
							</view>
						</view>
						<view class="">
							<text class="timeb">进度50%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
				<text class="timea">开始时间：2023-12-31/截止时间：2023-12-31</text>
				<view class="pinb">去拼包</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percentage: 50, //进度条
			};
		}
	}
</script>

<style lang="scss" scoped>
	.flexc {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.back{
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}
	.pinb {
		width: 148rpx;
		height: 64rpx;
		background: #FF1515;
		border-radius: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
	}
	
	.mon {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 20rpx;
		color: #F83224;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
	}
	
	.bigtitle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}
	
	.timeb {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
	
	.timea {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #555555;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
	.label {
		margin-top: 20rpx;
		width: 702rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.left {
			width: 144rpx;
			height: 144rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

			.bourn {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #222222;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.addres {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>