front/src/views/home/workplace/index.vue

<template>
  <div class="workplace-container">
    <div class="container">
      <div class="left-side">
        <div class="panel">
          <Banner />
          <DataPanel />
        </div>
        <div class="panel">
          <OrderAnalysis />
        </div>
      </div>
      <div class="right-side">
        <div class="panel moduler-wrap">
          <QuickOperation />
        </div>
        <div class="panel">
          <Announcement />
        </div>
      </div>
    </div>
    <NoticePopup />
  </div>
</template>

<script lang="ts" setup>
  import Banner from './components/banner.vue';
  import DataPanel from './components/data-panel.vue';
  import QuickOperation from './components/quick-operation.vue';
  import Announcement from './components/announcement.vue';
  import OrderAnalysis from './components/order-analysis.vue';
  import NoticePopup from './components/notice-popup.vue';

  defineOptions({
    name: 'Home',
  });
</script>

<style lang="less" scoped>
  .workplace-container {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .container {
    display: flex;
    flex: 1;
    padding: 16px 20px;
    padding-bottom: 16px;
    gap: 16px;
    overflow: hidden;
    min-height: 0;
    width: 80%;
    max-width: 80vw;
    margin: 0 auto;
  }

  .left-side {
    flex: 7;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
  }

  .left-side .panel {
    flex-shrink: 1;
    min-height: 0;
    overflow: auto;
  }

  .left-side .panel:nth-child(1) {
    flex: 4;
  }

  .left-side .panel:nth-child(2) {
    flex: 6;
  }

  .right-side {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
  }

  .right-side .panel {
    flex-shrink: 1;
    min-height: 0;
    overflow: auto;
  }

  .right-side .panel:nth-child(1) {
    flex: 5;
    overflow: auto;
  }

  .right-side .panel:nth-child(2) {
    flex: 4;
  }

  .panel {
    overflow: auto;
    background-color: var(--color-bg-2);
    border-radius: 24px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }

  :deep(.panel-border) {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(var(--gray-2));
  }

  .moduler-wrap {
    background-color: var(--color-bg-2);
    border-radius: 24px;

    :deep(.text) {
      color: rgb(var(--gray-8));
      font-size: 12px;
      text-align: center;
    }

    :deep(.wrapper) {
      margin-bottom: 8px;
      text-align: center;
      cursor: pointer;

      &:last-child {
        .text {
          margin-bottom: 0;
        }
      }

      &:hover {
        .icon {
          color: var(--app-primary-color, rgb(var(--primary-6)));
          background-color: var(--color-primary-light-1, #e8f3ff);
        }

        .text {
          color: var(--app-primary-color, rgb(var(--primary-6)));
        }
      }
    }

    :deep(.icon) {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-bottom: 4px;
      color: rgb(var(--dark-gray-1));
      font-size: 16px;
      line-height: 32px;
      text-align: center;
      background-color: rgb(var(--gray-1));
      border-radius: 24px;
    }
  }

  :deep(.general-card) {
    border-radius: 24px;

    .arco-card {
      border-radius: 24px;
    }
  }

  @media (max-width: 1400px) {
    .container {
      width: 90%;
      max-width: 90vw;
    }
  }

  @media (max-width: 1200px) {
    .container {
      flex-direction: column;
      padding: 12px 16px;
      gap: 12px;
      width: 95%;
      max-width: 95vw;
    }

    .left-side,
    .right-side {
      flex: none;
      width: 100%;
      overflow-y: visible;
    }

    .left-side .panel,
    .right-side .panel {
      flex: none;
      flex-shrink: 0;
    }
  }

  @media (max-width: 768px) {
    .workplace-container {
      height: auto;
      min-height: 100%;
    }

    .container {
      padding: 12px;
      gap: 12px;
    }
  }
</style>