制作支持中心部分界面,以及下载中心部分界面

待添加下载列表接口

assets/icons/svg/close.svg

@@ -0,0 +1 @@
+<svg t="1682101832270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9026" width="200" height="200"><path d="M504.224 470.288l207.84-207.84a16 16 0 0 1 22.608 0l11.328 11.328a16 16 0 0 1 0 22.624l-207.84 207.824 207.84 207.84a16 16 0 0 1 0 22.608l-11.328 11.328a16 16 0 0 1-22.624 0l-207.824-207.84-207.84 207.84a16 16 0 0 1-22.608 0l-11.328-11.328a16 16 0 0 1 0-22.624l207.84-207.824-207.84-207.84a16 16 0 0 1 0-22.608l11.328-11.328a16 16 0 0 1 22.624 0l207.824 207.84z" fill="#000000" p-id="9027"></path></svg>

assets/icons/svg/img.svg

@@ -0,0 +1 @@
+<svg t="1682101377392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8054" width="200" height="200"><path d="M666.75869 403.320789" p-id="8055"></path><path d="M863.888396 783.609001 863.888396 240.389976 160.111604 240.389976l0 543.219026L863.888396 783.609001 863.888396 783.609001zM807.006897 291.758923l0 436.809507-9.271154 0c0 0-209.925127-118.499881-232.003981-130.415258-22.079878-11.914354-29.547966-17.817808-38.667671-17.336854-19.656689 0.271176-32.369222 12.608156-33.268708 13.677511l-40.445154 35.233456c-8.197706 7.780197-15.012925 0.982374-18.296715-2.318812-24.720008-24.740474-72.629157-67.482951-78.631872-72.817446-3.972475-3.972475-17.983583-16.414855-38.205137-16.896832-10.580986-0.522909-26.602891 2.824325-42.704614 18.926048-14.993482 14.994506-39.373753 40.129976-61.893652 60.652382l0-325.513702L807.006897 291.758923zM213.638705 728.568431l0-51.699476c17.304108-14.458293 67.807339-58.326407 91.65549-80.428797 3.079128-2.833535 7.331989-6.655584 12.006452-6.208399 4.924149 0.020466 9.428743 3.997034 9.470699 3.997034l0 0 1.572822 1.418302c0.521886 0.426719 52.53347 43.289945 77.553307 66.474994 15.255449 14.146185 30.888498 16.242939 40.635489 16.84362 21.561062-0.251733 35.854603-13.601786 35.960003-13.836123l40.464597-32.618908c4.169973-3.648087 8.562003-1.879813 10.735505-0.691755 2.174526 1.188058 175.291328 96.748485 175.291328 96.748485L213.638705 728.567407 213.638705 728.568431zM655.029554 551.426965c59.567677 0 108.029412-48.529273 108.029412-108.164488s-48.461735-108.164488-108.029412-108.164488c-59.566654 0-108.025319 48.529273-108.025319 108.164488S595.488483 551.426965 655.029554 551.426965L655.029554 551.426965zM655.029554 380.709815c34.414811 0 62.420655 28.0478 62.420655 62.552661s-28.005844 62.555731-62.420655 62.555731c-34.410718 0-62.416562-28.05087-62.416562-62.555731S620.618836 380.709815 655.029554 380.709815L655.029554 380.709815zM657.989979 351.349113" p-id="8056"></path></svg>

assets/icons/svg/unknownfile.svg

@@ -0,0 +1 @@
+<svg t="1682100953750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4949" width="200" height="200"><path d="M469.333333 640h85.333334v85.333333h-85.333334v-85.333333z m85.333334-70.186667V597.333333h-85.333334v-64a42.666667 42.666667 0 0 1 42.666667-42.666666 64 64 0 1 0-62.762667-76.544l-83.712-16.768A149.333333 149.333333 0 1 1 554.666667 569.813333zM640 170.666667H213.333333v682.666666h597.333334V341.333333h-170.666667V170.666667zM128 127.658667C128 104.277333 147.072 85.333333 170.624 85.333333H682.666667l213.333333 213.333334v597.034666A42.666667 42.666667 0 0 1 853.632 938.666667H170.368A42.666667 42.666667 0 0 1 128 896.341333V127.658667z" p-id="4950"></path></svg>

assets/public.css

@@ -204,5 +204,34 @@
   transition: all .5s;
 }
 
