zjugis_OA/client/src/views/OaSystem/home/indexOne.vue

<template>
  <div class="homeBox">
    <div class="leftBox">
      <div class="topBox">
        <div>
          <div class="header">
            <ul>
              <li class="active">公司动态<i class="corner">4</i></li>
              <li>通知公告</li>
              <li>学习中心</li>
            </ul>
            <span class="subTitle">
              <span>更多</span>
              <i class="arrowRight"><ArrowRightBold /> </i>
            </span>
          </div>
          <div class="content"> <CardItemOne /></div>
        </div>
        <div>
          <div class="header">
            <span class="title">常用功能</span>
          </div>
          <div class="content"> <CardItemTwo /></div>
        </div>
      </div>
      <div class="bottomBox">
        <div>
          <CardItemThree />
        </div>
        <div>
          <div class="header">
            <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
          </div>
          <div class="content"> <CardItemFour /></div>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="calendarBox">
        <CardItemFive />
      </div>
      <div>
        <CardItemSix />
      </div>
      <div>
        <div class="header">
          <span class="title">回款信息</span>
          <span class="subTitle">
            <span>更多</span>
            <i class="arrowRight"><ArrowRightBold /> </i>
          </span>
        </div>
        <div class="content"> <CardItemSeven /></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import CardItemOne from './components/CardItemOne.vue'
import CardItemTwo from './components/CardItemTwo.vue'
import CardItemThree from './components/CardItemThree.vue'
import CardItemFour from './components/CardItemFour.vue'
import CardItemFive from './components/CardItemFive1.vue'
import CardItemSix from './components/CardItemSix.vue'
import CardItemSeven from './components/CardItemSeven.vue'

defineOptions({ name: 'IndexOne' })
</script>

<style lang="scss" scoped>
@import './header.scss';
.homeBox {
  --margin-r: 20px;
}
.homeBox {
  display: flex;
  height: 100%;
  $margin-r: 20px;
  $borderRadius: 10px;
  padding-top: 15px;

  > div {
    &.leftBox {
      flex: 3;
      display: flex;
      flex-direction: column;
      margin-right: $margin-r;
      > div {
        flex: 1;
        &.topBox {
          display: flex;
          margin-bottom: $margin-r;
          > div {
            flex: 1;
            background-color: #fff;
            border-radius: $borderRadius;
            &:first-child {
              flex: 1.5;
              margin-right: $margin-r;
            }
          }
        }
        &.bottomBox {
          background-color: #fff;
          border-radius: $borderRadius;
          display: flex;
          > div {
            flex: 1;
            height: 100%;
          }
        }
      }
    }
    &.rightBox {
      flex: 1;
      display: flex;
      flex-direction: column;
      > div {
        background-color: #fff;
        border-radius: $borderRadius;
        &:not(:nth-child(2)) {
          flex: 1;
        }
        &:nth-child(2) {
          margin: var(--margin-r) 0px;
        }
      }
    }
  }
}
</style>