<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>