+.mark{
+  color: #343434;
+  font-weight: bold;
+}
+.mark-gold{
+  color: #f0ad4e;
+  font-weight: bold;
+}
+.mark-gold:hover{
+  color: #f0ad4e;
+  font-weight: bold;
+  text-decoration: underline;
+}
+.text-b{
+  font-weight: bold;
+  margin: 0 10px;
+}
+.text-m{
+  margin-left: 20px;
+}
+
+
+.noScroll::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
 
+.noScroll {
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
 

components/header/lucencyHeader.vue

@@ -2,12 +2,12 @@
   <div class="header">
     <div class="conBox header-content">
       <a class="logo" href="/">
-        <img src="headerLogo.png" alt="" class="logo">
+        <img src="/headerLogo.png" alt="" class="logo">
 
       </a>
       <div class="right-header">
         <div class="top">
-          <img src="image/logotext2.png" alt="">
+          <img src="/image/logotext2.png" alt="">
         </div>
         <div class="menus">
           <div class="top-menu">
@@ -50,7 +50,7 @@
           <input type="text" v-model="searchKey"
                  placeholder="搜索咨询与产品">
           <button @click="searchItem" >
-            <img src="image/search.png" alt="搜索">
+            <img src="/image/search.png" alt="搜索">
           </button>
         </div>
       </div>
@@ -138,10 +138,10 @@ export default {
         },
         {
           key: "support",
-          path: "/technicalSupport.html",
+          path: "/support",
           text: "技术支持",
           sub:{
-            type: "about",
+            type: "support",
           }
         },
         {

components/productCenter.vue

@@ -79,27 +79,6 @@ export default {
           key: 'p4',
           img: 'image/showing/lowCam.jpg'
         },
-        {
-          title: '4G电力摄像头模组',
-          key: 'p5',
-          img: 'image/product/20Cam.png',
-          description: ''
-        },
-        {
-          title: '多目协同摄像头',
-          key: 'p6',
-          img: 'image/product/20Cam.png'
-        },
-        {
-          title: '电气火灾模块',
-          key: 'p7',
-          img: 'image/product/20Cam.png'
-        },
-        {
-          title: 'm2m产品',
-          key: 'p8',
-          img: 'image/product/20Cam.png'
-        }
       ]
     }
   },

components/qTab.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="tab">
-    <div class="tab-header">
+<!--    tab 表格 ,传入tabHeader,通过tabHeader的key来渲染对应的slot插槽-->
+    <div class="tab-headers">
       <div
-           v-for="item in header"
-           :key="item.key"
-           :class="`header-menu ${item.key===nowKey?'menu-now':''}`"
-      >
+          v-for="(item,i) in headers"
+          :key="item.key"
+          @click="nowKey=item.key"
+          :class="`header-menu ${item.key===nowKey?'now':''} `">
         {{item.text}}
       </div>
     </div>
+    <div class="tab-view" >
+      <slot :name="nowKey" ></slot>
+    </div>
 
   </div>
 </template>
