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

<template>
  <div class="screen">
    <Title />
    <div class="screen-content">
      <div class="screen-l">
        <CommunityMap class="community-map" />
      </div>
      <div class="screen-r">
          <div class="screen-r-top">
            <User />
          </div>
          <div class="screen-r-bottom">
            <div class="item-l">
              <Resident />
            </div>
            <div class="item-r">
              <CommunityType />
            </div>
          </div>
       </div>
    </div>
  </div>
</template>
<script>
import Title from '@/views/hui-jia/components/title'
import CommunityType from '@/views/hui-jia/components/community-type'
import Resident from '@/views/hui-jia/components/resident'
import User from '@/views/hui-jia/components/user'
import CommunityMap from '@/views/hui-jia/components/community-map'

export default {
  name: 'A2Screen',
  components: {
    Title,
    CommunityType,
    Resident,
    User,
    CommunityMap

  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.screen-content{
  width: calc(100% - halfW(8) * 2);
  height: calc(100% - $title-hd - halfH(8));
  padding: 0 halfW(8) halfW(8) halfW(8);
  display: flex;
  flex-direction: row;
  gap: halfW(16);
  .screen-l{
    width: calc(35%);
    flex: 1 1 0%;
    height: calc(100%);
  }
  .screen-r{
    width: calc(65%);
    display: flex;
    flex-direction: column;
    gap: halfH(16);
    flex: 2 1 0%;
    .screen-r-top{
      flex: 1 1 0%;
    }
    .screen-r-bottom{
      flex: 2 1 0%;
      display: flex;
      gap: halfW(16);
      .item-l{
        flex: 1 1 0%;
      }
      .item-r{
        flex: 1 1 0%;
      }
    }
  }
}

</style>