popularize-front/pages/index/cart.vue

<template>
	<view class="page">
		<view class="head-box"></view>
		<uv-navbar title="我的订单" bgColor="transparent" height="100rpx"></uv-navbar>
		<view class="content">
			<uv-tabs 
				:scrollable="false"
				@click= "tabs"
				:list="list" 
				lineWidth="40" 
				:lineColor="`url(${lineBg}) 100% 100%`"
				:activeStyle="{
					color: '#FD5C5C',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#999',
					transform: 'scale(1)'
				}" 
				itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
			></uv-tabs>
			<view class="container">
				<!-- <CardList /> -->
			</view>
		</view>
		<tabber select="cart" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	// import CardList from '@/components/card/CardList.vue'
	export default {
		components:{
			tabber,
            // CardList
		},
		data() {
			return {
				list: [
					{ id: 0, name: '全部' },
					{ id: 1, name: '待参加' },
					{ id: 2, name: '已完成' },
					{ id: 3, name: '已取消' },
				],
				lineBg: require('@/static/image/cart/tabIcon.png')
			}
		},
		methods: {
			tabs(val) {
				console.log(val);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style scoped lang="scss">
	.page {
		.head-box {
			background: url('@/static/image/nav-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 534rpx;
			position: absolute;
		}
		/deep/.uv-navbar__content__title {
			color: #fff;
		}
		.content {
			color: #fff;
			padding-top: calc(var(--status-bar-height) + 100rpx);
		}
	}
</style>