From 78eb84b2b80cf2a74c36d130e2252eff388b1efc Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Wed, 27 Dec 2023 23:37:33 +0800
Subject: [PATCH] nav detail update

---
 src/assets/css/home-style.css             |  12 ++-
 src/components/detail/HotRecomment.vue    | 112 +++++++++-----------
 src/components/detail/NavDetail.vue       |   8 +-
 src/components/detail/NewRecomment.vue    | 119 ++++++++++------------
 src/components/detail/RandomRecomment.vue |  73 +------------
 src/components/home/NavList.vue           |   4 +-
 src/components/home/SearchInput.vue       |  20 ++--
 7 files changed, 129 insertions(+), 219 deletions(-)

diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 30c5e8d..5eebe24 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -978,14 +978,20 @@ body.light-mode .video-bg:before {
 /** 总推荐标签 **/
 .RecAll{
     display:flex;
-    height:300px;
     flex-direction: row;
+    height:330px;
+    width: 330px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
 }
 
 /** 单列推荐标签 **/
 .SingleLabel{
     margin-top:2px;
-    width:210px;
+    width:330px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     height: 100%;
     border-radius:10px;
 }
@@ -996,7 +1002,7 @@ body.light-mode .video-bg:before {
     font-size:13px;
     margin-top:8px;
     margin-left:5px;
-    width:155px;
+    width:330px;
     height:30px;
     border-radius:10px;
     color: var(--theme-color);
diff --git a/src/components/detail/HotRecomment.vue b/src/components/detail/HotRecomment.vue
index e759c55..1af2259 100644
--- a/src/components/detail/HotRecomment.vue
+++ b/src/components/detail/HotRecomment.vue
@@ -8,70 +8,14 @@
       </div>
       <div class="RecAll">
         <div class="SingleLabel">
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-        </div>
-        <div class="SingleLabel" style=" margin-left:3px;">
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+          <div v-if="hotNav" class="app-card" id="ALabel" v-for="(item,index) in hotNav" :key="index">
+            <div v-if="item.id" style="display: flex;flex-direction: row ;margin-top: -14px;margin-left: -11px" @click="toDetail(item.id)">
+              <el-image v-if="item.icon" class="little-Circle" style="width:35px !important;height: 35px !important;"  :src="item.icon">
+                <div slot="error" class="image-slot">
+                  <img style="width: 28px" :src="require('@/assets/img/null.png')" alt="图标">
+                </div>
+              </el-image>
+              <span v-if="item.name" style="overflow-x: scroll;margin-top:2px;margin-left:10px;width:90%;text-align: center">{{item.name}}</span>
             </div>
           </div>
         </div>
@@ -80,14 +24,17 @@
   </div>
 </template>
 <script>
+import axios from "axios";
+
 export default {
   name:"HotRecomment",
   data() {
     return {
       visible: false,
+      hotNav:[],
     }},
   mounted() {
-
+    this.getHotNav();
   },
   created() {
 
@@ -97,6 +44,41 @@ export default {
   },
   methods: {
 
+    toDetail(id){
+      if(id){
+        let pathInfo = this.$router.resolve({
+          path: '/nav',
+          query: {
+            uid: id,
+          }
+        })
+        window.open(pathInfo.href, '_self');
+      } else {
+        return false;
+      }
+    },
+
+      getHotNav(){
+        let _this = this;
+          axios({
+            method: 'post',
+            url: '/api/recommendTopEightUrl',
+          }).then(function (res) {
+            if (res.data.code===200){
+                _this.hotNav=res.data.data;
+            }else{
+              return false;
+            }
+
+
+          }).catch((error) => {
+            // Vue.prototype.$notify.error({
+            //   title: '错误',
+            //   message: error === null ? '' : error,
+            //   offset: 0
+            // });
+          })
+      },
   }
 
 }
diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue
index 006b6a0..30823ba 100644
--- a/src/components/detail/NavDetail.vue
+++ b/src/components/detail/NavDetail.vue
@@ -9,8 +9,12 @@
             <div class="card" style="width: 130px;height:130px;margin-top:50px;background-color: var( --theme-bg-color)"
                  @click="ToURL()">
               <div style="width:100%;height:100%">
-                <img v-if="UrlObj.icon != null " :src="UrlObj.icon" style="width:100%;height:100%">
-                <img v-else src="../../assets/logo.png" style="width:100%;height:100%">
+                <el-image v-if="UrlObj.icon !== null " :src="UrlObj.icon" style="width:100%;height:100%">
+                  <div slot="error" class="image-slot">
+                    <img style="width: 28px;" :src="require('@/assets/img/null.png')" alt="图标">
+                  </div>
+                </el-image>
+<!--                <img v-else src="../../assets/logo.png" style="width:100%;height:100%">-->
 <!--                <iframe src="https://www.canva.cn/" style="width:100%;height:100%"></iframe>-->
               </div>
             </div>
diff --git a/src/components/detail/NewRecomment.vue b/src/components/detail/NewRecomment.vue
index 8de7ba4..b60c770 100644
--- a/src/components/detail/NewRecomment.vue
+++ b/src/components/detail/NewRecomment.vue
@@ -10,70 +10,18 @@
       </div>
       <div class="RecAll">
         <div class="SingleLabel">
-          <div class="app-card" id="ALabel">
+          <div v-if="latestNav" class="app-card" id="ALabel" v-for="(item,index) in latestNav" :key="index">
             <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
             <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-        </div>
-        <div class="SingleLabel" style=" margin-left:3px;">
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-            </div>
-          </div>
-          <div class="app-card" id="ALabel">
-            <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-            <!--                </div>-->
-            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-              <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+            <div v-if="item.id" style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-11px;margin-top:-15px" @click="toDetail(item.id)">
+              <el-image v-if="item.icon" class="little-Circle" style="width:35px !important;height: 35px !important;"
+                        :src="item.icon">
+                <div slot="error" class="image-slot">
+                  <img style="width: 28px" :src="require('@/assets/img/null.png')" alt="图标">
+                </div>
+              </el-image>
+              <span v-if="item.name"
+                  style="overflow-x: scroll;margin-top:2px;margin-left:10px;width:90%;text-align: center">{{item.name}}</span>
             </div>
           </div>
         </div>
@@ -82,23 +30,58 @@
   </div>
 </template>
 <script>
+import axios from "axios";
+
 export default {
-  name:"NewRecomment",
+  name: "NewRecomment",
   data() {
     return {
       visible: false,
-    }},
+      latestNav: [],
+    }
+  },
   mounted() {
-
+    this.getLatestNav();
   },
   created() {
 
   },
-  computed: {
-
-  },
+  computed: {},
   methods: {
 
+    toDetail(id){
+      if(id){
+      let pathInfo = this.$router.resolve({
+        path: '/nav',
+        query: {
+          uid: id,
+        }
+      })
+      window.open(pathInfo.href, '_self');
+    } else {
+      return false;
+    }
+    },
+
+    getLatestNav() {
+      let _this = this;
+      axios({
+        method: 'post',
+        url: '/api/recommendLatestUrl',
+      }).then(function (res) {
+        if (res.data.code === 200) {
+          _this.latestNav = res.data.data;
+        } else {
+          return false;
+        }
+      }).catch((error) => {
+        // Vue.prototype.$notify.error({
+        //   title: '错误',
+        //   message: error === null ? '' : error,
+        //   offset: 0
+        // });
+      })
+    },
   }
 
 }
diff --git a/src/components/detail/RandomRecomment.vue b/src/components/detail/RandomRecomment.vue
index 1f8dc0e..1b74180 100644
--- a/src/components/detail/RandomRecomment.vue
+++ b/src/components/detail/RandomRecomment.vue
@@ -6,78 +6,11 @@
           width:100%;border-radius:10px;
           font-size:25px;border-color:var(--border-color) ;border-width: 5px">
         <span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-data"></i>
-          随机推荐
+          推广
         </span>
         </div>
-        <div class="RecAll">
-          <div class="SingleLabel">
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-          </div>
-          <div class="SingleLabel" style=" margin-left:3px;">
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-            <div class="app-card" id="ALabel">
-              <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
-              <!--                </div>-->
-              <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
-                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  src="../../assets/img/beauty.jpg"/>
-                <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
-              </div>
-            </div>
-          </div>
+        <div class="RecAll" style="display: flex;align-items: center;justify-content: center">
+          <el-image style="width: 300px;height: 110px" src="https://landaiqing.space/wp-content/uploads/2023/11/20231106172214680026.bmp"></el-image>
         </div>
       </div>
     </div>
diff --git a/src/components/home/NavList.vue b/src/components/home/NavList.vue
index 8a61063..98365e2 100644
--- a/src/components/home/NavList.vue
+++ b/src/components/home/NavList.vue
@@ -116,7 +116,6 @@ export default {
           path: '/nav',
           query: {
             uid: this.nav.urlId,
-            refresh: true,
           }
         })
         window.open(pathInfo.href, '_self');
