null/pages/order/order.vue

<template>
	<view class="page">
		<view class="tab-sec align-center justify-around">
			<view class="tab-wrap" :class="{active:tabCurrentIndex === idx}" v-for="(item,idx) in tabs" :key="idx">
				{{item.name}}
			</view>
		</view>
		<view class="content-sec">
			<view class="item-wrap flex-col" v-for="(item,idx) in 3">
				  <view class="flex-row justify-between group_3">
				    <text class="text_5">订单号：M1569878</text>
				    <text class="text_7">进行中</text>
				  </view>
				  <view class="flex-row group_4">
				    <image
				      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62a039a05a7e3f0310646cb4/62a0461551588f0011f85200/16615024873807471335.png"
				      class="image"
				    />
				    <view class="flex-col group_5">
				      <text class="text_9">幸福西饼Rice盲盒</text>
				      <view class="group_6">
				        <text class="text_11">随机获得四拼蛋糕，奶油慕斯蛋</text>
				        <text class="text_13">糕二选一</text>
				      </view>
				      <text class="text_15">精致蛋挞、南瓜蛋糕二选一</text>
				    </view>
				    <view class="flex-col items-end group_7">
				      <text class="text_17">￥80.40</text>
				      <text class="text_19">×1</text>
				    </view>
				  </view>
				  <view class="flex-row justify-end group_8">
				    <view class="flex-col items-center text-wrapper_1"><text class="text_21">申请退款</text></view>
				    <view class="flex-col items-center text-wrapper_2"><text class="text_23">确认取货</text></view>
				  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:[
					{name:'全部',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
					{name:'进行中',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
					{name:'已完成',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
					{name:'已取消',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
				],
				reqData:{type:''},
				pageSize: 20,
				tabCurrentIndex: 0,
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.tab-sec{
	position: relative;
	height: 89rpx;
}
.tab-wrap{
	height: 89rpx;
	line-height: 89rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	&.active{
		color:$base-color;
		&::after{
			content: '';
			left: 50%;
			transform: translateX(-50%);
			bottom: 24rpx;
			width: 27rpx;
			height: 3rpx;
			background: #92B99C;
		}
	}
}
.content-sec{
	.item-wrap{
		width: 690rpx;
		margin:0 auto 24rpx;
	  padding-bottom: 24rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	}
	.item-wrap:not(:first-of-type) {
	  margin-top: 24rpx;
	}
	.group_3 {
	  padding: 24rpx 20rpx 24rpx 25rpx;
	  border-bottom: solid 1rpx #0000000f;
	}
	.text_5 {
	  margin-top: 9rpx;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	}
	.text_7 {
	  margin-bottom: 10rpx;
	  color: #92b99c;
	  font-size: 28rpx;
	  font-family: PingFang;
	  line-height: 27rpx;
	}
	.group_4 {
	  margin-top: 23rpx;
	  padding-left: 24rpx;
	  padding-right: 17rpx;
	}
	.image {
	  flex-shrink: 0;
	  width: 154rpx;
	  height: 154rpx;
	}
	.group_5 {
	  margin-left: 23rpx;
	  margin-bottom: 5rpx;
	  flex: 1 1 auto;
	}
	.text_9 {
	  align-self: flex-start;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 29rpx;
	}
	.group_6 {
	  margin-top: 15.5rpx;
	  line-height: 37rpx;
	}
	.text_11 {
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 37rpx;
	}
	.text_13 {
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 37rpx;
	}
	.text_15 {
	  margin-top: 8.5rpx;
	  align-self: flex-start;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.group_7 {
	  margin-left: 3rpx;
	  flex-shrink: 0;
	}
	.text_17 {
	  color: #ff3e3e;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.text_19 {
	  margin-right: 14rpx;
	  margin-top: 16rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 18rpx;
	}
	.group_8 {
	  margin-top: 32rpx;
	  padding: 0 20rpx;
	}
	.text-wrapper_1 {
	  margin-right: 23rpx;
	  padding: 16rpx 0 19rpx;
	  border-radius: 10rpx;
	  width: 154rpx;
	  height: 64rpx;
	  border: solid 1rpx #92b99c;
	}
	.text_21 {
	  color: #92b99c;
	  font-size: 28rpx;
	  font-family: PingFang;
	  line-height: 27rpx;
	}
	.text-wrapper_2 {
	  padding: 16rpx 0 19rpx;
	  border-radius: 10rpx;
	  width: 154rpx;
	  height: 64rpx;
	  border: solid 1rpx #92b99c;
	}
	.text_23 {
	  color: #92b99c;
	  font-size: 28rpx;
	  font-family: PingFang;
	  line-height: 27rpx;
	}
}
</style>