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.
 
 
 

40 lines
770 B

<template>
<view class="navs">
<view class="nav" @click="changeNav(item.id)" :class="{active: currentNav==item.id}" v-for="(item,index) in navData" :key="index">{{ item.text }}</view>
</view>
</template>
<script>
export default {
props: ['navData', 'currentNav'],
methods: {
changeNav(id) {
this.$emit('changeNav', id)
}
}
}
</script>
<style lang="scss" scoped>
.navs {
display: flex;
width: 100%;
height: 72rpx;
background: #FFFFFF;
border-radius: 16rpx;
.nav {
flex: 1;
text-align: center;
line-height: 72rpx;
color: #ADADAD;
font-size: 28rpx;
&.active {
background: rgba(25,137,250,0.1);
border-radius: 16rpx;
border: 2rpx solid #1989FA;
color: $themC;
font-weight: 600;
}
}
}
</style>