wx-qhb/pageB/orderinfo.vue

<template>
	<view class="back">
		<view class="top u-flex u-row-between">
			<text class="success">{{i18n.successful}}</text>
			<text class="sun">{{i18n.pickpackage}}</text>
		</view>
		<view class="address">
			<view class="" style="margin-top: 44rpx;">
				<view class="u-flex">
					<image src="/static/express/ji.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="name" style="margin-left: 28rpx;">陈盼盼</text>
					<text class="name" style="margin-left: 12rpx;">134****8314</text>
				</view>
				<view style="margin-top: 20rpx;margin-left: 70rpx;" class="info">
					上海浦东新区南汇新城镇上海市浦东新区保税
				</view>
			</view>
			<view class="" style="margin: 44rpx 0;">
				<view class="u-flex">
					<image src="/static/express/ji.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="name" style="margin-left: 28rpx;">陈盼盼</text>
					<text class="name" style="margin-left: 12rpx;">134****8314</text>
				</view>
				<view style="margin-top: 20rpx;margin-left: 70rpx;" class="info">
					上海浦东新区南汇新城镇上海市浦东新区保税
				</view>
			</view>
		</view>
		<view class="orderinfo">
			<view class="num">
				<text class='num'>{{i18n.OrderNumber}}：</text>
				<text class='num'>JDV18873891934</text>
			</view>
			<view class="num" style="margin-top: 50rpx;">
				<text class='num'>{{i18n.Ordertime}}：：</text>
				<text class='num'>2023-12-03 22:44:15</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.orderinfo {
		width: 702rpx;
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 36rpx 28rpx 0;
		box-sizing: border-box;

		.num {
			font-family: SFPro, SFPro;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.back {
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		.top {
			width: 702rpx;
			height: 100rpx;
			background: linear-gradient(291deg, #FFF4F4 0%, #FBDFDF 100%, #FBDFDF 100%);
			border-radius: 16rpx 16rpx 0 0;
			border: 1rpx solid;
			border-image: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
			padding: 0 24rpx;
			box-sizing: border-box;

			.success {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.sun {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.address {
			width: 702rpx;
			// height: 396rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 1rpx 32rpx;
			box-sizing: border-box;

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.info {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #777777;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				margin-top: 18rpx;
			}
		}
	}
</style>