From 4e3d7882881696289b80020c67806ee1abe08cd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 26 Aug 2025 09:46:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/index.vue                 |   4 +
 src/router/index.js                           |   5 +-
 .../serviceSupport/afterSalesService.vue      |   0
 .../serviceSupport/downloadTheMaterials.vue   | 171 +++++++++++++++++
 src/views/serviceSupport/index.vue            | 181 ++++++++++++++++++
 src/views/serviceSupport/preSale.vue          |  80 ++++++++
 6 files changed, 440 insertions(+), 1 deletion(-)
 create mode 100644 src/views/serviceSupport/afterSalesService.vue
 create mode 100644 src/views/serviceSupport/downloadTheMaterials.vue
 create mode 100644 src/views/serviceSupport/index.vue
 create mode 100644 src/views/serviceSupport/preSale.vue

diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index ba02b07..030f6a8 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -104,12 +104,16 @@ export default {
         this.$router.push('/contactUs')
       }else if (id === 4){
         this.$router.push('/industrySolutions')
+      } else if (id === 24) {
+        this.$router.push('/serviceSupport')
       } else if (id === 1) {
         this.$router.push('/index')
       } else if (e.ancestors.split(',').includes("2")) {
         this.$router.push('/contactUs#item' + id)
       } else if (e.ancestors.split(',').includes("7")) {
         this.$router.push('/productCenter#item' + id)
+      } else if (e.ancestors.split(',').includes("24")) {
+        this.$router.push('/serviceSupport?type=' + id)
       }else{
         this.$router.push('/test?id=' + id)
       }
