my-spring/web-vue/packages/biz/views/biz/myScreen/index.vue

<template>
  <PageWrapper :contentFullHeight="true" :dense="true" title="false" contentClass="my-screen-page-wrapper">
    <div class="my-screen-page">
      <header class="my-screen-panel my-screen-panel--header">
        <ChartTop />
      </header>
      <section class="my-screen-bottom">
        <div class="my-screen-left">
          <section class="my-screen-panel my-screen-left-top">左上区域</section>
          <section class="my-screen-left-middle">
            <div class="my-screen-panel">左中左区域</div>
            <div class="my-screen-panel">左中右区域</div>
          </section>
          <section class="my-screen-left-bottom">
            <div class="my-screen-panel">左下左区域</div>
            <div class="my-screen-panel">左下右区域</div>
          </section>
        </div>
        <aside class="my-screen-right">
          <section class="my-screen-panel my-screen-right-top">右上区域</section>
          <section class="my-screen-panel my-screen-right-middle">右中区域</section>
          <section class="my-screen-panel my-screen-right-bottom">右下区域</section>
        </aside>
      </section>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="BizMyScreen">
  import { PageWrapper } from '@jeesite/core/components/Page';
  import ChartTop from './components/ChartTop.vue';
</script>

<style lang="less" scoped>
  @dark-bg: #141414;
  @desktop-page-gap: 12px;
  @desktop-page-padding: 0;
  @desktop-card-radius: 10px;
  @desktop-card-border: 1px solid rgb(226 232 240);
  @desktop-card-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
  @desktop-dark-border: rgb(51 65 85);

  .my-screen-page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    width: calc(100% + 10px);
    margin-left: -5px !important;
    margin-right: -5px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .my-screen-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: @desktop-page-gap;
    padding: @desktop-page-padding;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border-radius: @desktop-card-radius;
  }

  .my-screen-panel {
    min-height: 0;
    padding: 8px 12px 12px;
    box-sizing: border-box;
    border-radius: @desktop-card-radius;
    border: @desktop-card-border;
    background: rgb(255, 255, 255);
    box-shadow: @desktop-card-shadow;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(71 85 105);
    font-size: 14px;
    line-height: 20px;
  }

  .my-screen-panel--header {
    flex: 0 0 10%;
    padding: 8px 16px;
    font-weight: 500;
    color: rgb(51 65 85);
  }

  .my-screen-bottom {
    flex: 1 1 90%;
    min-height: 0;
    display: flex;
    gap: @desktop-page-gap;
    background: transparent;
    border-radius: @desktop-card-radius;
  }

  .my-screen-left {
    flex: 0 0 70%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: @desktop-page-gap;
  }

  .my-screen-right {
    flex: 0 0 calc(30% - 12px);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: @desktop-page-gap;
  }

  .my-screen-left-top {
    flex: 0 0 10%;
  }

  .my-screen-left-middle,
  .my-screen-left-bottom {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: @desktop-page-gap;
  }

  .my-screen-left-middle .my-screen-panel,
  .my-screen-left-bottom .my-screen-panel {
    flex: 1 1 0;
  }

  .my-screen-right .my-screen-panel {
    flex: 1 1 0;
  }

  .my-screen-right-top,
  .my-screen-right-middle,
  .my-screen-right-bottom {
    flex: 1 1 0;
  }

  html[data-theme='dark'] .my-screen-page,
  html[data-theme='dark'] .my-screen-bottom,
  html[data-theme='dark'] .my-screen-left,
  html[data-theme='dark'] .my-screen-right,
  html[data-theme='dark'] .my-screen-left-middle,
  html[data-theme='dark'] .my-screen-left-bottom {
    background: @dark-bg !important;
  }

  html[data-theme='dark'] .my-screen-panel {
    border-color: @desktop-dark-border;
    background: @dark-bg !important;
    color: rgb(203 213 225);
    box-shadow: none;
  }

  html[data-theme='dark'] .my-screen-panel--header {
    color: rgb(203 213 225);
  }

  @media (max-width: 768px) {
    .my-screen-page {
      flex: 1 1 auto;
      height: 100%;
      min-height: 0;
    }

    .my-screen-panel--header {
      flex-basis: 72px;
    }

    .my-screen-bottom {
      flex-direction: column;
    }

    .my-screen-left,
    .my-screen-right {
      flex: 1 1 auto;
      width: 100%;
      min-height: 360px;
    }

    .my-screen-left-middle,
    .my-screen-left-bottom {
      flex-direction: column;
    }
  }
</style>