diff --git a/package-lock.json b/package-lock.json
index 02ebc592a..8a866370b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -595,6 +595,15 @@
         "unidragger": "^2.3.0"
       }
     },
+    "echarts": {
+      "version": "5.0.2",
+      "resolved": "http://192.168.250.101:4873/echarts/-/echarts-5.0.2.tgz",
+      "integrity": "sha1-FybRelfPBdYs0FZ7QyXhIBpWuvY=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.0.4"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://192.168.250.101:4873/ee-first/-/ee-first-1.1.1.tgz",
@@ -1377,6 +1386,11 @@
       "resolved": "http://192.168.250.101:4873/troisjs/-/troisjs-0.1.19.tgz",
       "integrity": "sha1-zQGFZQGu91Uwhe2AnynUTNGS3X4="
     },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "http://192.168.250.101:4873/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+    },
     "type": {
       "version": "1.2.0",
       "resolved": "http://192.168.250.101:4873/type/-/type-1.2.0.tgz",
@@ -1662,6 +1676,14 @@
       "resolved": "http://192.168.250.101:4873/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha1-27fa+b/YusmrRev2ArjLrQ1dCP0=",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.0.4",
+      "resolved": "http://192.168.250.101:4873/zrender/-/zrender-5.0.4.tgz",
+      "integrity": "sha1-icNVr5CLn2SjAbOPdRt5UfLIqVo=",
+      "requires": {
+        "tslib": "2.0.3"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 060a377c6..7ecf12e37 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "dotenv": "^8.2.0",
+    "echarts": "^5.0.2",
     "element-plus": "^1.0.2-beta.36",
     "font-awesome": "^4.7.0",
     "mitt": "^2.1.0",
diff --git a/src/echarts/index.ts b/src/echarts/index.ts
new file mode 100644
index 000000000..62f569592
--- /dev/null
+++ b/src/echarts/index.ts
@@ -0,0 +1,43 @@
+import * as echarts from 'echarts/core'
+
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  PictorialBarChart,
+  RadarChart,
+} from 'echarts/charts'
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+} from 'echarts/components'
+
+import { SVGRenderer } from 'echarts/renderers'
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  SVGRenderer,
+  PictorialBarChart,
+  RadarComponent,
+])
+
+export default echarts
\ No newline at end of file
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 33b30dddf..518e56ed1 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main" :style="{'margin': appMargin}">
+  <section class="app-main">
     <router-view :key="key" v-slot="{ Component }">
       <transition appear name="fade-transform" mode="out-in">
         <keep-alive>
@@ -19,9 +19,8 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const key = computed(() => route.path);
-    const appMargin = computed(() => (deviceDetection() ? 0 : "10px"));
 
-    return { key, appMargin };
+    return { key };
   },
 });
 </script>
@@ -30,7 +29,7 @@ export default defineComponent({
 .app-main {
   min-height: calc(100vh - 70px);
   width: 100%;
-  height: 100vh;
+  height: 90vh;
   position: relative;
   overflow-x: hidden;
 }
diff --git a/src/style/index.scss b/src/style/index.scss
index 3e2662dbc..45d679de6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -30,6 +30,7 @@ html {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background-color: #f0f2f5;
 }
 
 *,
@@ -123,4 +124,12 @@ ul {
 
 .el-loading-mask {
   z-index: -1;
+}
+
+.pc-spacing {
+  margin: 10px;
+}
+
+.mobile-spacing {
+  margin: 0;
 }
\ No newline at end of file
diff --git a/src/views/welcome.vue b/src/views/welcome.vue
index d63114ea9..00e115dc4 100644
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -1,27 +1,79 @@
 <template>
   <div class="welcome">
+    <el-affix :offset="51">
+      <div class="top-content">
+        <div class="left-mark">
+          <img
+            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+            alt
+          />
+          <span>{{ greetings }}</span>
+        </div>
+        <flop v-if="!mobile" />
+      </div>
+    </el-affix>
     <!-- <a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a> -->
-    <flop />
-    <CountTo prefix="$" :startVal="1" :endVal="200" />
+    <!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
   </div>
 </template>
 
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
 import CountTo from "../components/countTo/src/index.vue";
+import { ref, unref, computed } from "vue";
+import { deviceDetection } from "../utils/deviceDetection";
+import echarts from "../echarts"
 export default {
   name: "welcome",
   components: {
     flop,
-    CountTo
-  }
+    CountTo,
+  },
+  setup() {
+    console.log('echarts===>', echarts)
+    let mobile = ref(deviceDetection());
+    let date: Date = new Date();
+
+    let greetings = computed(() => {
+      if (date.getHours() >= 0 && date.getHours() < 12) {
+        return "上午阳光明媚，祝你薪水翻倍🌞！";
+      } else if (date.getHours() >= 12 && date.getHours() < 18) {
+        return "下午小风娇好，愿你青春不老😃！";
+      } else {
+        return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
+      }
+    });
+
+    return {
+      greetings,
+      mobile,
+    };
+  },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .welcome {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  width: 100%;
+  margin-top: 1px;
+  .top-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 120px;
+    background: #fff;
+    padding: 20px;
+    .left-mark {
+      display: flex;
+      align-items: center;
+      img {
+        display: block;
+        width: 72px;
+        height: 72px;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+    }
+  }
 }
 </style>