推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

80 lines
1.6 KiB

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