fix: fix some bug

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

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;
 }

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;
 }

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>