123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <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>
|