<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>
|