@@ -17,7 +21,7 @@
 export default {
   name: "qTab",
   props:{
-    header: {
+    headers: {
       default(){
         return []
       }
@@ -25,7 +29,7 @@ export default {
   },
   data(){
     return {
-      nowKey: this.header.length?this.header[0].key:''
+      nowKey: this.headers.length?this.headers[0].key:''
     }
   }
 }
@@ -36,13 +40,32 @@ export default {
   width: 100%;
   height: auto;
 }
-.tab-header{
+.tab-headers{
   width: 100%;
-  height: 35px;
+  height: 45px;
   display: flex;
 }
-.tab-header .header-menu{
+.tab-headers .header-menu{
   padding: 5px 15px;
   border-radius: 3px;
+  margin: 5px;
+  cursor: pointer;
+  box-shadow: 0 0 5px gainsboro;
+  /*font-size: 1.2rem;*/
+
+
+}
+.tab-headers .header-menu.now{
+  background-color: #50b8c9;
+  color: white;
+}
+.tab-headers .header-menu:hover{
+  background-color: skyblue;
+  color: white;
+}
+.tab-view{
+  width: 100%;
+  height: auto;
+  border-top: 1px solid gainsboro;
 }
 </style>

components/siteBar.vue

@@ -71,8 +71,8 @@ export default {
   bottom: 50px;
   right: 50px;
   display: block;
-  width: 180px;
-  height: 180px;
+  width: 0;
+  height: 0;
   max-width: none;
   border-radius: 5px;
   box-shadow: 1px 1px 7px 5px #dedede;
@@ -81,5 +81,7 @@ export default {
 }
 .wechat:hover .show-img{
   opacity: 1;
+  width: 180px;
+  height: 180px;
 }
 </style>

components/supportCom/downloads.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="content">
+    <div class="downloads">
+      <div class="download-types noScroll">
+        <div class="searchType">
+          <input type="text" placeholder="在此处搜索文件" v-model="searchKey" @input="filterTypeChangeHandle" >
+          <span class="close" @click="clearSearchText" >
+            x
+          </span>
+        </div>
+        <div class="d-type"
+             v-for="item in filterTypes"
+              :key="item.key"
+              @click="switchType(item.key)"
+        >
+          {{item.title}}
+        </div>
+      </div>
+      <div class="download-type-items">
+        <div class="title">
+          <span class="text-m text-b">[</span>
+          <span class="mark-gold">{{nowTitle}}</span>
+          <span class="text-b">]</span>
+          资料下载
+        </div>
+        <div class="d-type-item"
+             v-for="(item,i) in subItems"
+             :key="nowKey+'_'+i"
+        >
+          <a :href="item.src" target="_blank">
+            <span class="file">
+              <svg-icon class="icon" :icon-class="item.icon?item.icon:'unknownFile'"></svg-icon>
+              {{item.title}}
+            </span>
+            <span class="time">
+              {{timestampToTime(item.add_time)}}
+            </span>
+          </a>
+        </div>
+      </div>
+
+    </div>
+    <div class="downloads-more">
+      <div class="more-text">
+        没有找到您需要的资料？
+        请联系我们，我们将竭诚为您服务。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+import {timestampToTime} from "@/until/time";
+
+export default {
+  name: "downloads",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+    downloads:{
+      default: []
+    }
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      searchKey: '',
+      filterTypes: [],
+      subItems: [],
+      nowTitle: '',
+      nowKey: '',
+      waitTimer: null,
+    }
+  },
+  created(){
+    this.filterTypes = this.downloads;
+    this.switchType(this.downloads[0].key);
+  },
+  watch:{
+    downloads(){
+      this.filterTypeChangeHandle();
+    }
+  },
+  methods:{
+    timestampToTime(){
+      return timestampToTime(...arguments);
+    },
+    switchType(key){
+      if (this.nowKey !== key){
+        this.nowKey = key;
+        let items = this.downloads.find(item=>item.key === key);
+        this.subItems = items?items.subItems:[];
+        this.nowTitle = `${items?items.title:''}`;
+      }
+    },
+    filterTypeChangeHandle(){
+      // 等待700毫秒,防抖
+      if (this.waitTimer){
+        clearTimeout(this.waitTimer);
+      }
+      this.waitTimer = setTimeout(()=>{
+        this.waitTimer = null;
+        let key = this.searchKey;
+        if (key){
+          // 忽略大小写
+          // key = key.toLowerCase();
+          this.filterTypes = this.downloads.filter(item=> item.title.indexOf(key) !== -1);
+        }else{
+          this.filterTypes = this.downloads;
+        }
+      },700);
+
+    },
+    clearSearchText(){
+      this.searchKey = '';
+      this.filterTypeChangeHandle();
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+.downloads{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.download-types{
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-right: 1px solid #e5e5e5;
+  overflow: auto;
+}
+.download-types .searchType{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  font-size: 0.95rem;
+}
+.download-types .searchType input{
+  width: 100%;
+  height: 30px;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 0 10px;
+  outline: none;
+  position: relative;
+}
+.download-types .searchType .close{
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  color: #c54949;
+}
+.download-types .searchType .close:hover{
+  color: #ff0000;
+  font-size: 1.15rem;
+
+}
+
+.d-type{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  cursor: pointer;
+}
+.d-type:hover{
+  background-color: #f5f5f5;
+}
+.download-type-items{
+  width: 80%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 10px;
+}
+.download-type-items .title{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333333;
+}
+.download-type-items .d-type-item{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.download-type-items .d-type-item a{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  text-decoration: none;
+  color: #333333;
+  cursor: pointer;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+.download-type-items .d-type-item a:hover{
+  background-color: #ce5e5e;
+  color: #ffffff;
+}
+.download-type-items .d-type-item a .file{
+  width: calc(100% - 200px);
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.download-type-items .d-type-item a .file .icon{
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+.download-type-items .d-type-item a .time{
+  width: 200px;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>

components/supportCom/support.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div class="title">
+      <span>技术支持</span>
+    </div>
+    <ul class="content">
+      <li class="item">
+        <div class="item-title">
+          <span>Q: 如何获取帮助？</span>
+        </div>
+        <div class="item-content">
+          <span>A: 使用合方圆无线通信模块的客户朋友需要技术支持的请整理好相关问题发送给我们技术支持杨工</span>
+          <br/>
+          <span>电话号码:
+            <span class="mark">15817487997</span>
+            <span class="text-m">微信同号</span>
+          </span>
+        </div>
+      </li>
+
+      <li class="item">
+        <div class="item-title">
+          <span>Q: 如何二次开发？</span>
+        </div>
+        <div class="item-content">
+          <span>A: 需要二次开发模块功能的客户请联系相关销售安排专业的技术人员技术支持 </span>
+          <br/>
+          <span>手机微信同号。:
+            <span class="mark" >15817487997</span>
+            <span class="text-m">刘工</span>
+          </span>
+        </div>
+      </li>
+
+      <li class="item">
+        <div class="item-title">
+          <span>Q: 如何定制开发？</span>
+        </div>
+        <div class="item-content">
+          <span>A: 需要定制化开发模块功能,以及识别算法的客户请联系相关销售人员来获得更多支持 </span>
+          <br/>
+          <span>手机微信同号。:
+            <span class="mark" >15817487997</span>
+            <span class="text-m mark">刘工</span>
+          </span>
+        </div>
+      </li>
+
+      <li class="item">
+        <div class="item-title">
+          <span>Q: 如何向我们反馈问题？</span>
+        </div>
+        <div class="item-content">
+          <span>A: 关于GPRS+GPS无线模块的以及4G模块PCB设计中出现的的问题，请及时联系合方圆销售或发送邮件给技术支持袁工。 </span>
+          <br/>
+        </div>
+      </li>
+
+      <li class="item">
+        <div class="item-title">
+          <span>Q: 如何使用我们的产品？</span>
+        </div>
+        <div class="item-content">
+          <span>A: 关于终端产品使用有详细的使用说明、如有不明白的请联系我们的代理商。 </span>
+          <br/>
+        </div>
+      </li>
+    </ul>
+    <div class="support-end">
+      若您在产品使用过程中遇到问题，欢迎联系我们为您解决，感谢您对合方圆的支持~
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "support"
+}
+</script>
+
+<style scoped>
+.title{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+.content{
+  width: 100%;
+  height: auto;
+  padding: 0 20px;
+}
+.content .item{
+  width: 100%;
+  height: 100px;
+  margin-bottom: 20px;
+  list-style: none;
+  box-shadow: 0 0 5px #ccc;
+  padding: 10px;
+}
+.content .item-all{
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  list-style: none;
+  box-shadow: 0 0 5px #ccc;
+  padding: 10px;
+}
+.content .item .item-title{
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+.content .item .item-content{
+  width: 100%;
+  height: auto;
+  line-height: 20px;
+  font-size: 14px;
+  color: #333;
+}
+</style>

pages/support/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <lucency-header :lang="lang" :page-key="pageKey"></lucency-header>
+    <item-banner :title="'支持中心'" :sub-title="'需要我们为您提供些什么内容呢?'"></item-banner>
+    <div class="conBox">
+      <q-tab :headers="qTabs">
+        <template v-slot:question>
+          <support ></support>
+        </template>
+        <template v-slot:download>
+         <downloads :downloads="downloadsType"></downloads>
+        </template>
+      </q-tab>
+    </div>
+    <default-footer :lang="lang"></default-footer>
+    <site-bar wechat-src="/image/wechat.jpg"></site-bar>
+  </div>
+</template>
+
+<script>
+import lucencyHeader from "~/components/header/lucencyHeader";
+import langMap from "@/map/langMap";
+export default {
+  name: "index",
+  props:['uLang'],
+  components: { lucencyHeader },
+  data(){
+    return {
+      lang: this.uLang?this.uLang:langMap.lang.cn,
+      pageKey: 'support',
+      qTabs: [
+        {
+          text: '技术支持',
+          content: '技术支持',
+          key: 'question'
+        },
+        {
+          text: '下载中心',
+          content: '下载相关技术资料',
+          key: 'download'
+        },
+      ],
+      downloadsType: [
+        {
+          title: "G8100",
+          key: 1,
+          subItems: [
+            {
+              icon: "doc",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            },
+            {
+              icon: "pdf",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            },
+            {
+              icon: "img",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            }
+          ]
+        },
+        {
+          title: "枪机摄像头",
+          key: 2,
+          subItems: [
+            {
+              icon: "doc",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            },
+            {
+              icon: "pdf",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            },
+            {
+              icon: "img",
+              title: "4G低功耗模块G8100B硬件手册",
+              url: "https://gpscore.net/",
+              add_time: "1486538906"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang);
+    // todo 从后台获取下载列表数据
+  },
+  methods:{
+    switchLang(nextLang){
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>