Newer
Older
KaiFengPC / src / views / project / projectInformation / tableDalgo.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <div class="TabsTop">
  5. <div v-for="i in tabsNumList" class="TabsList" :class="{ TabsListActive: i.value == tabsNum }" @click="tabsNumClick(i.value)">
  6. {{ i.label }}
  7. </div>
  8. </div>
  9. </div>
  10. <basicInfo v-if="tabsNum == 1"></basicInfo>
  11. <payCont v-if="tabsNum == 2"></payCont>
  12. <plantCont v-if="tabsNum == 3"></plantCont>
  13. <progressCont v-if="tabsNum == 4"></progressCont>
  14. <quaitryCont v-if="tabsNum == 5"></quaitryCont>
  15. <safcityCont v-if="tabsNum == 6"></safcityCont>
  16. <proImgCont v-if="tabsNum == 7"></proImgCont>
  17. </div>
  18. </template>
  19. <script setup>
  20. import basicInfo from './components/basicInfo';
  21. import payCont from './components/payCont';
  22. import plantCont from './components/plantCont';
  23. import progressCont from './components/progressCont';
  24. import quaitryCont from './components/quaitryCont';
  25. import safcityCont from './components/safcityCont';
  26. import proImgCont from './components/proImgCont';
  27. import { tabsNumList } from '@/utils/cloums';
  28. const tabsNum = ref(1);
  29. //头部点击
  30. function tabsNumClick(v) {
  31. tabsNum.value = v;
  32. }
  33. </script>
  34. <style lang="scss" scoped>
  35. .TabsTop {
  36. width: 80vw;
  37. height: 36px;
  38. margin-bottom: 14px;
  39. position: absolute;
  40. top: 12px;
  41. left: 150px;
  42.  
  43. .TabsList {
  44. width: 120px;
  45. text-align: center;
  46. height: 36px;
  47. line-height: 34px;
  48. float: left;
  49. box-sizing: border-box;
  50. border: 1px solid #409eff;
  51. color: #409eff;
  52. cursor: pointer;
  53.  
  54. &:nth-child(1) {
  55. border-top-left-radius: 5px;
  56. border-bottom-left-radius: 5px;
  57. }
  58.  
  59. &:nth-child(2) {
  60. border-top-right-radius: 5px;
  61. border-bottom-right-radius: 5px;
  62. }
  63. }
  64.  
  65. .TabsListActive {
  66. background-color: #409eff;
  67. color: white;
  68. }
  69. }
  70. </style>