diff --git a/src/router/index.js b/src/router/index.js
index c8d09d7..02f1d0f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,7 +25,6 @@ export default new Router({
         },
         {
           path: 'productCenter', component: () => import('@/views/productCenter/index.vue'),
-
         },
         {
           path: 'industrySolutions', component: () => import('@/views/industrySolutions/index.vue'),
@@ -52,6 +51,10 @@ export default new Router({
         {
           path: '/industryPlan/detail', component: () => import('@/views/productInfo.vue'),
         },
+        {
+          path: '/serviceSupport',
+          component: () => import('@/views/serviceSupport/index.vue'),
+        },
       ]
       // children: [
       //   {
diff --git a/src/views/serviceSupport/afterSalesService.vue b/src/views/serviceSupport/afterSalesService.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/serviceSupport/downloadTheMaterials.vue b/src/views/serviceSupport/downloadTheMaterials.vue
new file mode 100644
index 0000000..ae00992
--- /dev/null
+++ b/src/views/serviceSupport/downloadTheMaterials.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">DOWNLOAD THE MATERIALS</template>
+      <template slot="subTitle"> 资料下载</template>
+    </TitleGroup>
+    <div class="content">
+      <el-form ref="form" :inline="true" :model="form" label-width="80px">
+        <el-form-item label="资料类型" style="width: 45%">
+          <el-cascader
+              v-model="value"
+              :options="options"
+              @change="handleChange"></el-cascader>
+        </el-form-item>
+      </el-form>
+      <div>
+        <div v-for="i in fileList" class="fileCard">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      value: ["zhinan", "yingjian"],
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'yingjian',
+              label: '硬件',
+            },
+            {
+              value: 'ruanjian',
+              label: '软件',
+            },
+          ]
+        },
+        {
+          value: 'wendang',
+          label: '文档',
+          children: [
+            {
+              value: 'yingjian',
+              label: '硬件',
+            },
+            {
+              value: 'ruanjian',
+              label: '软件',
+            },
+          ]
+        },
+      ],
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
+    }
+  }
+}
+</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-align: left;
+
+  .fileCard {
+    display: inline-block;
+    width: 40%;
+    height: 100px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    margin-top: 1vw;
+    position: relative;
+
+    .cardTitle {
+      position: absolute;
+      top: 10px;
+      left: 20px;
+      font-size: 22px;
+      font-weight: 700;
+      line-height: 45px;
+      width: calc(100% - 80px);
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 超出部分隐藏 */
+      text-overflow: ellipsis; /* 超出部分显示省略号 */
+    }
+
+    .cardValue {
+      position: absolute;
+      top: 55px;
+      width: calc(100% - 80px);
+      left: 20px;
+      font-size: 14px;
+      line-height: 45px;
+      color: #aaa;
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 超出部分隐藏 */
+      text-overflow: ellipsis; /* 超出部分显示省略号 */
+    }
+
+    .downIcon {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &:nth-child(2n) {
+      margin-left: 5%;
+    }
+  }
+}
+</style>
diff --git a/src/views/serviceSupport/index.vue b/src/views/serviceSupport/index.vue
new file mode 100644
index 0000000..90a9fa3
--- /dev/null
+++ b/src/views/serviceSupport/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+          :src="banner"
+          fit="contain"></el-image>
+      <div class="bannerInfo">
+        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
+      </div>
+      <div class="tabs">
+        <div class="content">
+          <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">
+            {{ i.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <preSale v-if='tabsActive===0'/>
+    <DownloadTheMaterials v-if='tabsActive===1'/>
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import preSale from './preSale.vue'
+import DownloadTheMaterials from './downloadTheMaterials.vue'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getAboutUsInfo} from "@/api/contactUs";
+
+export default {
+  name: 'ContactUs1',
+  components: {
+    ContactUs,
+    Copyright,
+    preSale,
+    DownloadTheMaterials
+  },
+  data() {
+    return {
+      banner: '',
+      bannerTitle: '',
+      tabsActive: 1,
+      tabsList: [],
+      data: {
+        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+        tabsList: [
+          {
+            type: 100,
+            title: '联系我们'
+          },
+          {
+            type: 1001,
+            title: '资料下载'
+          },
+        ]
+      }
+    }
+  },
+  watch: {
+    '$route'() {
+      console.log(12312)
+      let id = this.$route.query.type || '25'
+      if (id === '25' || id === '26') {
+        this.tabsActive = 0
+      } else if (id === '27') {
+        this.tabsActive = 1
+      } else {
+        this.tabsActive = 0
+      }
+    }
+  },
+  mounted() {
+    this.getData()
+    let id = this.$route.query.type || '25'
+    if (id === '25' || id === '26') {
+      this.tabsActive = 0
+    }
+    if (id === '27') {
+      this.tabsActive = 1
+    }
+  },
+  methods: {
+    checkTabs(e, k) {
+      this.tabsActive = k
+      document.querySelector('#item' + e.id).scrollIntoView();
+    },
+    getData() {
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.banner {
+  width: 100%;
+  height: 35.5vw;
+  position: relative;
+
+  .bannerInfo {
+    position: absolute;
+    top: 35%;
+    left: 19%;
+    width: 45%;
+    text-align: left;
+    font-size: 1.4vw;
+    color: @standard-color;
+    line-height: 2.5vw;
+    letter-spacing: 4px;
+    word-break: break-all;
+  }
+
+  .bannerBtn {
+    position: absolute;
+    top: 58%;
+    left: 19%;
+    width: 11.5vw;
+    font-size: 1.2vw;
+    line-height: 2vw;
+    letter-spacing: 2px;
+  }
+
+  .tabs {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+    backdrop-filter: saturate(50%) blur(4px);
+
+    .content {
+      width: 62%;
+      position: relative;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+
+      .tab {
+        display: inline-block;
+        width: 25%;
+        line-height: 6.2vw;
+        font-size: 1.6vw;
+        letter-spacing: 3px;
+      }
+
+      .tab.active {
+        color: @standard-color;
+        width: calc(25% - 2px);
+        border: 1px solid #fff;
+        box-shadow: 0 0 3px #0002;
+      }
+    }
+  }
+}
+
+.companyProfile {
+  width: 100%;
+}
+
+.enterpriseQualification {
+  width: 100%;
+  position: relative;
+}
+
+.teamStyle {
+  width: 100%;
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
diff --git a/src/views/serviceSupport/preSale.vue b/src/views/serviceSupport/preSale.vue
new file mode 100644
index 0000000..228e03f
--- /dev/null
+++ b/src/views/serviceSupport/preSale.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">CONTACT US</template>
+      <template slot="subTitle"> 联系我们</template>
+    </TitleGroup>
+    <div class="content">
+      <el-form ref="form" :inline="true" :model="form" label-width="80px" label-position="top">
+        <el-form-item label="联系人姓名" style="width: 45%">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="联系电话 " style="width: 45%">
+          <el-input v-model="form.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="公司名称 " style="width: 45%">
+          <el-input v-model="form.company"></el-input>
+        </el-form-item>
+        <el-form-item label="咨询设备名称 " style="width: 45%">
+          <el-input v-model="form.deviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="需求信息/故障描述" style="width: 100%">
+          <el-input type="textarea" v-model="form.value"></el-input>
+        </el-form-item>
+        <br>
+        <el-form-item style="text-align: center;width: 100%">
+          <el-button type="primary" @click="onSubmit">提交</el-button>
+          <el-button @click="form={}">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    }
+  }
+}
+</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;
+  text-align: left;
+}
+</style>