修改首页和行业方案

src/components/search/index.vue

@@ -8,32 +8,61 @@
         <i slot="suffix" class="el-input__icon el-icon-search" @click="onSubmit"></i>
       </el-input>
       <div style="width: 100%;text-align: center;font-size: 1.4vw;line-height: 3vw;font-weight: 600">{{
-          list.length || 0
+          (list.length + list1.length) || 0
         }}个相关结果
       </div>
-      <div class="container">
-        <div class="classify" v-if="list.length > 0">
-          <div class="classifyName">
-            行业方案
+      <div class="container" v-if="list.length > 0">
+        <div class="tabs">
+          <div class="content">
+            <div @click="checkTabs(k)"
+                 style="width:calc(50% - 2px - 4vw);white-space: nowrap;overflow: auto;text-align: center"
+                 :class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in ['行业方案','产品中心']">
+              {{ i }}
             </div>
+          </div>
+        </div>
+        <div class="classify" v-if="tabsActive == 0">
           <div class="item" v-for="i in list" @click="toLink(i.link)">
+            <div class="img">
+              <el-image
+                  fit="contain"
+                  style="width: 100%;height: 10vw"
+                  :src="i.img"
+              ></el-image>
+            </div>
+            <div class="itemTime">
+              {{ i.time }}
+            </div>
             <div class="itemTitle" v-html="i.snippet">
             </div>
             <div class="itemText">
               {{ i.title }}
             </div>
+            <div class="itemViewMore">
+              查看详情
             </div>
           </div>
-        <div class="classify" v-if="list1.length > 0">
-          <div class="classifyName">
-            产品中心
         </div>
+        <div class="classify" v-if="tabsActive == 1">
           <div class="item" v-for="i in list1" @click="toLink1(i.link)">
+            <div class="img">
+              <el-image
+                  fit="contain"
+                  style="width: 100%;height: 10vw"
+                  :src="i.img"
+              ></el-image>
+            </div>
+            <div class="itemTime">
+              {{ i.time }}
+            </div>
             <div class="itemTitle" v-html="i.snippet">
             </div>
             <div class="itemText">
               {{ i.title }}
             </div>
+            <div class="itemViewMore">
+              查看详情
+            </div>
           </div>
         </div>
       </div>
@@ -50,6 +79,7 @@ export default {
       form: {},
       list: [],
       list1: [],
+      tabsActive: 0,
     }
   },
   methods: {
@@ -82,13 +112,19 @@ export default {
     toLink1(e) {
       this.$router.push(`/productCenter/detail?type=${e[0]}&typeId=${e[1]}&id=${e[2]}`)
       this.dialogVisible = false
-    }
+    },
+    checkTabs(k) {
+      console.log(k)
+      this.tabsActive = k
+    },
   },
   mounted() {
   },
 }
 </script>
 <style scoped lang="less">
+@import "~@/style.less";
+
 .searchBtn {
   position: absolute;
   top: 50%;
@@ -124,15 +160,43 @@ em {
   }
 
   .item {
-    width: 100%;
+    display: inline-block;
+    width: calc(25% - 2vw);
+    margin-right: 2vw;
+    margin-bottom: 2vw;
     background-color: #fff;
-    border-bottom: 1px solid #ddd;
+    //border-bottom: 1px solid #ddd;
     cursor: pointer;
 
-    .itemTitle {
+    &:hover {
+
+      .itemViewMore {
+        color: @standard-color;
+      }
+    }
+
+    .itemTime {
       line-height: 3vw;
+      font-size: 0.8vw;
+      font-weight: bold;
+      color: #0006;
+    }
+
+    .itemViewMore {
+      line-height: 3vw;
+      font-size: 0.8vw;
+      font-weight: bold;
+      color: #0006;
+    }
+
+    .itemTitle {
+      line-height: 1.8vw;
       font-size: 1vw;
       font-weight: bold;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
 
       /deep/ em {
         color: #42b983;
@@ -147,4 +211,48 @@ em {
 
   }
 }
+
+.tabs {
+  cursor: pointer;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+
+  .content {
+    width: 100%;
+    position: relative;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+
+    .tab {
+      display: inline-block;
+      line-height: 6.2vw;
+      letter-spacing: 3px;
+      font-size: 1vw;
+      position: relative;
+      padding: 0 2vw;
+
+      &:last-child::after {
+        display: none;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1px;
+        height: 1vw;
+        background-color: #409eff;
+        top: calc(50% - 0.5vw);
+      }
+    }
+
+    .tab.active {
+      color: @standard-color;
+      //border: 1px solid #fff6;
+      //box-shadow: 0 0 3px #0002;
+    }
+  }
+}
 </style>

src/layout/index.vue

@@ -52,7 +52,11 @@ export default {
       this.$router.push('/index')
     },
     toTop() {
-      window.scrollTo({top: 0, behavior: 'smooth'});
+      // window.scrollTo({top: 0, behavior: 'smooth'});
+      document.getElementById('content').scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
     },
     toService() {
       this.$router.push('/serviceSupport')

src/views/contactUs/index.vue

@@ -12,18 +12,20 @@
         </div>
       </div>
     </div>
-    <div v-for="i in data.tabsList" v-if="false">
+    <div v-for="i in data.tabsList" v-if="true">
       <CompanyProfile id="item3" class="companyProfile" v-if="i.type === 2" :data="i.data"/>
       <EnterpriseQualification id="item10" class="enterpriseQualification" v-if="i.type === 3"
                                :data="i.data"/>
       <Partner id="item8" class="companyProfile" v-if="i.type === 4" :data="i.data"/>
       <MediaCenter id="item9" class="companyProfile" v-if="i.type === 5" :data="i.data"/>
     </div>
+    <div v-if="false">
     <CompanyProfile v-if="itemId === 3" id="item3" class="companyProfile" :data="data.tabsList[0].data"/>
     <Partner id="item8" v-if="itemId === 8" class="companyProfile" :data="data.tabsList[1].data"/>
     <MediaCenter id="item9" v-if="itemId === 9" class="companyProfile" :data="data.tabsList[2].data"/>
     <EnterpriseQualification v-if="itemId === 10" id="item10" class="enterpriseQualification"
                              :data="data.tabsList[3].data"/>
+    </div>
     <!--    <div v-for="i in tabsList">-->
     <!--      <CompanyProfile class="companyProfile" v-if="i.type === '2'" :data="i.data"/>-->
     <!--      <EnterpriseQualification class="enterpriseQualification" v-if="i.aboutUsInfoType === '3'"-->
@@ -194,7 +196,7 @@ export default {
     checkTabs(e, k) {
       this.tabsActive = k
       this.itemId = e.id
-      // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
+      document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
     },
     getData() {
       getAboutUsInfo().then(e => {
@@ -253,6 +255,9 @@ export default {
   white-space: nowrap;
   background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
   backdrop-filter: saturate(50%) blur(4px);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
 
   .content {
     width: 100%;