页面优化

client/src/views/OaSystem/home/common.scss

@@ -0,0 +1,44 @@
+
+.header {
+  height: 56px;
+  padding: 0px 15px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  > .title {
+    display: inline-block;
+    color: #121518;
+    font-weight: bold;
+    font-size: 18px;
+  }
+  .subTitle {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+}
+.content {
+  height: calc(100% - 56px);
+  padding: 0px 15px;
+  box-sizing: border-box;
+}
+.arrowRight {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.numberBox {
+  > .number {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  > .unit {
+    font-size: 14px;
+    margin-left: 3px;
+    font-weight: 500;
+    color: #2d333c;
+  }
+}

client/src/views/OaSystem/home/components/CardItemFive copy 2.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="FiveDetailBox">
+    <el-calendar ref="calendar">
+      <template #header="{ date }">
+        <div class="calendarHeader">
+          <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
+          <span class="title">{{ date }}</span>
+          <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
+        </div>
+      </template>
+      <template #date-cell="{ data }">
+        <p :class="`isSelected_${mockData[data.day] ? mockData[data.day]['s'] : '0'}`">
+          {{ data.day.split('-').slice(1)[1] }}
+        </p>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+
+const mockData = ref({
+  '2023-11-01': {
+    s: 1 //1 未填 2 已填 3 请假
+  },
+  '2023-11-02': {
+    s: 2 //1 未填 2 已填 3 请假
+  },
+  '2023-11-03': {
+    s: 2 //1 未填 2 已填 3 请假
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.FiveDetailBox {
+  height: 100%;
+  .calendarHeader {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    padding: 20px 20px 0px 20px;
+    .icon1 {
+      cursor: pointer;
+      color: #8b969c;
+    }
+  }
+  ::v-deep {
+    .el-calendar {
+      .el-calendar__header {
+        border: 0px;
+      }
+      .el-calendar__body {
+        padding-bottom: 15px;
+      }
+      .el-calendar-table {
+        td {
+          border: 0px;
+        }
+        .el-calendar-day {
+          height: auto;
+          text-align: center;
+          border: 0px;
+          background: none;
+          margin: auto;
+          &:hover,
+          &:active {
+            background: none;
+          }
+        }
+        .is-selected {
+          background: none;
+        }
+        .is-today {
+          &.is-selected {
+            background: none;
+          }
+          .el-calendar-day {
+            border-radius: 50%;
+            background: none;
+            color: #303133;
+          }
+        }
+      }
+    }
+  }
+  //控制不同状态的颜色
+  .isSelected_1 {
+    border: 1px solid #f83535;
+    display: inline-block;
+    padding: 3px 8px;
+    border-radius: 2px;
+    color: #f83535;
+    position: relative;
+    &:hover {
+      &::after {
+        display: block;
+        content: '补填';
+        position: absolute;
+        top: 0px;
+        padding: 3px 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        text-align: center;
+        margin: auto;
+        font-size: 14px;
+        background-color: #fff;
+      }
+    }
+  }
+  .isSelected_2 {
+    color: #2e77e6;
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemFive copy.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="FiveDetailBox">
+    <el-calendar ref="calendar">
+      <template #header="{ date }">
+        <div class="calendarHeader">
+          <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
+          <span class="title">{{ date }}</span>
+          <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
+        </div>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.FiveDetailBox {
+  height: 100%;
+  .calendarHeader {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    padding: 20px 20px 0px 20px;
+    .icon1 {
+      cursor: pointer;
+      color: #8b969c;
+    }
+  }
+  ::v-deep {
+    .el-calendar {
+      .el-calendar__header {
+        border: 0px;
+      }
+      .el-calendar__body {
+        padding-bottom: 15px;
+      }
+      .el-calendar-table {
+        td {
+          border: 0px;
+        }
+        .el-calendar-day {
+          height: auto;
+          text-align: center;
+          border: 0px;
+          width: 40px;
+          height: 40px;
+          background-color: none;
+          margin: auto;
+        }
+        .is-today {
+          &.is-selected {
+            background: none;
+          }
+
+          .el-calendar-day {
+            border-radius: 50%;
+            background-color: #2d76e8;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemFive.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="FiveDetailBox">
+    <el-calendar ref="calendar">
+      <template #header="{ date }">
+        <div class="calendarHeader">
+          <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
+          <span class="title">{{ date }}</span>
+          <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
+        </div>
+      </template>
+    </el-calendar>
+    <ul class="weekNumBox">
+      <li v-for="(v, i) in 5" :key="i">
+        <span class="title">第{{ v }}周</span>
+        <span class="state color1">(未填)</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.FiveDetailBox {
+  height: 100%;
+  .calendarHeader {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    padding: 20px 20px 0px 20px;
+    .icon1 {
+      cursor: pointer;
+      color: #8b969c;
+    }
+  }
+  ::v-deep {
+    .el-calendar {
+      .el-calendar__header {
+        border: 0px;
+      }
+      .el-calendar__body {
+        padding-bottom: 15px;
+      }
+      .el-calendar-table {
+        td {
+          border: 0px;
+        }
+        .el-calendar-day {
+          height: auto;
+          text-align: center;
+          border: 0px;
+          width: 40px;
+          height: 40px;
+          background-color: none;
+          margin: auto;
+        }
+        .is-today {
+          &.is-selected {
+            background: none;
+          }
+
+          .el-calendar-day {
+            border-radius: 50%;
+            background-color: #2d76e8;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  > .weekNumBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0px 15px;
+    padding-bottom: 20px;
+    > li {
+      flex: 1;
+      display: inline-block;
+      > span {
+        display: block;
+        margin-top: 5px;
+        &.state {
+          &.color1 {
+            color: #f00;
+          }
+          &.color2 {
+            color: #2e77e6;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemFour.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="FourDetailBox">
+    <div class="header">
+      <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
+    </div>
+    <div class="content" ref="echartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const category: number[] = []
+const barData: number[] = []
+const dottedBase: Date = new Date()
+
+for (var i = 0; i < 10; i++) {
+  category.push(dottedBase.getFullYear() - 1)
+  var b = Math.random() * 200
+  barData.push(b)
+}
+const echartOption: echarts.EChartsOption = {
+  title: [
+    {
+      show: true,
+      subtext: '单位：万元',
+      subtextStyle: {
+        color: '#8B969C',
+        lineHeight: 20
+      },
+      right: 20,
+      top: 5
+    }
+  ],
+  grid: {
+    left: '10%',
+    right: '5%',
+    bottom: '16%'
+  },
+  xAxis: {
+    data: category,
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: '#E3E3E3'
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#666'
+      }
+    }
+  },
+  series: [
+    {
+      name: 'bar',
+      type: 'bar',
+      barWidth: 20,
+      itemStyle: {
+        normal: {
+          barBorderRadius: 10,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#7BB5FA' },
+            { offset: 1, color: '#448ADC' }
+          ])
+        }
+      },
+      data: barData
+    }
+  ]
+}
+const echartRef = ref(null)
+onMounted(() => {
+  const myChart = echarts.init(echartRef.value)
+  myChart.setOption(echartOption)
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.FourDetailBox {
+  height: 100%;
+}
+</style>

client/src/views/OaSystem/home/components/CardItemOne.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="OneDetailBox">
+    <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">
+      <ul>
+        <li>
+          <img src="" />
+          <p class="title">万维空间17个项目获土地利用优秀成...</p>
+          <p class="time">2023-10-30</p>
+          <p class="desc">
+            近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
+          </p>
+        </li>
+        <li>
+          <img src="" />
+          <p class="title">万维空间17个项目获土地利用优秀成...</p>
+          <p class="time">2023-10-30</p>
+          <p class="desc">
+            近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+@import '../common.scss';
+.OneDetailBox {
+  height: 100%;
+  > .header {
+    > ul {
+      user-select: none;
+      > li {
+        display: inline-block;
+        padding: 5px 18px;
+        color: #8b969c;
+        font-weight: bold;
+        font-size: 18px;
+        cursor: pointer;
+        &:first-child {
+          padding-left: 0px;
+        }
+        &.active,
+        &:hover {
+          color: #121518;
+        }
+        position: relative;
+        > .corner {
+          display: inline-block;
+          position: absolute;
+          right: -4px;
+          top: 0px;
+          padding: 0px 8px;
+          border-radius: 10px;
+          background-color: #f00;
+          color: #fff;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  > .content {
+    > ul {
+      height: 100%;
+      display: flex;
+      > li {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 20px;
+        &:first-child {
+          margin-right: var(--margin-r);
+        }
+        > img {
+          background-color: #ccc;
+          width: 100%;
+          flex: 1;
+          border-radius: 10px;
+        }
+        > p {
+          padding: 3px 0px;
+        }
+        > .title {
+          margin-top: 5px;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        > .time {
+          font-size: 14px;
+          color: #8b969c;
+        }
+        > .desc {
+          font-size: 14px;
+          color: #626b70;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemSeven.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="SevenDetailBox">
+    <div class="header">
+      <span class="title">回款信息</span>
+      <span class="subTitle">
+        <span>更多</span>
+        <i class="arrowRight"><ArrowRightBold /> </i>
+      </span>
+    </div>
+    <div class="content">
+      <ul>
+        <li v-for="(v, i) in 20" :key="i">
+          <div>
+            <span>已回款：</span>
+            <span>¥6200</span>
+            <span>生态修复行动方案</span>
+          </div>
+          <span>10/28</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.SevenDetailBox {
+  height: 100%;
+  margin-bottom: 0px;
+  > .content {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 15px;
+    > ul {
+      height: 0;
+      flex-grow: 1;
+      overflow-y: scroll;
+      > li {
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid #e3e3e3;
+        font-size: 15px;
+        > div {
+          flex: 1;
+          color: #2d333c;
+        }
+        > span {
+          color: #8a94a4;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemSix.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="SixDetailBox">
+    <ul>
+      <li>
+        <p class="number" style="color: #f83535">8</p>
+        <p class="title">待办</p>
+      </li>
+      <li>
+        <p class="number">8</p>
+        <p class="title">已办</p>
+      </li>
+      <li>
+        <p class="number">8</p>
+        <p class="title">草稿</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.SixDetailBox {
+  height: 100px;
+  > ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    > li {
+      flex: 1;
+      text-align: center;
+      border-right: 1px solid #cfd9de;
+      &:last-child {
+        border-right: 0px;
+      }
+      > .number {
+        color: #121518;
+        font-size: 24px;
+        font-weight: bold;
+      }
+      > .title {
+        color: #2d333c;
+        margin-top: 4px;
+        font-size: 15px;
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemThree.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="ThreeDetailBox">
+    <ul>
+      <li v-for="(item, index) in signs" :key="index">
+        <span class="circle">{{ item['icon'] }}</span>
+        <div>
+          <p class="title">{{ item['title'] }}</p>
+          <div class="numberBox">
+            <span class="number">{{ item['value'] }}</span>
+            <span class="unit">{{ item['unit'] }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const signs = ref<
+  {
+    icon: string
+    title: string
+    value: number
+    unit: string
+  }[]
+>([
+  { icon: '签', title: '2023年度签约', value: 15005.65, unit: '万元' },
+  { icon: '回', title: '2023年度回款', value: 15005.65, unit: '万元' },
+  { icon: '净', title: '2023年度净合同额', value: 15005.65, unit: '万元' },
+  { icon: '拓', title: '2023年度新开拓', value: 15005.65, unit: '万元' },
+  { icon: '应', title: '总应收款', value: 15005.65, unit: '万元' },
+  { icon: '余', title: '总合同余额', value: 15005.65, unit: '万元' }
+])
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.ThreeDetailBox {
+  padding: 30px 20px;
+  height: 100%;
+  > ul {
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    justify-content: space-between;
+    align-content: space-between;
+    > li {
+      padding: 10px 20px;
+      border-radius: 4px;
+      border: 2px solid transparent;
+      cursor: pointer;
+      &:hover {
+        border-color: #498bef;
+        background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
+      }
+      &:nth-child(2n + 1) {
+        margin-right: 15px;
+      }
+      display: flex;
+      > .circle {
+        display: block;
+        width: 56px;
+        height: 56px;
+        line-height: 56px;
+        border-radius: 50%;
+        background-color: #498bef;
+        color: #fff;
+        font-size: 18px;
+        text-align: center;
+        margin-right: 5px;
+      }
+      &:nth-child(3),
+      &:nth-child(4) {
+        > .circle {
+          background-color: #05ce9e;
+        }
+        &:hover {
+          border-color: #05ce9e;
+        }
+      }
+      &:nth-child(5),
+      &:nth-child(6) {
+        > .circle {
+          background-color: #f9a527;
+        }
+        &:hover {
+          border-color: #f9a527;
+        }
+      }
+      > div {
+        > .title {
+          color: #2d333c;
+          font-size: 15px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/components/CardItemTwo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="TwoDetailBox">
+    <div class="header">
+      <span class="title">常用功能</span>
+    </div>
+    <div class="content">
+      <ul>
+        <li v-for="(item, index) in functions" :key="index">
+          <img src="" />
+          <p class="title">{{ item['title'] }}</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const functions = ref<
+  {
+    title: string
+    icon: any
+    key: string
+  }[]
+>([
+  { title: '驾驶舱', icon: '', key: '' },
+  { title: '差旅报销', icon: '', key: '' },
+  { title: '普通报销', icon: '', key: '' },
+  { title: '用款申请', icon: '', key: '' },
+  { title: '合同签订', icon: '', key: '' },
+  { title: '开票申请', icon: '', key: '' },
+  { title: '添加功能', icon: '', key: '' }
+])
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+.TwoDetailBox {
+  height: 100%;
+  > .content {
+    > ul {
+      height: 100%;
+      padding: 40px 20px;
+      display: grid;
+      grid-template-columns: repeat(4, 60px);
+      align-content: space-between;
+      justify-content: space-between;
+      > li {
+        > img {
+          background-color: #fff;
+          width: 60px;
+          height: 60px;
+        }
+        > .title {
+          margin-top: 8px;
+          font-size: 14px;
+          text-align: center;
+          color: #121518;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/home/index.scss

@@ -1,53 +1,9 @@
-
 .homeBox {
   display: flex;
   height: 100%;
   $margin-r: 20px;
   $borderRadius: 10px;
   padding-top: 15px;
-  .header {
-    height: 56px;
-    padding: 0px 15px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    > .title {
-      display: inline-block;
-      color: #121518;
-      font-weight: bold;
-      font-size: 18px;
-    }
-    .subTitle {
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-    }
-  }
-  .content {
-    height: calc(100% - 56px);
-    padding: 0px 15px;
-    box-sizing: border-box;
-  }
-  .arrowRight {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-  }
-
-  .numberBox {
-    > .number {
-      font-size: 18px;
-      font-weight: bold;
-    }
-    > .unit {
-      font-size: 14px;
-      margin-left: 3px;
-      font-weight: 500;
-      color: #2d333c;
-    }
-  }
   > div {
     &.leftBox {
       flex: 2;
@@ -65,102 +21,6 @@
             border-radius: $borderRadius;
             &:first-child {
               margin-right: $margin-r;
-              flex: 1.5;
-              > .header {
-                > ul {
-                  user-select: none;
-                  > li {
-                    display: inline-block;
-                    padding: 5px 18px;
-                    color: #8b969c;
-                    font-weight: bold;
-                    font-size: 18px;
-                    cursor: pointer;
-                    &:first-child {
-                      padding-left: 0px;
-                    }
-                    &.active,&:hover {
-                      color: #121518;
-                    }
-                    position: relative;
-                    >.corner {
-                      display: inline-block;
-                      position: absolute;
-                      right: -4px;
-                      top: 0px;
-                      padding: 0px 8px;
-                      border-radius: 10px;
-                      background-color: #f00;
-                      color: #fff;
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: 500;
-                    }
-                  }
-                }
-              }
-              > .content {
-                > ul {
-                  height: 100%;
-                  display: flex;
-                  > li {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    padding-bottom: 20px;
-                    &:first-child {
-                      margin-right: $margin-r;
-                    }
-                    > img {
-                      background-color: #ccc;
-                      width: 100%;
-                      flex: 1;
-                      border-radius: 10px;
-                    }
-                    > p {
-                      padding: 3px 0px;
-                    }
-                    > .title {
-                      margin-top: 5px;
-                      font-size: 16px;
-                      font-weight: bold;
-                    }
-                    > .time {
-                      font-size: 14px;
-                      color: #8b969c;
-                    }
-                    > .desc {
-                      font-size: 14px;
-                      color: #626b70;
-                    }
-                  }
-                }
-              }
-            }
-            &:last-child {
-              > .content {
-                > ul {
-                  height: 100%;
-                  padding: 40px 20px;
-                  display: grid;
-                  grid-template-columns: repeat(4, 60px);
-                  align-content: space-between;
-                  justify-content: space-between;
-                  > li {
-                    > img {
-                      background-color: #fff;
-                      width: 60px;
-                      height: 60px;
-                    }
-                    > .title {
-                      margin-top: 8px;
-                      font-size: 14px;
-                      text-align: center;
-                      color: #121518;
-                    }
-                  }
-                }
-              }
             }
           }
         }
@@ -171,66 +31,6 @@
           > div {
             flex: 1;
             height: 100%;
-            &:first-child {
-              padding: 30px 20px;
-              > ul {
-                height: 100%;
-                display: grid;
-                grid-template-columns: repeat(2, 50%);
-                justify-content: space-between;
-                align-content: space-between;
-                > li {
-                  padding: 10px 20px;
-                  border-radius: 4px;
-                  border: 2px solid transparent;
-                  cursor: pointer;
-                  &:hover {
-                    border-color: #498bef;
-                    background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
-                  }
-                  &:nth-child(2n + 1) {
-                    margin-right: 15px;
-                  }
-                  display: flex;
-                  > .circle {
-                    display: block;
-                    width: 46px;
-                    height: 46px;
-                    line-height: 46px;
-                    border-radius: 50%;
-                    background-color: #498bef;
-                    color: #fff;
-                    font-size: 18px;
-                    text-align: center;
-                    margin-right: 5px;
-                  }
-                  &:nth-child(3),
-                  &:nth-child(4) {
-                    > .circle {
-                      background-color: #05ce9e;
-                    }
-                    &:hover {
-                      border-color: #05ce9e;
-                    }
-                  }
-                  &:nth-child(5),
-                  &:nth-child(6) {
-                    > .circle {
-                      background-color: #f9a527;
-                    }
-                    &:hover {
-                      border-color: #f9a527;
-                    }
-                  }
-                  > div {
-                    > .title {
-                      color: #2d333c;
-                      font-size: 15px;
-                    }
-                  }
-                }
-              }
-            }
           }
         }
       }
@@ -242,114 +42,11 @@
       > div {
         background-color: #fff;
         border-radius: $borderRadius;
-        margin-bottom: $margin-r;
-        &.calendarBox {
-          .calendarHeader {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .title {
-              font-size: 18px;
-              font-weight: bold;
-            }
-            padding: 20px 20px 0px 20px;
-            .icon1 {
-              cursor: pointer;
-              color: #8b969c;
-            }
-          }
-          ::v-deep {
-            .el-calendar {
-              .el-calendar__header {
-                border: 0px;
-              }
-              .el-calendar__body {
-                padding-bottom: 15px;
-              }
-              .el-calendar-table {
-                td {
-                  border: 0px;
-                }
-                .el-calendar-day {
-                  height: auto;
-                  text-align: center;
-                  border: 0px;
-                  width: 40px;
-                  height: 40px;
-                  background-color: none;
-                  margin: auto;
-                }
-                .is-today {
-                  &.is-selected {
-                    background: none;
-                  }
-                  
-                  .el-calendar-day { 
-                    border-radius: 50%;
-                    background-color: #2d76e8;
-                    color: #fff;
-                  }
-                }
-              }
-            }
-          }
-        }
-        &:last-child {
-          margin-bottom: 0px;
-          > .content {
-            display: flex;
-            flex-direction: column;
-            padding-bottom: 15px;
-            > ul {
-              height: 0;
-              flex-grow: 1;
-              overflow-y: scroll;
-              > li {
-                display: flex;
-                padding: 10px;
-                border-bottom: 1px solid #e3e3e3;
-                font-size: 15px;
-                > div {
-                  flex: 1;
-                  color: #2d333c;
-                }
-                > span {
-                  color: #8a94a4;
-                }
-              }
-            }
-          }
-        }
         &:not(:nth-child(2)) {
           flex: 1;
         }
         &:nth-child(2) {
-          height: 100px;
-          > ul {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            > li {
-              flex: 1;
-              text-align: center;
-              border-right: 1px solid #cfd9de;
-              &:last-child {
-                border-right: 0px;
-              }
-              > .number {
-                color: #121518;
-                font-size: 24px;
-                font-weight: bold;
-              }
-              > .title {
-                color: #2d333c;
-                margin-top: 4px;
-                font-size: 15px;
-              }
-            }
-          }
+          margin: var(--margin-r) 0px;
         }
       }
     }

client/src/views/OaSystem/home/index.vue

@@ -3,248 +3,49 @@
     <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">
-            <ul>
-              <li>
-                <img src="" />
-                <p class="title">万维空间17个项目获土地利用优秀成...</p>
-                <p class="time">2023-10-30</p>
-                <p class="desc">
-                  近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
-                </p>
-              </li>
-              <li>
-                <img src="" />
-                <p class="title">万维空间17个项目获土地利用优秀成...</p>
-                <p class="time">2023-10-30</p>
-                <p class="desc">
-                  近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
-                </p>
-              </li>
-            </ul>
-          </div>
+          <CardItemOne />
         </div>
         <div>
-          <div class="header">
-            <span class="title">常用功能</span>
-          </div>
-          <div class="content">
-            <ul>
-              <li v-for="(item, index) in functions" :key="index">
-                <img src="" />
-                <p class="title">{{ item['title'] }}</p>
-              </li>
-            </ul>
-          </div>
+          <CardItemTwo />
         </div>
       </div>
       <div class="bottomBox">
         <div>
-          <ul>
-            <li v-for="(item, index) in signs" :key="index">
-              <span class="circle">{{ item['icon'] }}</span>
-              <div>
-                <p class="title">{{ item['title'] }}</p>
-                <div class="numberBox">
-                  <span class="number">{{ item['value'] }}</span>
-                  <span class="unit">{{ item['unit'] }}</span>
-                </div>
-              </div>
-            </li>
-          </ul>
+          <CardItemThree />
         </div>
         <div>
-          <div class="header">
-            <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
-          </div>
-          <div class="content" ref="echartRef"></div>
+          <CardItemFour />
         </div>
       </div>
     </div>
     <div class="rightBox">
       <div class="calendarBox">
-        <el-calendar ref="calendar">
-          <template #header="{ date }">
-            <div class="calendarHeader">
-              <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
-              <span class="title">{{ date }}</span>
-              <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
-            </div>
-          </template>
-        </el-calendar>
+        <CardItemFive />
       </div>
       <div>
-        <ul>
-          <li>
-            <p class="number" style="color: #f83535">8</p>
-            <p class="title">待办</p>
-          </li>
-          <li>
-            <p class="number">8</p>
-            <p class="title">已办</p>
-          </li>
-          <li>
-            <p class="number">8</p>
-            <p class="title">草稿</p>
-          </li>
-        </ul>
+        <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">
-          <ul>
-            <li v-for="(v, i) in 20" :key="i">
-              <div>
-                <span>已回款：</span>
-                <span>¥6200</span>
-                <span>生态修复行动方案</span>
-              </div>
-              <span>10/28</span>
-            </li>
-          </ul>
-        </div></div
-      >
+        <CardItemSeven />
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import * as echarts from 'echarts'
-import type { CalendarDateType, CalendarInstance } from 'element-plus'
-
-const calendar = ref<CalendarInstance>()
-const selectDate = (val: CalendarDateType) => {
-  if (!calendar.value) return
-  calendar.value.selectDate(val)
-}
+import CardItemOne from './components/CardItemOne.vue'
+import CardItemTwo from './components/CardItemThree.vue'
+import CardItemThree from './components/CardItemThree.vue'
+import CardItemFour from './components/CardItemFour.vue'
+import CardItemFive from './components/CardItemFive.vue'
+import CardItemSix from './components/CardItemSix.vue'
+import CardItemSeven from './components/CardItemSeven.vue'
 
 defineOptions({ name: 'Home' })
-onMounted(() => {})
-
-const functions = ref<
-  {
-    title: string
-    icon: any
-    key: string
-  }[]
->([
-  { title: '驾驶舱', icon: '', key: '' },
-  { title: '差旅报销', icon: '', key: '' },
-  { title: '普通报销', icon: '', key: '' },
-  { title: '用款申请', icon: '', key: '' },
-  { title: '合同签订', icon: '', key: '' },
-  { title: '开票申请', icon: '', key: '' },
-  { title: '添加功能', icon: '', key: '' }
-])
-const signs = ref<
-  {
-    icon: string
-    title: string
-    value: number
-    unit: string
-  }[]
->([
-  { icon: '签', title: '2023年度签约', value: 15005.65, unit: '万元' },
-  { icon: '回', title: '2023年度回款', value: 15005.65, unit: '万元' },
-  { icon: '净', title: '2023年度净合同额', value: 15005.65, unit: '万元' },
-  { icon: '拓', title: '2023年度新开拓', value: 15005.65, unit: '万元' },
-  { icon: '应', title: '总应收款', value: 15005.65, unit: '万元' },
-  { icon: '余', title: '总合同余额', value: 15005.65, unit: '万元' }
-])
-
-const category: number[] = []
-const barData: number[] = []
-const dottedBase: Date = new Date()
-
-for (var i = 0; i < 10; i++) {
-  category.push(dottedBase.getFullYear() - 1)
-  var b = Math.random() * 200
-  barData.push(b)
-}
-
-// option
-const echartOption: echarts.EChartsOption = {
-  title: [
-    {
-      show: true,
-      subtext: '单位：万元',
-      subtextStyle: {
-        color: '#8B969C',
-        lineHeight: 20
-      },
-      right: 20,
-      top: 5
-    }
-  ],
-  grid: {
-    left: '10%',
-    right: '5%',
-    bottom: '16%'
-  },
-  xAxis: {
-    data: category,
-    axisLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-    }
-  },
-  yAxis: {
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: 'dashed',
-        color: '#E3E3E3'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#666'
-      }
-    }
-  },
-  series: [
-    {
-      name: 'bar',
-      type: 'bar',
-      barWidth: 20,
-      itemStyle: {
-        normal: {
-          barBorderRadius: 10,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#7BB5FA' },
-            { offset: 1, color: '#448ADC' }
-          ])
-        }
-      },
-      data: barData
-    }
-  ]
-}
-const echartRef = ref(null)
-onMounted(() => {
-  const myChart = echarts.init(echartRef.value)
-  myChart.setOption(echartOption)
-})
 </script>
 
 <style lang="scss" scoped>
 @import './index.scss';
+.homeBox {
+  --margin-r: 20px;
+}
 </style>