<template> <div id="headerTabs"> <div class="tabsHeader"> <div class="TopBtns" :class="[AllData.tabIndex == item.key ? 'TopBtnsActive' : '']" v-for="item in AllData.tabsArr" :key="item.key" @click="changeTab(item.key)" > {{ item.name }} </div> </div> <div class="ContentBody"> <FXNNMN ref="fxnnmn"></FXNNMN> </div> </div> </template> <script setup name="headerTabs"> import { ref, reactive, toRefs, onMounted } from "vue"; import FXNNMN from "./index.vue"; const AllData = reactive({ tabsArr: [ { name: "车城大道改造片区", key: "0" }, { name: "湾湖改造片区", key: "1" }, { name: "神龙大道改造片区", key: "2" }, { name: "枫林三路改造片区", key: "3" }, ], tabIndex: "0", }); function changeTab(key) { AllData.tabIndex = key; } onMounted(() => {}); </script> <style lang="scss" scoped> #headerTabs { width: 100%; height: 800px; .tabsHeader { width: 100%; height: 40px; position: relative; &::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #114f89; } .TopBtns { height: 40px; line-height: 40px; width: auto; float: left; padding: 0 10px; margin: 0 10px; color: #a4bfd9; cursor: pointer; } .TopBtnsActive { color: #3cbdff; position: relative; &::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #3cbdff; } } } .ContentBody { width: 100%; height: calc(100% - 50px); } } </style>