zjugis_OA/client/src/views/OaSystem/home/indexTwo.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" @click="moreHandle">
              <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" style="position: relative">
            <span
              class="title"
              style="
                font-size: 20px;
                height: auto;
                margin-top: 20px;
                left: 40px;
                position: absolute;
                top: 20px;
              "
            >
              近五年签约历史趋势
            </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" @click="operateClick">回款信息</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 { useRouter } from 'vue-router'
import CardItemOne from './components/CardItemOne.vue'
import CardItemTwo from './components/CardItemTwo.vue'
import CardItemThree from './components/CardItemThree2.vue'
import CardItemFour from './components/CardItemFour2.vue'
import CardItemFive from './components/CardItemFive2.vue'
import CardItemSix from './components/CardItemSix.vue'
import CardItemSeven from './components/CardItemSeven.vue'

defineOptions({ name: 'Home' })
const router = useRouter()
const moreHandle = () => {
  router.push({ path: '/newsLook' })
}
const operateClick = () => {
  router.push({
    path: '/collectionDetail',
    query: {}
  })
}
</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>