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.
96 lines
1.9 KiB
96 lines
1.9 KiB
3 years ago
|
<template>
|
||
|
|
<div class="navbar-list">
|
||
|
|
<ul class="flex-imd">
|
||
|
|
<li v-for="(item,index) in list"
|
||
|
|
:key="index"
|
||
|
|
class="navbar-item"
|
||
|
|
:class="activeIndex===index?'act':''"
|
||
|
|
@click="chooseNav(item,index)"
|
||
|
|
:data-navid='item.name'
|
||
|
|
>
|
||
|
|
{{item.name}}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
list:{
|
||
|
|
type:Array,
|
||
|
|
default(){
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
activeIndex:{
|
||
|
|
type:Number,
|
||
|
|
default:0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
// activeIndex:0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chooseNav (item,index) {
|
||
|
|
// console.log(e.target.dataset.navid)
|
||
|
|
// this.currNavbar = Number(item.name)
|
||
|
|
// this.activeIndex = index;
|
||
|
|
this.$emit('tab',{
|
||
|
|
data:item,
|
||
|
|
index:index
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.navbar-list{
|
||
|
|
width: 100%;
|
||
|
|
height: 0.6rem;
|
||
|
|
position: relative;
|
||
|
|
overflow-x: scroll;
|
||
|
|
overflow-y: hidden;
|
||
|
|
background: #8020fe;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 0.34rem;
|
||
|
|
border-radius: 0.1rem;
|
||
|
|
margin-bottom: 0.3rem;
|
||
|
|
padding: 0.08rem 0;
|
||
|
|
}
|
||
|
|
.navbar-list>ul{
|
||
|
|
/* padding: 0 20px; */
|
||
|
|
position: absolute;
|
||
|
|
height: 0.6rem;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
}
|
||
|
|
.navbar-item{
|
||
|
|
/* width: 120px; */
|
||
|
|
width: 1.6rem;
|
||
|
|
padding: 0px 18px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 0.6rem;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column nowrap;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
/* margin-right: 10px; */
|
||
|
|
}
|
||
|
|
.navbar-list::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.navbar-item.act{
|
||
|
|
/* background-image: -webkit-linear-gradient(left, #ff512f, #dd2476);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent; */
|
||
|
|
font-weight: bold;
|
||
|
|
color: #fe3d54;
|
||
|
|
}
|
||
|
|
</style>
|