diff --git a/src/App.vue b/src/App.vue
index 65c7a00ece0f542b8acc17fe735874f5f3d7f227..7bd66adbe7efdb74accc3da0e26a8708602f3752 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,11 +19,12 @@ html,
 body {
   width: 100%;
   height: 100%;
+  background: #ffff;
 }
 
 #app {
-  width: 100%;
-  height: 100%;
-  
+  width: 100vw;
+  height: 100vh;
+  background: #ffff;
 }
 </style>
diff --git "a/src/assets/\344\270\213\350\275\275.jpg" "b/src/assets/\344\270\213\350\275\275.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6403319ad314d317812711c296bcc59ede4136ff
Binary files /dev/null and "b/src/assets/\344\270\213\350\275\275.jpg" differ
diff --git "a/src/assets/\346\220\234\347\264\242.png" "b/src/assets/\346\220\234\347\264\242.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6eab0b222d5af8474719a4f31e795ff697fb7362
Binary files /dev/null and "b/src/assets/\346\220\234\347\264\242.png" differ
diff --git a/src/components/Article.vue b/src/components/Article.vue
index e302afc1cb7d152d60264314662c9d6242e8a8ff..9123b16240ba2673754b1d72e525b4f147a3cc77 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,65 +1,79 @@
 <template>
   <div class="left">
     <!-- 轮播 -->
-    <el-card class="box-card">
+    <el-c ard class="box-card">
       <div class="text item" v-if="state.flag1" m="t-4">
         <el-carousel height="300px">
-          <el-carousel-item v-for="item in list" :key="item">
+          <el-carousel-item
+            v-for="item in list"
+            :key="item"
+            @click="Detail(item.id)"
+          >
             <h3 class="small justify-center" text="2xl">
-              <img :src="item.img" alt="">
+              <img :src="item.img" alt="" />
             </h3>
           </el-carousel-item>
         </el-carousel>
       </div>
-    </el-card>
-
-       <div :v-else="state.flag1" class="left-top">
-          <p>
-            <span>{{ state.id}}</span>分类文章
-          </p>
-
-          <!-- <p>
-            共搜索到<span>{{ state.LeftTop.articleCount }}</span>篇
-          </p> -->
-
-        </div>
-         <h3>{{ state.flag ? '文章分类' : '文章标签' }}</h3>
+    </el-c>
+   <!-- 三元运算符切换 -->
+    <div :v-else="state.flag1" class="left-top">
+      <p>
+        <span>{{ state.id }}</span
+        >分类文章
+      </p>
+    </div>
+    <h3>{{ state.flag ? '文章分类' : '文章标签' }}</h3>
     <!-- 分类 -->
     <el-card class="box-card3">
       <template #header>
         <div class="card-header">
-           <el-tabs  v-model="activeName"  class="demo-tabs"
-        @click="handleClick()">
+          <el-tabs
+            v-model="activeName"
+            class="demo-tabs"
+            @click="handleClick()"
+          >
             <div>
               <el-tab-pane label="所有数据" name="所有数据">
-              <div class="text item" v-for="item in list" :key="item">
-                    <dl @click="Detail(item.id)">
-                      <dt>
+                <div class="text item" v-for="item in list" :key="item">
+                  <dl>
+                    <dt>
+                      <span>
+                        <h2 @click="Detail(item.id)">{{ item.title }}</h2>
+                      </span>
+                      <span style="color: #8590a6" class="bq">{{
+                        filterTime(item.date)
+                      }}</span>
+                      <span style="color: #8590a6">{{ item.love }}</span>
+                    </dt>
+                    <dd>
+                      <img :src="item.img" alt="" />
+                      <div class="fx">
+                        <span style="margin: 0 6px">
+                          <i class="iconfont icon-kongxin"></i> {{ item.love }}
+                        </span>
+                        <span style="margin: 0 6px">·</span>
+                        <span style="margin: 0 6px">
+                          <i class="iconfont icon-yanjing"></i>
+                          {{ item.reading }}
+                        </span>
+                        <span style="margin: 0 6px">·</span>
                         <span>
-                          <h2>{{ item.title }}</h2>
+                          <i class="iconfont icon-fenxiang"></i>
+                          分享
                         </span>
-                        <span style="color:#8590a6" class='bq'>{{ filterTime(item.date) }}</span>
-                        <span style="color:#8590a6">{{ item.love }}</span>
-                      </dt>
-                      <dd>
-                        <img :src="item.img" alt="">
-                        <div class='fx'>
-                          <span style="margin:0 6px"> <i class="iconfont icon-kongxin"></i> {{ item.love }} </span>
-                          <span style="margin:0 6px">·</span>
-                          <span style="margin:0 6px"> <i class="iconfont icon-yanjing"></i> {{ item.reading }} </span>
-                          <span style="margin:0 6px">·</span>
-                          <span>
-                            <i class="iconfont icon-fenxiang"></i>
-                            分享
-                          </span>
-                        </div>
-                      </dd>
-                    </dl>
-                  </div>
+                      </div>
+                    </dd>
+                  </dl>
+                </div>
               </el-tab-pane>
-             <el-tab-pane  v-for="(item, index) in state.flag2 ? title : leat" :key="index" :label="item.name"
-             :name="index">
-              ||暂无数据
+              <el-tab-pane
+                v-for="(item, index) in state.flag2 ? title : leat"
+                :key="index"
+                :label="item.name"
+                :name="index"
+              >
+                ||暂无数据
               </el-tab-pane>
             </div>
           </el-tabs>
@@ -67,36 +81,36 @@
       </template>
     </el-card>
   </div>
-
-  <div class="right">
-    <!-- 标题 -->
-    
-    <el-card class="box-card1">
-      <template #header>
-        <div class="card-header">
-          <h1>标题</h1>
-        </div>
-      </template>
-      <div v-for="item in list" :key="item"  class="text item">
-        <span class="textitem"> {{ item.title }}</span>
-        <span style="margin:0 6px">.</span>
-        <span style="color:#8590a6">{{ filterTime(item.date) }}</span>
-      </div>
-    </el-card>
-
+ 
+  <div class="righta">
+    <HomeSidebar></HomeSidebar>
     <!-- 标签 -->
     <el-card class="box-card2">
       <template #header>
-        <div class="card-header">
-          <h1 >文章标签</h1>
-        </div>
+        
       </template>
-      <el-tag v-if="state.flag2" v-for="item in title" :key="item" class="ml-2" type="info">
-        <span @click="handleTab" style="color:#8590a6" class="textite">{{ item.name }}</span>
+      <el-tag
+        v-if="state.flag2"
+        v-for="item in title"
+        :key="item"
+        class="ml-2"
+        type="info"
+      >
+        <span @click="handleTab" style="color: #8590a6" class="textite">{{
+          item.name
+        }}</span>
+      </el-tag>
+      <el-tag
+        v-else="state.flag2"
+        v-for="item in leat"
+        :key="item.id"
+        class="ml-2"
+        type="info"
+      >
+        <span @click="handleTab" style="color: #8590a6" class="textite">{{
+          item.name
+        }}</span>
       </el-tag>
-      <el-tag v-else="state.flag2" v-for="item in leat" :key="item.id" class="ml-2" type="info">
-          <span @click="handleTab"  style="color:#8590a6" class="textite">{{ item.name }}</span>
-        </el-tag>
       <!-- <div v-for="item in leat" :key="item" class="text">
          <span style="color:#8590a6" class='item'>{{ item.name }}</span>
       </div> -->
@@ -104,11 +118,11 @@
   </div>
 </template>
 <script lang="ts">
