123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <div class="nav">
- <div class="nav-left">
- <div class="nav-item"
- :class="activeCode===item.code?'nav-active':''"
- v-for="(item,index) in navData"
- v-show="index<3 && item.noShow"
- @click="checkNav(item,index)"
- :key="'navC'+index"
- >
- <img :src="item.activeImg" v-if="activeCode===item.code" alt="">
- <img :src="item.img" v-else alt="">
- </div>
- </div>
- <div class="nav-right">
- <div class="nav-item"
- :class="activeCode===item.code?'nav-active':''"
- v-for="(item,index) in navData"
- v-show="index>=3 && item.noShow"
- @click="checkNav(item,index)"
- :key="'navR'+index"
- >
- <img :src="item.activeImg" v-if="activeCode===item.code" alt="">
- <img :src="item.img" v-else alt="">
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
- import { useRouter } from 'vue-router'
- export default defineComponent({
- props: {
- navList: {
- type: Array,
- default: () => []
- }
- },
- setup(props, contex) {
- const router = useRouter()
- const navData: any = []
- const proxyData = reactive({
- activeCode: 'air',
- navData: navData,
- setNavValue(val: any) {
- proxyData.navData = val
- },
- checkNav(item: any, index: any) {
- proxyData.activeCode = item.code
- contex.emit('changeNav', item)
- },
- setActiveCode(activeCode: any) {
- proxyData.activeCode = activeCode
- }
- })
- watch(
- props.navList, (newVal, oldValue) => {
- proxyData.setNavValue(newVal)
- }
- )
- onMounted(() => {
- proxyData.setNavValue(props.navList)
- })
- return {
- ...toRefs(proxyData)
- }
- }
- })
- </script>
- <style lang="scss" scoped>
- .nav {
- display: flex;
- justify-content: space-between;
- padding-left: 8px;
- padding-top: 8px;
- padding-bottom: 8px;
- padding-right: 16px;
- position: fixed;
- bottom: 30px;
- left: 50%;
- transform: translateX(-50%);
- height: 52px;
- width: 93%;
- background: #FFFFFF;
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
- border-radius: 26px;
- z-index: 999;
- .nav-left, .nav-right {
- display: inline-block;
- vertical-align: middle;
- margin-right: 25px;
- .nav-item {
- position: relative;
- width: 36px;
- height: 36px;
- line-height: 36px;
- border-radius: 50%;
- display: inline-block;
- margin-right: 25px;
- text-align: center;
- vertical-align: middle;
- img {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 23px;
- margin: 0 auto;
- //height: 23.5px;
- }
- }
- .nav-active {
- background: #FFE823;
- }
- }
- .nav-right {
- margin-right: 0;
- .nav-item {
- margin-right: 15px;
- }
- }
- }
- </style>
|