diff --git a/src/views/home/components/Card.vue b/src/views/home/components/Card.vue
index fcfb1da..ab36a73 100644
--- a/src/views/home/components/Card.vue
+++ b/src/views/home/components/Card.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="Card">
 import { computed } from 'vue'
-
+import svgIcon from '@/components/SvgIcon/index.vue'
 const props = defineProps({
   title: {
     type: String,
@@ -35,7 +35,9 @@
   <el-card :body-style="{ padding: '0px' }" shadow="always">
     <div :style="backgroundColor" class="card-panel">
       <div class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="props.icon" class-name="card-panel-icon" />
+        <el-icon class="card-panel-icon">
+          <svg-icon :name="props.icon" />
+        </el-icon>
       </div>
       <div class="card-panel-description">
         <div class="card-panel-text">

diff --git a/src/views/home/components/Card.vue b/src/views/home/components/Card.vue
index fcfb1da..ab36a73 100644
--- a/src/views/home/components/Card.vue
+++ b/src/views/home/components/Card.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="Card">
 import { computed } from 'vue'
-
+import svgIcon from '@/components/SvgIcon/index.vue'
 const props = defineProps({
   title: {
     type: String,
@@ -35,7 +35,9 @@
   <el-card :body-style="{ padding: '0px' }" shadow="always">
     <div :style="backgroundColor" class="card-panel">
       <div class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="props.icon" class-name="card-panel-icon" />
+        <el-icon class="card-panel-icon">
+          <svg-icon :name="props.icon" />
+        </el-icon>
       </div>
       <div class="card-panel-description">
         <div class="card-panel-text">
diff --git a/src/views/home/components/PanelGroup.vue b/src/views/home/components/PanelGroup.vue
index 2be668e..7776e43 100644
--- a/src/views/home/components/PanelGroup.vue
+++ b/src/views/home/components/PanelGroup.vue
@@ -10,7 +10,7 @@
   {
     title: '考核规则列表',
     context: '',
-    icon: 'app-config',
+    icon: 'icon-log',
     color: '#40c9c6',
     path: '/grade/gradelist',
     permission: '/examine',
@@ -18,7 +18,7 @@
   {
     title: '部门考核结果',
     context: '',
-    icon: 'chart-bar',
+    icon: 'business-board',
     color: '#36a3f7',
     path: '/deptresult/deptlist',
     permission: '/efficiency/deptresult',
@@ -26,7 +26,7 @@
   {
     title: '预警统计分析',
     context: '',
-    icon: 'statics',
+    icon: 'icon-flow',
     color: '#ffb980',
     path: '/analysiss/analysislist',
     permission: '/proxy/analysiss',
@@ -34,7 +34,7 @@
   {
     title: '登录日志',
     context: '',
-    icon: 'log',
+    icon: 'icon-setting',
     color: '#9cbbff',
     path: '/loginDiary/list',
     permission: '/sys/loginLog',
@@ -43,10 +43,10 @@
 const goPage = (path: string) => {
   $router.push(path)
 }
-let dataFilterLIst = []
+const dataFilterLIst = ref<any[]>()
 const dataFilter = () => {
   const btns = userStore.menus
-  const arr = []
+  const arr = [] as any[]
   routeStore.menus.forEach((element: any) => {
     arr.push(element)
   })
@@ -61,15 +61,15 @@
       return false
     }
   })
-  dataFilterLIst = datas
+  dataFilterLIst.value = datas
 }
 dataFilter()
 </script>
 
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col v-for="card in []" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+    <el-col v-for="(item) in dataFilterLIst" :key="item.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="item.title" :context="item.context" :icon="item.icon" :color="item.color" @click="goPage(item.path)" />
     </el-col>
   </el-row>
 </template>

diff --git a/src/views/home/components/Card.vue b/src/views/home/components/Card.vue
index fcfb1da..ab36a73 100644
--- a/src/views/home/components/Card.vue
+++ b/src/views/home/components/Card.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="Card">
 import { computed } from 'vue'
-
+import svgIcon from '@/components/SvgIcon/index.vue'
 const props = defineProps({
   title: {
     type: String,
@@ -35,7 +35,9 @@
   <el-card :body-style="{ padding: '0px' }" shadow="always">
     <div :style="backgroundColor" class="card-panel">
       <div class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="props.icon" class-name="card-panel-icon" />
+        <el-icon class="card-panel-icon">
+          <svg-icon :name="props.icon" />
+        </el-icon>
       </div>
       <div class="card-panel-description">
         <div class="card-panel-text">
diff --git a/src/views/home/components/PanelGroup.vue b/src/views/home/components/PanelGroup.vue
index 2be668e..7776e43 100644
--- a/src/views/home/components/PanelGroup.vue
+++ b/src/views/home/components/PanelGroup.vue
@@ -10,7 +10,7 @@
   {
     title: '考核规则列表',
     context: '',
-    icon: 'app-config',
+    icon: 'icon-log',
     color: '#40c9c6',
     path: '/grade/gradelist',
     permission: '/examine',
@@ -18,7 +18,7 @@
   {
     title: '部门考核结果',
     context: '',
-    icon: 'chart-bar',
+    icon: 'business-board',
     color: '#36a3f7',
     path: '/deptresult/deptlist',
     permission: '/efficiency/deptresult',
@@ -26,7 +26,7 @@
   {
     title: '预警统计分析',
     context: '',
-    icon: 'statics',
+    icon: 'icon-flow',
     color: '#ffb980',
     path: '/analysiss/analysislist',
     permission: '/proxy/analysiss',
@@ -34,7 +34,7 @@
   {
     title: '登录日志',
     context: '',
-    icon: 'log',
+    icon: 'icon-setting',
     color: '#9cbbff',
     path: '/loginDiary/list',
     permission: '/sys/loginLog',
@@ -43,10 +43,10 @@
 const goPage = (path: string) => {
   $router.push(path)
 }
-let dataFilterLIst = []
+const dataFilterLIst = ref<any[]>()
 const dataFilter = () => {
   const btns = userStore.menus
-  const arr = []
+  const arr = [] as any[]
   routeStore.menus.forEach((element: any) => {
     arr.push(element)
   })
@@ -61,15 +61,15 @@
       return false
     }
   })
-  dataFilterLIst = datas
+  dataFilterLIst.value = datas
 }
 dataFilter()
 </script>
 
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col v-for="card in []" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+    <el-col v-for="(item) in dataFilterLIst" :key="item.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="item.title" :context="item.context" :icon="item.icon" :color="item.color" @click="goPage(item.path)" />
     </el-col>
   </el-row>
 </template>
diff --git a/src/views/home/components/calendar.vue b/src/views/home/components/calendar.vue
index e69de29..346f549 100644
--- a/src/views/home/components/calendar.vue
+++ b/src/views/home/components/calendar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup name="Calendar">
+const value = ref(new Date())
+</script>
+
+<template>
+  <el-card class="box-card">
+    <el-calendar v-model="value" disabled />
+  </el-card>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+  .box-card {
+    .el-calendar {
+      font-size: 13px;
+
+      .el-calendar__button-group {
+        display: none;
+      }
+
+      .el-calendar__body {
+        .el-calendar-table {
+          .el-calendar-day {
+            height: 40px !important;
+          }
+        }
+      }
+    }
+  }
+</style>

diff --git a/src/views/home/components/Card.vue b/src/views/home/components/Card.vue
index fcfb1da..ab36a73 100644
--- a/src/views/home/components/Card.vue
+++ b/src/views/home/components/Card.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="Card">
 import { computed } from 'vue'
-
+import svgIcon from '@/components/SvgIcon/index.vue'
 const props = defineProps({
   title: {
     type: String,
@@ -35,7 +35,9 @@
   <el-card :body-style="{ padding: '0px' }" shadow="always">
     <div :style="backgroundColor" class="card-panel">
       <div class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="props.icon" class-name="card-panel-icon" />
+        <el-icon class="card-panel-icon">
+          <svg-icon :name="props.icon" />
+        </el-icon>
       </div>
       <div class="card-panel-description">
         <div class="card-panel-text">
diff --git a/src/views/home/components/PanelGroup.vue b/src/views/home/components/PanelGroup.vue
index 2be668e..7776e43 100644
--- a/src/views/home/components/PanelGroup.vue
+++ b/src/views/home/components/PanelGroup.vue
@@ -10,7 +10,7 @@
   {
     title: '考核规则列表',
     context: '',
-    icon: 'app-config',
+    icon: 'icon-log',
     color: '#40c9c6',
     path: '/grade/gradelist',
     permission: '/examine',
@@ -18,7 +18,7 @@
   {
     title: '部门考核结果',
     context: '',
-    icon: 'chart-bar',
+    icon: 'business-board',
     color: '#36a3f7',
     path: '/deptresult/deptlist',
     permission: '/efficiency/deptresult',
@@ -26,7 +26,7 @@
   {
     title: '预警统计分析',
     context: '',
-    icon: 'statics',
+    icon: 'icon-flow',
     color: '#ffb980',
     path: '/analysiss/analysislist',
     permission: '/proxy/analysiss',
@@ -34,7 +34,7 @@
   {
     title: '登录日志',
     context: '',
-    icon: 'log',
+    icon: 'icon-setting',
     color: '#9cbbff',
     path: '/loginDiary/list',
     permission: '/sys/loginLog',
@@ -43,10 +43,10 @@
 const goPage = (path: string) => {
   $router.push(path)
 }
-let dataFilterLIst = []
+const dataFilterLIst = ref<any[]>()
 const dataFilter = () => {
   const btns = userStore.menus
-  const arr = []
+  const arr = [] as any[]
   routeStore.menus.forEach((element: any) => {
     arr.push(element)
   })
@@ -61,15 +61,15 @@
       return false
     }
   })
-  dataFilterLIst = datas
+  dataFilterLIst.value = datas
 }
 dataFilter()
 </script>
 
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col v-for="card in []" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+    <el-col v-for="(item) in dataFilterLIst" :key="item.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="item.title" :context="item.context" :icon="item.icon" :color="item.color" @click="goPage(item.path)" />
     </el-col>
   </el-row>
 </template>
diff --git a/src/views/home/components/calendar.vue b/src/views/home/components/calendar.vue
index e69de29..346f549 100644
--- a/src/views/home/components/calendar.vue
+++ b/src/views/home/components/calendar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup name="Calendar">
+const value = ref(new Date())
+</script>
+
+<template>
+  <el-card class="box-card">
+    <el-calendar v-model="value" disabled />
+  </el-card>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+  .box-card {
+    .el-calendar {
+      font-size: 13px;
+
+      .el-calendar__button-group {
+        display: none;
+      }
+
+      .el-calendar__body {
+        .el-calendar-table {
+          .el-calendar-day {
+            height: 40px !important;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/home/components/clock.vue b/src/views/home/components/clock.vue
index e69de29..feb731a 100644
--- a/src/views/home/components/clock.vue
+++ b/src/views/home/components/clock.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup name="Clock">
+const dataTime = ref(new Date())
+const timer = ref()
+const hours = computed(() => {
+  const date = dataTime.value
+  return date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
+})
+const minutes = computed(() => {
+  const date = dataTime.value
+  return date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+})
+const seconds = computed(() => {
+  const date = dataTime.value
+  return date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
+})
+onMounted(() => {
+  timer.value = setInterval(() => {
+    dataTime.value = new Date()
+  }, 1000)
+})
+onBeforeMount(() => {
+  if (timer.value) {
+    clearInterval(timer.value) // 在Vue实例销毁前，清除我们的定时器
+  }
+})
+</script>
+
+<template>
+  <el-card class="box-card">
+    <div class="clock">
+      <span class="title">中国，北京时间</span>
+      <span class="hours">{{ hours }}</span>:
+      <span class="minutes">{{ minutes }}</span>:
+      <span class="seconds">{{ seconds }}</span>
+    </div>
+  </el-card>
+</template>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .box-card {
+    .clock {
+      text-align: right;
+      font-size: 30px;
+      font-weight: 600;
+      margin: 10px 25px;
+
+      .title {
+        font-size: 16px;
+        color: #409eff;
+        font-weight: 300;
+        margin-right: 20px;
+      }
+    }
+  }
+</style>

diff --git a/src/views/home/components/Card.vue b/src/views/home/components/Card.vue
index fcfb1da..ab36a73 100644
--- a/src/views/home/components/Card.vue
+++ b/src/views/home/components/Card.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="Card">
 import { computed } from 'vue'
-
+import svgIcon from '@/components/SvgIcon/index.vue'
 const props = defineProps({
   title: {
     type: String,
@@ -35,7 +35,9 @@
   <el-card :body-style="{ padding: '0px' }" shadow="always">
     <div :style="backgroundColor" class="card-panel">
       <div class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="props.icon" class-name="card-panel-icon" />
+        <el-icon class="card-panel-icon">
+          <svg-icon :name="props.icon" />
+        </el-icon>
       </div>
       <div class="card-panel-description">
         <div class="card-panel-text">
diff --git a/src/views/home/components/PanelGroup.vue b/src/views/home/components/PanelGroup.vue
index 2be668e..7776e43 100644
--- a/src/views/home/components/PanelGroup.vue
+++ b/src/views/home/components/PanelGroup.vue
@@ -10,7 +10,7 @@
   {
     title: '考核规则列表',
     context: '',
-    icon: 'app-config',
+    icon: 'icon-log',
     color: '#40c9c6',
     path: '/grade/gradelist',
     permission: '/examine',
@@ -18,7 +18,7 @@
   {
     title: '部门考核结果',
     context: '',
-    icon: 'chart-bar',
+    icon: 'business-board',
     color: '#36a3f7',
     path: '/deptresult/deptlist',
     permission: '/efficiency/deptresult',
@@ -26,7 +26,7 @@
   {
     title: '预警统计分析',
     context: '',
-    icon: 'statics',
+    icon: 'icon-flow',
     color: '#ffb980',
     path: '/analysiss/analysislist',
     permission: '/proxy/analysiss',
@@ -34,7 +34,7 @@
   {
     title: '登录日志',
     context: '',
-    icon: 'log',
+    icon: 'icon-setting',
     color: '#9cbbff',
     path: '/loginDiary/list',
     permission: '/sys/loginLog',
@@ -43,10 +43,10 @@
 const goPage = (path: string) => {
   $router.push(path)
 }
-let dataFilterLIst = []
+const dataFilterLIst = ref<any[]>()
 const dataFilter = () => {
   const btns = userStore.menus
-  const arr = []
+  const arr = [] as any[]
   routeStore.menus.forEach((element: any) => {
     arr.push(element)
   })
@@ -61,15 +61,15 @@
       return false
     }
   })
-  dataFilterLIst = datas
+  dataFilterLIst.value = datas
 }
 dataFilter()
 </script>
 
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col v-for="card in []" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+    <el-col v-for="(item) in dataFilterLIst" :key="item.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="item.title" :context="item.context" :icon="item.icon" :color="item.color" @click="goPage(item.path)" />
     </el-col>
   </el-row>
 </template>
diff --git a/src/views/home/components/calendar.vue b/src/views/home/components/calendar.vue
index e69de29..346f549 100644
--- a/src/views/home/components/calendar.vue
+++ b/src/views/home/components/calendar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup name="Calendar">
+const value = ref(new Date())
+</script>
+
+<template>
+  <el-card class="box-card">
+    <el-calendar v-model="value" disabled />
+  </el-card>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+  .box-card {
+    .el-calendar {
+      font-size: 13px;
+
+      .el-calendar__button-group {
+        display: none;
+      }
+
+      .el-calendar__body {
+        .el-calendar-table {
+          .el-calendar-day {
+            height: 40px !important;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/home/components/clock.vue b/src/views/home/components/clock.vue
index e69de29..feb731a 100644
--- a/src/views/home/components/clock.vue
+++ b/src/views/home/components/clock.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup name="Clock">
+const dataTime = ref(new Date())
+const timer = ref()
+const hours = computed(() => {
+  const date = dataTime.value
+  return date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
+})
+const minutes = computed(() => {
+  const date = dataTime.value
+  return date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+})
+const seconds = computed(() => {
+  const date = dataTime.value
+  return date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
+})
+onMounted(() => {
+  timer.value = setInterval(() => {
+    dataTime.value = new Date()
+  }, 1000)
+})
+onBeforeMount(() => {
+  if (timer.value) {
+    clearInterval(timer.value) // 在Vue实例销毁前，清除我们的定时器
+  }
+})
+</script>
+
+<template>
+  <el-card class="box-card">
+    <div class="clock">
+      <span class="title">中国，北京时间</span>
+      <span class="hours">{{ hours }}</span>:
+      <span class="minutes">{{ minutes }}</span>:
+      <span class="seconds">{{ seconds }}</span>
+    </div>
+  </el-card>
+</template>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .box-card {
+    .clock {
+      text-align: right;
+      font-size: 30px;
+      font-weight: 600;
+      margin: 10px 25px;
+
+      .title {
+        font-size: 16px;
+        color: #409eff;
+        font-weight: 300;
+        margin-right: 20px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e465ceb..ba48513 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -5,9 +5,9 @@
  -->
 <script lang="ts" setup name="TDashboard">
 import PanelGroup from './components/PanelGroup.vue'
+import clock from './components/clock.vue'
+import Calendar from './components/calendar.vue'
 import useUserStore from '@/store/modules/user'
-// import Calendar from './components/calendar.vue'
-// import Clock from './components/clock.vue'
 const userStore = useUserStore()
 const name = userStore.name
 </script>
@@ -21,7 +21,7 @@
         </el-card>
       </el-col>
       <el-col :span="8">
-        <!-- <clock /> -->
+        <clock />
       </el-col>
     </el-row>
     <el-row>
@@ -29,7 +29,7 @@
         <panel-group />
       </el-col>
       <el-col :span="8">
-        <!-- <calendar /> -->
+        <calendar />
       </el-col>
     </el-row>
   </div>