学员端小程序
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.
 
 
 

118 lines
2.4 KiB

<template>
<view class="pageBgImg">
<topNavbar title="我的订单"></topNavbar>
<view class="pad">
<view class="searcBox">
<searchRow placeholder="搜索"/>
</view>
<view class="tabs">
<view class="tab" v-for="(item,index) in tabList" :key="index" :class="{active: currentTab==item.id}" @click="changeTab(item)">{{ item.text }}</view>
</view>
<view class="navs">
<view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: currentNav==item.id}" @click="changeNav(item)">{{ item.text }}</view>
</view>
<view class="recordTotal">100条记录</view>
<view class="tabCon">
<view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/mineEntry/myOrder/detail/detail')">
<opera></opera>
</view>
</view>
</view>
</view>
</template>
<script>
import opera from './comp/opera'
export default {
components: { opera },
data() {
return {
tabList: [
{text: '已付',id: 1},
{text: '待付',id: 2},
{text: '退款',id: 3},
],
navList: [
{text: '全部', id: 0},
{text: '学费', id: 1},
{text: '考场模拟费', id: 2}
],
currentTab: 1,
currentNav: 0,
}
},
methods: {
changeTab(item) {
this.currentTab = item.id
},
changeNav(item) {
this.currentNav = item.id
},
}
}
</script>
<style lang="scss" scoped>
.searcBox {
margin: 0 0 20rpx 0;
}
.card {
padding: 0 24rpx;
margin-bottom: 20rpx;
}
.tabs {
display: flex;
width: 100%;
height: 72rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-top: 20rpx;
.tab {
flex: 1;
text-align: center;
line-height: 72rpx;
color: #ADADAD;
&.active {
background: rgba(25,137,250,0.1);
border-radius: 16rpx;
border: 2rpx solid #1989FA;
color: $themC;
font-weight: 600;
}
}
}
.navs {
display: flex;
justify-content: space-between;
color: #fff;
font-size: 28rpx;
padding: 24rpx 30rpx 40rpx 30rpx;
color: $themC;
.nav {
&.active {
font-weight: 500;
position: relative;
&::before {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -20rpx;
content: '';
width: 56rpx;
height: 6rpx;
background: $themC;
border-radius: 3rpx;
}
}
}
}
.recordTotal {
font-size: 24rpx;
padding: 0rpx 0 28rpx 0;
text-align: right;
}
</style>