diff --git a/src/assets/image/serviceSupport/5-1联系我们.png b/src/assets/image/serviceSupport/5-1联系我们.png
old mode 100755
new mode 100644
index de664f2..c56f31c
Binary files a/src/assets/image/serviceSupport/5-1联系我们.png and b/src/assets/image/serviceSupport/5-1联系我们.png differ
diff --git a/src/assets/image/serviceSupport/5-1联系我们1.png b/src/assets/image/serviceSupport/5-1联系我们1.png
new file mode 100755
index 0000000..de664f2
Binary files /dev/null and b/src/assets/image/serviceSupport/5-1联系我们1.png differ
diff --git a/src/assets/image/serviceSupport/5-2加入我们.png b/src/assets/image/serviceSupport/5-2加入我们.png
old mode 100755
new mode 100644
index cdd88f4..f45fb90
Binary files a/src/assets/image/serviceSupport/5-2加入我们.png and b/src/assets/image/serviceSupport/5-2加入我们.png differ
diff --git a/src/assets/image/serviceSupport/5-2加入我们1.png b/src/assets/image/serviceSupport/5-2加入我们1.png
new file mode 100755
index 0000000..cdd88f4
Binary files /dev/null and b/src/assets/image/serviceSupport/5-2加入我们1.png differ
diff --git a/src/assets/image/serviceSupport/c7347fa0e178ce3c8bcffefbc5b71a40.png b/src/assets/image/serviceSupport/c7347fa0e178ce3c8bcffefbc5b71a40.png
new file mode 100644
index 0000000..cb7b916
Binary files /dev/null and b/src/assets/image/serviceSupport/c7347fa0e178ce3c8bcffefbc5b71a40.png differ
diff --git a/src/components/chat/index.vue b/src/components/chat/index.vue
index 9c95bc6..2ff93b9 100644
--- a/src/components/chat/index.vue
+++ b/src/components/chat/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="onlineConsultation" @click="consultation ">
-      <div class="btn">
-        <img :src="customerService" alt="" class="customerService">
-        <span class="text">在线咨询</span>
-      </div>
-    </div>
+<!--    <div class="onlineConsultation" @click="consultation">-->
+<!--      <div class="btn">-->
+<!--        <img :src="customerService" alt="" class="customerService">-->
+<!--        <span class="text">在线咨询</span>-->
+<!--      </div>-->
+<!--    </div>-->
     <div class="chat" v-if="isChat" ref="dragDiv">
       <div class="topDrag" @mousedown="onMouseDown">
         <i class="el-icon-close close" @click="isChat = false"></i>
diff --git a/src/components/el/industrySolutionsEl/el3.vue b/src/components/el/industrySolutionsEl/el3.vue
index 3e7e3fe..48a2a2e 100644
--- a/src/components/el/industrySolutionsEl/el3.vue
+++ b/src/components/el/industrySolutionsEl/el3.vue
@@ -21,6 +21,9 @@
           <i class="el-icon-right icon"></i>
         </div>
       </template>
+      <div class="item ellipsisItem" v-if="data.list.length <3">
+        <div class="ellipsis">……</div>
+      </div>
     </div>
   </div>
 </template>
