NN2022060801/addons/utcapp/pages/order/advert.vue

<template>
	<view class="main">
		<u-subsection class="subsection" :list="list" :current="current" @change="sectionChange" height="100"
			button-color="#EBC384" active-color="#fff" inactive-color="#FFFFFF" bg-color="#36373F"></u-subsection>

		<view class="lists" v-for="(item,k) in 10" key="k">
			<u-row gutter="16">
				<u-col span="6">
					<view class="custom">A用户</view>
					<view class="custom">2021-04-05 12:50:00</view>
					<!-- <view class="custom">2021-04-05 12:50:00</view> -->
				</u-col>
				<u-col span="6" style="text-align: right;">
					<view>
						<u-row gutter="16">
							<u-col span="4">
							</u-col>
							<u-col span="8" class="upturn" style="text-align: right;">
								<text>￥100</text>
							</u-col>
						</u-row>


					</view>
					<!-- <view style="font-size: 50rpx; font-weight: bold;">0</view> -->
					<view>0.9078976976786</view>
				</u-col>
			</u-row>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<tabbars :currentIndex="4"></tabbars>
	</view>
	</view>
</template>

<script>
	import tabbars from "@/components/tabbar.vue"
	export default {
		components: {
			tabbars
		},
		data() {
			return {
				list: [{
						name: '购买订单'
					},
					{
						name: '出售订单'
					}
				],
				current: 0
			};
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				console.log(index);
			}
		}
	}
</script>

<style lang="scss">
	.subsection {
		margin: 28rpx 50rpx 40rpx 40rpx;
		border-radius: 20rpx;
	}

	.lists {
		color: #FFFFFF;
		margin: 20rpx 40rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		// background-color: #36373F;
		background: linear-gradient(275deg, rgba(45, 45, 53, 0.1) 0%, #505058 100%);
	}

	.custom {
		margin: 10rpx 0rpx;
	}

	.upturn {
		color: #bb955e;
		font-weight: bold;
	}
</style>