73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="tab">
|
||
|
|
<view v-for="(item, index) in tabList" :key="index" @click="navTab(item.id)" class="tab_i"
|
||
|
|
:class="[isTab===item.id?'heng':'heng1']">
|
||
|
|
{{ item.name }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="isTab==0">
|
||
|
|
<activeArea></activeArea>
|
||
|
|
</view>
|
||
|
|
<view v-if="isTab==1">
|
||
|
|
<seaPublick></seaPublick>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import activeArea from '@/pages/market/activeArea/activeArea.vue'
|
||
|
|
import seaPublick from '@/pages/market/activeArea/seaPublick.vue'
|
||
|
|
export default{
|
||
|
|
components: {
|
||
|
|
activeArea,seaPublick
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
tabList:[{
|
||
|
|
name:"活动列表",
|
||
|
|
id:0,
|
||
|
|
},{ name:"沙棘公益",
|
||
|
|
id:1,}],
|
||
|
|
isTab:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
navTab(index){
|
||
|
|
this.isTab = index
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tab {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
background: #F9F9F9;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
overflow-x: auto;
|
||
|
|
.tab_i {
|
||
|
|
text-align: center;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
padding-bottom: 15rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.heng {
|
||
|
|
border-bottom: 6rpx solid #FB3024;
|
||
|
|
color: #FB3024;
|
||
|
|
color: #333333;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|