优化页面细节问题

components/aside-tree.vue

@@ -9,6 +9,7 @@
           <el-tree
             v-if="refresh"
             :data="treeData"
+            :empty-text="$t('common.empty')"
             node-key="id"
             highlight-current
             default-expand-all

locales/en.json

@@ -33,7 +33,8 @@
     "submitSuccess": "Submit success",
     "fulltextsearch": "Full text search",
     "language": "Language",
-    "Categories": "Categories"
+    "Categories": "Categories",
+    "empty": "No data available at the moment"
   },
   "menu": {
     "Home": "Home",

locales/zh.json

@@ -33,7 +33,8 @@
     "submitSuccess": "提交成功",
     "fulltextsearch": "全站搜索",
     "language": "语言",
-    "Categories": "分类"
+    "Categories": "分类",
+    "empty": "暂无数据"
   },
   "menu": {
     "Home": "首页",

pages/article-page/_id.vue

@@ -9,7 +9,7 @@
     <div class="article-page-content">
       <div class="rich-text" v-html="detais.content"></div>
       <ContactFooter />
-      <div class="guide">
+      <div class="guide" :style="{'justify-content': prevarticle ? 'space-between' : 'flex-end'}">
         <nuxt-link :to="`/article-page/${prevarticle.id}`" v-if="prevarticle">
           {{ $t('common.prev') }}: {{ prevarticle.title }}
         </nuxt-link>
@@ -151,7 +151,6 @@ export default {
       padding-top: .625rem;
       display: flex;
       align-items: center;
-      justify-content: space-between;
       color: #515760;
       border-top: 1px solid #d8dde1;
       font-size: .875rem;

pages/article-page/index.vue

@@ -7,12 +7,12 @@
       v-for="item in pordObj.records"
       :key="item.id"
     >
-      <b-img 
-        class="col-md-4"
+      <img 
+        class="col-md-4 cover"
         :src="item.mainPic"
         :alt="item.title"
       >
-      </b-img>
+      </img>
       <article class="col-md-8">
         <h3 class="title text-ellipsis">
           {{ item.title }}
@@ -67,6 +67,10 @@ export default {
     height: min-content;
     min-height: 12.875rem;
     border: 1px solid #e6e8ec;
+    .cover {
+      height: 13.75rem;
+      object-fit: cover;
+    }
     article {
       padding: 1.125rem;
       font-size: .875rem;

pages/index.vue

@@ -39,7 +39,7 @@
             </nuxt-link>
           </li>
         </ul>
-        <nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
+        <nuxt-link class="more box_shadow" to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">{{ $t('common.readMore') }}</nuxt-link>
         <b-img class="word-img" src="../assets/image/backGroundImg/home-world.png" alt="word" fluid ></b-img>
       </div>
     </section>
@@ -80,7 +80,7 @@
           </template>
         </b-carousel-slide>
       </b-carousel>
-      <nuxt-link class="more box_shadow" to="/products&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
+      <nuxt-link class="more box_shadow" to="/products?maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
     </section>
 
     <!-- Products -->
@@ -96,8 +96,8 @@
                     <b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
                   </div>
                   <div class="products-info col-5 col-md-6">
-                    <h3>{{ item.title }}</h3>
-                    <div v-html="item.description"></div>
+                    <h3 class="text-ellipsis">{{ item.title }}</h3>
+                    <div class="desc text-ellipsis" v-html="item.description"></div>
                     <!-- <p>{{ $t('common.brand') }}: Foton</p>
                     <p>{{ $t('common.driveWheel') }}: 8x4</p>
                     <p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
@@ -140,10 +140,10 @@
             </div>
           </article>
           <ul class="col-12 col-md-6">
-            <li class="new-item box_shadow mb-3" v-for="item in hotNewsList.slice(1, 4)" :key="item.id">
+            <li class="new-item box_shadow mb-3" v-for="item in hotNewsList.slice(1, 5)" :key="item.id">
               <article>
                 <nuxt-link class="row" :to="`/article-page/${item.id}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${item.catgId}`">
-                  <b-img class="col-5" :src="item.mainPic" fluid-grow :alt="item.title"></b-img>
+                  <img class="col-5 cover" :src="item.mainPic" fluid-grow :alt="item.title"></img>
                   <div class="news-info col-7">
                     <h4 class="text-ellipsis">{{ item.title }}</h4>
                     <p class="text-ellipsis" style="-webkit-line-clamp: 3;">
@@ -405,6 +405,9 @@ export default {
           color: #212222;
           font-size: .875rem;
         }
+        .desc {
+          -webkit-line-clamp: 9;
+        }
         p {
           color: #878b90;
           font-size: .875rem;
@@ -447,6 +450,10 @@ export default {
     }
     .new-item {
       background-color: #fff;
+      .cover {
+        height: 12.5rem;
+        object-fit: cover;
+      }
       .news-info {
         padding: 1.625rem 1.125rem .875rem;
         font-size: .875rem;

pages/inquiry.vue

@@ -7,7 +7,7 @@
       <div class="form-container box_shadow w-75 m-auto">
         <article class="header">
           <div class="title d-flex align-items-center">
-            <h2 class="d-none d-md-block">{{ pageInfo.title }}</h2>
+            <h2 class="d-none d-md-block">{{ pageInfo.catgName }}</h2>
             <b-img class="mr-4" src="~assets/image/backGroundImg/contact-us-logo.png" fluid :alt="$t('index.corporateName')"></b-img>
           </div>
           <p class="row mt-3">
@@ -192,7 +192,7 @@ export default {
   async asyncData({ $axios, query }) {
     const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
     let bannerTopOptions = {
-      title: pageInfo.title,
+      title: pageInfo.catgName,
       subTitle: pageInfo.description,
       img:  require('../assets/image/banner/aboutus-banner.png')
     }

pages/products/_id.vue

@@ -32,7 +32,7 @@
         <div class="parameter" v-html="prodDetail.description"></div>
 
         <div class="visit">
-          <a class="box_shadow" href="javascript:;">
+          <a class="box_shadow" href="#form-target">
             <img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
             {{ $t('common.sendInquiry') }}
           </a>
@@ -51,7 +51,7 @@
         <h2>{{ $t('products.productDetails') }}</h2>
       </div>
       <div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
-      <div class="guide">
+      <div class="guide" :style="{'justify-content': prevNews ? 'space-between' : 'flex-end'}">
         <nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
           {{ $t('common.prev') }}: {{ prevNews.title }}
         </nuxt-link>
@@ -63,7 +63,7 @@
     </div>
 
     <div class="mt-5">
-      <div class="pretty-header">
+      <div class="pretty-header" id="form-target">
         <h2>{{ $t('products.inquiry') }}</h2>
       </div>
 
@@ -410,7 +410,6 @@ export default {
     padding-top: .625rem;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     color: #515760;
     border-top: 1px solid #d8dde1;
     font-size: .875rem;

pages/products/chatForm.vue

@@ -72,8 +72,8 @@ export default {
     }
   },
 
-  destroyed: function () {
-    // 离开页面生命周期函数
+  beforeDestroy() {
+  // 离开页面生命周期函数
     this.$store.dispatch('modules/websocket/websocket_close')
   },
 

pages/search-result.vue

@@ -9,12 +9,12 @@
           v-for="item in pordObj.records"
           :key="item.id"
         >
-          <b-img 
-            class="col-md-4"
+          <img 
+            class="col-md-4 cover"
             :src="item.mainPic"
             :alt="item.title"
           >
-          </b-img>
+          </img>
           <article class="col-md-8">
             <h3 class="title text-ellipsis">
               {{ item.title }}
@@ -80,6 +80,10 @@ export default {
     height: min-content;
     min-height: 12.875rem;
     border: 1px solid #e6e8ec;
+    .cover {
+      height: 13.75rem;
+      object-fit: cover;
+    }
     article {
       padding: 1.125rem;
       font-size: .875rem;

pages/separate.vue

@@ -20,7 +20,7 @@ export default {
     const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
 
     let bannerTopOptions = {
-      title: pageInfo.title,
+      title: pageInfo.catgName,
       subTitle: pageInfo.description,
       img:  require('../assets/image/banner/aboutus-banner.png')
     }

store/modules/websocket.js

@@ -38,7 +38,10 @@ export const mutations = {
     state.socket.send(msg);
   },
   WEBSOCKET_CLOSE(state){
-    state.socket.close();
+    if (state.socket) {
+      state.socket.close();
+      state.socket = null;
+    }
   }
 }