slibra-module-web/src/views/screen/components/shuizhi.vue

<script setup>
import { ref } from "vue";
import jsBox from "./jsBox.vue";
import csBox from "./csBox.vue";
const index = ref(0)
const changeTab = (i) => {
  index.value = i
}
defineProps({
  screenData: {
    type: Object,
    default: []
  },
})
</script>

<template>
  <div class="home-box shuizhi">
    <div class="home-box-top">
      <div class="title">水质分析</div>
      <div class="right">
        <span :class="['btn', index == 0 ? 'action' : '']" @click="changeTab(0)">进水</span>
        <span :class="['btn', index == 1 ? 'action' : '']" @click="changeTab(1)">出水</span>
      </div>
    </div>
    <div class="main">
      <jsBox :screenData="screenData" v-if="index == 0"></jsBox>
      <csBox :screenData="screenData" v-else="index == 1"></csBox>
    </div>
  </div>
</template>

<style scoped lang="scss">
.shuizhi {
  .right {
    .btn {
      width: 6.2rem;
      height: 2.8rem;
      background: rgba(238, 249, 255, 1);
      border: 0.1rem solid rgba(122, 215, 249, 1);
      float: left;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(84, 194, 248, 1);

      &:first-child {
        border-right: 0;
        border-top-left-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
      }

      &:last-child {
        border-left: 0;
        border-top-right-radius: 0.4rem;
        border-bottom-right-radius: 0.4rem;
      }
    }

    .action,
    .btn:hover {
      background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
      border: none;
      color: #fff;
    }
  }

  :deep(.main) {
    padding: 1.8rem 1.8rem 1.6rem;

    .box-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1rem 6rem;
    }

    .box-item {
      height: 10.8rem;
      display: flex;
      align-items: center;
      flex-direction: column;

      .cicle {
        height: 5.2rem;
        margin-bottom: 1rem;
      }

      .name {
        color: #0A284E;
        font-size: 1.4rem;
        line-height: 2rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
      }

      .value {
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: #466993;
      }
    }
  }
}
</style>