<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 {inject} from 'vue'
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>