修改自定义页面

src/components/menu/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="menu">
-    <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
+    <div v-if="false" v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
          @mouseenter="getChildren(i)" @click="toLink( i.webMenuId )">
       <div :class="`name`">{{ i.webMenuName }}</div>
       <div class="line"></div>
     </div>
-    <div class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1" @mouseleave="clearChildren">
+    <div v-if="false" class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1"
+         @mouseleave="clearChildren">
       <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
            @click="toLink(ii.webMenuId)">
         <div class="icon">
@@ -19,7 +20,8 @@
       </div>
     </div>
 
-    <div class="subMenu1" :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
+    <div v-if="false" class="subMenu1"
+         :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
          v-show="(subMenuList||[]).length>0 && subMenuType === 2"
          @mouseleave="clearChildren">
       <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
@@ -41,14 +43,39 @@
         </div>
       </div>
     </div>
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" style="height: 4.5vw" mode="horizontal"
+             @select="handleSelect">
+      <template v-for="(i,k) in menuList">
+        <el-menu-item style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" :index="i.webMenuId"
+                      @click="toLink(i)"
+                      v-if="(i.children || []).length ===0">{{
+            i.webMenuName
+          }}
+        </el-menu-item>
+        <el-submenu :index="i.webMenuId" v-else style="height: 4.5vw;line-height: 4.5vw">
+          <template slot="title">
+            <div style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" @click="toLink(i)">{{
+                i.webMenuName
+              }}
+            </div>
+          </template>
+          <template v-for="ii in i.children">
+            <el-menu-item :index="ii.webMenuId" @click="toLink(ii)">
+              {{ ii.webMenuName }}
+            </el-menu-item>
+            <!--            <el-submenu :index="ii.webMenuId" v-if="(ii.children || []).length >0">-->
+            <!--              <template slot="title">{{ ii.webMenuName }}</template>-->
+            <!--              <el-menu-item :index="iii.webMenuId" v-for="iii in ii.children">{{ iii.webMenuName }}</el-menu-item>-->
+            <!--            </el-submenu>-->
+          </template>
+        </el-submenu>
+      </template>
+    </el-menu>
   </div>
 </template>
 
 <script>
-import wlw from "@/assets/icon/wlw.png";
-import znzz from "@/assets/icon/znzz.png";
-import kdwl from "@/assets/icon/kdwl.png";
-import znlt from "@/assets/icon/znlt.png";
 import {selectConfigTypeList} from "@/api/menu";
 import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
 
@@ -56,6 +83,7 @@ export default {
   name: 'Index',
   data() {
     return {
+      activeIndex: 0,
       menuList: [],
       subMenuList: [],
       subMenuType: 0,
@@ -66,8 +94,9 @@ export default {
     this.getMenu()
   },
   methods: {
-    toLink(id) {
+    toLink(e) {
-      console.log(id)
+      let id = e.webMenuId
+      console.log()
       if (!id) return
       if(id === 7){
         this.$router.push('/productCenter')
@@ -75,6 +104,10 @@ export default {
         this.$router.push('/contactUs')
       }else if (id === 4){
         this.$router.push('/industrySolutions')
+      } else if (id === 1) {
+        this.$router.push('/index')
+      } else if (e.ancestors.includes("2")) {
+        this.$router.push('/contactUs#item' + id)
       }else{
         this.$router.push('/test?id=' + id)
       }
@@ -101,6 +134,9 @@ export default {
       this.subMenuType = 0
       this.subMenuPath = ''
     },
+    handleSelect(e) {
+      console.log(e)
+    }
   }
 }
 </script>
@@ -272,7 +308,21 @@ export default {
 
 
 @menuHeight: 11vw;
+/deep/ .el-submenu.is-active .el-submenu__title {
+  height: 4.5vw;
+}
 
+/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
+  height: 4.5vw;
+}
+
+/deep/ .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+  display: none;
+}
+
+/deep/ .el-submenu__title {
+  margin: 0 20px
+}
 
 </style>
 

src/router/index.js

@@ -34,10 +34,14 @@ export default new Router({
         {
           path: 'productCenter/detail', component: () => import('@/views/productCenter/detail.vue'),
 
+        }, {
+          path: 'index', component: () => import('@/views/index/index.vue'),
         },
           {
             path: '/contactUs',
             component: () => import('@/views/contactUs/index.vue'),
+          }, {
+          path: '/industryPlan/detail', component: () => import('@/views/productInfo.vue'),
         },
       ]
       // children: [
@@ -62,10 +66,6 @@ export default new Router({
       //     component: () => import('@/views/industryPlan.vue'),
       //   },
       //   {
-      //     path: '/industryPlan/detail',
-      //     component: () => import('@/views/productInfo.vue'),
-      //   },
-      //   {
       //     path: '/serviceSupport',
       //     component: () => import('@/views/serviceSupport.vue'),
       //   },
@@ -82,6 +82,19 @@ export default new Router({
       //     component: () => import('@/views/casesAndClients/IOT/more.vue'),
       //   },
       // ]
-    },
+    },], scrollBehavior(to, from, savedPosition) {
-  ]
+    if (to.hash) {
+      // 等 DOM 渲染完成再滚动
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const el = document.querySelector(to.hash);
+          if (el) {
+            el.scrollIntoView({behavior: 'smooth'});
+          }
+          resolve({left: 0, top: 0});
+        }, 200);
+      });
+    }
+    return {left: 0, top: 0};
+  }
 })

