guosen-ldt-shop/pages/test/test1.vue

<template>
	<view class="">
		<view class="card">
			<view class="top">
				<view class="center">
					<text class="cuIcon-time margin-right-10"></text>
					<text style="color: #333333;">2021-10-18 14:36:43</text>
				</view>
				<text class="text-base">已付款</text>
			</view>
			<view class="content">
				<scroll-view :scroll-x="true">
					<image v-for="(item,index) in 8" :key="index" src="https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/f6a8c0cb362e47f5a8ec1b7831e21fc2-maltan.png" mode=""></image>
				</scroll-view>
			</view>
			<view class="data">
				<text style="font-size: 24rpx;color: #848484" class="price">共10件商品，合计：88</text>
			</view>
			
			<view class="bottom">
				<view class="cu-btn round line-base sm">
					确认订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			
		};
	},
	onLoad() {
		
	},
	methods:{
		
	}
};
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
</style>

<style lang="scss" scoped>
	.card{
		border-radius: 20rpx;
		padding: 15rpx;
		background-color: #FFFFFF;
		margin: 15rpx;
		box-shadow: 10rpx 10rpx 10rpx #dedede;
		
		.top{
			font-size: 28rpx;
			padding:10rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx dashed   #DDDDDD;
		}
		
		.content{
			white-space: nowrap;
			padding: 20rpx 0;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}
		}
		
		.data{
			display: flex;
			justify-content: flex-end;
		}
		
		.bottom{
			padding-top: 30rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>