@@ -176,4 +175,7 @@ export default {
 .qr:hover {
   color: #5ddcff;
 }
+::v-deep .el-dialog {
+  border-radius: 30px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/home/SearchInput.vue b/src/components/home/SearchInput.vue
index d7459d3..4f38a52 100644
--- a/src/components/home/SearchInput.vue
+++ b/src/components/home/SearchInput.vue
@@ -15,9 +15,9 @@
                         <span class="title">热搜榜</span>
 <!--                        <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>-->
                     </div>
-                    <div v-if="hotSearchKeyWords.length!==0" v-show="isShowClearHistory">
+                    <div v-if="hotSearchKeyWords" v-show="isShowClearHistory">
                         <el-tag
-                            :v-if="hotSearchKeyWords.length!==0"
+                            :v-if="hotSearchKeyWords"
                             v-for="(tag,index) in hotSearchKeyWords"
                             :key="index"
                             size="small"
@@ -27,8 +27,8 @@
                             {{ tag }}
                         </el-tag>
                     </div>
-                    <div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
-                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    <div v-if="!hotSearchKeyWords" v-show="isShowClearHistory">
+                      <span  v-show="!searchResults" >暂无搜索结果...</span>
                     </div>
                     <div
                         v-show="!isShowClearHistory">
@@ -41,9 +41,9 @@
                         <span class="title">搜索历史</span>
 <!--                        <span class="clear"  v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>-->
                     </div>
-                    <div v-if="historySearch.length!==0" v-show="isShowClearHistory">
+                    <div v-if="historySearch" v-show="isShowClearHistory">
                         <el-tag
-                            :v-if="historySearch.length!==0"
+                            :v-if="historySearch"
                             v-for="(tag,index) in historySearch"
                             :key="index"
                             size="small"
@@ -55,8 +55,8 @@
                             {{ tag }}
                         </el-tag>
                     </div>
-                    <div v-if="historySearch.length===0" v-show="isShowClearHistory">
-                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    <div v-if="!historySearch" v-show="isShowClearHistory">
+                      <span  v-show="!searchResults" >暂无搜索结果...</span>
                     </div>
                     <div
                         v-show="!isShowClearHistory">
@@ -70,12 +70,12 @@
                         <span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
                     </div>
                     <div  style="max-height: 300px;overflow-y: scroll">
-                        <el-scrollbar  v-show="searchResults.length!==0">
+                        <el-scrollbar  v-show="searchResults">
                             <div  v-for="(item,index) in searchResults" :key="index">
                                <SearchResults :search-results="item"></SearchResults>
                             </div>
                         </el-scrollbar>
-                        <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                        <span  v-show="!searchResults" >暂无搜索结果...</span>
                     </div>
 
                 </div>