diff --git a/package-lock.json b/package-lock.json
index 5019d93..e528da0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@vueuse/core": "^13.0.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.7.9",
@@ -1429,9 +1430,9 @@
       "optional": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
     },
     "node_modules/@uppy/companion-client": {
       "version": "2.2.2",
@@ -1593,86 +1594,38 @@
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
     "node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-rkgb4a8/0b234lMGCT29WkCjPfsX0oxrIRR7FDndRoW3FsaC9NBzefXg/9TLhAgwM11f49XnutshM4LzJBrQ5g==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.0.0",
+        "@vueuse/shared": "13.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.0.0.tgz",
+      "integrity": "sha512-TRNksqmvtvqsuHf7bbgH9OSXEV2b6+M3BSN4LR5oxWKykOFT9gV78+C2/0++Pq9KCp9KQ1OQDPvGlWNQpOb2Mw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
-      "dependencies": {
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.0.0.tgz",
+      "integrity": "sha512-9MiHhAPw+sqCF/RLo8V6HsjRqEdNEWVpDLm2WBRW2G/kSQjb8X901sozXpSCaeLG0f7TEfMrT4XNaA5m1ez7Dg==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
       }
     },
     "node_modules/@wangeditor/basic-modules": {
@@ -2580,6 +2533,94 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
diff --git a/package.json b/package.json
index f0660f6..7f23e0a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^13.0.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.7.9",
diff --git a/src/components/DefaultCover.vue b/src/components/DefaultCover.vue
index abd28aa..48d2ad1 100644
--- a/src/components/DefaultCover.vue
+++ b/src/components/DefaultCover.vue
@@ -12,21 +12,22 @@ defineProps({
     required: true
   },
   size: {
-    type: Number,
+    type: String,
     required: false,
-    default: 200
+    default: '200px'
   }
 });
 
 const imageLoaded = ref(false);
+
 </script>
 <template>
-  <div class="image-container" :style="{background: setRandomBGCL(text), height: size + 'px'}">
+  <div class="image-container" :style="{background: setRandomBGCL(text), height: size}">
     <img :src="imageSrc" alt="image" class="image"
-         :style="{height: size + 'px', display: imageLoaded ? 'block' : 'none'}"
+         :style="{height: size, display: imageLoaded ? 'block' : 'none'}"
          @load="imageLoaded = true"
          @error="imageLoaded = false" />
-    <div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size + 'px'}">
+    <div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size}">
       {{ text[0] }}
     </div>
   </div>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 0860118..e7039a4 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,81 +1,80 @@
 <script setup>
+import {ref, onMounted} from 'vue'
+import {TransitionPresets, useTransition} from '@vueuse/core';
+import api from "../utils/axios.js";
+
+const source = ref(0);
+const viewCountDisplay = ref(true);
+const outputValue = useTransition(source, {
+  duration: 3000,
+  transition: TransitionPresets.easeOutExpo,
+})
+
+
+onMounted(async () => {
+  const response = await api.get('/view');
+  if (response.code === 0) {
+    source.value = response.views;
+  } else {
+    viewCountDisplay.value = false;
+  }
+
+})
 
 </script>
 
 <template>
   <div class="container">
-    <div class="container-home">
-      <header class="header">Header</header>
-      <aside class="sidebar">Sidebar</aside>
-      <main class="main-content">Main Content</main>
-    </div>
+    <el-container>
+      <div style="font-size: 50px; font-weight: inherit; padding: 20px">欢迎来到 MVA-CYBER !</div>
+<!--      <el-main>-->
+
+<!--      </el-main>-->
+<!--      <el-footer>-->
+<!--        <div class="text-bg"></div>-->
+        <el-col v-if="viewCountDisplay">
+          <el-statistic title="网站累计访问次数" :value="outputValue"/>
+        </el-col>
+
+<!--      </el-footer>-->
+    </el-container>
   </div>
 
 </template>
 
 <style scoped>
