修改自定义页面

4 months ago · 20fcf2d5fa
parent 2c80a642fc
commit 20fcf2d5fa
5 changed files with 86 additions and 25 deletions
--- a/src/components/menu/index.vue
+++ b/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) {
-      console.log(id)
+    toLink(e) {
+      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>

--- a/src/router/index.js
+++ b/src/router/index.js
@ -34,11 +34,15 @@ 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};
+  }
 })
--- a/src/views/contactUs/companyProfile.vue
+++ b/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">
--- a/src/views/contactUs/enterpriseQualification.vue
+++ b/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>
--- a/src/views/contactUs/index.vue
+++ b/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"/>
-      <EnterpriseQualification id="enterpriseQualification" class="enterpriseQualification" v-if="i.type === 3"
+      <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"/>
    </div>
 <!--    <div v-for="i in tabsList">-->
@ -60,19 +60,17 @@ 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:''
            }
          },
          {
-            type:3,
-            id:'enterpriseQualification',
-            title:'企业资质',
+            type: 3,
            data:{
+              title: '荣誉资质',
              list1:[
                '国家高新技术企业',
                '青岛市雏鹰企业',