-import router from '@/router'
-import { computed, defineComponent, reactive,ref } from 'vue'
-import { filterTime } from "../utils/index"
+import { computed, defineComponent, reactive, ref } from 'vue'
+import { filterTime } from '../utils/index'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
+import HomeSidebar from './HomeSidebar.vue'
 import { Item } from 'ant-design-vue/lib/menu'
 interface TypeList {
   Left: any
@@ -120,11 +134,15 @@ interface TypeList {
   LeftTop: any
   swiper: any
   flag1: boolean
-  flag2:boolean
+  flag2: boolean
 }
 export default defineComponent({
+   components: {
+   HomeSidebar
+    
+  },
   setup(props, context) {
-     const state: TypeList = reactive({
+    const state: TypeList = reactive({
       Left: [],
       Right: [],
       Tui: [],
@@ -136,7 +154,7 @@ export default defineComponent({
       flag2: true,
       swiper: []
     })
-    const activeName:any = ref(0)
+    const activeName: any = ref(0)
     const router = useRouter()
     const store = useStore()
     //获取vuex数据
@@ -158,17 +176,17 @@ export default defineComponent({
 
     // const qwe=leat.find((v,i)=>v.name===activeName.value)
 
-    console.log('wangaoqi', leat);
+    console.log('wangaoqi', leat)
 
     //跳详情
     const Detail = (id: any) => {
-      console.log('id', id);
+      console.log('id', id)
       router.push(`/detail/${id}`)
     }
     //切换按钮
-     const handleClick = () => {
-          console.log('activeName', activeName.value);
-       state.id = activeName.value
+    const handleClick = () => {
+      console.log('activeName', activeName.value)
+      state.id = activeName.value
       if (state.flag) {
         // Ri
         state.LeftTop = state.Left[state.id]
@@ -179,24 +197,23 @@ export default defineComponent({
       getSwiper()
     }
 
-     //swiper
-     const getSwiper=()=>{
+    //swiper
+    const getSwiper = () => {
       if (activeName.value === '所有数据') {
         if (state.flag) {
-          state.flag1 =true
+          state.flag1 = true
         } else {
-          state.flag1 =false
+          state.flag1 = false
         }
       } else {
         state.flag1 = false
       }
     }
-   
+
     //右下
-    const handleTab=()=>{
-       state.flag2 =!state.flag2
+    const handleTab = () => {
+      state.flag2 = !state.flag2
     }
-    
 
     return {
       list,
@@ -212,7 +229,7 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .left {
   width: 66%;
   height: 100%;
@@ -225,28 +242,27 @@ export default defineComponent({
     }
   }
   .left-top {
-      width: 100%;
-      background-color: rgb(0, 0, 0, 0.2);
-      margin-bottom: 20px;
-      text-align: center;
-      padding: 20px 0;
+    width: 100%;
+    background-color: rgb(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+    text-align: center;
+    padding: 20px 0;
 
-      p {
-        width: 100%;
+    p {
+      width: 100%;
 
-        span {
-          color: #ec029a;
-          font-size: 30px;
-          display: inline-block;
-          padding: 0 5px;
-        }
+      span {
+        color: #ec029a;
+        font-size: 30px;
+        display: inline-block;
+        padding: 0 5px;
       }
     }
+  }
   // box-shadow: 2px 2px 4px #000000;
   .box-card3 {
     margin-top: 20px;
     width: 100%;
-
   }
 
   dl dt {
@@ -275,14 +291,12 @@ export default defineComponent({
     width: 200px;
     height: 100px;
   }
-
 }
 
-.right {
+.righta {
   width: 32%;
-  height: 100%;
+  
   color: white;
-  margin-top: 10px;
 
   // box-shadow: 2px #000000;
   .text {
@@ -292,33 +306,19 @@ export default defineComponent({
   .item {
     padding: 18px 0;
   }
- .textitem:hover{
-     color: #F76D88;
-     font-size: 20px;
- }
- .ml-2:hover{
-
-     font-size: 20px;
-     background: rgb(81, 101, 134)
- }
-  .box-card1 {
-    margin-top: 20px;
-    width: 433px;
-
+  .textitem:hover {
+    color: #f76d88;
+    font-size: 20px;
   }
-
-  .card-header {
-    height: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  .ml-2:hover {
+    font-size: 20px;
+    background: rgb(81, 101, 134);
   }
 
   .text {
     font-size: 14px;
   }
 
-
   .box-card2 {
     margin-top: 20px;
     width: 433px;
@@ -334,5 +334,5 @@ export default defineComponent({
     border: 1px solid rgb(185, 185, 185);
     margin: 5px;
   }
-
-}</style>
+}
+</style>
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index 65450b75e0a93d3fe317491e8f12ee2e36624e50..fe81b4738be54db1741c0365a1da6a2a3bcd2359 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -1,68 +1,160 @@
 <template>
   <div class="left">
     <el-card class="box-card">
-      <!-- <img :src="state.value.img" alt=""> -->
-      <el-card></el-card>
+      <img :src="detail.img" alt="">
+        <h1>{{detail.title}}</h1>
+          <span style="color:#8590a6"> 发布于{{detail.date }}</span>
+          <span style="color:#8590a6">{{ detail.love }}</span>
+
+
+          <!-- 点击 -->
+          <el-button text @click="surePay">
+              click to open the Dialog
+          </el-button>
+
+
+  <!-- <el-dialog
+    v-model="dialogVisible"
+    title="Tips"
+    width="30%"
+  >
+    <span>This is a message</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog> -->
+
+
+
     </el-card>
+
+    <el-card class="box-card1">
+        <u-fold unfold line="1">
+        <p>
+          时间不是某种从我们身上流过的东西，而就是我的生命。弃我而去的不是日历上的一个个日子，而是我生命中的岁月；甚至也不仅仅是我的岁月，而就是我自己。我不但找不回逝去的岁月，而且也找不回从前的我了。
+       </p>
+        </u-fold>
+    </el-card>
+
+    <el-card class="box-card2">
+      <Pinglun/>
+
+    </el-card>
+
+
   </div>
 
   <div class="right">
-    <el-card class="box-card1">
+        <el-card class="box-card1">
       <template #header>
         <div class="card-header">
-          <span>Card name</span>
-          <el-button class="button" text>Operation button</el-button>
+          <h1>推荐阅读</h1>
         </div>
       </template>
-      <!-- <div v-for="item in detail 2" :key="item" class="text item">{{ 'List item ' + o }}</div> -->
+      <div v-for="item in list" :key="item" class="text item">
+        <span class="textitem" > {{ item.title }}</span>
+        <span style="margin: 0 6px">.</span>
+        <span style="color: #8590a6">{{ filterTime(item.date) }}</span>
+      </div>
     </el-card>
   </div>
+  <!-- <div class="top">
+     <input type="text" placeholder="写下你的评论..."   class="inout">
+     <span>
+      <svg t="1678957702341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17105" width="16" height="16"><path d="M149.731 89.352c-120.756 0-120.756 120.756-120.756 120.756v442.755c0 0 0 120.756 120.756 120.756h50.295c20.106 0 17.932 13.102 20.106 20.167v98.598c0 0-1.268 42.264 39.85 42.264 19.26 0 42.023-21.133 42.023-21.133l169.784-139.896h402.481c120.756 0 120.756-120.756 120.756-120.756v-442.753c0 0 0-120.756-120.756-120.756h-724.539z" fill="#787878" p-id="17106"></path></svg>
+      评论</span>
+     <span>
+     <svg t="1678957815623" class="icon" viewBox="0 0 1071 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18483" width="16" height="16"><path d="M1041.441824 418.173769C1017.545784 379.457987 976.978907 357.655147 934.856203 355.990951 932.672662 355.651924 930.455865 355.426732 928.182457 355.426732L681.491077 355.156994C698.221007 307.082112 707.361417 255.423948 707.361417 201.600472 707.361417 166.693164 703.416492 132.726219 696.177769 100.007732L695.526642 100.09187C682.3613 42.777911 631.382524 0 570.359886 0 499.341382 0 441.78117 57.86828 441.78117 129.246872 441.78117 133.195164 442.028573 137.076641 442.364598 140.942034 438.548914 278.142407 331.614976 389.360269 196.661604 399.069528L196.661604 399.904721 49.99039 400.248696C48.21671 400.029691 46.431955 399.882449 44.609042 399.882449 20.192356 399.882449 0.39757 419.774863 0.39757 444.313419L0 977.678089C0 1002.211696 19.782477 1022.104111 44.199165 1022.104111 46.59566 1022.104111 48.930613 1021.861596 51.223717 1021.494111L214.393457 1021.562164C216.553627 1021.888817 218.732259 1022.104111 220.969974 1022.104111 223.210149 1022.104111 225.381396 1021.888817 227.525566 1021.56835L840.966989 1021.82695 840.966989 1022.092974C864.997185 1022.137518 889.32402 1015.639107 911.109115 1001.722954 931.788904 988.498463 947.345814 970.345723 957.569383 949.811138 960.374515 945.715604 962.586401 941.106583 963.928028 936.029854L1059.429687 512.279478C1060.754092 507.254717 1061.113516 502.206443 1060.720858 497.29428 1062.705021 470.461729 1056.644245 442.797699 1041.441824 418.173769L1041.441824 418.173769ZM265.44116 938.490887 177.048986 938.469853 177.38132 494.580834C177.38132 494.580834 231.384331 494.238097 265.862117 483.495673L265.44116 938.490887 265.44116 938.490887Z" fill="#7A7A7A" p-id="18484"></path></svg>
+      点赞</span>
+  </div> -->
+
 </template>
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from "vue-router"
+
+import { ElMessageBox } from 'element-plus'
+import  Pinglun from '../components/Pinglun.vue'
+import { filterTime } from '../utils/index'
+import axios from 'axios'
+
 export default defineComponent({
-  setup(props, context) {
+    components: {
 
+    Pinglun
+  },
+  setup(props, context) {
+    // let state=reactive({
+    //     dialogVisible_pay:false
+    // })
 
-    onMounted(async()=>{
-      await store.dispatch('fetch_detail',route.params.id)
-    })
+    // onMounted(async()=>{
+    //   await
+    // })
     const store = useStore()
     const route = useRoute()
-    
-    const id=route.params.id
+
+    store.dispatch('fetch_detail',route.params.id)
+    store.dispatch('fetch_list')
     // //vuex拿数据，必须使用 computed 计算属性接收
     const detail = computed(() => {
-      return store.state.detail.find((v:any) =>v.id==id)
+      return store.state.detail
+    })
+     const list = computed(() => {
+      return store.state.list
     })
-    
-
     console.log(detail,'111s')
-  
 
+
+    const surePay=async ()=>{
+         let data:any={
+          odd:'5',
+          title: '标题',
+          pay:'756',
+          id: '85668',
+      } 
+     await axios.get('/api/zhifubao',{params:data}).then((res)=>{
+        window.location.href=res.data.url
+        console.log(res)
+     })
+    
+    }
     //获取数据筛选
     return {
       detail,
+      list,
+      filterTime,
+      surePay
     }
 
   }
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+
 .left {
   width: 66%;
   height: 100%;
   margin-top: 50px;
 
   .box-card {
-    h3 img {
+    img {
       width: 100%;
-      height: 300px;
+      height: 500px;
     }
   }
-
+  .box-card1{
+    margin-top: 20px;
+  }
+ .box-card2{
+     margin-top: 10px;
+  }
   // box-shadow: 2px 2px 4px #000000;
 }
 
@@ -70,24 +162,36 @@ export default defineComponent({
   width: 32%;
   height: 100%;
   color: white;
-  margin-top: 50px;
-
+  margin-top: 10px;
   // box-shadow: 2px #000000;
+
+
+  .box-card1 {
+    width: 433px;
+
+  }
+
   .text {
     font-size: 14px;
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
+  }
+  .textitem:hover {
+    color: #f76d88;
+    font-size: 20px;
+  }
+  .ml-2:hover {
+    font-size: 20px;
+    background: rgb(81, 101, 134);
   }
-
   .box-card1 {
+    margin-top: 20px;
     width: 433px;
-
   }
-
-
-  .card-header {
+ .card-header {
+    height: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -96,10 +200,38 @@ export default defineComponent({
   .text {
     font-size: 14px;
   }
-
-  .item {
-    margin-bottom: 18px;
+}
+.top{
+  width: 100%;
+  padding: 10px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  box-shadow: 1px 1px 4px #bbb7b7;
+  background: #fff;
+  // text-align: center;
+  .inout{
+    display: inline-flex;
+    width: 400px;
+    height: 36px;
+    resize: none;
+    margin-right: 16px;
+    padding: 8px 18px;
+    border-radius: 18px;
+    border: none;
+    transition: all .2s cubic-bezier(.19,.4,.17,.85);
+    background: #eee;
+    margin-left: 180px;
+  }
+  .inout:focus{
+    width: 560px;
+    height: 56px;
+    padding-right: 80px;
+    border-radius: 4px;
+  }
+  span{
+    display: inline-block;
+    padding: 0 10px;
   }
-
 }
 </style>
diff --git a/src/components/Heade.vue b/src/components/Heade.vue
index 03da87cb495a26fde1e02f7a180e7b9b83edfbef..c35d2209d23709abcc3a5a1e560a76887d79fb19 100644
--- a/src/components/Heade.vue
+++ b/src/components/Heade.vue
@@ -3,6 +3,7 @@
     <img class="img" src="../img/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="Nav logo" />
   </a>
   <div class="route">
+
     <router-link to="/article" class="ccc">
       <svg t="1678409276531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="15651" width="32" height="32">
@@ -55,54 +56,161 @@
       </svg>
       {{ $t('message.route4') }}
     </router-link>
-    <div class="input">
-      <input class="ss" :placeholder="newsta.pra" />
-    </div>
+
+    <div class="inp">
+          <div class="seainput-box">
+            <input
+              type="text"
+              class="sea-input"
+              :placeholder="t('message.route5')"
+              v-model="newsta.searchValue"
+
+
+            />
+            <span class="sea-span">
+              <svg
+                @click="shout()"
+                t="1678679623949"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="5450"
+                width="22"
+                height="22"
+              >
+                <path
+                  d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
+                  fill="#bfbfbf"
+                  p-id="5451"
+                ></path>
+              </svg>
+            </span>
+          </div>
+        </div>
   </div>
 
-  <!-- i8n -->
-  <div class="fy">
+
+
+  <div>
+  <el-popover
+      placement="bottom"
+      :width="200"
+      trigger="click">
+
+ <!-- i8n -->
     <el-select v-model="locale" @change="onChange" placeholder="请选者">
       <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
-  </div>
 
-  <div>
-    <Dayandnight />
-  </div>
 
+      <template #reference>
+
+    <i class="iconfont icon-wenziqiehuan"
+      style="font-size: 24px; color: #000; font-weight: bold"></i>
+
+      </template>
+    </el-popover>
+
+    </div>
+<div> <Dayandnight /></div>
   <div>
-    <a href="/login">登录</a>
+    <a class='deng' href="/login" v-show="newsta.aa">登录</a>
+
+
+
+    <el-popover :visible="visible" placement="top" :width="160">
+      <p>确定要退出登录吗</p>
+      <div style="text-align: right; margin: 0">
+        <el-button size="small" text @click="visible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="visiblee()"
+          >退出登录</el-button
+        >
+      </div>
+      <template #reference >
+        <el-button  v-show='newsta.flag' @click="visible = true">
+           <div class='loginname' >{{newsta.token}}</div>
+        </el-button>
+      </template>
+    </el-popover>
+
+
+
+
   </div>
 
   <div>
-    <el-button round class="butt">注册</el-button>
-    <el-button type="success" round class="butt">写文章</el-button>
+    <el-button type="warning"  round class="butt"  v-show="newsta.aa" href="/login" >注册</el-button>
+    <el-button   round class="buttt" @click="Editor()">
+     <svg t="1678948621577" class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="5548" id="mx_n_1678948621578"
+      width="16" height="16"><path
+      d="M194.56 879.502222C403.911111 377.742222 588.231111 131.982222 819.2 40.96c62.577778-23.893333 113.777778 18.204444 79.644444 68.266667-19.342222 30.72-43.235556 51.2-141.084444 101.262222 0 0 207.075556-34.133333 95.573333 64.853333-10.24 9.102222-135.395556 69.404444-120.604444 72.817778 60.302222 11.377778 207.075556-11.377778 30.72 101.262222-7.964444 5.688889-18.204444 9.102222-26.168889 14.791111-23.893333 17.066667-81.92 56.888889-166.115556 113.777778C449.422222 659.911111 329.955556 708.835556 250.311111 898.844444l-20.48 71.68c-4.551111 15.928889-18.204444 23.893333-32.995555 21.617778H193.422222c-15.928889-3.413333-26.168889-19.342222-21.617778-36.408889l22.755556-76.231111z m0 0" p-id="5549" fill="#ffffff"></path></svg>
+       写文章
+    </el-button>
   </div>
 </template>
 <script lang="ts">
-import { ElSelect, ElOption } from 'element-plus'
-import { ref, reactive, onMounted } from 'vue'
-import { defineComponent } from 'vue'
+import { ElSelect, ElOption, ClickOutside as vClickOutside } from 'element-plus'
+import { ref, reactive, onMounted, defineComponent,watch,computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Dayandnight from './Dayandnight.vue'
-import { useDark, useToggle } from '@vueuse/core'
-
+import { useDark, useToggle, } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
 export default defineComponent({
+  name: 'App',
   components: {
     ElSelect,
     ElOption,
     Dayandnight
   },
-  name: 'App',
   setup() {
+  
     const isDark = useDark()
-    const toggleDark = useToggle(isDark)
+    const router=useRouter()
+    const store = useStore()
+    // const searchValue=ref('')
+    // watch(()=>searchValue.value,(newVal)=>{console.log('newVal变化之后值:',newVal)})
+    store.dispatch('fetch_list')
+   //vuex拿数据，必须使用 computed 计算属性接收
+   const list:any=computed(()=>{
+    return store.state.list
+   })
+  
 
-    const newsta: any = reactive({
-      pra: ''
+  const visiblee=()=>{
+     localStorage.setItem('token',`${''}`)
+     ElMessage({
+            message: `退出登录`,
+          })
+      if(newsta.token===''){
+      newsta.flag=true
+      newsta.aa=false
+    }else{
+      newsta.flag=false
+      newsta.aa=true
+    }
+  }
+    const newsta:any= reactive({
+      pra: '',
+      newSa:[],
+      searchValue:'',
+      token:'',
+      flag:false,
+      aa:true
     })
 
+    const shout=()=>{
+         newsta.newSa=list.value.filter((v:any)=>v.title.includes(newsta.searchValue))
+         console.log(newsta.newSa,'我是搜索出来的值')
+         store.commit('SET_SEARCH' , newsta.newSa)
+         router.push('/search')
+    }
     const { locale } = useI18n()
     const { t } = useI18n()
     const state = reactive({
@@ -124,6 +232,7 @@ export default defineComponent({
     const i18nValue = ref('')
     onMounted(() => {
       dinaji()
+      tok()
     })
     const onChange = (code: string) => {
       console.log('e', code)
@@ -132,6 +241,26 @@ export default defineComponent({
     const dinaji = () => {
       newsta.pra = t('message.route5')
     }
+
+   const visible = ref(false)
+   const Editor=()=>{
+      router.push(`/editor`)
+   }
+
+    const tok=()=>{
+    let token=localStorage.getItem('token')
+    console.log(token,'我还是token的内容')
+    newsta.token=token
+    if(newsta.token){
+      newsta.flag=true
+      newsta.aa=false
+    }else{
+      newsta.flag=false
+      newsta.aa=true
+    }
+
+   }
+
     return {
       onChange,
       i18nValue,
@@ -139,25 +268,52 @@ export default defineComponent({
       locale,
       dinaji,
       newsta,
-      t
+      t,
+      shout,
+      visible,
+      list,
+      tok,
+      visiblee,
+     Editor
     }
-  }
+  },
+  // methods:{
+  // // 搜索
+  //    onInput(e:any){
+  //     console.log('val:', e.target.value);
+  //   }
+  // }
 })
 </script>
 <style lang="scss">
 .router-link-exact-active {
   color: rgb(251, 134, 39);
 }
+.el-button + .el-button {
+  margin-left: 8px;
+}
 
 a {
   display: flex;
   color: #000;
 }
-
+.icon-wenziqiehuan:hover{
+     color: red !important;
+}
+.deng{
+  color: #969696;
+  font-size: 16px;
+}
+.loginname{
+  color: #969696;
+  font-size: 16px;
+}
 a:hover {
   color: #000;
 }
-
+.ccc{
+ font-size: 20px;
+}
 .logo {
   float: left;
   height: 56px;
@@ -186,32 +342,90 @@ a:hover {
 }
 
 .butt {
+  width: 80px;
+  height: 40px;
+  color: #ec7259;
+  border-color: #ec7259;
+  background-color: #fff;
+  font-size: 16px;
+}
+.buttt{
+  width: 100px;
   height: 40px;
+  color: #fff;
+  background-color: #ed7961;
+  font-size: 16px;
 }
 
-.input {
-  display: flex;
 
-  .ss {
-    border-radius: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: url('../assets/206搜索\ \(1\).png') rgba(0, 0, 0, 0.2);
-    background-repeat: no-repeat;
-    background-position: right;
-    border: none;
-  }
+ .inp {
+      width: 320px;
+      height: 56px;
+      display: flex;
+      margin-left: 15px;
+      align-items: center;
+    }
 
-  input {
-    width: 280px;
-    height: 49px;
-    border-radius: 50px;
-  }
+.seainput-box {
+  position: relative;
+  display: inline-block;
+}
 
-  input:focus {
-    width: 400px;
-    transition: 0.5s ease-in;
-  }
+
+
+ .inp {
+      width: 320px;
+      height: 56px;
+      display: flex;
+      margin-left: 15px;
+      align-items: center;
+    }
+
+.seainput-box {
+  position: relative;
+  display: inline-block;
+}
+
+.sea-input {
+  padding: 0 40px 0 20px;
+  width: 250px;
+  height: 42px;
+  font-size: 14px;
+  border: 1px solid #eee;
+  border-radius: 40px;
+  background: #eee;
+  transition: width 0.5s;
+  transition-delay: 0.1s;
+}
+
+.sea-span {
+  position: absolute;
+  top: 4.5px;
+  right: 6px;
+  width: 33px;
+  height: 33px;
+  padding: 0;
+  text-align: center;
+  background: #eee;
+  border-radius: 50%;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
 }
+
+.sea-input:focus {
+  width: 300px;
+  outline: none;
+  box-shadow: none;
+}
+
+.sea-input:focus + .sea-span {
+  background-color: #969696;
+}
+
+
+
+
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index b455da7b85002ae7ef1ab9b93d68dcdac20e71f3..ffdcfde0e809e8e8ef27fe8c7757a96505af8d1f 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,156 +1,29 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
-          target="_blank"
-          rel="noopener"
-          >unit-jest</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
+      <input type="text" v-model="inputVal">
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String
+  export default {
+    name:'HelloWorld',
+    data(){
+      return {
+        inputVal:'',
+      }
+    }, 
+    watch:{
+      inputVal:{
+        handler:()=>{}
+      }
+    },
+   created(){
+      console.log();
+      
+   } 
   }
-})
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/HomeSidebar.vue b/src/components/HomeSidebar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a82d0f99a3ecfa52890db8cb61852755aff8bbcd
--- /dev/null
+++ b/src/components/HomeSidebar.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="right-box">
+    <div class="right-top">
+      <img src="../img/homeA.png" alt="" />
+      <img src="../img/homeB.png" alt="" />
+      <img src="../img/homeC.png" alt="" />
+      <img src="../img/homeD.png" alt="" />
+
+      <el-popover
+        placement="top-start"
+        :width="190"
+        :height="182"
+        trigger="hover"
+        content=""
+      >
+        <img
+          src="../img/QRcode.png"
+          alt=""
+          style="width: 160px; height: 175px"
+        />
+        <template #reference>
+          <div class="right-rec">
+            <a href="#"><img src="../img/QRcode.png" alt="" /></a>
+
+            <div class="info">
+              <div class="info-tit">下载简书手机APP &emsp;</div>
+              <div class="description">随时随地发现和创作内容</div>
+            </div>
+          </div>
+        </template>
+      </el-popover>
+    </div>
+
+    <div class="right-bottom">
+      <div class="right-bottom-tit">
+        <span>{{ t('message.RecommendedAuthor') }}</span>
+        <a href="">
+          <svg
+            t="1678884424056"
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="2529"
+            width="16"
+            height="16"
+          >
+            <path
+              d="M949.252087 430.532547c-9.240455-7.446599-22.75526-5.965875-30.169113 3.328815l-36.743856 46.075385c-1.208525-17.817808-3.606131-35.751249-7.338129-53.722552C829.114916 204.421786 613.312942 62.124919 393.013537 108.309798 172.691619 154.50798 31.294239 371.70165 77.179288 593.470523c45.88505 221.791385 261.688048 364.101555 482.009965 317.880861 80.081896-16.785292 148.922774-56.816007 202.800869-110.918205 0.199545-0.198521 0.401136-0.355087 0.602727-0.578168 0.956791-0.979304 1.290389-2.113127 2.248204-3.115967 1.578961-2.670829 2.714831-5.855358 2.714831-9.171893 0-9.82067-7.92346-17.790178-17.675568-17.790178-5.254677 0-9.842159 2.405793-13.093203 6.078439l-0.130983-0.11154c-48.916083 49.047066-111.676475 85.202521-184.344518 100.432387-199.506846 41.833781-394.937864-87.050612-436.482049-287.880593-41.566698-200.809515 86.493933-397.531945 285.999756-439.364703 199.506846-41.822524 394.937864 87.073124 436.480003 287.880593 3.207042 15.446807 5.425569 30.855752 6.712889 46.165436l-44.603871-36.034704c-9.262968-7.470135-22.753213-5.966898-30.169113 3.317559-7.435343 9.317203-5.944386 22.898523 3.297093 30.390147 0.045025 0.022513 0.045025 0.022513 0.090051 0.022513l82.132602 66.39006c0.020466 0 0.065492 0.044002 0.086981 0.066515 4.692882 3.793396 10.480702 5.266957 16.016789 4.590552 5.539156-0.555655 10.861372-3.25616 14.617929-7.964392 0.021489-0.021489 0.045025-0.066515 0.045025-0.066515l65.944921-82.71998c0.021489-0.021489 0.021489-0.021489 0.065492-0.045025C959.95894 451.606515 958.492542 438.012915 949.252087 430.532547z"
+              fill="#8a8a8a"
+              p-id="2530"
+            ></path>
+          </svg>
+          {{ t('message.Change') }}
+        </a>
+      </div>
+      <ul class="right-bottom-con">
+        <li v-for="item in state.newList" :key="item.id">
+          <a href="#"><img :src="item.cover" alt="" /></a>
+          <a href="#" class="rname">{{ item.title }}</a>
+          <p>
+            {{ item.views }}{{ t('message.watch') }}&emsp;·{{ item.likes }}K{{
+              t('message.likes')
+            }}
+          </p>
+
+          <a href="" class="follow">
+            <svg
+              t="1678887283140"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="3935"
+              width="12"
+              height="12"
+            >
+              <path
+                d="M939.939489 459.072557 562.339502 459.072557 562.339502 83.519182 462.055494 83.519182 462.055494 459.072557 84.455507 459.072557 84.455507 559.356564 462.055494 559.356564 462.055494 939.003164 562.339502 939.003164 562.339502 559.356564 939.939489 559.356564Z"
+                fill="#42c02e"
+                p-id="3936"
+              ></path>
+            </svg>
+            {{ t('message.Follow') }}
+          </a>
+        </li>
+      </ul>
+      <a href="#" class="find-more">{{ t('message.Viewall') }} &emsp;</a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive } from 'vue'
+import axios from 'axios'
+import { useI18n } from 'vue-i18n'
+interface listType {
+  title: string
+  content: string
+  cover: any
+  createAt: string
+  html: string
+  id: string
+  isCommentable: boolean
+  isPay: boolean
+  isRecommended: boolean
+  likes: number
+  needPassword: boolean
+  publishAt: string
+  status: string
+  summary: string
+  views: string
+  updateAt: string
+}
+interface stateType {
+  newList: listType[]
+}
+export default defineComponent({
+  setup() {
+    const state: stateType = reactive({
+      newList: [],
+    })
+    onMounted(() => {
+      onCon()
+    })
+    const { t } = useI18n()
+
+    const onCon = async () => {
+      const resp = await axios.get(
+        'https://creationapi.shbwyz.com/api/article/recommend'
+      )
+
+      state.newList = resp.data.data
+
+      console.log(state.newList, 'resp')
+    }
+    return {
+      onCon,
+      t,
+      state,
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.right-box {
+  float: left;
+  margin-top: 120px;
+  .right-top {
+    width: 370px;
+    height: 290px;
+    > img {
+      width: 100%;
+      min-height: 50px;
+      margin-bottom: 6px;
+      border-radius: 4px;
+    }
+    .right-rec {
+      width: 83%;
+      margin-bottom: 30px;
+      padding: 10px 24px;
+      border: 1px solid #f0f0f0;
+      a {
+        width: 60px;
+        height: 60px;
+        display: inline-block;
+        > img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+      .info {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 7px;
+        margin-top: -50px;
+        .description {
+          margin-top: 4px;
+          font-size: 13px;
+          color: #999;
+        }
+      }
+    }
+  }
+  .right-bottom {
+    position: relative;
+    margin-top: 120px;
+    margin-bottom: 20px;
+    padding-top: 0;
+    font-size: 13px;
+    .right-bottom-tit {
+      width: 100%;
+      height: 45px;
+      border-top: 1px solid #f0f0f0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > span {
+        font-size: 18px;
+        color: #969696;
+      }
+      > a {
+        color: #787878;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .right-bottom-con {
+      width: 100%;
+
+      li {
+        width: 100%;
+        line-height: 20px;
+        height: 47px;
+        margin-top: 10px;
+        a:nth-child(1) {
+          line-height: 20px;
+          float: left;
+          width: 48px;
+          height: 48px;
+          margin-right: 10px;
+          > img {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #ddd;
+            border-radius: 50%;
+          }
+        }
+        .rname {
+          padding-top: 5px;
+          margin-right: 50px;
+          font-size: 12px;
+          display: block;
+        }
+        > p {
+          margin-top: 2px;
+          font-size: 12px;
+          color: #969696;
+        }
+        .follow {
+          border-color: #42c02e;
+          float: right;
+          margin-top: 5px;
+          padding: 0;
+          font-size: 13px;
+          color: #42c02e;
+          margin-top: -40px;
+        }
+      }
+    }
+    .find-more {
+      position: absolute;
+      padding: 7px 7px 7px 12px;
+      left: 0;
+      top: 355px;
+      width: 100%;
+      font-size: 13px;
+      color: #787878;
+      background-color: #f7f7f7;
+      border: 1px solid #dcdcdc;
+      border-radius: 4px;
+      text-align: center;
+      margin-top: 50px;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/src/components/Pinglun.vue b/src/components/Pinglun.vue
new file mode 100644
index 0000000000000000000000000000000000000000..707770daadb9b4d2bf6316c882d78c0d93393926
--- /dev/null
+++ b/src/components/Pinglun.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="comment-view">
+    <u-comment
+      :config="config"
+      page
+      @submit="submit"
+      @like="like"
+      @remove="remove"
+      @report="report"
+      @reply-page="replyPage"
+    ></u-comment>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { UToast, ConfigApi, CommentApi, ReplyPageParam, CommentSubmitParam, ReplyApi } from 'undraw-ui'
+// 下载表情包资源emoji.zip https://gitee.com/undraw/undraw-ui/releases
+// static文件放在public下,引入emoji.ts文件可以移动到自定义位置
+import emoji from './emoji'
+
+const config = reactive<ConfigApi>({
+  user: {
+    id: '1',
+    username: 'user',
+    avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
+    // 评论id数组 建议:存储方式用户id和文章id和评论id组成关系,根据用户id和文章id来获取对应点赞评论id,然后加入到数组中返回
+    likeIds: ['1', '2', '11']
+  },
+  emoji: emoji,
+  comments: []
+})
+
+//获取文件url
+function createObjectURL(blob: any) {
+  if (window.URL) {
+    return window.URL.createObjectURL(blob)
+  } else if (window.webkitURL) {
+    return window.webkitURL.createObjectURL(blob)
+  } else {
+    return ''
+  }
+}
+
+let temp_id = 100
+// 提交评论事件
+const submit = ({ content, parentId, files, finish }: CommentSubmitParam) => {
+  console.log('提交评论: ' + content, parentId, files)
+
+  /**
+   * 上传文件后端返回图片访问地址，格式以', '为分割; 如:  '/static/img/program.gif, /static/img/normal.webp'
+   */
+  let contentImg = files.map((e: any) => createObjectURL(e)).join(', ')
+
+  let comment: CommentApi = {
+    id: String((temp_id += 1)),
+    parentId: parentId,
+    uid: config.user.id,
+    address: '来自江苏',
+    content: content,
+    likes: 0,
+    createTime: '1分钟前',
+    contentImg: contentImg,
+    user: {
+      username: config.user.username,
+      avatar: config.user.avatar,
+      level: 6,
+      homeLink: `/${(temp_id += 1)}`
+    },
+    reply: null
+  }
+  setTimeout(() => {
+    finish(comment)
+    UToast({ message: '评论成功!', type: 'info' })
+  }, 200)
+}
+
+// 删除评论
+const remove = (id: number, finish: () => void) => {
+  setTimeout(() => {
+    finish()
+    alert(`删除成功: ${id}`)
+  }, 200)
+}
+
+//举报用户
+const report = (id: number, finish: () => void) => {
+  console.log(id)
+  setTimeout(() => {
+    finish()
+    alert(`举报成功: ${id}`)
+  }, 200)
+}
+
+// 点赞按钮事件
+const like = (id: number, finish: () => void) => {
+  console.log(id)
+  setTimeout(() => {
+    finish()
+  }, 200)
+}
+
+//模拟数据
+const reply = {
+  total: 6,
+  list: [
+    {
+      id: '31',
+      parentId: '3',
+      uid: '6',
+      address: '来自成都',
+      content: '人生就像愤怒的小鸟，当你失败时，总有几只猪在笑。',
+      likes: 7,
+      createTime: '1天前',
+      user: {
+        username: '陆呈洋',
+        avatar:
+          'https://static.juzicon.com/avatars/avatar-20220310090547-fxvx.jpeg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 4,
+        homeLink: '/31'
+      }
+    },
+    {
+      id: '32',
+      parentId: '3',
+      uid: '7',
+      address: '来自杭州',
+      content: '深思熟虑的结果往往就是说不清楚。',
+      likes: 3,
+      createTime: '2天前',
+      user: {
+        username: '哑谜',
+        avatar:
+          'https://static.juzicon.com/avatars/avatar-190919180152-2VDE.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 3,
+        homeLink: '/32'
+      }
+    },
+    {
+      id: '33',
+      parentId: '3',
+      uid: '8',
+      level: 2,
+      address: '来自深圳',
+      content: '当我跨过沉沦的一切，向着永恒开战的时候，你是我的军旗。',
+      createTime: '5天前',
+      user: {
+        username: 'Mia',
+        avatar:
+          'https://static.juzicon.com/avatars/avatar-190919181554-L2ZO.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        likes: 3,
+        homeLink: '/33'
+      }
+    },
+    {
+      id: '34',
+      parentId: '3',
+      uid: '9',
+      address: '来自西安',
+      likes: 34,
+      content: '不要由于别人不能成为我们所希望的人而愤怒，因为我们自己也难以成为自己所希望的人。',
+      createTime: '1天前',
+      user: {
+        username: 'poli301',
+        avatar:
+          'https://static.juzicon.com/avatars/avatar-190919180043-XPLP.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 4,
+        homeLink: '/34'
+      }
+    },
+    {
+      id: '35',
+      parentId: '3',
+      uid: '10',
+      username: 'fish_eno',
+      avatar:
+        'https://static.juzicon.com/avatars/avatar-190919180320-NAQJ.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+      level: 6,
+      link: '/35',
+      likes: 32,
+      address: '来自武汉',
+      content: '世上莫名其妙走霉运的人多的是，都是一边为命运生气，一边化愤怒为力量地活着。',
+      createTime: '11小时前'
+    },
+    {
+      id: '36',
+      parentId: '3',
+      uid: '11',
+      likes: 21,
+      address: '来自上海',
+      content: '这世上所有的不利情况，都是当事者能力不足造成的',
+      createTime: '10小时前',
+      user: {
+        username: '十三',
+        avatar:
+          'https://static.juzicon.com/user/avatar-f103e42d-a5c9-4837-84e3-d10fad0bcb36-210108053135-E90E.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 4,
+        homeLink: '/36'
+      }
+    },
+    {
+      id: '37',
+      parentId: '3',
+      uid: '12',
+      likes: 18,
+      address: '来自广州',
+      content: ' 绝望自有绝望的力量，就像希望自有希望的无能。',
+      createTime: '9小时前',
+      user: {
+        username: 'D.z.H****',
+        avatar:
+          'https://static.juzicon.com/avatars/avatar-190919181051-M3HK.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 3,
+        homeLink: '/37'
+      }
+    },
+    {
+      id: '38',
+      parentId: '3',
+      uid: '13',
+      likes: 17,
+      address: '来自重庆',
+      content: ' 无论这个世界对你怎样，都请你一如既往的努力，勇敢，充满希望。',
+      createTime: '8小时前',
+      user: {
+        username: '繁星Cong2',
+        avatar:
+          'https://static.juzicon.com/user/avatar-f81b3655-03fd-485c-811b-4b5ceaca52b6-210817180051-YTO4.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+        level: 1,
+        homeLink: '/38'
+      }
+    }
+  ]
+} as ReplyApi
+
+const page = (pageNum: number, pageSize: number, arr: any[]) => {
+  var skipNum = (pageNum - 1) * pageSize
+  var newArr =
+    skipNum + pageSize >= arr.length ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize)
+  return newArr
+}
+
+//回复分页
+const replyPage = ({ parentId, pageNum, pageSize, finish }: ReplyPageParam) => {
+  let tmp = {
+    total: reply.total,
+    list: page(pageNum, pageSize, reply.list)
+  }
+  console.log(parentId)
+  setTimeout(() => {
+    finish(tmp)
+  }, 200)
+}
+
+config.comments = [
+  {
+    id: '3',
+    parentId: null,
+    uid: '5',
+    address: '来自北京',
+    content: '人的一切痛苦，本质上都是对自己的无能的愤怒。',
+    likes: 34116,
+    createTime: '2分钟前',
+    user: {
+      username: '半个句号',
+      avatar:
+        'https://static.juzicon.com/user/avatar-0d70406e-5d4a-4107-a689-652ffd063f99-200425180341-1QK6.jpg?x-oss-process=image/resize,m_fill,w_100,h_1000',
+      level: 5,
+      homeLink: '/3'
+    },
+    reply: {
+      total: 8,
+      list: [
+        {
+          id: '31',
+          parentId: '3',
+          uid: '6',
+          address: '来自成都',
+          content: '人生就像愤怒的小鸟，当你失败时，总有几只猪在笑。',
+          likes: 7,
+          createTime: '1天前',
+          user: {
+            username: '陆呈洋',
+            avatar:
+              'https://static.juzicon.com/avatars/avatar-20220310090547-fxvx.jpeg?x-oss-process=image/resize,m_fill,w_100,h_100',
+            level: 4,
+            homeLink: '/31'
+          }
+        },
+        {
+          id: '32',
+          parentId: '3',
+          uid: '7',
+          address: '来自杭州',
+          content: '深思熟虑的结果往往就是说不清楚。',
+          likes: 3,
+          createTime: '2天前',
+          user: {
+            username: '哑谜',
+            avatar:
+              'https://static.juzicon.com/avatars/avatar-190919180152-2VDE.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+            level: 3,
+            homeLink: '/32'
+          }
+        },
+        {
+          id: '33',
+          parentId: '3',
+          uid: '15',
+          address: '来自北京',
+          content: '鱼对水说，你看不到我流泪，因为我在水中。水对鱼说，我看到你悲伤，因为你在我心中。[呲牙]',
+          likes: 36,
+          createTime: '1分钟前',
+          user: {
+            username: '过往~',
+            avatar:
+              'https://static.juzicon.com/avatars/avatar-20210308112705-zqf0.jpeg?x-oss-process=image/resize,m_fill,w_100,h_100',
+            level: 4,
+            homeLink: '/41'
+          }
+        },
+        {
+          id: '34',
+          parentId: '3',
+          uid: '16',
+          address: '来自杭州',
+          content: ' 约束条件变了，原来的收益，一下子都变为成本。生命如果架在锅上，成本自然也就很高了[tv_微笑]',
+          likes: 16,
+          createTime: '1天前',
+          user: {
+            username: 'Blizzard1',
+            avatar:
+              'https://static.juzicon.com/user/avatar-3cb86a0c-08e7-4305-9ac6-34e0cf4937cc-180320123405-BCV6.jpg?x-oss-process=image/resize,m_fill,w_100,h_100',
+            level: 3,
+            homeLink: '/42'
+          }
+        }
+      ]
+    }
+  }
+]
+</script>
+
+<style lang="scss">
+.vp-doc ul {
+  list-style: none !important;
+}
+
+.vp-doc ul,
+.vp-doc ol {
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.vp-doc li + li {
+  margin-top: 0px !important;
+}
+.comment-form {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  box-shadow: 1px 1px 4px #bbb7b7;
+  background: #fff;
+  padding: 0 10%;
+}
+.u-editor{
+  height: 43px;
+  width: 400px;
+  background: salmon;
+}
+
+.input-active{
+  width: 400px;
+}
+.comment-box .action-box .el-button[data-v-8d75907e] {
+    margin-left: 300PX;
+}
+</style>
diff --git a/src/components/Shout.vue b/src/components/Shout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..610221dc1912e37901aaf82839ee65e46183a776
--- /dev/null
+++ b/src/components/Shout.vue
@@ -0,0 +1,90 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- <template>
+  <div class="shout">
+    <dl>
+      <dt>
+        <span>
+          <h1>文章搜索</h1>
+        </span>
+        <span>
+          <a>X</a>
+        </span>
+      </dt>
+      <dd>
+        <el-input
+          style="height: 50px"
+          v-model="input"
+          placeholder="Please input"
+        />
+        <span
+          ><el-button style="height: 50px" type="primary" :icon="Search"
+            >Search</el-button
+          ></span
+        >
+      </dd>
+    </dl>
+  </div>
+</template>
+<script>
+export default {}
+</script>
+<style lang="scss">
+.shout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  dl {
+    width: 1000px;
+    height: 90%;
+    background: seashell;
+    dt {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      a {
+      }
+    }
+    dd {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-top: 50px;
+      background: salmon;
+    }
+  }
+}
+</style> -->
+<template>
+  <u-search :config="config" style="margin-left: 20px" @submit="submit"></u-search>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SearchConfig } from 'undraw-ui'
+
+const config = ref<SearchConfig>({
+  keywords: ['斗罗大陆', '斗破苍穹', '吞噬星空', '凡人修仙传', '一念永恒'], // 搜索框关键字滚动
+  hotSearchList: [
+    '斗罗大陆',
+    '斗破苍穹',
+    '吞噬星空',
+    '凡人修仙传',
+    '一念永恒',
+    '完美世界',
+    '鬼灭之刃',
+    '间谍过家家',
+    '武动乾坤',
+    '神印王座'
+  ] // top10 热门搜索 最多显示10条数据
+})
+
+const submit = (val: string) => {
+  console.log(val)
+  window.open('/all?keyword=' + val)
+}
+</script>
+
+<style lang="scss" scoped></style>
+
diff --git a/src/components/VIewLogin.vue b/src/components/VIewLogin.vue
index 6670a587786cba7a3fd306b246b92e0231642b30..fc25d43fb938e919deadbb3a961a81ae7a3836c3 100644
--- a/src/components/VIewLogin.vue
+++ b/src/components/VIewLogin.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="box">
+    <!--动态类名  -->
     <div :class="state.cla">
       <!-- 注册 -->
       <div class="container__form container--signup">
@@ -52,6 +53,7 @@
           />
           <a class="link">忘记密码？</a>
           <button class="btn" type="button" @click="onLogin()">登录</button>
+          <a href="https://gitee.com/oauth/authorize?client_id=2ba3b83e78f56355978282c432250e5b12ec541c13353ae3340776369088797c&redirect_uri=http://localhost:8080/layout&response_type=code">第三方登录</a>
         </form>
       </div>
       <!-- 点击切换 -->
@@ -74,9 +76,10 @@ import router from '@/router'
 import { ref, defineComponent, reactive, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import SIdentify from '@/components/SIdentify.vue'
-
+import { useRoute } from 'vue-router'
 import { HTTP } from '../utils/http'
 import { fi } from 'element-plus/es/locale'
+import axios from 'axios'
 interface newUser {
   user: string
   pasd: string
@@ -122,6 +125,11 @@ export default defineComponent({
       code: ''
     })
 
+    const route = useRoute()
+    onMounted(()=>{
+      disanfang()
+    })
+
     const onSignInBtn = () => {
       state.cla = 'container'
     }
@@ -130,8 +138,9 @@ export default defineComponent({
       refreshCode()
       console.log(state.identifyCode)
     }
-
+     //登录
     const onLogin = () => {
+      //成功
       HTTP.post('/api/auth/login', {
         name: state.user,
         password: state.pasd
@@ -139,6 +148,7 @@ export default defineComponent({
         // console.log(resp.response.status);
         // console.log(resp.data.statusCode);
         if (resp.data.statusCode === 200) {
+          localStorage.setItem('token',`${resp.data.data.name}`)
           ElMessage({
             message: `欢迎您${resp.data.data.name}`,
             type: 'success'
@@ -146,7 +156,7 @@ export default defineComponent({
           router.push('/layout')
         }
       })
-
+       //失败
       HTTP.post('/api/auth/login', {
         name: state.user,
         password: state.pasd
@@ -162,11 +172,12 @@ export default defineComponent({
       HTTP.post('/api/user/register', {
         name: state.LoUser,
         password: state.LoPasd,
+        // 确认密码
         confirm: state.LoPasd
       }).then((resp: any) => {
         // console.log(resp.response.status)
         // console.log(resp.status)
-
+        //判断验证码
         if (state.code === state.identifyCode) {
           if (resp.status === 201) {
             ElMessage({
@@ -185,6 +196,23 @@ export default defineComponent({
         }
       })
     }
+
+    //第三方登录
+    const disanfang = async() => {
+      if(route.query.code){
+        console.log('route.query.code',route.query.code)
+        const resp = await axios.post('/api/thirdLogin',{
+          code:route.query.code
+        })
+        console.log('resp',resp)
+        if(resp.data.statu === 200){
+          // localStorage.setItem('token',resp.data)
+          // router.push('/article')
+        }
+      }
+
+    }
+    //验证码
     const refreshCode = () => {
       state.identifyCode = ''
       makeCode(state.identifyCodes, 4)
@@ -202,6 +230,7 @@ export default defineComponent({
       }
     }
     return {
+      disanfang,
       onSignInBtn,
       onSignUpBtn,
       state,
diff --git a/src/components/emoji.ts b/src/components/emoji.ts
new file mode 100644
index 0000000000000000000000000000000000000000..731debdd2c1a8d9a6d8cff249997e516557a47b7
--- /dev/null
+++ b/src/components/emoji.ts
@@ -0,0 +1,141 @@
+const raw = '/static'
+
+const faceList = [`${raw}/emoji/smile.webp`, `${raw}/emoji/tv/tv.webp`]
+
+const emojiList: {}[] = [
+  {
+    '[口罩]': `${raw}/emoji/kouzhao.webp`,
+    '[狗头]': `${raw}/emoji/goutou.webp`,
+    '[微笑]': `${raw}/emoji/smile.webp`,
+    '[OK]': `${raw}/emoji/ok.webp`,
+    '[星星眼]': `${raw}/emoji/star.webp`,
+    '[辣眼睛]': `${raw}/emoji/layanjing.webp`,
+    '[吃瓜]': `${raw}/emoji/chigua.webp`,
+    '[滑稽]': `${raw}/emoji/huaji.webp`,
+    '[呲牙]': `${raw}/emoji/teeth.webp`,
+    '[打call]': `${raw}/emoji/dacall.webp`,
+    '[喝酒]': `${raw}/emoji/hejiu.webp`,
+    '[乖]': `${raw}/emoji/guai.webp`,
+    '[吐舌]': `${raw}/emoji/tushe.webp`,
+    '[汗]': `${raw}/emoji/han.webp`,
+    '[大哭2]': `${raw}/emoji/daku.webp`,
+    '[超赞]': `${raw}/emoji/chaozan.webp`,
+    '[超开心]': `${raw}/emoji/chaokaixin.webp`,
+    '[委屈]': `${raw}/emoji/weiqu.webp`,
+    '[困狗]': `${raw}/emoji/kungou.webp`,
+    '[藏狐]': `${raw}/emoji/zanghu.webp`,
+    '[脸红]': `${raw}/emoji/lianhong.webp`,
+    '[脱单doge]': `${raw}/emoji/doge.webp`,
+    '[给心心]': `${raw}/emoji/heart.webp`,
+    '[笑]': `${raw}/emoji/dx.webp`,
+    '[哦呼]': `${raw}/emoji/oh.webp`,
+    '[嫌弃]': `${raw}/emoji/xq.webp`,
+    '[喜欢]': `${raw}/emoji/like.webp`,
+    '[酸了]': `${raw}/emoji/sl.webp`,
+    '[大哭]': `${raw}/emoji/dq.webp`,
+    '[害羞]': `${raw}/emoji/hx.webp`,
+    '[无语]': `${raw}/emoji/wy.webp`,
+    '[疑惑]': `${raw}/emoji/yh.webp`,
+    '[调皮]': `${raw}/emoji/tiaopi.webp`,
+    '[笑哭]': `${raw}/emoji/xiaoku.webp`,
+    '[奸笑]': `${raw}/emoji/jianxiao.webp`,
+    '[偷笑]': `${raw}/emoji/touxiao.webp`,
+    '[大笑]': `${raw}/emoji/daxiao.webp`,
+    '[阴险]': `${raw}/emoji/yinxian.webp`,
+    '[捂脸]': `${raw}/emoji/wulian.webp`,
+    '[惊喜]': `${raw}/emoji/jingxi.webp`,
+    '[惊讶]': `${raw}/emoji/jingya.webp`,
+    '[捂脸哭]': `${raw}/emoji/wulianku.webp`,
+    '[妙啊]': `${raw}/emoji/miaoa.webp`,
+    '[鼓掌]': `${raw}/emoji/guzhang.webp`,
+    '[尴尬]': `${raw}/emoji/ganga.webp`,
+    '[冷]': `${raw}/emoji/cold.webp`,
+    '[灵魂出窍]': `${raw}/emoji/linghunchuqiao.webp`,
+    '[傲娇]': `${raw}/emoji/aojiao.webp`,
+    '[疼]': `${raw}/emoji/teng.webp`,
+    '[吓]': `${raw}/emoji/xia.webp`,
+    '[生病]': `${raw}/emoji/shengbing.webp`,
+    '[吐]': `${raw}/emoji/tu.webp`,
+    '[嘘声]': `${raw}/emoji/xusheng.webp`,
+    '[捂眼]': `${raw}/emoji/wuyan.webp`,
+    '[思考]': `${raw}/emoji/sikao.webp`,
+    '[再见]': `${raw}/emoji/zaijian.webp`,
+    '[翻白眼]': `${raw}/emoji/fanbaiyan.webp`,
+    '[哈欠]': `${raw}/emoji/haqian.webp`,
+    '[奋斗]': `${raw}/emoji/fengdou.webp`,
+    '[墨镜]': `${raw}/emoji/mojing.webp`,
+    '[撇嘴]': `${raw}/emoji/piezui.webp`,
+    '[难过]': `${raw}/emoji/nanguo.webp`,
+    '[抓狂]': `${raw}/emoji/zhuakuang.webp`,
+    '[生气]': `${raw}/emoji/shengqi.webp`,
+    '[爱心]': `${raw}/emoji/aixin.webp`,
+    '[胜利]': `${raw}/emoji/shengli.webp`,
+    '[抱拳]': `${raw}/emoji/baoquan.webp`,
+    '[保佑]': `${raw}/emoji/baoyou.webp`,
+    '[支持]': `${raw}/emoji/zhichi.webp`
+  },
+  {
+    '[tv_doge]': `${raw}/emoji/tv/doge.webp`,
+    '[tv_坏笑]': `${raw}/emoji/tv/huaixiao.webp`,
+    '[tv_难过]': `${raw}/emoji/tv/nanguo.webp`,
+    '[tv_生气]': `${raw}/emoji/tv/shengqi.webp`,
+    '[tv_委屈]': `${raw}/emoji/tv/weiqu.webp`,
+    '[tv_斜眼笑]': `${raw}/emoji/tv/xieyanxiao.webp`,
+    '[tv_呆]': `${raw}/emoji/tv/dai.webp`,
+    '[tv_发怒]': `${raw}/emoji/tv/fanu.webp`,
+    '[tv_惊吓]': `${raw}/emoji/tv/jingxia.webp`,
+    '[tv_呕吐]': `${raw}/emoji/tv/outu.webp`,
+    '[tv_思考]': `${raw}/emoji/tv/sikao.webp`,
+    '[tv_微笑]': `${raw}/emoji/tv/weixiao.webp`,
+    '[tv_疑问]': `${raw}/emoji/tv/yiwen.webp`,
+    '[tv_大哭]': `${raw}/emoji/tv/daku.webp`,
+    '[tv_鼓掌]': `${raw}/emoji/tv/guzhang.webp`,
+    '[tv_抠鼻]': `${raw}/emoji/tv/koubi.webp`,
+    '[tv_亲亲]': `${raw}/emoji/tv/qinqin.webp`,
+    '[tv_调皮]': `${raw}/emoji/tv/tiaopi.webp`,
+    '[tv_笑哭]': `${raw}/emoji/tv/xiaoku.webp`,
+    '[tv_晕]': `${raw}/emoji/tv/yun.webp`,
+    '[tv_点赞]': `${raw}/emoji/tv/dianzan.webp`,
+    '[tv_害羞]': `${raw}/emoji/tv/haixiu.webp`,
+    '[tv_睡着]': `${raw}/emoji/tv/shuizhe.webp`,
+    '[tv_色]': `${raw}/emoji/tv/se.webp`,
+    '[tv_吐血]': `${raw}/emoji/tv/tuxue.webp`,
+    '[tv_无奈]': `${raw}/emoji/tv/wunai.webp`,
+    '[tv_再见]': `${raw}/emoji/tv/zaijian.webp`,
+    '[tv_流汗]': `${raw}/emoji/tv/liuhan.webp`,
+    '[tv_偷笑]': `${raw}/emoji/tv/touxiao.webp`,
+    '[tv_抓狂]': `${raw}/emoji/tv/zhuakuang.webp`,
+    '[tv_黑人问号]': `${raw}/emoji/tv/wenhao.webp`,
+    '[tv_困]': `${raw}/emoji/tv/kun.webp`,
+    '[tv_打脸]': `${raw}/emoji/tv/dalian.webp`,
+    '[tv_闭嘴]': `${raw}/emoji/tv/bizui.webp`,
+    '[tv_鄙视]': `${raw}/emoji/tv/bishi.webp`,
+    '[tv_腼腆]': `${raw}/emoji/tv/miantian.webp`,
+    '[tv_馋]': `${raw}/emoji/tv/chan.webp`,
+    '[tv_可爱]': `${raw}/emoji/tv/keai.webp`,
+    '[tv_发财]': `${raw}/emoji/tv/facai.webp`,
+    '[tv_生病]': `${raw}/emoji/tv/shengbing.webp`,
+    '[tv_流鼻血]': `${raw}/emoji/tv/liubixue.webp`,
+    '[tv_尴尬]': `${raw}/emoji/tv/ganga.webp`,
+    '[tv_大佬]': `${raw}/emoji/tv/dalao.webp`,
+    '[tv_流泪]': `${raw}/emoji/tv/liulei.webp`,
+    '[tv_冷漠]': `${raw}/emoji/tv/lenmo.webp`,
+    '[tv_皱眉]': `${raw}/emoji/tv/zhoumei.webp`,
+    '[tv_鬼脸]': `${raw}/emoji/tv/guilian.webp`,
+    '[tv_调侃]': `${raw}/emoji/tv/tiaokan.webp`,
+    '[tv_目瞪口呆]': `${raw}/emoji/tv/mudengkoudai.webp`
+  }
+]
+
+//把emojiList数组中的每一个对象，放到emojiMap中方便取用
+function allEmoji(): {} {
+  let emojiMap = {}
+  emojiList.map(emojis => (emojiMap = { ...emojiMap, ...emojis }))
+  return emojiMap
+}
+
+export default {
+  faceList,
+  emojiList,
+  allEmoji: allEmoji()
+}
diff --git a/src/css/icon.css b/src/css/icon.css
index c42a778551a8ea4ec13dfd975f7de0db598c533b..966a1a1492fa098e5ae36d28874a2a54b0e89641 100644
--- a/src/css/icon.css
+++ b/src/css/icon.css
@@ -54,4 +54,4 @@
 
 .icon-wenziqiehuan:before {
     content: "\e914";
-}
+}
\ No newline at end of file
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index ed87002cb8bffb863ba61b347cdce6506054a30a..2c540228d742cc99fb7a9a61e1e7e5c1dbeb7cb3 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -15,7 +15,11 @@ const i18n = createI18n({
         route2: 'Download App',
         route3: 'member',
         route4: 'IT technology',
-        route5: 'search'
+        route5: 'search',
+        RecommendedAuthor: 'Recommendedauthor',
+        Follow: 'Follow',
+        Change: 'Change',
+        Viewall: 'Viewall'
       }
     },
     Japan: {
@@ -24,7 +28,11 @@ const i18n = createI18n({
         route2: 'アプリをダウン',
         route3: 'シニアメンバーサ',
         route4: 'IT技術です',
-        route5: 'に染み込む'
+        route5: 'に染み込む',
+        RecommendedAuthor: 'おすすめ記事',
+        Follow: 'フォロワー',
+        Change: 'エネルギ',
+        Viewall: 'スケーリング'
       }
     },
     China: {
@@ -33,7 +41,11 @@ const i18n = createI18n({
         route2: '下载App',
         route3: '会员r',
         route4: 'IT技术',
-        route5: '搜索'
+        route5: '搜索',
+        RecommendedAuthor: '推荐作者',
+        Follow: '关注',
+        Change: '换一批',
+        Viewall: '查看全部'
       }
     }
   }
diff --git a/src/img/QRcode.png b/src/img/QRcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..288c1888c23a11f1255a6a27d9d0c669882468f5
Binary files /dev/null and b/src/img/QRcode.png differ
diff --git a/src/img/homeA.png b/src/img/homeA.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d8d412381aa6a5e6a3769db253b74559c78f286
Binary files /dev/null and b/src/img/homeA.png differ
diff --git a/src/img/homeB.png b/src/img/homeB.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa52931010db1282bf358dbf2fa01a593f715813
Binary files /dev/null and b/src/img/homeB.png differ
diff --git a/src/img/homeC.png b/src/img/homeC.png
new file mode 100644
index 0000000000000000000000000000000000000000..833376679c0aae04ffa21b87553f74f2331a1df3
Binary files /dev/null and b/src/img/homeC.png differ
diff --git a/src/img/homeD.png b/src/img/homeD.png
new file mode 100644
index 0000000000000000000000000000000000000000..dabfcd439f1fa0bb94c0766fb7b55ea805085973
Binary files /dev/null and b/src/img/homeD.png differ
diff --git a/src/img/login.jpg b/src/img/login.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aa6430c62fdf07ced343c7c1283a9be5b0060b57
Binary files /dev/null and b/src/img/login.jpg differ
diff --git a/src/img/logo.png b/src/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a8011148735ee05e468b75bbb9f51c0dae9df8f
Binary files /dev/null and b/src/img/logo.png differ
diff --git a/src/img/searchLogo.png b/src/img/searchLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c576b2df278c3542c2ddc97a3633bb8302dea7cb
Binary files /dev/null and b/src/img/searchLogo.png differ
diff --git a/src/main.ts b/src/main.ts
index 1e89acbd339a1f7823a8c0f83b0d5e599c42e658..4595f3b07d4ee2c7200e86e1d3199f753983372a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,12 +12,18 @@ import 'vant/lib/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'ant-design-vue/dist/antd.css'
 import './style/index.scss'
+//icon图标样式
 import './css/icon.css'
+import UndrawUi from 'undraw-ui'
+import 'undraw-ui/dist/style.css'
+
+
 //引入国际化文件
 import './i18n'
 app.use(Tabbar)
 app.use(TabbarItem)
 
+app.use(UndrawUi)
 app.use(Button)
 app.use(ElementPlus)
 app.use(Antd)
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 3935896132fd8cd15bc09d8f83a3f436257b654e..facdb83520ab4ab9f08e16b275b0d4f6004cfadd 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -2,3 +2,21 @@ import { createApp } from 'vue'
 import App from '../App.vue'
 
 export const app = createApp(App)
+// import { createApp } from 'vue'
+// import App from '../App.vue'
+
+// // const app = createApp(App)
+// // 工程化->注册(base) 提高代码效率
+
+// // 路径别名配置
+// const files = require.context('components', true, /\.vue$/)
+// console.log('requireContext:', files.keys())
+// files.keys().forEach((key) => {
+//   console.log('key:', files(key).default.name)
+//   // key 就是组件id
+//   // console.log('files(key):', files(key))
+//   // 使用vue的实例app对 组件进行全局注册 app.component(‘组件名称’, 组件内容)
+//   app.component(files(key).default.name, files(key).default)
+// })
+
+// export { app }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index fd89503d7af8a4924c6ac6a3daa2d26bfdbefcee..2d63a99d4e805263f239da1b5ec9e66013cedb14 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,7 +10,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 export const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/login'
+    redirect: '/Layout'
   },
   //登录
   {
@@ -81,11 +81,28 @@ export const routes: Array<RouteRecordRaw> = [
         name: 'detail',
 
         component: () =>
-          import(
-            /* webpackChunkName: "about" */ '../views/Detail/index.vue'
-          )
+          import(/* webpackChunkName: "about" */ '../views/Detail/index.vue')
+      },
+      {
+        path: '/Editor',
+        name: 'editor',
+        component: () =>
+          import(/* webpackChunkName: "about" */ '../views/Editor/index.vue')
+      },
+      {
+        path: '/search',
+        name: 'Search',
+        component: () =>
+          import(/* webpackChunkName: "about" */ '../views/Search/index.vue')
       }
     ]
+  },
+  {
+    path: '/Shout',
+    name: 'shout',
+
+    component: () =>
+      import(/* webpackChunkName: "about" */ '../views/Shout/index.vue')
   }
 ]
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 6bfc87652f4a3013fd4836e21da18f9c7ca9ba87..8a65e991dbf412520eb3e303d1b8d5de3693a051 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,11 +5,11 @@ export default createStore({
   //数据仓库
   state: {
     list: [],
+    search: null,
     title: [],
     leat: [],
-    detail:[],
+    detail: [],
     token: ''
-    
   },
   //计算属性
   getters: {
@@ -30,8 +30,11 @@ export default createStore({
     SET_LEAT(state, leat) {
       state.leat = leat
     },
-     SET_DETAIL(state, detail) {
+    SET_DETAIL(state, detail) {
       state.detail = detail
+    },
+    SET_SEARCH(state, search) {
+      state.search = search
     }
   },
   //处理异步
@@ -54,14 +57,14 @@ export default createStore({
       console.log('分类', resp.data.data)
       commit('SET_LEAT', resp.data.data)
     },
-     //跳详情
-    async fetch_detail({ commit },payload) {
+    //跳详情
+    async fetch_detail({ commit }, payload) {
       const resp = await axios.get('/api/get_Detail_client', {
-        params: { id:payload}
+        params: { id: payload }
       })
-      console.log('所有上线文章', resp.data.data)
+      console.log('跳详情', resp.data.data)
       commit('SET_DETAIL', resp.data.data)
-    },
+    }
     // async fetch_login({ commit }) {
     //   try {
     //     const resp = await axios.get('http://www/wwwroot/2006a.com')
diff --git a/src/style/index.scss b/src/style/index.scss
index 5a92fffa802b52cb22b5365802fc29caa5926cf9..41d1002b4424bb31b12d2b44f834e3e49060eb0d 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,7 +1,7 @@
-  #app{
-     background: #fff;
-  }
+
+  
 html.dark {
+   background: #484747;
   .abc {
     background: #484747;
     color: #fff;
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ab66bdceae348abafcc23be29cd16c30831b5ee
--- /dev/null
+++ b/src/views/Editor/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="border: 1px solid #ccc; margin-bottom: 40px">
+    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
+      @onCreated="handleCreated" />
+  </div>
+</template>
+<script>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { debounce } from 'lodash'
+// 1. 引入socket.io-client
+import mySocket from 'socket.io-client' // 2.3.0
+// 2.建立websocket连接
+const socket = mySocket('http://47.101.45.245:9999')
+export default {
+  name: 'editor-page',
+  components: { Editor, Toolbar },
+  setup() {
+    // 编辑器实例，必须用 shallowRef
+    const editorRef = shallowRef()
+    // 内容 HTML
+    let valueHtml = ref('<p>你好我是MarkDown默认内容</p>')
+
+    watch(
+      () => valueHtml.value,
+      (newVal, oldVal) => {
+        console.log('newVal:', newVal)
+        // 发送内容
+        socket.emit('enterMarkdown', { name: newVal })
+      }
+    )
+
+    const handleMarkdown = debounce(() => {
+      socket.on('enterMarkdown', (data) => {
+        console.log('dataA=:', data.name)
+        valueHtml.value = data.name
+      })
+    }, 500)
+
+    const toolbarConfig = {}
+    const editorConfig = { placeholder: '请输入内容...' }
+
+    onMounted(() => {
+      socket.emit('enterMarkdown', { name: valueHtml.value })
+      handleMarkdown()
+    })
+
+    // 组件销毁时，也及时销毁编辑器
+    onBeforeUnmount(() => {
+      const editor = editorRef.value
+      if (editor == null) return
+      editor.destroy()
+    })
+
+    const handleCreated = (editor) => {
+      editorRef.value = editor // 记录 editor 实例，重要！
+    }
+
+    return {
+      editorRef,
+      valueHtml,
+      mode: 'default', // 或 'simple'
+      toolbarConfig,
+      editorConfig,
+      handleCreated
+    }
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/Search/index.vue b/src/views/Search/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..786ad81c82ac4b40413da9b678bacedc688be56e
--- /dev/null
+++ b/src/views/Search/index.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="left">
+    <el-card class="box-card1">
+      <template #header>
+        <div class="card-header">
+          <h1>搜索结果</h1>
+        </div>
+      </template>
+      <div v-for='item in state.aa' :key="item">
+        <!-- <img :src="item.img" alt="" />
+        {{item.title}} -->
+        <dl>
+          <dt>
+            <span>
+              <h2 @click="Detail(item.id)">{{ item.title }}</h2>
+            </span>
+           <img :src="item.img" alt="" />
+            <span style="color: #8590a6" class="bq">{{
+              filterTime(item.date)
+            }}</span>
+            <span style="color: #8590a6">{{ item.love }}</span>
+          </dt>
+          <dd>
+
+            <div class="fx">
+              <span style="margin: 0 6px">
+                <i class="iconfont icon-kongxin"></i> {{ item.love }}
+              </span>
+              <span style="margin: 0 6px">·</span>
+              <span style="margin: 0 6px">
+                <i class="iconfont icon-yanjing"></i>
+                {{ item.reading }}
+              </span>
+              <span style="margin: 0 6px">·</span>
+              <span>
+                <i class="iconfont icon-fenxiang"></i>
+                分享
+              </span>
+            </div>
+          </dd>
+        </dl>
+      </div>
+    </el-card>
+  </div>
+
+  <div class="right">
+       <el-card class="box-card1">
+        <template #header>
+          <div class="card-header">
+            <h1>推荐阅读</h1>
+          </div>
+        </template>
+        <div v-for="item in list" :key="item" class="text item"  @click="Detail(item.id)">
+          <span class="textitem" > {{ item.title }}</span>
+          <span style="margin: 0 6px">.</span>
+          <span style="color: #8590a6">{{ filterTime(item.date) }}</span>
+        </div>
+      </el-card>
+  </div>
+
+  <!-- <div v-for='item in state.aa' :key="item">
+    {{item.title}}
+  </div> -->
+  <!-- <div>{{state.aa.title}}</div> -->
+</template>
+
+<script>
+import { defineComponent, onMounted, reactive,watch,computed } from 'vue'
+import store from "@/store"
+import { filterTime } from '../../utils/index'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  setup() {
+      const router = useRouter()
+    const store = useStore()
+    store.dispatch('fetch_list')
+    // //vuex拿数据，必须使用 computed 计算属性接收
+    const list = computed(() => {
+      return store.state.list
+    })
+   //响应式数据
+    const state = reactive({
+      aa: []
+    })
+
+ //执行一次
+    onMounted(() => {
+      sList()
+    })
+  //监听值
+    watch(()=>store.state.search,(newV)=>{
+      sList()
+    })
+
+    const sList = () => {
+      state.aa = store.state.search
+      console.log(state.aa, "我是搜索页面的数据");
+    }
+
+    //跳详情
+    const Detail = (id) => {
+      console.log('id', id)
+      router.push(`/detail/${id}`)
+    }
+    return {
+      sList,
+      state,
+      filterTime,
+      list,
+      Detail
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.left {
+  width: 66%;
+  height: 100%;
+  margin-top: 50px;
+  // box-shadow: 2px 2px 4px #000000;
+   dl dt img{
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+   }
+
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .textitem:hover {
+    color: #f76d88;
+    font-size: 20px;
+  }
+
+  .ml-2:hover {
+    font-size: 20px;
+    background: rgb(81, 101, 134);
+  }
+
+  .box-card1 {
+    margin-top: 20px;
+    width: 100%;
+  }
+
+  .card-header {
+    height: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .text {
+    font-size: 14px;
+  }
+}
+
+.right {
+  width: 32%;
+  height: 100%;
+  color: white;
+  margin-top: 50px;
+   .box-card1 {
+    width: 433px;
+
+  }
+
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+  .textitem:hover {
+    color: #f76d88;
+    font-size: 20px;
+  }
+  .ml-2:hover {
+    font-size: 20px;
+    background: rgb(81, 101, 134);
+  }
+  .box-card1 {
+    margin-top: 20px;
+    width: 433px;
+  }
+ .card-header {
+    height: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .text {
+    font-size: 14px;
+  }
+
+}</style>
diff --git a/src/views/Shout/index.vue b/src/views/Shout/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb4b77316f55b9c930c027c442d8decc30bca153
--- /dev/null
+++ b/src/views/Shout/index.vue
@@ -0,0 +1,16 @@
+<template lang="">
+  <Shout />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Shout from '../../components/Shout.vue'
+export default defineComponent({
+  components: {
+    Shout
+  },
+  setup() {
+    return {}
+  }
+})
+</script>
+<style lang=""></style>
diff --git a/src/views/pigeonhole/index.vue b/src/views/pigeonhole/index.vue
index 6da2333035c25ae8b78d457e70c292bbe2dd6e9b..4b50f25474a5e261577e91c9ac1d0bc93d44f8e1 100644
--- a/src/views/pigeonhole/index.vue
+++ b/src/views/pigeonhole/index.vue
@@ -1,5 +1,5 @@
 <template lang="">
-  <div>归档</div>
+  <div>知识小测</div>
 </template>
 <script>
 export default {}
diff --git a/src/views/quiz/index.vue b/src/views/quiz/index.vue
index 4b50f25474a5e261577e91c9ac1d0bc93d44f8e1..263ff2522b620eb4944fe2df6d267443bbff4b4e 100644
--- a/src/views/quiz/index.vue
+++ b/src/views/quiz/index.vue
@@ -1,7 +1,19 @@
 <template lang="">
-  <div>知识小测</div>
+  <div class='imgs'>
+     <img src="../../assets/下载.jpg" alt="">
+  </div>
 </template>
 <script>
 export default {}
 </script>
-<style lang=""></style>
+<style lang="scss" scoped>
+.imgs{
+   width: 70%;
+   margin:0 15%;
+   
+   margin-top:1600px
+}
+img{
+    width: 100%;
+}
+</style>