<template>
    <div class="screen">
      <Title />
      <div class="screen-content">
        <div class="screen-top">
          <div class="item-l">
            <OnlineWater />
          </div>
          <div class="item-r">
            <OnlinePay />
          </div>
        </div>
        <div class="screen-bottom">
          <div class="item-l">
            <OnlinePayWeek />
          </div>
          <div class="item-r">
            <OnlinePayDay />
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import Title from '@/views/hui-jia/components/title'
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: 'A1Screen',
  components: {
    Title,
    OnlineWater,
    OnlinePay,
    OnlinePayWeek,
    OnlinePayDay
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.screen-content{
  width: 100%;
  height: 100%;
  height: calc(100% - $title-hd);
  display: flex;
  flex-direction: column;
  gap: halfW(16);
  .screen-top{
    width: 100%;
    flex: 1 1 0%;
    display: flex;
    gap: halfW(16);
    .item-l{
      flex: 1 1 0%;
      // background-color: red;
    }
    .item-r{
      flex: 2 1 0%;
      // background-color: green;
    }
  }
  .screen-bottom{
    width: 100%;
    flex: 1 1 0%;
    display: flex;
    gap: halfW(16);
    .item-l{
      flex: 1 1 0%;
      // background-color: blue;
    }
    .item-r{
      flex: 1 1 0%;
      // background-color: yellow;
    }
  }
}
</style>