-.container {
-  display: flex;
+img {
+  position: absolute;
   width: 100%;
   height: 100%;
+}
+.el-container {
+  display: flex;
+  align-items: center;
   flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+
+}
+.el-main {
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+}
+.el-footer {
+  position: relative;
+}
+.el-col {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  justify-items: center;
 }
-/* 设置grid布局 */
-.container-home {
-  display: grid;
-  grid-template-columns: 1fr 3fr; /* 默认2列，侧边栏占1份，内容区占3份 */
-  grid-template-rows: auto 1fr; /* 头部行高度自适应，内容行占满剩余空间 */
-  grid-template-areas:
-    "header header"
-    "sidebar main-content";
-  gap: 20px; /* 设置行列间距 */
-  align-content: center;
-  width: 50rem;
-  height: 65vh; /* 使容器高度为视口高度 */
-  margin-bottom: 80px;
+.el-statistic {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
 }
-
-/* 设置头部 */
-.header {
-  grid-area: header;
-  background-color: #4CAF50;
-  color: white;
-  padding: 20px;
-  text-align: center;
-}
-
-/* 设置侧边栏 */
-.sidebar {
-  grid-area: sidebar;
-  background-color: #f4f4f4;
-  padding: 20px;
-  border-right: 2px solid #ccc;
-}
-
-/* 设置内容区域 */
-.main-content {
-  grid-area: main-content;
-  background-color: #ffffff;
-  padding: 20px;
-  border-left: 2px solid #ccc;
-}
-
-/* 响应式设计：小屏幕时，侧边栏会变为顶部 */
-@media (max-width: 768px) {
-  .container {
-    grid-template-columns: 1fr; /* 变成单列布局 */
-    grid-template-areas:
-      "header"
-      "sidebar"
-      "main-content"; /* 侧边栏在头部下面 */
-  }
-
-  .sidebar {
-    border-right: none; /* 去掉侧边栏的右边框 */
-    border-bottom: 2px solid #ccc; /* 小屏幕时侧边栏的底部有个边框 */
-  }
-}
-
 </style>
\ No newline at end of file
diff --git a/src/pages/blogPages/blogEditor.vue b/src/pages/blogPages/blogEditor.vue
index 9575315..11a189a 100644
--- a/src/pages/blogPages/blogEditor.vue
+++ b/src/pages/blogPages/blogEditor.vue
@@ -3,7 +3,7 @@
     <el-container>
       <el-aside width="auto">
         <div class="side-bar" v-if="blogStatus !== null">
-          <el-button type="primary" @click="submitBlog">{{ (blogStatus === 0 ? '发布' : '更改') + (mobileTest() ? '' : (blogStatus===0?'博客':'设置')) }}</el-button>
+          <el-button type="primary" @click="submitBlog">{{ (blogStatus === 1 ? '设置' : '发布') + (mobileTest() ? '' : (blogStatus === 1 ? '信息' : '博客')) }}</el-button>
           <el-button type="success" @click="saveBtn">{{ blogStatus === 1 ? '更新' : '保存' }}{{ mobileTest() ? '' : (blogStatus === 0 ? '草稿' : '博客') }}</el-button>
 
           <el-button v-if="!viewing" type="warning" @click="viewing = true">{{
diff --git a/src/router/index.js b/src/router/index.js
index d3bf431..9adef1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -35,6 +35,7 @@ import SingleBlog_page from "../pages/blogPages/SingleBlog_page.vue";
 import SubmitBlog_page from "../pages/blogPages/submitBlogPages/SubmitBlog_page.vue";
 import swal from "../utils/sweetalert.js";
 import GunGame_page from "../pages/demoPages/gunGame/gunGame_page.vue";
+import api from "../utils/axios.js";
 
 const routes = [
     {path: '/404',
@@ -148,6 +149,12 @@ const router = createRouter({
 let previousRoute = null
 router.beforeEach(async (to, from, next) => {
     previousRoute = from;
+
+    if (!store.state.isViewCounted) {
+        api.post('/view');
+        store.state.isViewCounted = true;
+    }
+
     if (!store.state.userInfo.uid && store.state.token) {
         AuthService.setSelfInfo();
     }
diff --git a/src/store/index.js b/src/store/index.js
index d6315ad..7549411 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -19,7 +19,8 @@ const store = createStore({
         sessionStore: {
             account: {}
         },
-        userPreference: {}
+        userPreference: {},
+        isViewCounted: false
     },
     mutations: {
         toggleTheme(state) {
@@ -125,7 +126,7 @@ const store = createStore({
         }),
         createSessionStatePlugin({
             key: 'cyberStorage',
-            whitelist: []
+            whitelist: ['isViewCounted']
         })
     ]
 })
diff --git a/src/utils/randomIMG.js b/src/utils/randomIMG.js
index bd18df6..f50567b 100644
--- a/src/utils/randomIMG.js
+++ b/src/utils/randomIMG.js
@@ -1,4 +1,7 @@
 export function getRandomIMG(seed, category) {
+    if (typeof seed !== 'number') {
+        seed = Math.random();
+    }
     let url;
     const urls = [
         // `https://www.loliapi.com/acg`,