<template>
|
<view class="zhidu-wrap">
|
<view class="navs">
|
<view
|
class="nav-item"
|
:class="{activeNav : current == index}"
|
@click="navsHandleClick(index)"
|
v-for="(item,index) in navList"
|
:key="index"
|
>
|
{{item.title}}{{item.num}}
|
</view>
|
<!-- <view class="nav-item" :class="[current == 'guojiazhidu'? 'activeNav' : '']" @tap="navsHandleClick('guojiazhidu')">
|
国家制度
|
</view>
|
<view class="nav-item" :class="[current == 'shengshizhidu'? 'activeNav' : '']" @tap="navsHandleClick('shengshizhidu')">
|
省市制度
|
</view>
|
<view class="nav-item" :class="[current == 'gongsizhidu'? 'activeNav' : '']" @tap="navsHandleClick('gongsizhidu')">
|
公司制度
|
</view> -->
|
</view>
|
<view class="uni-tab-bar">
|
<!-- <swiper class="swiper" @change="intervalChange" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
|
<swiper-item v-show="current == guojiazhidu">
|
<view class="swiper-item uni-bg-red">111A</view>
|
</swiper-item>
|
<swiper-item v-show="current == shengshizhidu">
|
<view class="swiper-item uni-bg-green">B</view>
|
</swiper-item>
|
<swiper-item v-show="current == gongsizhidu">
|
<view class="swiper-item uni-bg-blue">C</view>
|
</swiper-item>
|
</swiper> -->
|
<view v-show ="current == 0">
|
<zhiduForm></zhiduForm>
|
</view>
|
<view v-show ="current == 1"><zhiduForm></zhiduForm></view>
|
<view v-show ="current == 2"><zhiduForm></zhiduForm></view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
// import zhiduForm from './zhidu-form.vue'
|
import zhiduForm from '../../pagesA/pages/zhidu-form/zhidu-form.vue'
|
export default {
|
components:{
|
zhiduForm
|
},
|
data() {
|
return {
|
indicatorDots: false,
|
autoplay: false,
|
interval: 2000,
|
duration: 500,
|
|
navList: [
|
{
|
title:'国家制度',
|
num:120
|
},
|
{
|
title:'省市制度',
|
num:150
|
},
|
{
|
title:'公司制度',
|
num:220
|
}
|
],
|
current:0, //当前选项
|
guojiazhidu:0,
|
shengshizhidu:1,
|
gongsizhidu:2
|
}
|
},
|
methods:{
|
navsHandleClick(index) {
|
console.log('index',index)
|
this.current = index
|
},
|
intervalChange(e) {
|
console.log('e',e)
|
this.current = e.detail.current;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
background-color: #f1f3f5;
|
}
|
.zhidu-wrap{
|
width: 100%;
|
height: 100%;
|
// background-color: #f1f3f5;
|
}
|
.navs{
|
width: 100%;
|
display: flex;
|
height: 88rpx;
|
border-bottom: 1px solid #ff4e00;
|
}
|
.nav-item{
|
flex:1;
|
text-align: center;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
}
|
.activeNav{
|
color: #ff4e00;
|
font-size: 30rpx;
|
position: relative;
|
&::after{
|
content: "";
|
width: 40rpx;
|
height: 8rpx;
|
background-color: #ff4e00;
|
border-radius: 40rpx;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 0;
|
}
|
}
|
</style>
|