@@ -74,12 +77,24 @@ export default {
 
   .item {
     margin-right: 3vw;
-    width: calc(50% - 3vw);
+    width: calc(33.33% - 2vw);
     display: inline-block;
     margin-bottom: 1.4vw;
     vertical-align: top;
     position: relative;
 
+    &.ellipsisItem {
+      height: calc((90vw * 0.33 - 3vw) * 1080 / 1920);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ellipsis {
+      width: 100%;
+      text-align: center;
+    }
+
     &:hover {
 
       .img1 {
@@ -133,9 +148,9 @@ export default {
       cursor: pointer;
     }
 
-    &:nth-child(2n) {
+    &:nth-child(3n) {
       margin-right: 0;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index e7a425d..a9c1b4a 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -19,7 +19,8 @@ import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
 
 const indexRoute = [
   '/index',
-  '/newsDetail'
+  '/newsDetail',
+  '/newsList'
 ]
 const contactUsRoute = ['/contactUs']
 const industrySolutionsRoute = ['/industrySolutions']
@@ -184,4 +185,3 @@ export default {
 }
 
 </style>
-
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 56b1bee..dfc91d2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="top">
+    <div :class="['top', {hide: topHidden}]">
       <Menu class="menu"/>
       <img :src="logo" alt="" class="logo" @click="toIndex">
       <Search/>
     </div>
-    <div class="shadow">
+    <div :class="['shadow', {hide: topHidden}]">
     </div>
-    <div class="content" id="content">
+    <div :class="['content', {full: topHidden}]" id="content">
       <router-view></router-view>
     </div>
     <div class="FloatingWindow">
@@ -29,7 +29,7 @@
         <div style=" color: #fff">top</div>
       </div>
     </div>
-    <Chat/>
+    <Chat ref="chat"/>
   </div>
 </template>
 
@@ -59,15 +59,51 @@ export default {
       });
     },
     toService() {
-      this.$router.push('/serviceSupport')
+      this.$refs.chat && this.$refs.chat.consultation()
+    },
+    handleContentScroll() {
+      const content = document.getElementById('content')
+      if (!content) return
+      const currentTop = content.scrollTop
+      const direction = currentTop > this.lastScrollTop ? 'down' : 'up'
+      const tabs = content.querySelector('.tabs')
+      const tabsTouchedTop = this.isTabsTouchedTop(content, tabs)
+
+      if (!tabsTouchedTop) {
+        this.topHidden = false
+      } else if (direction === 'down') {
+        this.topHidden = true
+      } else if (direction === 'up') {
+        this.topHidden = false
+      }
+
+      this.lastScrollTop = currentTop
+    },
+    isTabsTouchedTop(content, tabs) {
+      if (!tabs) return false
+      const contentRect = content.getBoundingClientRect()
+      const tabsRect = tabs.getBoundingClientRect()
+      return tabsRect.top <= contentRect.top + 1
     },
   },
   mounted() {
+    const content = document.getElementById('content')
+    if (content) {
+      content.addEventListener('scroll', this.handleContentScroll, {passive: true})
+    }
+  },
+  beforeDestroy() {
+    const content = document.getElementById('content')
+    if (content) {
+      content.removeEventListener('scroll', this.handleContentScroll)
+    }
   },
   data() {
     return {
       logo,
       qrcode,
+      topHidden: false,
+      lastScrollTop: 0,
     }
   }
 }
@@ -85,6 +121,11 @@ export default {
   background-image: radial-gradient(transparent 1px, #fff 1px);
   backdrop-filter: saturate(50%) blur(4px);
   z-index: 2;
+  transition: transform 0.3s ease;
+
+  &.hide {
+    transform: translateY(-100%);
+  }
 }
 .shadow{
   position: fixed;
@@ -94,7 +135,12 @@ export default {
   height: @top-height;
   box-shadow: 0 -30px 40px rgba(0, 0, 0, 0.8);
   z-index: 3;
-  pointer-events: none
+  pointer-events: none;
+  transition: transform 0.3s ease;
+
+  &.hide {
+    transform: translateY(-100%);
+  }
 }
 
 .menu {
@@ -139,6 +185,12 @@ export default {
   height: calc(100vh - @top-height);
   z-index: 1;
   overflow: auto;
+  transition: top 0.3s ease, height 0.3s ease;
+
+  &.full {
+    top: 0;
+    height: 100vh;
+  }
 }
 
 .FloatingWindow {
diff --git a/src/router/index.js b/src/router/index.js
index eb66480..ef86da3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,10 @@ export default new Router({
 		  path: 'newsDetail',
 		  component: () => import('@/views/index/newsDetail.vue'),
 		},
+		{
+		  path: 'newsList',
+		  component: () => import('@/views/newsList/index.vue'),
+		},
 		{
 		  path: 'productCenter',
 		  component: () => import('@/views/productCenter/index.vue'),
diff --git a/src/views/contactUs/MediaCenter.vue b/src/views/contactUs/MediaCenter.vue
index 873fc54..b8444c0 100644
--- a/src/views/contactUs/MediaCenter.vue
+++ b/src/views/contactUs/MediaCenter.vue
@@ -1,13 +1,6 @@
 <template>
-  <div style="background-color: #F7FBFF">
-    <TitleGroup>
-      <template slot="subTitle">
-        <span class="subTitle">
-        媒体中心
-        </span>
-      </template>
-    </TitleGroup>
-    <div class="divider"></div>
+  <div style="background-color: #F7FBFF;padding-top: 2vw;">
+    <Title title="媒体中心"/>
     <div class="content">
       <div>
         <div class="info-image-card" v-for="i in list" :key="i.newsCode || i.id">
@@ -46,10 +39,12 @@
 
 import TitleGroup from "@/components/TitleGroup.vue";
 import {listNews} from "@/api/news";
+import Title from "@/components/global/title.vue";
 
 export default {
   name: 'PlatformIntroduction',
   components: {
+    Title,
     TitleGroup
   },
   data() {
@@ -109,7 +104,7 @@ export default {
 
 .content {
   display: inline-block;
-  width: 62vw;
+  width: 85vw;
   //height: 20.1vw;
   margin-top: 3.7vw;
   margin-bottom: 5.2vw;
diff --git a/src/views/contactUs/Partner.vue b/src/views/contactUs/Partner.vue
index 655ae6d..ef2e17a 100644
--- a/src/views/contactUs/Partner.vue
+++ b/src/views/contactUs/Partner.vue
@@ -1,13 +1,6 @@
 <template>
   <div>
-    <TitleGroup>
-      <template slot="subTitle">
-        <span class="subTitle">
-        合作伙伴
-        </span>
-      </template>
-    </TitleGroup>
-    <div class="divider"></div>
+    <Title title="合作伙伴"/>
     <div class="content" v-if="false">
       <div class="right">
         <el-image
@@ -37,11 +30,13 @@ import TitleGroup from "@/components/TitleGroup.vue";
 import partner from '@/assets/image/partner.png'
 import InfiniteImageScroller from '@/components/InfiniteImageScroller.vue'
 import logos from '@/assets/image/logos'
+import Title from "@/components/global/title.vue";
 
 export default {
   name: 'PlatformIntroduction',
   props: ['data'],
   components: {
+    Title,
     TitleGroup,
     InfiniteImageScroller
   },
diff --git a/src/views/contactUs/companyProfile.vue b/src/views/contactUs/companyProfile.vue
index f312ffb..b944dc0 100644
--- a/src/views/contactUs/companyProfile.vue
+++ b/src/views/contactUs/companyProfile.vue
@@ -1,13 +1,6 @@
 <template>
   <div>
-    <TitleGroup>
-      <template slot="subTitle">
-        <span class="subTitle">
-        公司概况
-        </span>
-      </template>
-    </TitleGroup>
-    <div class="divider"></div>
+    <Title title="公司概况"/>
     <div class="combo" v-if="true">
       <div class="combo-left">
         <div class="title">海威物联</div>
@@ -46,11 +39,13 @@
 import TitleGroup from "@/components/TitleGroup";
 import {getAboutUsInfoDetails} from "@/api/contactUs";
 import img1 from '@/assets/image/contactUs/img1.png'
+import Title from "@/components/global/title.vue";
 
 export default {
   name: 'PlatformIntroduction',
   props: ['data'],
   components: {
+    Title,
     TitleGroup
   },
   data() {
@@ -71,8 +66,8 @@ export default {
 .combo {
   display: flex;
   align-items: stretch;
-  width: 62vw;
-  margin: 0 auto;
+  width: 85vw;
+  margin: 2vw auto 0 auto;
   text-align: left;
 
   &-left {
@@ -96,7 +91,7 @@ export default {
       color: #333;
       line-height: 1.7;
       text-indent: 2em;
-      font-size: 0.9vw;
+      font-size: 1.2vw;
       letter-spacing: 0.1vw;
     }
 
@@ -106,8 +101,8 @@ export default {
       padding: 1vw;
       margin-top: 1vw;
       text-indent: 2em;
-      font-size: 0.9vw;
-      line-height: 1.8;
+      font-size: 1.2vw;
+      line-height: 2;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
       box-sizing: border-box;
       letter-spacing: 0.1vw;
@@ -153,11 +148,11 @@ export default {
   justify-content: center;
   align-items: flex-start;
 
-  padding-left: 18vw;
+  padding-left: 7.5vw;
   box-sizing: border-box;
 
   .text {
-    width: 62%;
+    width: 85vw;
     text-indent: 2em;
     color: #fff;
     font-size: 0.9vw;
diff --git a/src/views/contactUs/enterpriseQualification.vue b/src/views/contactUs/enterpriseQualification.vue
index d791096..796f38c 100644
--- a/src/views/contactUs/enterpriseQualification.vue
+++ b/src/views/contactUs/enterpriseQualification.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <TitleGroup>
       <template slot="subTitle">
         <span class="subTitle">
@@ -15,13 +14,16 @@
       <div class="list2" ref="list2">
         <div class="item" v-for="i in data.list2">{{ i }}</div>
       </div>
+      <div class="list3" ref="list3">
+        <div class="item" v-for="i in data.list3">{{ i }}</div>
+      </div>
     </div>
     <div class="carousel">
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <div class="swiper-slide" v-for="i in data.list3">
+          <div class="swiper-slide" v-for="i in data.list4">
             <el-image
-              style="width: 100%;height: 100%"
+                class="qualificationImage"
               :src="i"
               fit="contain"></el-image>
           </div>
@@ -51,7 +53,8 @@ export default {
   methods: {
     initSwiper() {
       const swiper = new Swiper(".mySwiper", {
-        slidesPerView: 4,
+        slidesPerView: 'auto',
+        slidesPerGroup: 1,
         spaceBetween: 30,
         loop: true,
         autoplay: true,
@@ -108,11 +111,11 @@ export default {
     position: absolute;
     box-shadow: 0 0 3px #0002;
     top: 100%;
-    left: 50%;
-    width: 24.8vw;
+    left: 7.5vw;
+    width: 20vw;
     border-radius: 5px;
     background-color: #fff;
-    transform: translate(calc(-100% - 2vw), -9.5vw);
+    transform: translateY(-9.5vw);
   }
 
   .list2 {
@@ -120,13 +123,24 @@ export default {
     box-shadow: 0 0 3px #0002;
     top: 100%;
     left: 50%;
-    width: 24.8vw;
+    width: 20vw;
     border-radius: 5px;
     background-color: #fff;
-    transform: translate(2vw, -9.5vw);
+    transform: translate(-50%, -9.5vw);
   }
 
-  .list1, .list2 {
+  .list3 {
+    position: absolute;
+    box-shadow: 0 0 3px #0002;
+    top: 100%;
+    right: 7.5vw;
+    width: 20vw;
+    border-radius: 5px;
+    background-color: #fff;
+    transform: translateY(-9.5vw);
+  }
+
+  .list1, .list2, .list3 {
     text-align: left;
     padding: 1.1vw 2.1vw;
     height: auto;
@@ -141,18 +155,42 @@ export default {
 }
 
 .carousel {
-  width: 62vw;
+  width: 85vw;
   margin: 32vw auto 0 auto;
   position: relative;
 
   .swiper {
-    width: 58vw;
+    width: 85vw;
     margin: 0 auto;
   }
+
+  .swiper-button-prev {
+    left: -3vw;
+  }
+
+  .swiper-button-next {
+    right: -3vw;
+  }
 }
 
 .swiper-slide {
+  width: auto;
   height: 30vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qualificationImage {
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+
+  /deep/ .el-image__inner {
+    width: auto;
+    height: 100%;
+  }
 }
 
 .subTitle {
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
index 3cdbb69..2aa8f27 100644
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@@ -126,8 +126,7 @@ export default {
                 '青岛市“百千万”工程千帆企业',
                 '获批青岛第四批“人才特区”人才项目',
                 '第十一届LT中国物流技术奖-创新应用奖',
-                '轮胎用RFID电子标签产品获得ROSH认证',
-                '第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖',
+                '通过信息系统建设和服务能力评估CS2级',
               ],
               list2: [
                 '国家级专精特新“小巨人”企业',
@@ -135,11 +134,14 @@ export default {
                 '科技型中小企业',
                 '获批山东省中小企业创新能力提升工程项目',
                 '第十届中国创新创业大赛青岛赛区二等奖',
-                '通过ISO 9001质量管理体系认证',
-                '轮胎用RFID电子标签自动化设备通过CE认证',
-                '通过信息系统建设和服务能力评估CS2级',
               ],
               list3: [
+                '轮胎用RFID电子标签产品获得ROSH认证',
+                '第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖',
+                '通过ISO 9001质量管理体系认证',
+                '轮胎用RFID电子标签自动化设备通过CE认证',
+              ],
+              list4: [
                 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BD%E5%AE%B6%E7%BA%A7%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E2%80%9C%E5%B0%8F%E5%B7%A8%E4%BA%BA%E2%80%9D%E4%BC%81%E4%B8%9A_20250822152510A168.png',
                 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BD%E5%AE%B6%E9%AB%98%E6%96%B0%E6%8A%80%E6%9C%AF%E4%BC%81%E4%B8%9A_20250822152526A169.jpg',
                 'http://1.13.177.47:9665/statics/2025/08/22/%E9%9D%92%E5%B2%9B%E5%B8%82%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E4%B8%AD%E5%B0%8F%E4%BC%81%E4%B8%9A_20250822152636A170.png',
diff --git a/src/views/index/newsCenter.vue b/src/views/index/newsCenter.vue
index 69fa914..229b068 100644
--- a/src/views/index/newsCenter.vue
+++ b/src/views/index/newsCenter.vue
@@ -38,7 +38,7 @@
       </el-button>
     </div>
     <div class="learnMore">
-      <el-button type="primary" plain>查看更多</el-button>
+      <el-button type="primary" plain @click="toNewsList">查看更多</el-button>
     </div>
   </div>
 </template>
@@ -96,6 +96,9 @@ export default {
         query: {newsCode: e.newsCode}
       })
     },
+    toNewsList() {
+      this.$router.push('/newsList')
+    },
     scrollNews(direction) {
       const newsList = this.$refs.newsList
       if (!newsList) return
diff --git a/src/views/newsList/index.vue b/src/views/newsList/index.vue
new file mode 100644
index 0000000..f882ffa
--- /dev/null
+++ b/src/views/newsList/index.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="newsListPage">
+    <Title title="新闻列表"/>
+    <div class="content">
+      <div class="filter">
+        <el-input
+            v-model="keywordText"
+            clearable
+            placeholder="请输入关键词，多个关键词用空格分隔"
+            prefix-icon="el-icon-search">
+        </el-input>
+      </div>
+      <div class="info-image-card" v-for="i in pageList" :key="i.newsCode || i.id">
+        <div class="info-image-card__side">
+          <div class="info-image-card__side-main">{{ i.day }}</div>
+          <div class="info-image-card__side-sub">{{ i.month }}/{{ i.year }}</div>
+        </div>
+
+        <div class="info-image-card__content">
+          <div class="info-image-card__title">
+            <span :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }}
+          </div>
+          <div class="info-image-card__desc">
+            {{ i.summary }}
+          </div>
+          <div class="info-image-card__link" @click="toDetail(i)">
+            <span>查看详情</span>
+            <span class="info-image-card__arrow"></span>
+          </div>
+        </div>
+
+        <img
+            class="info-image-card__image"
+            :src="i.cover"
+            :alt="i.title"
+            draggable="false"
+        >
+      </div>
+      <div class="pagination">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="filteredList.length"
+            @current-change="handlePageChange">
+        </el-pagination>
+      </div>
+    </div>
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import {listNews} from "@/api/news";
+import Title from "@/components/global/title.vue";
+import ContactUs from "@/components/contactUs";
+import Copyright from "@/components/copyright";
+
+export default {
+  name: 'NewsList',
+  components: {
+    Title,
+    ContactUs,
+    Copyright
+  },
+  data() {
+    return {
+      list: [],
+      keywordText: '',
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  watch: {
+    keywordText() {
+      this.currentPage = 1
+    }
+  },
+  computed: {
+    keywords() {
+      return this.keywordText
+          .trim()
+          .split(/\s+/)
+          .filter(Boolean)
+          .map(item => item.toLowerCase())
+    },
+    filteredList() {
+      if (this.keywords.length === 0) {
+        return this.list
+      }
+      return this.list
+          .map(item => ({
+            ...item,
+            matchCount: this.getMatchCount(item)
+          }))
+          .filter(item => item.matchCount > 0)
+          .sort((a, b) => b.matchCount - a.matchCount || this.getNewsTime(b) - this.getNewsTime(a))
+    },
+    pageList() {
+      const start = (this.currentPage - 1) * this.pageSize
+      return this.filteredList.slice(start, start + this.pageSize)
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      listNews().then(res => {
+        const rows = res.rows || res.data?.rows || []
+        this.list = rows
+            .map(item => this.parseNewsJson(item))
+            .filter(Boolean)
+            .sort((a, b) => this.getNewsTime(b) - this.getNewsTime(a))
+      })
+    },
+    parseNewsJson(item) {
+      try {
+        const newsJson = item.newsJson || '{}'
+        return {
+          id: item.id || item.newsId,
+          newsCode: item.newsCode,
+          newsJson,
+          ...JSON.parse(newsJson)
+        }
+      } catch (e) {
+        return null
+      }
+    },
+    getMatchCount(item) {
+      const content = String(item.newsJson || '').toLowerCase()
+      return this.keywords.reduce((total, keyword) => {
+        return total + this.countKeyword(content, keyword)
+      }, 0)
+    },
+    countKeyword(content, keyword) {
+      let count = 0
+      let index = content.indexOf(keyword)
+      while (index !== -1) {
+        count += 1
+        index = content.indexOf(keyword, index + keyword.length)
+      }
+      return count
+    },
+    getNewsTime(item) {
+      return new Date(`${item.year || 0}/${item.month || 1}/${item.day || 1}`).getTime()
+    },
+    tagStyle(type) {
+      const colorMap = {
+        1: '#3372FE',
+        2: '#18A058',
+        3: '#D03050'
+      }
+      return {
+        color: colorMap[type] || colorMap[1]
+      }
+    },
+    toDetail(e) {
+      this.$router.push({
+        path: '/newsDetail',
+        query: {newsCode: e.newsCode}
+      })
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.newsListPage {
+  min-height: 100%;
+  padding-top: 2vw;
+  background-color: #f7fbff;
+}
+
+.content {
+  display: inline-block;
+  width: 85vw;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+}
+
+.filter {
+  width: 36vw;
+  margin: 0 auto 2vw;
+
+  /deep/ .el-input__inner {
+    height: 3vw;
+    line-height: 3vw;
+    border-radius: 0;
+    font-size: 1vw;
+  }
+
+  /deep/ .el-input__icon {
+    line-height: 3vw;
+  }
+}
+
+.pagination {
+  margin-top: 2vw;
+  text-align: center;
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+
+.info-image-card {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1vw;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
+  text-align: left;
+
+  &:hover &__side {
+    color: #fff;
+    background: #3372fe;
+
+    &::after {
+      border-left-color: #3372fe;
+    }
+  }
+
+  &__side {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    width: 8vw;
+    flex: 0 0 8vw;
+    align-self: stretch;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+    background: #fff;
+    transition: color 0.2s ease, background-color 0.2s ease;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: calc(-1vw + 1px);
+      width: 0;
+      height: 0;
+      border-top: 1vw solid transparent;
+      border-bottom: 1vw solid transparent;
+      border-left: 1vw solid #fff;
+      content: '';
+      transform: translateY(-50%);
+      transition: border-left-color 0.2s ease;
+    }
+  }
+
+  &__side-main {
+    font-size: 3vw;
+    line-height: 1;
+  }
+
+  &__side-sub {
+    margin-top: 1vw;
+    font-size: 1vw;
+    line-height: 1.2;
+  }
+
+  &__content {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 2vw 2vw 2vw 4vw;
+  }
+
+  &__title {
+    overflow: hidden;
+    color: #000;
+    font-size: 1.3vw;
+    font-weight: 600;
+    line-height: 1.6vw;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__desc {
+    display: -webkit-box;
+    height: calc(1.5vw * 3);
+    margin-top: 1vw;
+    overflow: hidden;
+    color: #555;
+    font-size: 0.9vw;
+    line-height: 1.5vw;
+    text-indent: 2em;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    margin-top: 2vw;
+    color: #3372fe;
+    font-size: 0.9vw;
+    line-height: 1.2vw;
+    cursor: pointer;
+  }
+
+  &__arrow {
+    width: 0.3vw;
+    height: 0.3vw;
+    margin-left: 0.1vw;
+    border-top: 0.12vw solid currentColor;
+    border-right: 0.12vw solid currentColor;
+    transform: rotate(45deg);
+  }
+
+  &__image {
+    display: block;
+    width: 30%;
+    height: calc(1.6vw + 1vw + calc(1.5vw * 3) + 2vw + 1.2vw);
+    flex: 0 0 30%;
+    padding: 2vw 2vw 2vw 0;
+    object-fit: cover;
+  }
+}
+</style>
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index 33c8e36..b7ade9f 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -3,7 +3,7 @@
     <div class="banner">
       <el-image
         style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-        :src="pageData.productList.find(e => e.id === tabsActive).banner || pageData.banner"
+        :src="(pageData.productList.find(e => e.id === tabsActive) || {}).banner || pageData.banner"
         fit="contain"></el-image>
       <div class="bannerInfo">{{ pageData.bannerTitle }}</div>
     </div>
@@ -52,14 +52,11 @@ export default {
     }
   },
   mounted() {
-    if (this.$route.query.id) {
-      this.tabsActive = parseFloat(this.$route.query.id)
-    }
     this.getData()
   },
   watch: {
     '$route'() {
-      this.tabsActive = parseFloat(this.$route.query.id)
+      this.setActiveFromRoute()
       // this.getData()
       // let id = this.$route.query.id
       // if (id === '11') {
@@ -92,9 +89,17 @@ export default {
       selectMenuTree().then(e => {
         let tabsData = e.data.find(v => v.webMenuId === 7).children
         this.tabsData = tabsData
-        this.tabsActive = tabsData[0].webMenuId
+        this.setActiveFromRoute()
       })
     },
+    setActiveFromRoute() {
+      const routeId = parseFloat(this.$route.query.id)
+      if (routeId && this.tabsData.some(item => item.webMenuId === routeId)) {
+        this.tabsActive = routeId
+      } else if (this.tabsData.length > 0 && !this.tabsActive) {
+        this.tabsActive = this.tabsData[0].webMenuId
+      }
+    },
     checkTabs(e, k) {
       this.tabsActive = e.webMenuId
     },
diff --git a/src/views/serviceSupport/contactUs.vue b/src/views/serviceSupport/contactUs.vue
index 3a4a017..cc44684 100644
--- a/src/views/serviceSupport/contactUs.vue
+++ b/src/views/serviceSupport/contactUs.vue
@@ -4,10 +4,10 @@
       <div class="left">
         <div class="bottomInfo">
           <div class="contactInfo">
-            <p>联系电话：0532-88985832</p>
-            <p>联系邮箱：market@highwayiot.com</p>
-            <p>公司地址：青岛市市北区郑州路43号</p>
-            <p>邮编：266042</p>
+            <p><i class="el-icon-phone"></i><span>联系电话：0532-88985832</span></p>
+            <p><i class="el-icon-message"></i><span>联系邮箱：market@highwayiot.com</span></p>
+            <p><i class="el-icon-location-outline"></i><span>公司地址：青岛市市北区郑州路43号</span></p>
+            <p><i class="el-icon-postcard"></i><span>邮编：266042</span></p>
           </div>
         </div>
       </div>
@@ -60,7 +60,7 @@ export default {
 @import "~@/style.less";
 
 .content {
-  width: 62vw;
+  width: 85vw;
   margin: 2.1vw auto 0;
   padding-top: 3.1vw;
   text-align: left;
@@ -69,7 +69,7 @@ export default {
 }
 
 .left {
-  width: 20vw;
+  width: 40vw;
   display: inline-block;
   text-align: left;
 
@@ -77,16 +77,28 @@ export default {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    margin-top: 0.85vw;
-
+    height: 17.6vw;
 
     .contactInfo {
       color: #333;
       font-size: 1vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
 
       p {
+        display: flex;
+        align-items: center;
         line-height: 1.5vw;
         letter-spacing: 1px;
+        margin: 0;
+
+        i {
+          margin-right: 0.6vw;
+          color: @standard-color;
+          font-size: 1.2vw;
+        }
       }
     }
 
diff --git a/src/views/serviceSupport/preSale.vue b/src/views/serviceSupport/preSale.vue
index 1699bac..6653738 100644
--- a/src/views/serviceSupport/preSale.vue
+++ b/src/views/serviceSupport/preSale.vue
@@ -2,7 +2,7 @@
   <div>
     <TitleGroup>
       <!--      <template slot="title">CONTACT US</template>-->
-      <template slot="subTitle"> 联系我们</template>
+      <template slot="subTitle">在线留言</template>
     </TitleGroup>
     <div class="content">
       <el-form ref="form" :inline="true" :model="form" label-width="80px" label-position="top">
@@ -66,7 +66,7 @@ export default {
 
 .content {
   display: inline-block;
-  width: 62vw;
+  width: 85vw;
   //height: 20.1vw;
   //border: 1px solid #ccc3;
   margin-top: 3.7vw;