<!--
 * @Author: wjc
 * @Date: 2025-11-19 16:09:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-25 10:25:53
 * @Description: 
-->
<template>
  <div class="b2-screen">
    <div class="logo">
      <img src="@/assets/images/hjkj2.png" class="logo-img" />
    </div>
    <div class="b2-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 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: {
    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);
  .b2-screen {
    height: 100vh;
    width: 100vw;
    background: var(--page-bg);
    .logo {
      text-align: left;
      padding: halfH(10) 0;
      .logo-img {
        height: halfH(64);
      }
    }
  }
  .b2-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);
      }
    }
  }
</style>
