From 5c1b66b03ddc71653ff32b3da6ab57f2b5703f3e Mon Sep 17 00:00:00 2001
From: lilinyuan <1084668738@qq.com>
Date: Thu, 9 May 2024 15:29:00 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Esidermenu?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/permisstion.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/stores/permisstion.js b/src/stores/permisstion.js
index 3744eb0..2a90914 100644
--- a/src/stores/permisstion.js
+++ b/src/stores/permisstion.js
@@ -10,7 +10,17 @@ export const usePermisstionStroe = defineStore('permisstion', () => {
   const asyncRouters = ref([])
   //定义是否加载路由变量
   const isLoadRoutes = ref(false)
-  const menuList = ref([])
+  const menuList = ref([
+    {
+      name: 'home',
+      path: '/home',
+      icon: 'home',
+      title: '首页',
+      meta: {
+        breadcrumb: true
+      }
+    }
+  ])
 
   const setIsLoadRoutes = (status) => {
     return isLoadRoutes.value = status
@@ -21,7 +31,7 @@ export const usePermisstionStroe = defineStore('permisstion', () => {
         const sRouter = JSON.parse(JSON.stringify(res.data))
         const mData = JSON.parse(JSON.stringify(res.data))
         asyncRouters.value = formatAsyncRouters(sRouter)
-        menuList.value = generateMenu(mData)
+        menuList.value = [...menuList.value, ...generateMenu(mData)]
         addAsyncRouters(asyncRouters.value)
         isLoadRoutes.value = false
       } else {

From 0e0d206cc74220ff061a856a963193cb0e3fb4d4 Mon Sep 17 00:00:00 2001
From: lilinyuan <1084668738@qq.com>
Date: Thu, 9 May 2024 16:14:48 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=9C=80=E6=B1=82=E7=9B=AE=E5=BD=95=E5=8F=8A?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectdemand/demandcollection/index.vue | 13 +++++++++++++
 src/views/projectdemand/demandsummary/index.vue    | 13 +++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/views/projectdemand/demandcollection/index.vue
 create mode 100644 src/views/projectdemand/demandsummary/index.vue

diff --git a/src/views/projectdemand/demandcollection/index.vue b/src/views/projectdemand/demandcollection/index.vue
new file mode 100644
index 0000000..ff05203
--- /dev/null
+++ b/src/views/projectdemand/demandcollection/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    需求征集
+  </div>
+</template>
+
+<script setup lang="jsx">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/projectdemand/demandsummary/index.vue b/src/views/projectdemand/demandsummary/index.vue
new file mode 100644
index 0000000..18fde93
--- /dev/null
+++ b/src/views/projectdemand/demandsummary/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    需求汇总
+  </div>
+</template>
+
+<script setup lang="jsx">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

From dcc68662113ff0d9e44da9d77d63a581d1767aa6 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Thu, 9 May 2024 17:16:39 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat=20:=20=E6=96=B0=E5=A2=9E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss |  28 +-
 src/assets/svg/home1.svg     |   6 +
 src/assets/svg/home2.svg     |   6 +
 src/assets/svg/home3.svg     |   6 +
 src/assets/svg/home4.svg     |   6 +
 src/views/home/index.vue     | 481 +++++++++++++++++++----------------
 6 files changed, 301 insertions(+), 232 deletions(-)
 create mode 100644 src/assets/svg/home1.svg
 create mode 100644 src/assets/svg/home2.svg
 create mode 100644 src/assets/svg/home3.svg
 create mode 100644 src/assets/svg/home4.svg

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 5c1a3c7..2231156 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -19,7 +19,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
 }
 
 .el-main {
-  background: #F4F6F8;
+  background: #EFEFEF;
   padding: 0 0 0 18px;
   position: fixed;
   left: 200px;
@@ -27,6 +27,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
   margin-left: 0;
   transition: margin-left .15s;
   width: calc(100vw - 200px);
+
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -83,9 +84,11 @@ html, body, #app, .el-container, .el-aside, .el-main {
   align-items: center;
   margin-bottom: 10px;
 }
-.el-dialog__body{
+
+.el-dialog__body {
   padding: 10px 20px;
 }
+
 .stateIcon {
   margin-top: 9px;
   margin-right: 7px;
@@ -248,7 +251,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
     justify-content: center;
     z-index: 0;
     position: relative;
-    .el-icon{
+
+    .el-icon {
       width: 1.4em;
       height: 1.4em;
     }
@@ -287,9 +291,10 @@ html, body, #app, .el-container, .el-aside, .el-main {
 .layout {
   display: flex;
   justify-content: space-around;
+
   .scrollbar-user {
-    height: calc(100vh - 250px)!important;
-    overflow: auto!important;
+    height: calc(100vh - 250px) !important;
+    overflow: auto !important;
   }
 
   .scrollbar-dict {
@@ -401,6 +406,15 @@ html, body, #app, .el-container, .el-aside, .el-main {
 }
 
 //SvgIcon组件的样式
+.home-icon {
+  width: 4em;
+  height: 4em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+  margin-right: 5px;
+}
+
 .svg-icon {
   width: 1.2em;
   height: 1.2em;
@@ -445,10 +459,12 @@ html, body, #app, .el-container, .el-aside, .el-main {
   overflow: hidden;
   margin-right: 5px;
 }
-.fen-icon{
+
+.fen-icon {
   width: 1.8em;
   height: 1.7em;
 }
+
 .middle-icon {
   width: 1.4em;
   height: 1.4em;
diff --git a/src/assets/svg/home1.svg b/src/assets/svg/home1.svg
new file mode 100644
index 0000000..0a99452
--- /dev/null
+++ b/src/assets/svg/home1.svg
@@ -0,0 +1,6 @@
+<svg width="71" height="68" viewBox="0 0 71 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 229">
+<ellipse id="Ellipse 12" cx="35.3747" cy="33.663" rx="35.3747" ry="33.663" fill="#87C3ED"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M23.3174 21.8325C23.3174 20.7279 24.2128 19.8325 25.3174 19.8325H28.485V23.3688C28.485 23.9211 28.9327 24.3688 29.485 24.3688H32.7358C33.288 24.3688 33.7358 23.9211 33.7358 23.3688V19.8325H45.4049C46.5094 19.8325 47.4049 20.7279 47.4049 21.8325V44.741C47.4049 45.8456 46.5094 46.741 45.4049 46.741H25.3174C24.2128 46.741 23.3174 45.8456 23.3174 44.741V21.8325ZM32.7358 19.8325H29.485V23.3688L32.7358 23.3688V19.8325ZM28.876 29.1297H39.9933V28.1297H28.876V29.1297ZM41.8462 34.4079H28.876V33.4079H41.8462V34.4079ZM41.8462 39.6862H28.876V38.6862H41.8462V39.6862Z" fill="#0043C5"/>
+</g>
+</svg>
diff --git a/src/assets/svg/home2.svg b/src/assets/svg/home2.svg
new file mode 100644
index 0000000..a71b307
--- /dev/null
+++ b/src/assets/svg/home2.svg
@@ -0,0 +1,6 @@
+<svg width="71" height="68" viewBox="0 0 71 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 230">
+<ellipse id="Ellipse 13" cx="35.3747" cy="33.663" rx="35.3747" ry="33.663" fill="#B487ED"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M41.1045 20.8325C41.1045 20.2802 40.6568 19.8325 40.1045 19.8325H26.1016C24.997 19.8325 24.1016 20.7279 24.1016 21.8325V44.741C24.1016 45.8456 24.997 46.741 26.1016 46.741H46.189C47.2936 46.741 48.189 45.8456 48.189 44.741V27.5596C48.189 27.0073 47.7413 26.5596 47.189 26.5596H42.1045C41.5522 26.5596 41.1045 26.1118 41.1045 25.5596V20.8325ZM43.9383 31.0958H31.1861V30.0958H43.9383V31.0958ZM35.4369 23.0234H39.6876V22.0234H35.4369V23.0234ZM43.9383 36.4777H31.1861V35.4777H43.9383V36.4777ZM31.1861 41.8593H43.9383V40.8593H31.1861V41.8593Z" fill="#8600C5"/>
+</g>
+</svg>
diff --git a/src/assets/svg/home3.svg b/src/assets/svg/home3.svg
new file mode 100644
index 0000000..98d2c13
--- /dev/null
+++ b/src/assets/svg/home3.svg
@@ -0,0 +1,6 @@
+<svg width="71" height="68" viewBox="0 0 71 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 231">
+<ellipse id="Ellipse 14" cx="35.3747" cy="33.663" rx="35.3747" ry="33.663" fill="#FDCB9D"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M54.4044 32.614C54.4044 40.4161 46.1575 46.741 35.9845 46.741C32.9189 46.741 30.0281 46.1666 27.4852 45.1505C27.3501 45.3211 27.1528 45.4524 26.9047 45.5078L19.6131 47.1386C18.844 47.3106 18.1654 46.6256 18.393 45.9072L20.2692 39.9868C18.5537 37.8406 17.5647 35.3159 17.5647 32.614C17.5647 24.8119 25.8115 18.4871 35.9845 18.4871C46.1575 18.4871 54.4044 24.8119 54.4044 32.614ZM28.1916 34.6321C29.3654 34.6321 30.317 33.7286 30.317 32.614C30.317 31.4994 29.3654 30.5958 28.1916 30.5958C27.0178 30.5958 26.0662 31.4994 26.0662 32.614C26.0662 33.7286 27.0178 34.6321 28.1916 34.6321ZM38.8184 32.614C38.8184 33.7286 37.8669 34.6321 36.6931 34.6321C35.5193 34.6321 34.5677 33.7286 34.5677 32.614C34.5677 31.4994 35.5193 30.5958 36.6931 30.5958C37.8669 30.5958 38.8184 31.4994 38.8184 32.614ZM45.1945 34.6321C46.3683 34.6321 47.3198 33.7286 47.3198 32.614C47.3198 31.4994 46.3683 30.5958 45.1945 30.5958C44.0207 30.5958 43.0691 31.4994 43.0691 32.614C43.0691 33.7286 44.0207 34.6321 45.1945 34.6321Z" fill="#F47D0E"/>
+</g>
+</svg>
diff --git a/src/assets/svg/home4.svg b/src/assets/svg/home4.svg
new file mode 100644
index 0000000..d9206cd
--- /dev/null
+++ b/src/assets/svg/home4.svg
@@ -0,0 +1,6 @@
+<svg width="71" height="68" viewBox="0 0 71 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 232">
+<ellipse id="Ellipse 19" cx="35.3747" cy="33.663" rx="35.3747" ry="33.663" fill="#87EDBC"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M18.7023 20.134C18.1358 20.4872 17.7588 21.1158 17.7588 21.8325V42.0502C17.7588 43.1547 18.6542 44.0502 19.7588 44.0502H48.3477C49.4523 44.0502 50.3477 43.1547 50.3477 42.0502V21.8325C50.3477 21.1082 49.9627 20.4738 49.3861 20.1229L49.9153 20.9221L35.7553 30.2976C34.9339 30.8415 33.8697 30.8523 33.0374 30.3252L18.1997 20.9276L18.7023 20.134ZM18.7605 20.0991L33.5725 29.4804C34.0718 29.7966 34.7104 29.7902 35.2032 29.4638L49.3465 20.0993C49.0526 19.9296 48.7115 19.8325 48.3477 19.8325H19.7588C19.3952 19.8325 19.0543 19.9295 18.7605 20.0991Z" fill="#01A054"/>
+</g>
+</svg>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index cea4307..695f767 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,266 +1,295 @@
 <template>
-  <div class="home-container">
-    <div class="home-top">
-      <el-image :src="homeImage" style="width: 380px"/>
-      <div class="top-right">
-        <div>Admin，欢迎回来！</div>
-
-      </div>
-    </div>
-    <div class="home-top-right">
-      <el-image :src="coffee" style="height: 100px"/>
-      <span>科研管理平台</span>
-    </div>
-  </div>
-  <!--  <el-row :gutter="10" type="flex">-->
-  <!--    <el-col  :span="6" :xs="8" :sm="16" :md="18" :lg="20" :xl="24" >-->
-  <!--      <div v-for="(item,index) in list" :key="index" class="block">-->
-  <!--        <div>{{item.title}}</div>-->
-  <!--        <div>-->
-  <!--          <el-icon><User/></el-icon>-->
-  <!--          <span>{{item.num}}</span>-->
-  <!--        </div>-->
-  <!--      </div>-->
-  <!--    </el-col>-->
-  <!--  </el-row>-->
-  <el-row :gutter="10">
-    <el-col :span="6" v-for="item in 4">1</el-col>
-    <!--    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
-    <!--    >2<div class="grid-content ep-bg-purple-light"-->
-    <!--    /></el-col>-->
-    <!--    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
-    <!--    >3<div class="grid-content ep-bg-purple"-->
-    <!--    /></el-col>-->
-    <!--    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"-->
-    <!--    >4<div class="grid-content ep-bg-purple-light"-->
-    <!--    /></el-col>-->
-  </el-row>
-  <div class="container">
-    <div id="bar1" ref="bar1"></div>
-    <div id="bar2" ref="bar2"></div>
-    <div id="bar3" ref="bar3"></div>
-  </div>
-  <div class="container">
-    <div id="pie1" ref="pie1"></div>
-    <div id="pie2" ref="pie2"></div>
-    <div id="pie3" ref="pie3"></div>
+  <div class="home-bg">
+    <el-row gutter="20">
+      <el-col :xs="24" :sm="16" :md="18" :lg="20" :xl="20">
+        <div class="left">
+          <h3>我的科创工作</h3>
+          <el-row :gutter="20" class="statistics">
+            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
+              <div class="block" :style="{background: item.color}">
+                <svg-icon :name="item.icon" :class-name="'home-icon'"/>
+                <div class="block-right">
+                  <span>{{ item.title }}</span>
+                  <span :style="{color: item.textColor}">{{ item.num }}<span>个</span></span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <h4>待办 ({{ todoNum }})</h4>
+          <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="4">
+        <div class="right">
+          <div class="right-top">
+            <h3>欢迎回来， Sunshine</h3>
+            <div>科技创新项目需求征集中， 要求参见OA内部信！</div>
+          </div>
+          <!--          <div class="right-gap"></div>-->
+          <div class="right-down">
+            <div>
+              <h3>帮助文档</h3>
+              <span>查看更多</span>
+            </div>
+            <el-divider/>
+            <div v-for="item in helpDocList" class="help">
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
-<script setup>
-import * as echarts from 'echarts'
-import homeImage from "@/assets/home/home.png"
-import coffee from "@/assets/home/coffee.png"
-import {useRouter} from 'vue-router';
+<script setup lang="jsx">
+import 'element-plus/theme-chalk/display.css'
 
-const router = useRouter()
 const list = ref([
   {
-    title: '在线用户量',
-    num: 2142
+    title: '待立项',
+    color: '#CEE8FA',
+    textColor: '#0043C5',
+    icon: 'home1',
+    num: 21
   },
   {
-    title: '在线用户量',
-    num: 2142
+    title: '待评审',
+    color: '#DCCEFA',
+    textColor: '#8600C5',
+    icon: 'home2',
+    num: 2
   },
   {
-    title: '在线用户量',
-    num: 2142
+    title: '待验收',
+    color: '#FAE6CE',
+    textColor: '#F47D0E',
+    icon: 'home3',
+    num: 4
   },
   {
-    title: '在线用户量',
-    num: 2142
+    title: '待归档',
+    color: '#CEFAD8',
+    textColor: '#01A089',
+    icon: 'home4',
+    num: 1
   }
 ])
-const barOption = {
-  title: {
-    text: 'World Population'
+const helpDocList = ref([
+  {
+    title: '业务流程'
   },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
+  {
+    title: '业务流程'
   },
-  legend: {},
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
+  {
+    title: '业务流程'
   },
-  xAxis: {
-    type: 'value',
-    boundaryGap: [0, 0.01]
-  },
-  yAxis: {
-    type: 'category',
-    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
-  },
-  series: [
+  {
+    title: '业务流程'
+  }
+])
+const todoNum = ref(20)
+const tableConfig = reactive({
+  columns: [
     {
-      name: '2011',
-      type: 'bar',
-      data: [18203, 23489, 29034, 104970, 131744, 630230]
+      prop: 'userName',
+      label: '单据编号',
+      align: 'center',
     },
     {
-      name: '2012',
-      type: 'bar',
-      data: [19325, 23438, 31000, 121594, 134141, 681807]
-    }
-  ]
-};
-
-const pieOption = {
-  tooltip: {
-    trigger: 'item'
-  },
-  legend: {
-    top: '5%',
-    left: 'center'
-  },
-  series: [
+      prop: 'nickName',
+      label: '消息主题',
+      align: 'center',
+    },
     {
-      name: 'Access From',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#fff',
-        borderWidth: 2
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      emphasis: {
-        label: {
-          show: true,
-          fontSize: 40,
-          fontWeight: 'bold'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        {value: 1048, name: 'Search Engine'},
-        {value: 735, name: 'Direct'},
-        {value: 580, name: 'Email'},
-        {value: 484, name: 'Union Ads'},
-        {value: 300, name: 'Video Ads'}
-      ]
+      prop: 'state',
+      label: '状态',
+      align: 'center',
+      currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      align: 'center',
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      fixed: 'right',
+      width: '150',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleEdit(row)}>查看</el-button>
+              <el-button type="primary" link onClick={() => handleEdit(row)}>已读</el-button>
+            </div>
+        )
+      }
     }
-  ]
-};
-
-const data = reactive({
-  barCharts: null,
-  pieCharts: null,
-  bar1: null,
-  bar2: null,
-  bar3: null,
-  pie1: null,
-  pie2: null,
-  pie3: null,
+  ],
+  api: '',
+  params: {},
 })
 
-const init = () => {
-  data.barCharts = echarts.init(document.getElementById('bar1')).setOption(barOption)
-  data.barCharts = echarts.init(document.getElementById('bar2')).setOption(barOption)
-  data.barCharts = echarts.init(document.getElementById('bar3')).setOption(barOption)
-  data.pieCharts = echarts.init(document.getElementById('pie1')).setOption(pieOption)
-  data.pieCharts = echarts.init(document.getElementById('pie2')).setOption(pieOption)
-  data.pieCharts = echarts.init(document.getElementById('pie3')).setOption(pieOption)
+const headBtnClick = (key) => {
+  switch (key) {
+    case 'add':
+      handleAdd()
+      break;
+  }
 }
-
-const redirectView = () => {
-  const toView = sessionStorage.getItem('toView')
-  console.log(toView, 'toView');
-  let jsonView = JSON.parse(toView)
-  toView ?
-      router.push({
-        path: jsonView.path,
-        query: {
-          ...jsonView.query
-        }
-      }) :
-      null
-}
-
-onMounted(() => {
-  init()
-  redirectView()
-})
-
-window.addEventListener('resize', () => {
-  data.bar1 = null
-  data.bar2 = null
-  data.bar3 = null
-  data.pie1 = null
-  data.pie2 = null
-  data.pie3 = null
-  data.barCharts = null
-  data.pieCharts = null
-  init()
-})
-
-
 </script>
 
 <style lang="scss" scoped>
-.home-container {
-  display: flex;
-  align-items: center;
+@media only screen and (max-width: 767px) {
+  .right {
+    margin-top: 10px;
+  }
+}
 
-  .home-top {
-    width: 1000px;
-    height: 150px;
+//.right-gap {
+//  background-color: #EFEFEF;
+//  width: 20px;
+//  //margin-right: -10px;
+//}
+.home-bg {
+  height: calc(100vh - 130px);
+  max-height: calc(100vh - 96px);
+  background-color: #EFEFEF;
+  position: absolute;
+  left: 18px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+  .left {
+    //flex: 0.8;
+    padding: 15px;
+    height: 100%;
+    border-radius: 10px;
+    background-color: #ffffff;
+
+    .statistics {
+      width: 99%;
+      margin-bottom: 20px;
+
+      .block {
+        display: flex;
+        align-items: center;
+        background-color: #e9edf2;
+        border-radius: 4px;
+        padding: 25px;
+        margin-top: 15px;
+
+        .block-right {
+          margin-left: 40px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #92969a;
+          font-size: 17px;
+
+          > span:first-child {
+            color: #000000;
+            margin-bottom: 10px;
+          }
+
+          > span:last-child {
+            font-size: 20px;
+            font-weight: bold;
+
+            > span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .right {
+    height: calc(100vh - 130px);
     display: flex;
-    align-items: center;
-    padding: 10px;
-    background-color: #e1eaf9;
+    flex-direction: column;
+    justify-content: space-between;
 
-    .top-right {
-      font-size: 16px;
-      margin-left: 10px;
-      letter-spacing: 1.5px;
+    .right-top {
+      h3 {
+        text-align: center;
+        margin-bottom: 15px;
+      }
+
+      div {
+        color: #909399;
+        font-size: 14px;
+        margin: 0 20px;
+        letter-spacing: 1px;
+        line-height: 25px;
+      }
+    }
+
+    .right-top, .right-down {
+      flex: 0.5;
+      padding: 15px;
+      border-radius: 10px;
+      background-color: #ffffff;
+    }
+
+
+    .right-down {
+      flex: 0.48;
 
       > div:first-child {
-        color: #557ad2;
-        font-weight: bold;
-        font-size: 20px;
-        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+          margin-left: 15px;
+        }
+
+        > span {
+          color: #927648;
+          font-size: 14px;
+        }
+      }
+
+      .el-divider--horizontal {
+        height: 3px;
+        background: #D9D9D9;
+        border: none;
+      }
+
+      .help {
+        height: 61px;
+        line-height: 61px;
+        padding-left: 15px;
+
+        &:hover {
+          background: #FBFBF7;
+        }
       }
     }
   }
-
-  .home-top-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
 }
 
-.statistics {
-  //display: flex;
-  .block {
-
-  }
-}
-
-.container {
-  height: calc((100vh / 2) - 150px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-
-  > div {
-    height: 300px;
-    flex: 0.9;
-  }
-}
 </style>