diff --git a/src/assets copy/scss/common/_themes.scss b/src/assets copy/scss/common/_themes.scss
index 103a4f5aed73bf27adb0689e0c57a74a44d6d8e6..eb77a84d7372e011a361c494e4ef2f24e6213939 100644
--- a/src/assets copy/scss/common/_themes.scss	
+++ b/src/assets copy/scss/common/_themes.scss	
@@ -2,7 +2,7 @@ $themes: (
   light: (
     background_color: #f2f2f2,
     //背景色
-    background_color2: rgb(16, 102, 136),
+    background_color2: #fff,
     text-color: #000,
     // 主文本色
   ),
@@ -13,5 +13,5 @@ $themes: (
     //背景
     text-color: #fff,
     // 主文本色
-  )
+  ),
 );
diff --git a/src/components/ArticleClassify.vue b/src/components/ArticleClassify.vue
index 40d268e2d3ddd667c8b7990fd333fa0a832ef312..61bfb76f472af3029fcb13c07796000c326235de 100644
--- a/src/components/ArticleClassify.vue
+++ b/src/components/ArticleClassify.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 归档页的文章标签 -->
   <div class="articleClassify">
     <p>文章标签</p>
     <ul>
@@ -15,7 +16,7 @@ import { useStore } from 'vuex'
 export default {
   setup() {
     let store = useStore()
-    store.dispatch('get_Classify')
+    store.dispatch('getClassify')
     //获取当前分类下文章数量
     const count = (value) => {
       return store.state.articleList.filter((item) => {
@@ -32,7 +33,7 @@ export default {
 <style lang="scss">
 .articleClassify {
   width: 100%;
-  background-color: #fff;
+  background: #fff;
   padding: 20px;
   margin-top: 50px;
   animation: 0.5s run linear;
diff --git a/src/components/ArticleList.vue b/src/components/ArticleList.vue
index c51e3861f8374674216bd2c18427293283403c91..d77febaf0afa365e84e07a96a64b8977b3eba8d1 100644
--- a/src/components/ArticleList.vue
+++ b/src/components/ArticleList.vue
@@ -36,12 +36,14 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../assets copy/scss/common/common.scss';
 .articleList {
-  width: 100%;
+  // width: 100%;
   padding: 20px;
   border-bottom: 1px solid #eee;
   background-color: #fff;
   animation: 1s linear opa;
+  @include background_color2('background_color2');
   .art-title {
     margin-bottom: 15px;
     span:hover {
diff --git a/src/components/ArticleTag.vue b/src/components/ArticleTag.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5a0ef5d65c6841d4d95b2dd3723277cafaf7afa
--- /dev/null
+++ b/src/components/ArticleTag.vue
@@ -0,0 +1,68 @@
+<template>
+  <!-- 文章页的文章标签 -->
+  <div class="ariticleTag">
+    <p class="ariticleTag-title">文章标签</p>
+    <div class="ariticleTag-main">
+      <p v-for="item in tagList" :key="item.id" @click="handleRouterClick(item)">{{ item.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+export default {
+  setup() {
+    let store = useStore()
+    store.dispatch('getTag')
+    const tagList = computed(() => {
+      return store.state.tagList
+    })
+    const handleRouterClick = (item) => {
+      console.log('123', item)
+      store.dispatch('getTagClassify', item.name)
+    }
+    return { tagList, handleRouterClick }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../assets copy/scss/common/common.scss';
+.ariticleTag {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  margin-top: 50px;
+  animation: 0.5s run linear;
+  @include background_color2('background_color2');
+  .ariticleTag-title {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eee;
+  }
+  .ariticleTag-main {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    p {
+      padding: 5px 10px;
+      border: 1px solid #eee;
+      color: #999;
+      margin-top: 15px;
+    }
+    p:hover {
+      border: 1px solid red;
+      color: red;
+    }
+  }
+}
+@keyframes run {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+</style>
diff --git a/src/components/ReadMod.vue b/src/components/ReadMod.vue
index fc8e0cfbad52db9d0d705674cad3bfa4009bcf4b..3c1cef3c7ac7037c0b1e10723097ca689c1ae72f 100644
--- a/src/components/ReadMod.vue
+++ b/src/components/ReadMod.vue
@@ -27,11 +27,14 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../assets copy/scss/common/common.scss';
 .readMod {
   width: 100%;
-  background-color: #fff;
   padding: 20px;
   animation: 0.5s run linear;
+  background: #fff;
+  @include background_color2('background_color2');
+
   .readMod-title {
     padding-bottom: 20px;
     border-bottom: 1px solid #eee;
diff --git a/src/components/SearchPages/indexBox.vue b/src/components/SearchPages/indexBox.vue
index 65cdf676d9b63ab58d6b9a78674d639234b92efa..75c82d93de328da39531e5876e956d6203479d0a 100644
--- a/src/components/SearchPages/indexBox.vue
+++ b/src/components/SearchPages/indexBox.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 文章列表 -->
-  <div class="articleList" v-for="item in searchLists" :key="item.id">
+  <div class="articleLists" v-for="item in searchLists" :key="item.id">
     <div class="art-title">
       <span style="font-weight: 600">{{ item.title }}</span>
       <span style="color: #999">{{ item.date }}</span>
@@ -39,7 +39,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.articleList {
+.articleLists {
   width: 70%;
   padding: 20px;
   border-bottom: 1px solid #eee;
diff --git a/src/i18n/demo.html b/src/i18n/demo.html
deleted file mode 100644
index e46ca6fe7ee3393ecc26ba0fcc4328df9901482d..0000000000000000000000000000000000000000
--- a/src/i18n/demo.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-  <head>
-    <meta charset="utf-8" />
-    <title>Inherit locale example</title>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="https://unpkg.com/vue-i18n@9"></script>
-  </head>
-
-  <body>
-    <div id="app">
-      <h1>Root</h1>
-      <form>
-        <label for="locale-select">{{ t('message.language') }}</label>
-        <select id="locale-select" v-model="locale">
-          <option value="en">en</option>
-          <option value="ja">ja</option>
-        </select>
-      </form>
-      <p class="parent">{{ t("message.hello") }}</p>
-      <Child />
-    </div>
-    <script>
-      const { createApp } = Vue
-      const { createI18n, useI18n } = VueI18n
-
-      const Child = {
-        template: `
-          <div class="child">
-            <h1>Child</h1>
-            <form>
-              <label>{{ t('message.language') }}</label>
-              <select v-model="locale">
-                <option value="en">en</option>
-                <option value="ja">ja</option>
-              </select>
-              <input type="checkbox" id="checkbox" v-model="inheritLocale">
-              <label for="checkbox">{{ t('message.inherit') }}</label>
-            </form>
-            <p class="child">{{ t('message.hi') }}</p>
-          </div>
-        `,
-        setup() {
-          return useI18n({
-            locale: 'en',
-            inheritLocale: true,
-            messages: {
-              en: {
-                message: {
-                  language: 'Language',
-                  inherit: 'Inherit locale from root',
-                  hello: 'hello earth!',
-                  hi: 'Hi there!'
-                }
-              },
-              ja: {
-                message: {
-                  language: '言語',
-                  inherit: 'root から locale を継承する',
-                  hello: 'こんにちは、地球！',
-                  hi: 'やあ！'
-                }
-              }
-            }
-          })
-        }
-      }
-
-      const i18n = createI18n({
-        legacy: false,
-        locale: 'ja',
-        messages: {
-          en: {
-            message: {
-              language: 'Language',
-              hello: 'hello world!',
-              hi: 'Hi !'
-            }
-          },
-          ja: {
-            message: {
-              language: '言語',
-              hello: 'こんにちは、世界！',
-              hi: 'こんにちは！'
-            }
-          }
-        }
-      })
-
-      const app = createApp({
-        components: { Child },
-        setup() {
-          const { t, locale } = useI18n()
-
-          // Something to do ...
-          //
-
-          return { t, locale }
-        }
-      })
-      app.use(i18n)
-      app.mount('#app')
-    </script>
-  </body>
-
-</html>
diff --git a/src/i18n/language.ts b/src/i18n/language.ts
index 8abbea1314ed78453079ac4b1f332adbc8687848..c840f24e582f3b5c078a0a95346bd09dfcf14382 100644
--- a/src/i18n/language.ts
+++ b/src/i18n/language.ts
@@ -25,6 +25,7 @@ export const messages: any = {
       chat: 'Chat',
       management: 'Management',
       withdraw: 'Withdraw',
+      foot: 'In the end',
     },
   },
   ja: {
@@ -38,6 +39,7 @@ export const messages: any = {
       chat: '聊天',
       management: '页面管理',
       withdraw: '退出登录',
+      foot: '到底了',
     },
   },
 }
diff --git a/src/store/index.js b/src/store/index.js
index 2a59a9b34b48beb406cf63da7d715b5872ece999..9e91d95bb6c0454a1365bf9baddf09ae94dc03e5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -14,6 +14,10 @@ export default createStore({
     articleList: [],
     //文章分类列表
     classifyList: [],
+    //文章页的文章标签
+    tagList: [],
+    //文章页的分类文章列表
+    archiveClassify: [],
     //搜索
     searchList: [],
     //详情页
@@ -41,6 +45,12 @@ export default createStore({
     SET_CLASSIFY(state, data) {
       state.classifyList = data.data
     },
+    SET_TAG_LIST(state, data) {
+      state.tagList = data.data
+    },
+    SET_ARCHIVE_CLASSIFY(state, data) {
+      state.archiveClassify = data
+    },
   },
   // 处理异步
   // 请求接口，处理异步数据
@@ -83,7 +93,6 @@ export default createStore({
     async getPageList({ commit }) {
       try {
         let response = await getHttp('/api/get_Page_client')
-        // console.log(response.data)
         commit('SET_PAGE', { data: response.data })
       } catch (error) {
         return { code: 0 }
@@ -93,27 +102,59 @@ export default createStore({
     async getArticle({ commit }) {
       try {
         let response = await getHttp('/api/get_Articles_client')
-        // console.log('123', response.data.data)
         commit('SET_ARTICLES', { data: response.data.data })
       } catch (error) {
         return { code: 0 }
       }
     },
-    //获取文章分类列表
+    //获取文章分类列表  归档页文章标签
     async getClassify({ commit }) {
       try {
         let response = await getHttp('/api/get_Articles_Classify_client')
-        console.log('1234', response.data.data)
         commit('SET_CLASSIFY', { data: response.data.data })
       } catch (error) {
         return { code: 0 }
       }
     },
+    //文章页的文章标签
+    async getTag({ commit }) {
+      try {
+        let response = await getHttp('/api/get_Articles_Tag_client')
+        commit('SET_TAG_LIST', { data: response.data.data })
+      } catch (error) {
+        return { code: 0 }
+      }
+    },
+    //文章类的文章标签的切换
+    async getTagClassify({ commit, dispatch, state }, payload) {
+      try {
+        await dispatch('getArticle')
+        let data = state.articleList.filter((item) => {
+          console.log(data)
+          return item.tag.inclues(payload)
+        })
+      } catch (error) {
+        return { code: 0 }
+      }
+    },
+    //文章页的分类文章列表 的切换
+    async getArchiveClassify({ commit, dispatch, state }, payload) {
+      try {
+        await dispatch('getArticle')
+        // 进行筛选
+        let data = state.articleList.filter((item) => {
+          console.log(item)
+          return item.classify == payload
+        })
+        commit('SET_ARCHIVE_CLASSIFY', data)
+      } catch (error) {
+        return { code: 0 }
+      }
+    },
     //搜索页面获取文章数据
     async getSearchList({ commit }, payload) {
       try {
         let response = await getHttp('/api/search_Articles_client', payload)
-        console.log(response.data)
         if (response.data.statu === 200) {
           commit('SET_SEARCH_LIST', { data: response.data })
         }
@@ -125,7 +166,6 @@ export default createStore({
     async getDetailPage({ commit }, payload) {
       try {
         let response = await getHttp('/api/get_Detail_client', payload)
-        console.log('详情', response.data.data)
         if (response.data.statu === 200) {
           commit('SET_DETAIL_PAGE', { data: response.data.data })
         }
@@ -137,7 +177,6 @@ export default createStore({
     async getGive({ dispatch }, payload) {
       try {
         let response = await postHttp('/api/give', payload)
-        console.log(response.data)
         if (response.data.statu === 200) {
           dispatch('getDetailPage', { id: payload.articleId })
         }
diff --git a/src/views/Archive-Classify.vue b/src/views/Archive-Classify.vue
index e1778a4f72a3ea303a39dda6683c1f369a858202..98b6183f9defc3789ecc4ec48d8255db057e9bca 100644
--- a/src/views/Archive-Classify.vue
+++ b/src/views/Archive-Classify.vue
@@ -4,22 +4,22 @@
     <ul class="head-archiveClassify">
       <li>
         文章类型:
-        <b>{{ $route.params.archiveClassify }}</b>
+        <b>{{ routerclassify }}</b>
       </li>
       <li>
         共搜索到
-        <b>{{ $store.state.archiveClassify.length }}</b
+        <b>{{ archiveClassifylength }}</b
         >篇&nbsp;
       </li>
     </ul>
     <div class="left-art-main">
-      <ArticleList :list="$store.state.archiveClassify" />
+      <ArticleList :list="archiveClassify" />
     </div>
   </div>
 </template>
 
 <script>
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import ArticleList from '../components/ArticleList.vue'
@@ -28,6 +28,15 @@ export default {
   setup() {
     let route = useRoute()
     let store = useStore()
+    let routerclassify = computed(() => {
+      return route.params.archiveClassify
+    })
+    let archiveClassifylength = computed(() => {
+      return store.state.archiveClassify.length
+    })
+    let archiveClassify = computed(() => {
+      return store.state.archiveClassify
+    })
     watch(
       () => route.params.archiveClassify,
       (classify) => {
@@ -37,21 +46,24 @@ export default {
         immediate: true,
       },
     )
-    return {}
+    return { routerclassify, archiveClassifylength, archiveClassify }
   },
 }
 </script>
 
 <style lang="scss">
+@import '../assets copy/scss/common/common.scss';
 .archive-classify {
   width: 100%;
   margin-top: 20px;
   display: flex;
   flex-direction: column;
+  background: #fff;
+  @include background_color2('background_color2');
+  @include font_color('text-color');
   .head-archiveClassify {
     width: 100%;
     height: 100px;
-    background-color: #fff;
     border-bottom: 1px solid #eee;
     display: flex;
     flex-direction: column;
diff --git a/src/views/Archive.vue b/src/views/Archive.vue
index 8ce891a77d8f18439840455e3fa41f3ae04fbe1f..c4251ba847b90eb3cbb402ec500f150f3be8701f 100644
--- a/src/views/Archive.vue
+++ b/src/views/Archive.vue
@@ -1,14 +1,116 @@
 <template>
   <!-- 归档页 -->
-  <div></div>
+  <div class="archive">
+    <div class="left-archive">
+      <div class="head-archive">
+        <h2>归档</h2>
+        <p>
+          共计
+          <b>{{ articleListLength }}</b> 篇
+        </p>
+      </div>
+      <div class="main-archive">
+        <!-- 时间轴 -->
+        <el-card class="el-timeline-hover">
+          <el-timeline>
+            <el-timeline-item v-for="item in articleList" :key="item.id" @click="$router.push('/detail/' + item.id)">
+              <div class="times">
+                <span>{{ item.date.slice(5, 9).replace('/', '-') }}</span>
+                <h4>{{ item.title }}</h4>
+              </div>
+              <br />
+              <!-- <p>
+                <span>{{ item.tag.slice(0, 10).replace(',', ' ') }}</span>
+              </p> -->
+            </el-timeline-item>
+          </el-timeline>
+        </el-card>
+      </div>
+    </div>
+    <div class="right-archive">
+      <ReadMod />
+      <ArticleClassify />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
 
-export default defineComponent({
+<script>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import ReadMod from '../components/ReadMod.vue'
+import ArticleClassify from '../components/ArticleClassify.vue'
+import { ElTimeline, ElTimelineItem, ElCard } from 'element-plus'
+export default {
+  components: { ReadMod, ArticleClassify, ElTimeline, ElTimelineItem, ElCard },
   setup() {
-    return {}
+    let store = useStore()
+    store.dispatch('getArticle')
+    const articleList = computed(() => {
+      return store.state.articleList
+    })
+    const articleListLength = computed(() => {
+      return store.state.articleList.length
+    })
+    return { articleList, articleListLength }
   },
-})
+}
 </script>
-<style></style>
+
+<style lang="scss">
+.archive {
+  width: 62%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .left-archive {
+    width: 69%;
+    height: 100%;
+    background-color: #fff;
+    animation: 1s linear runtransform;
+    .head-archive {
+      width: 100%;
+      height: 100px;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      padding: 20px 0;
+      h2 {
+        color: red;
+        font-weight: 400;
+      }
+      b {
+        color: red;
+      }
+    }
+    .main-archive {
+      width: 100%;
+      padding: 5%;
+      background-color: #fff;
+      .el-timeline-hover {
+        box-shadow: 1px 1px 3px orange;
+        .times {
+          display: flex;
+          span {
+            padding: 0 20px;
+          }
+        }
+      }
+    }
+  }
+  .right-archive {
+    width: 18%;
+    position: fixed;
+    right: 19%;
+  }
+}
+@keyframes runtransform {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+</style>
diff --git a/src/views/Article.vue b/src/views/Article.vue
index ef1b5d7dae07742c1a9c3aee81400103295fd6b7..5b21638344c804b2433b8152a6b3c3e2503be82f 100644
--- a/src/views/Article.vue
+++ b/src/views/Article.vue
@@ -19,6 +19,7 @@
     </div>
     <div class="right-art">
       <ReadMod />
+      <ArticleTag />
     </div>
   </div>
 </template>
@@ -28,8 +29,9 @@ import { useStore } from 'vuex'
 import { computed } from 'vue'
 import ArticleList from '../components/ArticleList.vue'
 import ReadMod from '../components/ReadMod.vue'
+import ArticleTag from '../components/ArticleTag.vue'
 export default {
-  components: { ArticleList, ReadMod },
+  components: { ArticleList, ReadMod, ArticleTag },
   setup() {
     let store = useStore()
     store.dispatch('getClassify')
@@ -40,25 +42,29 @@ export default {
     const articleClassify = computed(() => {
       return store.state.classifyList
     })
-    console.log('111', articleClassify)
     return { articleList, articleClassify }
   },
 }
 </script>
 
 <style lang="scss">
+@import '../assets copy/scss/common/common.scss';
 .article {
   width: 62%;
   display: flex;
   justify-content: space-between;
+  color: #000;
+  @include background_color('background_color');
+  @include font_color('text-color');
   .left-art {
     width: 69%;
     .left-art-head {
       width: 100%;
       display: flex;
       padding: 20px;
-      background-color: #fff;
       border-bottom: 1px solid #eee;
+      background: #fff;
+      @include background_color2('background_color2');
       span {
         margin-right: 3%;
       }
@@ -71,8 +77,14 @@ export default {
       display: flex;
       flex-direction: column;
       flex: 1;
+      @include background_color('background_color');
+      @include font_color('text-color');
     }
   }
+  // .articleList {
+  //   width: 100%;
+  //   height: 100%;
+  // }
   .right-art {
     width: 18%;
     position: fixed;
diff --git a/src/views/Detail.vue b/src/views/Detail.vue
index f4286a9fc9f9f43c76d4e5f55af825645ae2e5da..31c4004a4d7c5c00d132b8dfbf6ab390dbb05f05 100644
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
@@ -2,7 +2,7 @@
   <!-- 详情页 -->
   <div class="detail">
     <div class="left-detail" v-for="item in detailList" :key="item.id">
-      <img :src="item.img" alt />
+      <img style="object-fit: cover" :src="item.img" alt />
       <h1>{{ item.title }}</h1>
       <i class="tag-detail">
         发布于:
@@ -51,10 +51,10 @@ export default {
         userId: store.state.user.id,
       })
     }
+    // 获取vuex详情数据
     const detailList = computed(() => {
       return store.state.detail
     })
-    console.log('1', detailList)
     watch(
       () => route.params.id,
       (id) => {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6e7c1060da57069e708fc12aea528f58d50ecc06..2e0254b53ae376dd00c77ef04213f9092771f9ae 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -63,6 +63,7 @@
         <router-view />
       </div>
     </main>
+    <footer>{{ $t('customs.foot') }}</footer>
   </div>
 </template>
 
@@ -217,5 +218,9 @@ export default {
       margin-top: 1%;
     }
   }
+  footer {
+    color: #000;
+    @include font_color('text-color');
+  }
 }
 </style>
diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index e810f2d0218a1d8f4c73d159e26967400ec0ae57..9d80e7a6065431572fe02d9d996c68553a482993 100644
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -50,6 +50,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '../assets copy/scss/common/common.scss';
 .search {
   width: 100vw;
   min-height: 100vh;
@@ -59,7 +60,8 @@ export default defineComponent({
   animation: 1s linear runtransform;
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+  @include background_color2('background_color2');
+  @include font_color('text-color');
   .head-title {
     width: 100%;
     height: 70px;