修改自定义页面

src/router/index.js

@@ -29,18 +29,22 @@ export default new Router({
         },
         {
           path: 'industrySolutions', component: () => import('@/views/industrySolutions/index.vue'),
-
         },
         {
           path: 'productCenter/detail', component: () => import('@/views/productCenter/detail.vue'),
-
+        },
-        }, {
+        {
           path: 'index', component: () => import('@/views/index/index.vue'),
         },
-          {
+        {
-            path: '/contactUs',
+          path: '/contactUs',
-            component: () => import('@/views/contactUs/index.vue'),
+          component: () => import('@/views/contactUs/index.vue'),
-          }, {
+        },
+        {
+          path: '/contactUs/MediaCenterDetail',
+          component: () => import('@/views/contactUs/MediaCenterDetail.vue'),
+        },
+        {
           path: '/industryPlan/detail', component: () => import('@/views/productInfo.vue'),
         },
       ]

src/views/contactUs/MediaCenter.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">COMPANY PROFILE</template>
+      <template slot="subTitle">{{ data.title }}</template>
+    </TitleGroup>
+    <div class="content">
+      <div v-for="(i,k) in data.list" class="infoCard">
+        <div class="image">
+          <el-image :src="media1" alt="" style="width: 100%;height: 100%">
+
+          </el-image>
+        </div>
+        <div class="itemTitle" @click="toDetail(i)">
+          {{ i.title }}
+        </div>
+        <div class="itemMaster">
+          <span>
+          {{ i.master }}
+          </span>
+          <span style="color: #999999;">
+          {{ i.time }}
+          </span>
+        </div>
+        <div class="itemValue">
+          {{ i.value }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import TitleGroup from "@/components/TitleGroup.vue";
+import media1 from '@/assets/image/media1.png'
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      media1
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    toDetail(e) {
+      this.$router.push('/contactUs/MediaCenterDetail')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  //height: 20.1vw;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+
+  .left {
+    vertical-align: top;
+    display: inline-block;
+    width: 65%;
+    //height: 100%;
+    position: relative;
+    background-color: #ffffff;
+
+    .contentTitle {
+      position: absolute;
+      top: 3.5vw;
+      left: 10.7%;
+      letter-spacing: 1px;
+      font-size: 1.4vw;
+      color: @standard-color;
+    }
+
+    .contentSubTitle {
+      position: absolute;
+      top: 3vw;
+      left: 10.7%;
+      letter-spacing: 3.2px;
+      font-size: 1.6vw;
+      color: #6666;
+    }
+
+    .contentInfo {
+      text-align: left;
+      //position: absolute;
+      margin-top: 7vw;
+      width: 78%;
+      margin-left: 50%;
+      //height: 11vw;
+      overflow: hidden;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      letter-spacing: 2.5px;
+      font-size: 0.8vw;
+      line-height: 1.62vw;
+      color: #666;
+    }
+  }
+
+  .right {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.infoCard {
+  width: 100%;
+  height: 8vw;
+  margin-top: 1vw;
+  border: 1px solid #ccc3;
+  position: relative;
+
+  &:hover {
+    .image {
+      .el-image {
+        transform: scale(1.1);
+      }
+    }
+
+    .itemTitle {
+      color: #3372ff;
+    }
+  }
+
+  .image {
+    .el-image {
+      transition: all 0.6s;
+    }
+
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8vw;
+    height: 8vw;
+  }
+
+  .itemTitle {
+    transition: all 0.6s;
+    position: absolute;
+    top: 0.5vw;
+    left: 8.5vw;
+    font-size: 1vw;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  .itemMaster {
+    position: absolute;
+    top: 2vw;
+    left: 8.5vw;
+    font-size: 0.7vw;
+    color: #3372ff;
+  }
+
+  .itemValue {
+    position: absolute;
+    top: 4vw;
+    left: 8.5vw;
+    font-size: 0.7vw;
+    color: #666;
+    text-align: left;
+    display: -webkit-box; /* 关键：多行弹性盒 */
+    -webkit-box-orient: vertical; /* 纵向排列 */
+    -webkit-line-clamp: 3; /* 限制为 3 行 */
+    overflow: hidden; /* 超出隐藏 */
+    text-overflow: ellipsis; /* 省略号 */
+  }
+}
+</style>

src/views/contactUs/MediaCenterDetail.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="content">
+
+      <div class="infoCard">
+        <div class="itemTitle">
+          海威物联首次亮相中国国际中小企业博览会
+        </div>
+        <div class="itemMaster">
+          <span>
+          海威物联
+          </span>
+          <span style="color: #999999;">
+          2025-07-08
+          </span>
+        </div>
+      </div>
+      <div>
+        <el-image
+            :src="img1"
+            alt="" style="width: 100%;height: 100%"/>
+      </div>
+      <div class="text">
+        6月27日至30日，第20届中国国际中小企业博览会（中博会）在广州广交会展馆成功举办。青岛海威物联科技有限公司（以下简称海威物联）应青岛市民营经济发展局邀请参展。
+      </div>
+
+      <div>
+        <el-image
+            :src="img2"
+            alt="" style="width: 100%;height: 100%"/>
+
+      </div>
+      <div>
+        <el-image
+            :src="img3"
+            alt="" style="width: 100%;height: 100%"/>
+      </div>
+      <div class="text">
+        海威物联在展会上充分展示了在轮胎智造和物流装备等行业的创新成果，通过高频超高频RFID实物产品展示和方案视频轮播等方式，向参观者呈现了公司的物联网解决方案和相关产品。
+      </div>
+      <div>
+        <el-image
+            :src="img4"
+            alt="" style="width: 100%;height: 100%"/>
+      </div>
+      <div class="text">
+        在参展期间，海威物联积极与业界同行、潜在客户进行深入交流。一方面，与其他参展企业探讨了行业合作的可能性，另一方面，也与潜在客户进行了沟通，了解市场需求，为公司的市场拓展提供了方向
+      </div>
+      <div>
+        <el-image
+            :src="img5"
+            alt="" style="width: 100%;height: 100%"/>
+      </div>
+      <div class="text">青岛市民营经济发展局局长郭振栋对于海威物联轮胎RFID标签产品给予高度评价和充分肯定，并向老挝、埃及、菲律宾等国的企业代表详细介绍公司产品。
+
+        海威物联首次亮相中博会，不仅是技术实力的展示，更是全球化战略的关键一步，通过这一国家级窗口，海威物联正从细分领域的“专精特新”迈向世界舞台！
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import media1 from '@/assets/image/media1.png'
+import img1 from '@/assets/image/detail/640.webp'
+import img2 from '@/assets/image/detail/640-1.webp'
+import img3 from '@/assets/image/detail/640-2.webp'
+import img4 from '@/assets/image/detail/640-3.webp'
+import img5 from '@/assets/image/detail/640-4.webp'
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {},
+  data() {
+    return {
+      media1,
+      img1,
+      img2,
+      img3,
+      img4,
+      img5,
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  //height: 20.1vw;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+
+  .text {
+    margin: 12px 0;
+    font-size: 16px;
+    line-height: 26px;
+  }
+}
+
+.infoCard {
+  width: 100%;
+
+  .itemTitle {
+    font-size: 2vw;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  .itemMaster {
+    margin-top: 1vw;
+    font-size: 1vw;
+    color: #3372ff;
+    margin-bottom: 0.5vw;
+  }
+
+}
+</style>

src/views/contactUs/Partner.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">COMPANY PROFILE</template>
+      <template slot="subTitle">{{ data.title }}</template>
+    </TitleGroup>
+    <div class="content">
+      <div class="right">
+        <el-image
+            style="width: 100%;height: 100%"
+            :src="partner"
+            fit="contain"></el-image>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import TitleGroup from "@/components/TitleGroup.vue";
+import partner from '@/assets/image/partner.png'
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      partner
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  //height: 20.1vw;
+  border: 1px solid #ccc3;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+
+  .left {
+    vertical-align: top;
+    display: inline-block;
+    width: 65%;
+    //height: 100%;
+    position: relative;
+    background-color: #ffffff;
+
+    .contentTitle {
+      position: absolute;
+      top: 3.5vw;
+      left: 10.7%;
+      letter-spacing: 1px;
+      font-size: 1.4vw;
+      color: @standard-color;
+    }
+
+    .contentSubTitle {
+      position: absolute;
+      top: 3vw;
+      left: 10.7%;
+      letter-spacing: 3.2px;
+      font-size: 1.6vw;
+      color: #6666;
+    }
+
+    .contentInfo {
+      text-align: left;
+      //position: absolute;
+      margin-top: 7vw;
+      width: 78%;
+      margin-left: 50%;
+      //height: 11vw;
+      overflow: hidden;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      letter-spacing: 2.5px;
+      font-size: 0.8vw;
+      line-height: 1.62vw;
+      color: #666;
+    }
+  }
+
+  .right {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/contactUs/index.vue

@@ -20,6 +20,8 @@
       <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-for="i in tabsList">-->
 <!--      <CompanyProfile class="companyProfile" v-if="i.type === '2'" :data="i.data"/>-->
@@ -35,6 +37,9 @@
 <script>
 import CompanyProfile from './companyProfile'
 import EnterpriseQualification from './enterpriseQualification'
+import Partner from './Partner'
+import MediaCenter from './MediaCenter'
+
 import TeamStyle from './teamStyle'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
@@ -45,6 +50,8 @@ export default {
   components: {
     CompanyProfile,
     EnterpriseQualification,
+    Partner,
+    MediaCenter,
     TeamStyle,
     ContactUs,
     Copyright
@@ -60,6 +67,8 @@ export default {
         tabsList:[
           {
             type:2,
+            id: 3,
+            title: '公司概况',
             data:{
               title1: '公司概况',
               title:'海威物联',
@@ -67,8 +76,42 @@ export default {
               icon:''
             }
           },
+          {
+            type: 4,
+            id: 8,
+            title: '合作伙伴',
+            data: {
+              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: 5,
+            id: 9,
+            title: '媒体中心',
+            data: {
+              title: '媒体中心',
+              list: [
+                {
+                  title: '海威物联首次亮相中国国际中小企业博览会',
+                  master: '海威物联',
+                  time: '2025-07-24',
+                  value: '6月27日至30日，第20届中国国际中小企业博览会（中博会）在广州广交会展馆成功举办。青岛海威物联科技有限公司（以下简称海威物联）应青岛市民营经济发展局邀请参展。'
+                },
+                {
+                  title: '海威物联参加2024智能物流装备供应链集采大会暨第十二次青浦圆桌会议',
+                  master: '海威物联',
+                  time: '2025-07-24',
+                  value: '11月26-27日，2024智能物流装备供应链集采大会暨第十二次青浦圆桌会议在南陵举办。本次大会以“向新而行、以质致远、绿色发展、共创未来”为主题，200余家智能物流装备供应链企业参加，共同探讨智能物流装备领域的新趋势、新机遇，旨在达成更多富有成效的新合作、新成果。青岛海威物联科技有限公司作为智能物流装备优质供应商应邀出席，并发表《物畅其流 “芯”质提效》的主题演讲。'
+                },
+              ]
+            }
+          },
           {
             type: 3,
+            id: 10,
+            title: '荣誉资质',
             data:{
               title: '荣誉资质',
               list1:[
@@ -109,7 +152,7 @@ export default {
   methods: {
     checkTabs(e,k) {
       this.tabsActive = k
-      document.querySelector('#'+e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
+      document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
     },
     getData() {
       getAboutUsInfo().then(e => {

src/views/productCenter/detail.vue

@@ -84,7 +84,6 @@ export default {
     return {
       activeIndex: 0,
       data:{
-
         banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
         banner1:'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png',
         bannerTitle: '123123',