- <template>
- <div class="water-analysis-page">
- <div class="top">
- <div class="TabsTop">
- <div v-for="i in tabsNumList" class="TabsList" :class="{ TabsListActive: i.value == tabsNum }" @click="tabsNumClick(i.value)">
- {{ i.label }}
- </div>
- </div>
- </div>
- <basicInfo v-if="tabsNum == 1"></basicInfo>
- <payCont v-if="tabsNum == 2"></payCont>
- <plantCont v-if="tabsNum == 3"></plantCont>
- <progressCont v-if="tabsNum == 4"></progressCont>
- <quaitryCont v-if="tabsNum == 5"></quaitryCont>
- <safcityCont v-if="tabsNum == 6"></safcityCont>
- <proImgCont v-if="tabsNum == 7"></proImgCont>
- </div>
- </template>
- <script setup>
- import basicInfo from './components/basicInfo';
- import payCont from './components/payCont';
- import plantCont from './components/plantCont';
- import progressCont from './components/progressCont';
- import quaitryCont from './components/quaitryCont';
- import safcityCont from './components/safcityCont';
- import proImgCont from './components/proImgCont';
- import { tabsNumList } from '@/utils/cloums';
- const tabsNum = ref(1);
- //头部点击
- function tabsNumClick(v) {
- tabsNum.value = v;
- }
- </script>
- <style lang="scss" scoped>
- .TabsTop {
- width: 80vw;
- height: 36px;
- margin-bottom: 14px;
- position: absolute;
- top: 12px;
- left: 150px;
-
- .TabsList {
- width: 120px;
- text-align: center;
- height: 36px;
- line-height: 34px;
- float: left;
- box-sizing: border-box;
- border: 1px solid #409eff;
- color: #409eff;
- cursor: pointer;
-
- &:nth-child(1) {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
- }
-
- &:nth-child(2) {
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- }
- }
-
- .TabsListActive {
- background-color: #409eff;
- color: white;
- }
- }
- </style>