SaaS-DataScreen/src/views/hui-jia/b1-screen/index.vue

<!--
 * @Author: wjc
 * @Date: 2025-11-19 16:09:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-12-16 17:01:28
 * @Description: 
-->
<template>
  <div class="b1-screen">
    <div class="logo">
      <Clock />
      <img src="@/assets/images/hjkj1.png" class="logo-img" />
    </div>
    <div class="b1-screen-content">
      <div class="left-wrap">
        <OnlineWater :showOnlineInfo="true" />
        <Smart />
      </div>
      <div class="middle-wrap">
        <div class="top">
          <div class="top-left">
            <div class="item-2">
              <OnlinePay
                :showLegend="false"
                :showTitle="false"
                :showOnlineInfo="true"
              />
            </div>
            <div class="item-3">
              <OnlinePayWeek :showMarkPoint="false" :showInfo="false" />
            </div>
            <div class="item-4">
              <OnlinePayDay :showMarkPoint="false" :showInfo="false" />
            </div>
          </div>
          <Hardware />
        </div>
        <WorkCard />
      </div>
    </div>
  </div>
</template>

<script>
  import Clock from "@/components/clock.vue"

  import Smart from "../components/smart.vue"
  import Hardware from "../components/hardware.vue"
  import WorkCard from "../components/work-card.vue"
  import OnlineWater from "../components/online-water"
  import OnlinePay from "../components/online-pay"
  import OnlinePayWeek from "../components/online-pay-week"
  import OnlinePayDay from "../components/online-pay-day"

  export default {
    name: "B1Screen",
    components: {
      Clock,
      Smart,
      Hardware,
      WorkCard,
      OnlineWater,
      OnlinePay,
      OnlinePayWeek,
      OnlinePayDay,
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";
  @import "@/assets/css/screen.scss";
  $gap-padding: halfW(8);
  .b1-screen {
    width: calc(100vw - halfW(8) * 2);
    height: calc(100vh);
    padding: 0 halfW(8) 0 halfW(8);
    background: var(--page-bg);
    font-family: DreamHanSansCN;
    .logo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: right;
      padding: halfH(10) 0;
      margin-right: halfW(-8);
      .logo-img {
        height: halfH(64);
      }
    }
  }
  .b1-screen-content {
    height: calc(100% - halfH(64) - halfH(28));
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: halfW(16);
    .left-wrap {
      display: flex;
      flex-direction: column;
      gap: halfW(16);
      width: calc(25% - $gap-padding);
      .item-1 {
        width: 100%;
        height: calc(50% - $gap-padding);
        background: #f5f5f5;
      }
      .online-water {
        width: 100%;
        height: calc(50% - $gap-padding);
      }
      .smart-door {
        width: 100%;
        height: calc(50% - $gap-padding);
      }
    }
    .middle-wrap {
      width: calc(75% - $gap-padding);
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: halfW(16);
      justify-content: flex-start;
      .top {
        flex: 1 1 0%;
        display: flex;
        gap: calc($gap-padding * 2);
        width: 100%;
        height: calc(80% - $gap-padding);
        .top-left {
          display: flex;
          flex-direction: column;
          width: 50%;
          height: 100%;
          gap: halfW(16);
          .item-2 {
            flex: 1 1 0%;
            width: 100%;
            // max-height: halfH(200);
            // background: #f5f5f5;
          }
          .item-3 {
            flex: 1 1 0%;
            // background: green;
            width: 100%;
            // max-height: halfH(200);
          }
          .item-4 {
            flex: 1 1 0%;
            width: 100%;

            // max-height: halfH(200);
            // background: green;
          }
        }
        .hardware-data {
          width: 50%;
          height: 100%;
        }
      }
      .work-card-container {
        width: 100%;
        height: calc(20% - $gap-padding);
        ::v-deep .work-card {
          padding: halfH(10) halfW(10);
          .work-card-item {
            align-self: stretch;
            justify-content: center;
            padding: halfH(10) halfW(20);
          }
        }
      }
    }
  }
</style>