src/views/contactUs/companyProfile.vue

@@ -2,7 +2,7 @@
   <div>
     <TitleGroup>
       <template slot="title">COMPANY PROFILE</template>
-      <template slot="subTitle">公司简介</template>
+      <template slot="subTitle">{{ data.title1 }}</template>
     </TitleGroup>
     <div class="content">
       <div class="left">

src/views/contactUs/enterpriseQualification.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="title">ENTERPRISE QUALIFICATION</div>
-    <div class="subTitle">企业资质</div>
+    <div class="subTitle">{{ data.title }}</div>
     <div class="bg">
       <div class="list1" ref="list1">
         <div class="item" v-for="i in data.list1">{{ i }}</div>

src/views/contactUs/index.vue

@@ -17,8 +17,8 @@
       </div>
     </div>
     <div v-for="i in data.tabsList">
-      <CompanyProfile id="companyProfile" class="companyProfile" v-if="i.type === 2" :data="i.data"/>
+      <CompanyProfile id="item3" class="companyProfile" v-if="i.type === 2" :data="i.data"/>
-      <EnterpriseQualification id="enterpriseQualification" class="enterpriseQualification" v-if="i.type === 3"
+      <EnterpriseQualification id="item10" class="enterpriseQualification" v-if="i.type === 3"
                                :data="i.data"/>
     </div>
 <!--    <div v-for="i in tabsList">-->
@@ -60,9 +60,8 @@ export default {
         tabsList:[
           {
             type:2,
-            title:'公司简介',
-            id:'companyProfile',
             data:{
+              title1: '公司概况',
               title:'海威物联',
               value:'青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业物联网整体解决方案。 作为轮胎用RFID电子标签相关4项ISO国际标准与国家标准的制定者，公司具备全球最先进的RFID智能轮胎整体解决方案，包括系列化轮胎用RFID电子标签产品、RFID轮胎生产配套自动化设备、RFID轮胎应用信息化管理系统及数据平台。同时，公司大力推进基于RFID、传感、边缘采集计算、数据传输等技术的工业互联网解决方案在轮胎产业链中的深入应用，为轮胎生产管理、仓储物流、销售跟踪、车队管理、轮胎翻新等环节提供一站式解决方案。所有核心技术及产品均具有自主知识产权。 目前，公司为新能源锂电、快递物流、橡胶制品、畜牧屠宰、轨道交通、化工、家电制造等行业打造工业物联网整体解决方案，以定制RFID标签及读写设备、传感器及智能终端、物联数据平台三个产品方向为支撑，提供数据标识、信息流传动、物联网整合，及人、机、料、法、环全方位数据自动采集、分析与智能化管控方案，促进工业领域产品质量和生产效率全面提升。助力企业推进产业升级，提升数字化、精细化、智能化管理水平。 公司承担国家橡胶与轮胎工程技术研究中心RFID研究所；被认定为国家级专精特新“小巨人”企业、国家高新技术企业、青岛市技术创新中心、科技型中小企业、青岛市雏鹰企业；通过ISO 9001:2015质量管理体系认证、ISO 14001:2015环境体系认证、IS045001:2018职业健康安全管理体系认证；通过信息系统建设和服务能力评估CS2级；主持制定轮胎用RFID电子标签四项ISO国际标准、四项国家标准。 公司承担山东省科技型中小企业创新能力提升工程项目、青岛市第四批“人才特区”人才计划等各级政府项目；主要研发成果获技术发明一等奖、专利金奖等多项省部级科学技术奖励。',
               icon:''
@@ -70,9 +69,8 @@ export default {
           },
           {
             type: 3,
-            id:'enterpriseQualification',
-            title:'企业资质',
             data:{
+              title: '荣誉资质',
               list1:[
                 '国家高新技术企业',
                 '青岛市雏鹰企业',