<!--
 * @Author: wjc
 * @Date: 2025-11-19 16:09:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-12-12 16:54:33
 * @Description: 
-->
<template>
  <div class="a3-screen">
    <div class="a3-screen-content">
      <div class="left-wrap">
        <Hardware />
      </div>
      <div class="right-wrap">
        <div class="top">
          <Smart />
        </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);
  .a3-screen {
    width: calc(100vw - halfW(8) * 2);
    height: calc(100vh - halfH(8) * 2);
    padding: halfW(8) halfW(8) halfW(8) halfW(8);
    background: var(--page-bg);
    font-family: DreamHanSansCN;
  }
  .a3-screen-content {
    height: 100%;
    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(65% - $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);
      }
    }
    .right-wrap {
      width: calc(35% - $gap-padding);
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: halfW(16);
      justify-content: flex-start;
      .top {
        flex: 1 1 0%;
        display: flex;
        flex-direction: column;
        gap: calc($gap-padding * 2);
        width: 100%;
        height: calc(60% - $gap-padding);
      }
      .work-card-container {
        width: 100%;
        height: calc(40% - $gap-padding);
        ::v-deep.work-card {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-template-rows: repeat(2, 1fr) !important;
              padding: halfH(20) halfW(20);
            .work-card-item {
              align-self: stretch;
              justify-content: center;
            }
        }
      }
    }
  }
</style>
