添加图片素材

修改关于海威格式
修改行业方案格式

src/components/el/industrySolutionsEl/el2.vue

@@ -7,8 +7,8 @@
     </div>
     <div class="divider"></div>
 
-    <div style="height:35.4vw;">
+    <div class="swiper-wrap">
-      <div class="swiper hero-swiper mySwiper">
+      <div ref="swiper" class="swiper hero-swiper mySwiper">
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
 
@@ -26,23 +26,23 @@
             </div>
           </div>
         </div>
-        <div class="swiper-button-next"></div>
+        <div ref="nextEl" class="swiper-button-next"></div>
-        <div class="swiper-button-prev"></div>
+        <div ref="prevEl" class="swiper-button-prev"></div>
       </div>
-      <div class="swiper-pagination"></div>
+      <div ref="pagination" class="swiper-pagination"></div>
     </div>
   </div>
 </template>
 <script>
 import Swiper from 'swiper'
 
-import {Autoplay, Navigation} from "swiper/modules";
+import {Autoplay, Navigation, Pagination} from "swiper/modules";
 
 Swiper.use([
   Navigation,
-  Autoplay
+  Autoplay,
+  Pagination
 ])
-let swiper = null
 export default {
   name: "El1",
   props: ['data'],
@@ -55,15 +55,21 @@ export default {
   mounted() {
     this.initSwiper()
   },
+  beforeDestroy() {
+    if (this.swiper) {
+      this.swiper.destroy(true, true);
+      this.swiper = null;
+    }
+  },
 
   methods: {
 
     initSwiper() {
-      if (swiper) {
+      if (this.swiper) {
-        swiper.destroy(true, true);
+        this.swiper.destroy(true, true);
-        swiper = null;
+        this.swiper = null;
       }
-      swiper = new Swiper(".mySwiper", {
+      this.swiper = new Swiper(this.$refs.swiper, {
         loop: this.data.list.length > 2,
         centeredSlides: true,
         slidesPerView: "auto",
@@ -71,15 +77,14 @@ export default {
         speed: 450,
         grabCursor: true,
         navigation: {
-          nextEl: ".swiper-button-next",
+          nextEl: this.$refs.nextEl,
-          prevEl: ".swiper-button-prev",
+          prevEl: this.$refs.prevEl,
         },
         pagination: {
-          el: ".swiper-pagination",
+          el: this.$refs.pagination,
           clickable: true,
           renderBullet: function (index, className) {
-            console.log(123)
+            return `<div class="${className}"></div>`;
-            return '<span class="' + className + '">' + (index + 1) + "</span>";
           },
         },
       });
@@ -87,7 +92,12 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="less" scoped>
+.swiper-wrap {
+  height: 35.4vw;
+  position: relative;
+}
+
 .hero-swiper {
   width: 100%;
   height: 22vw;
@@ -116,18 +126,21 @@ export default {
   transform: translateX(-50%);
 }
 
-.swiper-pagination-bullet {
+/deep/ .swiper-pagination-bullet {
-  width: 8px;
+  width: 5vw;
   height: 8px;
-  background: #8b93a1;
+  border-radius: 4px;
+  background: #BAD0FF;
   opacity: 0.45;
+  margin: 0 1vw !important;
 }
 
-.swiper-pagination-bullet-active {
+/deep/ .swiper-pagination-bullet-active {
-  width: 22px;
+  width: 5vw;
-  border-radius: 999px;
+  border-radius: 4px;
-  background: #14181f;
+  background: #3471FF;
   opacity: 1;
+  margin: 0 1vw !important;
 }
 
 

src/components/menu/index.vue

@@ -120,14 +120,18 @@ export default {
     vertical-align: top;
     line-height: @top-height;
     font-size: 1.1vw;
-    padding: 0 2vw;
     cursor: pointer;
     user-select: none;
     position: relative;
     color: #666;
 
+    .menuItem {
+      padding: 0 2vw;
+    }
     .active {
-      color: #000;
+      color: #3474FC;
+      font-weight: 600;
+      background-color: #EAF2FF;
 
       &::after {
         content: '';
@@ -136,7 +140,7 @@ export default {
         height: 2px;
         bottom: 0;
         left: 0;
-        background-color: #419EFF;
+        background-color: #3474FC;
       }
     }
 

src/layout/index.vue

@@ -144,9 +144,9 @@ export default {
 .FloatingWindow {
   z-index: 999;
   position: fixed;
-  bottom: 25%;
+  bottom: 10%;
   right: 0;
-  transform: translateY(-50%);
+  //transform: translateY(-50%);
 
   .item {
     margin-bottom: 1px;

src/views/contactUs/index.vue

@@ -276,7 +276,7 @@ export default {
   box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);
 
   .content {
-    width: 100%;
+    width: 62vw;
     position: relative;
     left: 19%;
     bottom: 0;

src/views/industrySolutions/index.vue

@@ -3,7 +3,7 @@
     <div class="banner">
       <el-image
           style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-          :src="pageData.banner"
+          :src="tabsData.find(e => e.id === tabsActive)?.img || pageData.banner"
           fit="contain"></el-image>
       <div class="bannerInfo">{{ pageData.bannerTitle }}</div>
     </div>
@@ -11,7 +11,8 @@
       <div class="content">
         <div @click="checkTabs(i,k)"
              style="white-space: nowrap;overflow: auto"
-             :class="`tab ${tabsActive == i.id ? 'active':''}`" v-for="(i,k) in tabsData">
+             :style="{width:`calc(${widthArr[k]}% - 2vw)`,fontSize:`${tabsFontSize}vw`}"
+             :class="`tab ${tabsActive == i.id ? 'active':''}`" v-for="(i,k) in  tabsData">
           {{ i.title }}
         </div>
       </div>
@@ -81,8 +82,19 @@ import Swiper from 'swiper';
 import {Autoplay, Navigation} from "swiper/modules";
 import TitleGroup from "@/components/TitleGroup.vue";
 import Page from "@/views/page/index.vue";
+import img1 from '@/assets/image/industrySolutions/3-1智能轮胎.png';
+import img2 from '@/assets/image/industrySolutions/3-2轮胎工厂.png';
+import img3 from '@/assets/image/industrySolutions/3-3快递物流.png';
+import img4 from '@/assets/image/industrySolutions/3-4畜牧食品.png';
+import img5 from '@/assets/image/industrySolutions/3-5新能源.png';
+import img6 from '@/assets/image/industrySolutions/3-6智能制造.png';
+import img7 from '@/assets/image/industrySolutions/3-7工业物联.png';
 
-Swiper.use([Navigation, Autoplay])
+
+Swiper.use([
+  Navigation,
+  Autoplay
+])
 
 export default {
   name: 'ProductCenter',
@@ -125,52 +137,52 @@ export default {
       ],
       tabsData: [
         {
-          title: '工厂制造-RFID全流程管理',
+          title: '成品胎RFID全生命周期',
           value: '智能轮胎介绍',
           info: '智能轮胎信息',
-          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          img: img1,
           id: '5'
         },
         {
-          title: '成品胎RFID全生命周期',
+          title: '工厂制造-RFID全流程管理',
           value: '轮胎工厂介绍',
           info: '轮胎工厂信息',
-          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          img: img2,
           id: '18'
         },
         {
           title: 'RFID包裹分拣',
           value: '快递物流介绍',
           info: '快递物流信息',
-          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg',
+          img: img3,
           id: '19'
         },
         {
           title: '工厂制造-仓储物流',
           value: '畜牧食品介绍',
           info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
-          img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png',
+          img: img4,
           id: '20'
         },
         {
-          title: '信息化数据平台',
+          title: '能源计量',
           value: '新能源介绍',
           info: '新能源信息',
-          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          img: img7,
           id: '21'
         },
         {
           title: '智能制造物联网',
           value: '智能制造介绍',
           info: '智能制造信息',
-          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg',
+          img: img6,
           id: '22'
         },
         {
-          title: '能源计量',
+          title: '信息化数据平台',
           value: '工业物联介绍',
           info: '工业物联信息',
-          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          img: img5,
           id: '23'
         },
       ],
@@ -178,22 +190,38 @@ export default {
         {
           name: 'HW-145L-6系列',
           img: 'http://1.13.177.47:9665/statics/2025/09/29/a7ed9fc42af9b6386126eee351f4937_20250929143910A279.png',
-          route: [12, 1, 2]
+          route: [
+            12,
+            1,
+            2
+          ]
         },
         {
           name: 'HW-R300系列',
           img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250926144121_20250929144331A280.png',
-          route: [12, 1, 3]
+          route: [
+            12,
+            1,
+            3
+          ]
         },
         {
           name: 'HW-D100系列',
           img: 'http://1.13.177.47:9665/statics/2025/09/30/%E5%9B%BE%E7%89%87bbb_20250930172331A326.png',
-          route: [12, 1, 4]
+          route: [
+            12,
+            1,
+            4
+          ]
         },
         {
           name: 'HW-R200系列',
           img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%9B%BE%E7%89%871_20250929162825A294.png',
-          route: [12, 2, 2]
+          route: [
+            12,
+            2,
+            2
+          ]
         },
       ]
     }
@@ -206,12 +234,36 @@ export default {
     }
     this.initSwiper()
   },
+  computed: {
+    tabsFontSize: function () {
+      let max = 0
+      this.tabsData.forEach(item => {
+        max = Math.max(max, item.title.length)
+      })
+      let width = 100 / this.tabsData.length
+      return width / max
+    },
+    widthArr: function () {
+      let length = 0
+      this.tabsData.forEach(item => {
+        length += this.getTextWidth(item.title)
+      })
+      return this.tabsData.map(item => {
+        return (this.getTextWidth(item.title) / length) * 100
+      })
+    }
+  },
   watch: {
     '$route'() {
       this.tabsActive = parseFloat(this.$route.query.id)
     }
   },
   methods: {
+    getTextWidth(text) {
+      return String(text || '').split('').reduce((total, char) => {
+        return total + (/[\x00-\xff]/.test(char) ? 1 : 2)
+      }, 0)
+    },
     checkTabs(e, k) {
       this.tabsActive = e.id
     },
@@ -263,48 +315,105 @@ export default {
 
 }
 
+//.tabs {
+//  cursor: pointer;
+//  bottom: 0;
+//  width: 100%;
+//  white-space: nowrap;
+//  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+//  backdrop-filter: saturate(50%) blur(4px);
+//
+//  .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;
+//    }
+//  }
+//}
+
 .tabs {
-  cursor: pointer;
+  position: sticky;
-  bottom: 0;
+  top: 0;
-  width: 100%;
+  margin-top: calc(-6.405vw + 2px);
+  width: calc(100% - 2px);
+  height: calc(6.405vw - 2px);
   white-space: nowrap;
-  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+  //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
-  backdrop-filter: saturate(50%) blur(4px);
+  background: linear-gradient(to bottom, #e7efff, #f6faff);
+  //backdrop-filter: saturate(50%) blur(4px);
+  border: 1px solid #fff;
+  z-index: 9999;
+  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);
 
   .content {
-    width: 100%;
+    width: 100vw;
     position: relative;
-    left: 50%;
+    left: 19%;
+    left: 0%;
     bottom: 0;
-    transform: translateX(-50%);
+    text-align: left;
+    //transform: translateX(-50%);
 
     .tab {
+      cursor: pointer;
       display: inline-block;
       line-height: 6.2vw;
       letter-spacing: 3px;
-      font-size: 1vw;
+      font-size: 1.6vw;
       position: relative;
-      padding: 0 2vw;
+      text-align: center;
+      padding: 0 1vw;
 
-      &:last-child::after {
+      //&:last-child::after {
-        display: none;
+      //  display: none;
-      }
+      //}
-
+      //
-      &::after {
+      //&::after {
-        content: '';
+      //  content: '';
-        position: absolute;
+      //  position: absolute;
-        right: 0;
+      //  right: 0;
-        width: 1px;
+      //  width: 1px;
-        height: 1vw;
+      //  height: 1vw;
-        background-color: #409eff;
+      //  background-color: #409eff;
-        top: calc(50% - 0.5vw);
+      //  top: calc(50% - 0.5vw);
-      }
+      //}
     }
 
     .tab.active {
       color: @standard-color;
-      //border: 1px solid #fff6;
+      font-weight: 700;
-      //box-shadow: 0 0 3px #0002;
+      border: 1px solid #fff;
+      box-shadow: 0 0 3px #0002;
     }
   }
 }

src/views/productCenter/index.vue

@@ -134,48 +134,103 @@ export default {
 
 }
 
+//.tabs {
+//  cursor: pointer;
+//  bottom: 0;
+//  width: 100%;
+//  white-space: nowrap;
+//  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+//  backdrop-filter: saturate(50%) blur(4px);
+//
+//  .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;
+//    }
+//  }
+//}
+
 .tabs {
-  cursor: pointer;
+  position: sticky;
-  bottom: 0;
+  top: 0;
-  width: 100%;
+  margin-top: calc(-6.405vw + 2px);
+  width: calc(100% - 2px);
+  height: calc(6.405vw - 2px);
   white-space: nowrap;
-  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+  //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
-  backdrop-filter: saturate(50%) blur(4px);
+  background: linear-gradient(to bottom, #e7efff, #f6faff);
+  //backdrop-filter: saturate(50%) blur(4px);
+  border: 1px solid #fff;
+  z-index: 9999;
+  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);
 
   .content {
     width: 100%;
     position: relative;
-    left: 50%;
+    left: 19%;
     bottom: 0;
-    transform: translateX(-50%);
+    text-align: left;
+    //transform: translateX(-50%);
 
     .tab {
+      cursor: pointer;
       display: inline-block;
       line-height: 6.2vw;
       letter-spacing: 3px;
-      font-size: 1vw;
+      font-size: 1.6vw;
       position: relative;
-      padding: 0 2vw;
+      padding: 0 1vw;
 
-      &:last-child::after {
+      //&:last-child::after {
-        display: none;
+      //  display: none;
-      }
+      //}
-
+      //
-      &::after {
+      //&::after {
-        content: '';
+      //  content: '';
-        position: absolute;
+      //  position: absolute;
-        right: 0;
+      //  right: 0;
-        width: 1px;
+      //  width: 1px;
-        height: 1vw;
+      //  height: 1vw;
-        background-color: #409eff;
+      //  background-color: #409eff;
-        top: calc(50% - 0.5vw);
+      //  top: calc(50% - 0.5vw);
-      }
+      //}
     }
 
     .tab.active {
       color: @standard-color;
-      //border: 1px solid #fff6;
+      font-weight: 700;
-      //box-shadow: 0 0 3px #0002;
+      border: 1px solid #fff;
+      box-shadow: 0 0 3px #0002;
     }
   }
 }

src/views/productCenter/produceModel.vue

@@ -103,11 +103,11 @@ export default {
   margin-top: 2.3vw;
 
   /deep/ .el-tabs__header {
-    margin: 0 20vw 15px;
+    margin: 0 19vw 15px;
   }
 
   /deep/ .el-tabs__content {
-    padding: 0 20vw;
+    padding: 0 19vw;
     background-color: fade(@standard-color, 10);
   }
 

src/views/serviceSupport/contactUs.vue

@@ -60,7 +60,7 @@ export default {
 @import "~@/style.less";
 
 .content {
-  width: 65vw;
+  width: 62vw;
   margin: 2.1vw auto 0;
   padding-top: 3.1vw;
   text-align: left;

src/views/serviceSupport/index.vue

@@ -3,17 +3,17 @@
     <div class="banner">
       <el-image
         style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-        :src="banner"
+        :src="banners[tabsActive] || pageData.banner"
         fit="contain"></el-image>
-      <div class="bannerInfo">
+      <!--      <div class="bannerInfo">-->
-        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
+      <!--        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。-->
-      </div>
+      <!--      </div>-->
     </div>
 
     <div class="tabs">
       <div class="content">
         <div @click="checkTabs(i,k)"
-             style="white-space: nowrap;overflow: auto"
+             style="white-space: nowrap;overflow: auto;width: calc(50% - 6vw - 2px)"
              :class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in  tabsData">
           {{ i.title }}
         </div>
@@ -36,6 +36,9 @@ import Recruitment from './recruitment'
 import Copyright from '@/components/copyright'
 import {getAboutUsInfo} from "@/api/contactUs";
 
+import img1 from '@/assets/image/serviceSupport/5-1联系我们.png'
+import img2 from '@/assets/image/serviceSupport/5-2加入我们.png'
+
 export default {
   name: 'ContactUs1',
   components: {
@@ -49,8 +52,12 @@ export default {
   },
   data() {
     return {
-      banner: '',
+      banner: img1,
       bannerTitle: '',
+      banners: [
+        img1,
+        img2
+      ],
       tabsActive: 0,
       tabsList: [],
       data: {
@@ -178,52 +185,106 @@ export default {
   }
 }
 
+//.tabs {
+//  cursor: pointer;
+//  bottom: 0;
+//  width: 100%;
+//  white-space: nowrap;
+//  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+//  backdrop-filter: saturate(50%) blur(4px);
+//
+//  .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;
+//    }
+//  }
+//}
+
 .tabs {
-  cursor: pointer;
+  position: sticky;
-  bottom: 0;
+  top: 0;
-  width: 100%;
+  margin-top: calc(-6.405vw + 2px);
+  width: calc(100% - 2px);
+  height: calc(6.405vw - 2px);
   white-space: nowrap;
-  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+  //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
-  backdrop-filter: saturate(50%) blur(4px);
+  background: linear-gradient(to bottom, #e7efff, #f6faff);
+  //backdrop-filter: saturate(50%) blur(4px);
+  border: 1px solid #fff;
+  z-index: 9999;
+  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);
 
   .content {
-    width: 100%;
+    width: 62vw;
     position: relative;
-    left: 50%;
+    left: 19%;
     bottom: 0;
-    transform: translateX(-50%);
+    text-align: center;
+    //transform: translateX(-50%);
 
     .tab {
+      cursor: pointer;
       display: inline-block;
       line-height: 6.2vw;
       letter-spacing: 3px;
-      font-size: 1vw;
+      font-size: 1.6vw;
       position: relative;
-      padding: 0 2vw;
+      padding: 0 3vw;
 
-      &:last-child::after {
+      //&:last-child::after {
-        display: none;
+      //  display: none;
-      }
+      //}
-
+      //
-      &::after {
+      //&::after {
-        content: '';
+      //  content: '';
-        position: absolute;
+      //  position: absolute;
-        right: 0;
+      //  right: 0;
-        width: 1px;
+      //  width: 1px;
-        height: 1vw;
+      //  height: 1vw;
-        background-color: #409eff;
+      //  background-color: #409eff;
-        top: calc(50% - 0.5vw);
+      //  top: calc(50% - 0.5vw);
-      }
+      //}
     }
 
     .tab.active {
       color: @standard-color;
-      //border: 1px solid #fff6;
+      font-weight: 700;
-      //box-shadow: 0 0 3px #0002;
+      border: 1px solid #fff;
+      box-shadow: 0 0 3px #0002;
     }
   }
 }
-
 .companyProfile {
   width: 100%;
 }

src/views/serviceSupport/preSale.vue

@@ -6,16 +6,16 @@
     </TitleGroup>
     <div class="content">
       <el-form ref="form" :inline="true" :model="form" label-width="80px" label-position="top">
-        <el-form-item label="姓名" style="width: 32%">
+        <el-form-item label="姓名" style="width: calc(100% / 3 - 10px)">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
-        <el-form-item label="电话" style="width: 32%">
+        <el-form-item label="电话" style="width: calc(100% / 3 - 10px)">
           <el-input v-model="form.phone"></el-input>
         </el-form-item>
-        <el-form-item label="公司名称 " style="width: 32%">
+        <el-form-item label="公司名称 " style="width: calc(100% / 3 - 10px)">
           <el-input v-model="form.company"></el-input>
         </el-form-item>
-        <el-form-item label="留言" style="width: 100%">
+        <el-form-item label="留言" style="width: calc(100% - 10px)">
           <el-input type="textarea" v-model="form.value"></el-input>
         </el-form-item>
         <br>
@@ -66,7 +66,7 @@ export default {
 
 .content {
   display: inline-block;
-  width: 65vw;
+  width: 62vw;
   //height: 20.1vw;
   //border: 1px solid #ccc3;
   margin-top: 3.7vw;

src/views/serviceSupport/recruitment.vue

@@ -98,7 +98,7 @@ export default {
 @import "~@/style.less";
 
 .job-detail-container {
-  max-width: 800px;
+  width: 62vw;
   margin: 40px auto;
   background-color: #f5f7fa;
   border-radius: 8px;