产品中心基础布局,动态路由

assets/icons/svg/all.svg

@@ -0,0 +1 @@
+<svg t="1681465373129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2628" width="200" height="200"><path d="M384 896c-17.664 0-32-14.304-32-32L352 160c0-17.664 14.336-32 32-32s32 14.336 32 32l0 704C416 881.696 401.664 896 384 896z" fill="#5D656E" p-id="2629"></path><path d="M641.056 896.128c-17.696 0-32-14.304-32-32l0-704c0-17.664 14.304-32 32-32s32 14.336 32 32l0 704C673.056 881.824 658.752 896.128 641.056 896.128z" fill="#5D656E" p-id="2630"></path><path d="M864 736c-17.696 0-32-14.304-32-32L832 320c0-17.664 14.304-32 32-32s32 14.336 32 32l0 384C896 721.696 881.696 736 864 736z" fill="#5D656E" p-id="2631"></path><path d="M160 736c-17.664 0-32-14.304-32-32L128 320c0-17.664 14.336-32 32-32s32 14.336 32 32l0 384C192 721.696 177.664 736 160 736z" fill="#5D656E" p-id="2632"></path></svg>

assets/icons/svg/camera2.svg

@@ -0,0 +1 @@
+<svg t="1681465527686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11700" width="200" height="200"><path d="M223.82 588.34a24.92 24.92 0 0 1-15-5L113.69 512a25 25 0 0 1 1.9-41.29l563.09-346.36 0.11-0.06A81.63 81.63 0 0 1 787.19 146c0.22 0.3 0.43 0.6 0.63 0.91l90.42 136.4a25 25 0 0 1-7.74 35.11L536.24 523.93a24.79 24.79 0 0 1-32-5 142.72 142.72 0 0 0-40.77-30.21c-30.16-14.63-59.92-13.56-88.43 3.17-85.45 50.13-134.85 90.36-135.34 90.76a25 25 0 0 1-15.88 5.69zM173.08 494l50.49 37.88c21.5-16.2 64.61-47 126.15-83.11 43.83-25.71 91.34-27.14 137.39-4.13a193.43 193.43 0 0 1 39.45 26.52l295.72-181.81L746.5 175a31.84 31.84 0 0 0-41.69-8z" fill="" p-id="11701"></path><path d="M435 697.11a25 25 0 0 1-20.87-11.24l-76.67-116.24a25 25 0 1 1 41.75-27.53l62.88 95.38 388.19-256-24.59-38.78a25 25 0 1 1 42.22-26.7l37.75 59.53a25 25 0 0 1-7.35 34.26L448.74 693a24.92 24.92 0 0 1-13.74 4.11z" fill="" p-id="11702"></path><path d="M335 702.34a25 25 0 0 1-21.64-12.49l-42.61-73.74a25 25 0 0 1 43.3-25l29.69 51.38 37.41-23.24a25 25 0 0 1 26.39 42.47l-59.34 36.87a25 25 0 0 1-13.2 3.75zM678.45 680.64A88.65 88.65 0 1 1 767.1 592a88.75 88.75 0 0 1-88.65 88.64z m0-127.29A38.65 38.65 0 1 0 717.1 592a38.69 38.69 0 0 0-38.65-38.65z" fill="" p-id="11703"></path><path d="M681.25 591.65m-17 0a17 17 0 1 0 34 0 17 17 0 1 0-34 0Z" fill="" p-id="11704"></path><path d="M929 747.4H722.45a90.47 90.47 0 0 1-90.37-90.4c0-2.15 0.09-4.41 0.29-6.92a25 25 0 0 1 33.24-21.67 38.64 38.64 0 0 0 51.49-36.18v-0.61a25 25 0 0 1 25-25H929a25 25 0 0 1 25 25V722.4a25 25 0 0 1-25 25zM689.25 680a40.37 40.37 0 0 0 33.2 17.42H904v-80.77H763.61A88.88 88.88 0 0 1 689.25 680z m27.86-87.28z" fill="" p-id="11705"></path><path d="M929 834.07a25 25 0 0 1-25-25V511.8a25 25 0 1 1 50 0v297.27a25 25 0 0 1-25 25z" fill="" p-id="11706"></path></svg>

assets/icons/svg/more.svg

@@ -0,0 +1 @@
+<svg t="1650133442635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8461" width="200" height="200"><path d="M341.333333 533.333333a128 128 0 0 1 128 128v149.333334a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128v-149.333334a128 128 0 0 1 128-128h149.333333z m469.333334 0a128 128 0 0 1 128 128v149.333334a128 128 0 0 1-128 128h-149.333334a128 128 0 0 1-128-128v-149.333334a128 128 0 0 1 128-128h149.333334z m-469.333334 64H192a64 64 0 0 0-63.893333 60.245334L128 661.333333v149.333334a64 64 0 0 0 60.245333 63.893333L192 874.666667h149.333333a64 64 0 0 0 63.893334-60.245334L405.333333 810.666667v-149.333334a64 64 0 0 0-60.245333-63.893333L341.333333 597.333333z m469.333334 0h-149.333334a64 64 0 0 0-63.893333 60.245334L597.333333 661.333333v149.333334a64 64 0 0 0 60.245334 63.893333L661.333333 874.666667h149.333334a64 64 0 0 0 63.893333-60.245334L874.666667 810.666667v-149.333334a64 64 0 0 0-60.245334-63.893333L810.666667 597.333333zM341.333333 64a128 128 0 0 1 128 128v149.333333a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128h149.333333z m469.333334 0a128 128 0 0 1 128 128v149.333333a128 128 0 0 1-128 128h-149.333334a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128h149.333334zM341.333333 128H192a64 64 0 0 0-63.893333 60.245333L128 192v149.333333a64 64 0 0 0 60.245333 63.893334L192 405.333333h149.333333a64 64 0 0 0 63.893334-60.245333L405.333333 341.333333V192a64 64 0 0 0-60.245333-63.893333L341.333333 128z m469.333334 0h-149.333334a64 64 0 0 0-63.893333 60.245333L597.333333 192v149.333333a64 64 0 0 0 60.245334 63.893334L661.333333 405.333333h149.333334a64 64 0 0 0 63.893333-60.245333L874.666667 341.333333V192a64 64 0 0 0-60.245334-63.893333L810.666667 128z" fill="#333333" p-id="8462"></path></svg>

assets/icons/svg/smartDev.svg

@@ -0,0 +1 @@
+<svg t="1681466057647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27100" width="200" height="200"><path d="M128 917.33h768V573.38H128v343.95z m85.33-258.62h597.33V832H213.33V658.71zM819.52 352.8c-46.35-46.51-110.47-75.3-181.33-75.3-70.85 0-134.97 28.79-181.33 75.3l60.34 60.34c30.91-31.07 73.7-50.31 120.99-50.31s90.08 19.24 120.99 50.31l60.34-60.34zM577.55 473.49l60.64 60.64 60.64-60.64c-15.47-15.63-36.91-25.32-60.64-25.32s-45.17 9.69-60.64 25.32z" p-id="27101"></path><path d="M638.19 192.16c94.42 0 179.87 38.34 241.67 100.3l60.34-60.34c-77.24-77.4-184.03-125.29-302.01-125.29-117.98 0-224.77 47.89-302.01 125.29l60.34 60.34c61.8-61.96 147.25-100.3 241.67-100.3zM256 704h85.33v85.33H256zM384 704h85.33v85.33H384zM512 704h85.33v85.33H512z" p-id="27102"></path></svg>

components/IconSvg/iconSvg.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    iconName () {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

components/banner/productBanner.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="banner">
+    <div class="imgBox">
+      <img src="image/banner/banner_product.png" alt="">
+    </div>
+    <div class="banner-con bg-absolute">
+      <span>{{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}</span>
+      <span class="subTitle">{{lang===langType.cn?"持续创新的软硬件产品":getLangText("持续创新的软硬件产品")}}</span>
+      <span>1</span>
+    </div>
+    <div class="banner-con">
+      <span>{{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}</span>
+      <span class="subTitle">{{lang===langType.cn?"持续创新的软硬件产品":getLangText("持续创新的软硬件产品")}}</span>
+      <div class="search-box">
+        <div class="search">
+          <input type="text" :placeholder="`${lang===langType.cn?'输入产品名称':getLangText('输入产品名称')}`" v-model="key">
+          <button type="button" @click="searchProduct">O</button>
+        </div>
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+
+export default {
+  name: "productBanner",
+  props:{
+    pKey:{},
+    lang:{
+      default: langMap.lang.cn
+    },
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      key:this.pKey?this.pKey:'',
+    }
+  },
+
+  methods:{
+    getLangText(str){
+      return langMap.getText(this.lang,str);
+    },
+    getAbbrText(str){
+      return langMap.getAbbrText(this.lang,str);
+    },
+    searchProduct(){
+      this.$root.$emit('searchProductKey',this.key);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.banner {
+  width: 100%;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 450px;
+  justify-content: center;
+  align-items: center;
+}
+.banner *{
+  transition: all .4s;
+}
+.banner .imgBox{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.banner:hover .imgBox > img{
+  left: -20px;
+  top: -20px;
+  max-width: calc(100% + 40px);
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+}
+.banner-con{
+  position: relative;
+  padding: 15px 30px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 100px;
+}
+.bg-absolute{
+  position: absolute;
+  filter: blur(5px);
+  background-image: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0.5) 60% );
+  color: #b9b7b7;
+}
+.banner-con > span{
+  width: 420px;
+  font-size: 2.5em;
+  color: white;
+  font-weight: bold;
+  cursor: default;
+  display: flex;
+  justify-content: center;
+}
+.banner:hover .banner-con > span{
+  font-size: 2.6em;
+}
+.banner-con > .subTitle{
+  font-size: 2em;
+}
+.banner:hover .banner-con > .subTitle{
+  font-size: 1.9em;
+}
+
+
+.banner-con .search-box{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.banner-con .search{
+  width: 340px;
+  height: 40px;
+  margin-top: 10px;
+  /*background-color: #fff;*/
+  box-shadow: 1px 1px 6px 4px #22b3e5;
+  border-radius: 40px;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+
+}
+.banner:hover .banner-con .search{
+  width: 400px;
+  border: 1px solid #ffffff;
+}
+.banner-con .search > *{
+  display: block;
+}
+.banner-con .search-box .search input{
+  width: 100%;
+  height: 100%;
+  border-radius: 40px;
+  outline: #22b3e5;
+  BACKGROUND-COLOR: transparent;
+  padding-left: 15px;
+  color: #b4b4b4;
+}
+.banner-con .search-box .search button{
+  display: block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: white;
+  font-size: 1.4em;
+}
+.banner-con .search-box .search button:hover{
+  font-size: 1.6em;
+  color: orangered;
+}
+</style>

components/header/lucencyHeader.vue

@@ -41,7 +41,7 @@
             v-if="item.isSub"
             :type="item.subKey"
             :lang="lang"
-
+            :pHref="item.path"
           />
         </li>
       </ul>

components/header/menuDrops/menuDrop.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="dropMap drop-default">
     <div class="drop-menus">
-      <div  v-for="item in menus"
-            :key="item.typeKey"
-            :class="`menu ${nowMenuKey===item.typeKey?'now':''}`"
-            @mouseenter="toMenuHandle(item)"
+      <a  v-for="item in menus"
+          :key="item.typeKey"
+          :class="`menu ${nowMenuKey===item.typeKey?'now':''}`"
+          :href="pHref+item.href"
+          @mouseenter="toMenuHandle(item)"
       >
         <span >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</span>
-      </div>
+      </a>
     </div>
     <div class="drop-view noScroll">
       <div
@@ -37,23 +38,28 @@ import handle from "~/until/handle";
 const productMenus = [
   {
   text: "M2M产品",
-  typeKey: "m2m"
+  typeKey: "m2m",
+  href: '/m2m'
 },
   {
-    text: "智能终端",
-    typeKey: "sm"
+    text: "AI摄像头",
+    typeKey: "eCam",
+    href: '/aiCam'
   },
   {
-    text: "输电线路摄像头",
-    typeKey: "eCam"
+    text: "智能终端",
+    typeKey: "sm",
+    href: '/sm'
   },
   {
     text: "4G低功耗摄像头",
-    typeKey: "4gCam"
+    typeKey: "4gCam",
+    href: '/low'
   },
   {
     text: "自动变焦双目协同摄像头",
-    typeKey: "nCam"
+    typeKey: "nCam",
+    href: '/cam'
   }
 ];
 /**
@@ -76,7 +82,8 @@ export default {
     lang:{
       default: langMap.lang.cn
     },
-    type:{default:'product'}
+    type:{default:'product'},
+    pHref: {default:''}
   },
   data(){
     return {

components/newCenter.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="content">
+    <div class="conBox big-title">
+      <span>
+        {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
+      </span>
+      <div class="hr"></div>
+    </div>
+    <div class="conBox newView">
+      <a
+        v-for="(news,i) in newArr"
+        :key="news.key"
+        :href="news.src"
+        :class="`newChunk chunk${i}`">
+        <span class="imgBox" v-if="news.img">
+          <img :src="news.img" alt=""/>
+        </span>
+        <p class="newsContext">
+          <span class="newsType">
+            <span>{{getNewsTypeStr(news.type)}}</span>
+          </span>
+          <span class="title">
+            {{lang===langType.cn?news.title:getLangText(news.title)}}
+          </span>
+          <span class="description">
+            {{lang===langType.cn?news.description:getLangText(news.description)}}
+          </span>
+          <span class="time">
+            {{news.time}}
+          </span>
+        </p>
+      </a>
+    </div>
+    <a class="conBox show-more" :href="hrefs.news">查看更多</a>
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+import {hrefs} from "@/map/hrefMap";
+import {newsType,getNewsTypeStr} from "@/map/newMap";
+
+export default {
+  name: "newCenter",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      hrefs: hrefs,
+      newsType: newsType,
+      newArr:[
+        {
+          key: 'one',
+          title: "智慧能源解决方案",
+          img: 'image/showing/fire_s.jpg',
+          type: 2,
+          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          src: '/solution',
+          time: '2023-04-02',
+
+        },
+        {
+          key: 'two',
+          title: "解锁家庭光伏电站监控全姿势",
+          type: 2,
+          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          src: '/solution',
+          time: '2022-01-02'
+        },
+        {
+          key: 'three',
+          title: "解锁家庭光伏电站监控全姿势",
+          type: 2,
+          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          src: '/solution',
+          time: '2022-01-02'
+        },
+        {
+          key: 'four',
+          title: "解锁家庭光伏电站监控全姿势",
+          type: 2,
+          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          src: '/solution',
+          time: '2022-01-02'
+        },{
+          key: 'five',
+          title: "解锁家庭光伏电站监控全姿势",
+          type: 2,
+          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          src: '/solution',
+          time: '2022-01-02'
+        }
+      ]
+    }
+  },
+  methods:{
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+    getNewsTypeStr(ind){
+      return langMap.getAbbrText(
+        this.lang,
+        getNewsTypeStr(ind)
+      );
+    }
+  }
+}
+</script>
+
+<style scoped>
+.newView{
+  display: grid;
+  grid-template-columns: repeat(3);
+  grid-template-rows: repeat(2,260px);
+  grid-template-areas:
+    'a b c'
+    'a d e'
+  ;
+  margin-bottom: 35px;
+}
+.newView .newChunk{
+  box-shadow: 0 0 1px black;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 15px 35px;
+}
+.newView .newChunk:hover{
+  box-shadow: 2px 2px 6px #484444;
+}
+.newChunk .imgBox{
+  width: 100%;
+  height: 240px;
+  margin-bottom: 10px;
+}
+.newView .newChunk:hover .imgBox img{
+  left: -10px;
+  top: -10px;
+  max-width: calc(100% + 20px);
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+}
+.newsContext{
+  display: block;
+  width: 100%;
+  height: 240px;
+}
+.newsContext .newsType{
+  /*margin: 10px 0;*/
+  display: flex;
+  height: 35px;
+  align-items: center;
+}
+.newsContext .newsType > span{
+  color: #ea0000;
+  background-color: #eecec5;
+  padding: 1px 15px;
+  border-radius: 3px;
+}
+.newsContext .title{
+  font-size: 1.3em;
+  display: flex;
+  height: 55px;
+  align-items: center;
+  font-weight: bold;
+
+}
+.newsContext .description{
+  display: block;
+  width: 100%;
+  height: calc(100% - 120px);
+}
+.newsContext .time{
+  display: flex;
+  height: 40px;
+}
+.show-more{
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 1.4em;
+  margin-bottom: 35px;
+}
+.show-more:hover{
+  color: orangered;
+}
+.newView .chunk0{
+  grid-area: a;
+}
+/*.newView .chunk2{*/
+/*  grid-area: b;*/
+/*}*/
+/*.newView .chunk3{*/
+/*  grid-area: c;*/
+/*}*/
+/*.newView .chunk4{*/
+/*  grid-area: d;*/
+/*}*/
+/*.newView .chunk5{*/
+/*  grid-area: e;*/
+/*}*/
+</style>

components/productTypes.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="content">
+    <div class="conBox big-title">
+      <span>
+        {{lang===langType.cn?"产品类别":getAbbrText("产品类别")}}
+      </span>
+      <div class="hr"></div>
+    </div>
+    <div class="conBox product-type">
+      <p
+        v-for="(item,i) in types"
+        :key="item.key"
+        :class="`type-item ${item.key===type?'type-selected':''}`"
+        @click="selectType(item.key)"
+      >
+        <span class="icon-box">
+          <svg-icon :icon-class="item.icon"/>
+        </span>
+        <span class="type-name">{{lang===langType.cn?item.text:getAbbrText(item.text)}}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+
+export default {
+  name: "productTypes",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+    type:{
+      default: 'all'
+    }
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      types:[
+        {
+          key: 'all',
+          icon: 'all',
+          text: '所有产品'
+        },
+        {
+          key: 'cam',
+          icon: 'camera2',
+          text: '多目协同摄像头'
+        },
+        {
+          key: 'aiCam',
+          icon: 'camera',
+          text: 'AI摄像头'
+        },
+        {
+          key: 'low',
+          icon: 'lowPower',
+          text: '低功耗产品'
+        },
+        {
+          key: 'm2m',
+          icon: 'm2m',
+          text: 'm2m产品'
+        },
+        {
+          key: 'sm',
+          icon: 'smartDev',
+          text: '智能终端'
+        },
+      ]
+    }
+  },
+  methods:{
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+    selectType(nextType){
+      console.log(nextType)
+      if (this.type === nextType){
+        return 0;
+      }
+      this.$root.$emit('changeProductType',nextType);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content{
+  cursor: default;
+}
+.content .big-title{
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+.product-type{
+  height: 120px;
+  display: grid;
+  grid-template-columns: repeat(6,1fr);
+}
+
+.product-type .type-item{
+  width: auto;
+  height: 100%;
+  cursor: pointer;
+}
+.product-type .type-item:hover{
+  color: orangered;
+}
+.content .product-type .type-selected{
+  color: #f88330;
+}
+.product-type .type-item .icon-box{
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 4rem;
+  padding-bottom: 20px;
+}
+.content .product-type .type-selected .icon-box{
+  border-bottom: 1px solid deepskyblue;
+}
+.product-type .type-item .type-name{
+  width: 100%;
+  height: 60px;
+  font-size: 1.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

map/hrefMap.js

@@ -0,0 +1,5 @@
+export const hrefs = {
+  index: '/',
+  news:'/news',
+
+}

map/langMap.js

@@ -5,7 +5,7 @@ const lang = {
 const textArr = [
   {
     keys: ["首页"],
-    "en-us": 'index'
+    "en-us": 'Index'
   },
   {
     keys: ["English"],
@@ -46,7 +46,7 @@ const textArr = [
   },
   {
     keys: ["关于我们"],
-    "en-us": 'about us',
+    "en-us": 'About us',
   },
   {
     keys: ["智能产品"],
@@ -54,11 +54,11 @@ const textArr = [
   },
   {
     keys: ["服务与支持"],
-    "en-us": 'server & support',
+    "en-us": 'Server & Support',
   },
   {
     keys: ["快速链接"],
-    "en-us": 'quick link',
+    "en-us": 'Quick link',
   },
   {
     keys: ["选择语言"],
@@ -66,15 +66,27 @@ const textArr = [
   },
   {
     keys: ["联系我们"],
-    "en-us": 'contact us',
+    "en-us": 'Contact Us',
   },
   {
     keys: ["产品中心"],
-    "en-us": 'product center',
+    "en-us": 'ProductCenter',
   },
   {
     keys: ["了解更多"],
-    "en-us": 'more',
+    "en-us": 'More',
+  },
+  {
+    keys: ["持续创新的软硬件产品","持续创新"],
+    "en-us": 'Sustainable Innovation',
+  },
+  {
+    keys: ["输入产品名称","请输入"],
+    "en-us": 'input key for search',
+  },
+  {
+    keys: ["产品类别"],
+    "en-us": 'Product Type',
   },
 ]
 const i18Paths =

map/newMap.js

@@ -0,0 +1,28 @@
+export const newsType = {
+  solution: {
+    val: 1,
+    title: '解决方案'
+  },
+  companyNews: {
+    val: 2,
+    title: '公司动态'
+  },
+  caseShow: {
+    val: 3,
+    title: '案例展示'
+  },
+  industryNews: {
+    val: 4,
+    title: '行业资讯'
+  },
+}
+
+export function getNewsTypeStr(val){
+  let keys = Object.keys(newsType);
+  let itemKey = keys.find(key=>newsType[key].val === val);
+  if(itemKey && newsType[itemKey].title){
+    return newsType[itemKey].title
+  }else{
+    return "NotFound"
+  }
+}

nuxt.config.js

@@ -1,3 +1,19 @@
+import * as path from "path";
+
+function loadSvgConfig(config, ctx) {
+  // 排除 nuxt 原配置的影响,Nuxt 默认有vue-loader,会处理svg,img等
+  // 找到匹配.svg的规则,然后将存放svg文件的目录排除
+  const svgRule = config.module.rules.find(rule => rule.test.test(".svg"));
+  svgRule.exclude = [path.resolve(__dirname, "assets/icons/svg")];
+  //添加loader规则
+  config.module.rules.push({
+    test: /\.svg$/, // 匹配.svg
+    include: [path.resolve(__dirname, "assets/icons/svg")], // 将存放svg的目录加入到loader处理目录
+    use: [
+      { loader: "svg-sprite-loader", options: { symbolId: "icon-[name]" } }
+    ]
+  });
+}
 export default {
     // Global page headers (https://go.nuxtjs.dev/config-head)
     head: {
@@ -28,6 +44,7 @@ export default {
         // https://go.nuxtjs.dev/axios
         '@nuxtjs/axios',
     ],
+    plugins: ["@plugins/svg-icon.js"],
     // api中间件
     serverMiddleware: [
         '~/server/index.js'
@@ -53,10 +70,13 @@ export default {
     },
 
     // Build Configuration (https://go.nuxtjs.dev/config-build)
-    build: {},
+    build: {
+      extend(config, ctx) {
+        loadSvgConfig(config,ctx)
+      }
+    },
     server: {
       port: 8000, // default: 3000
       host: '0.0.0.0', // default: localhost
-
     }
 }

package.json

@@ -17,6 +17,7 @@
     "nuxt": "^2.14.6"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^3.4.2"
+    "@nuxtjs/tailwindcss": "^3.4.2",
+    "svg-sprite-loader": "^6.0.11"
   }
 }

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full">
+  <div>
 <!--    header 部分布局-->
     <lucency-header :lang="lang" page-key="index" />
     <banner :wait-time="2500"/>
@@ -9,7 +9,7 @@
 <!--    产品中心,参考大华,动态加载这部分内容-->
     <product-center :lang="lang"/>
 <!--    新闻中心-->
-
+    <new-center :lang="lang"/>
 <!--    页脚 -->
     <default-footer :lang="lang"/>
 
@@ -18,19 +18,19 @@
 
 <script>
 import lucencyHeader from "~/components/header/lucencyHeader";
-import banner from "~/components/banner";
+import banner from "@/components/banner/banner";
 import productCenter from "~/components/productCenter";
 import showingStand from "~/components/showingStand";
+import newCenter from "@/components/newCenter";
 import defaultFooter from "~/components/footer/defaultFooter";
 import langMap from "~/map/langMap";
 import handle from "~/until/handle";
 export default {
-  components: { lucencyHeader,banner,showingStand,defaultFooter,productCenter },
+  components: { lucencyHeader,banner,showingStand,defaultFooter,productCenter,newCenter },
   props:['uLang'],
   data(){
     return {
       lang: this.uLang?this.uLang:langMap.lang.cn,
-      msg: ""
     }
   },
   mounted() {
@@ -49,7 +49,6 @@ export default {
           this.lang = langMap.lang.cn
         }
       }
-
     },
     async loadData(){
       let [err,res] = await handle(this.$axios.get("http://kindring.cn:9999/get"))

pages/product/_type.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="content">
+    <product-index :p-type="type"/>
+  </div>
+</template>
+
+<script>
+import productIndex from '@/pages/product/index.vue'
+export default {
+  name: "typeProductPage",
+  props:[],
+  data(){
+    return {
+      type:  'all'
+    }
+
+  },
+  beforeMount() {
+    this.type = this.$route.params.type?this.$route.params.type:'all';
+    console.log(this.type);
+  },
+  components:{
+    productIndex
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="">
+    <lucency-header :lang="lang" page-key="product" />
+<!--    推荐广告-->
+    <product-banner :lang="lang" />
+<!--    产品类别 -->
+    <product-types :lang="lang" :type="type"></product-types>
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+import productBanner from "@/components/banner/productBanner";
+
+export default {
+  name: "index",
+  props:['uLang','pType','pKey'],
+  components:{
+    productBanner
+  },
+  data(){
+    return {
+      lang: this.uLang?this.uLang:langMap.lang.cn,
+      type: this.pType?this.pType:'all',
+      key: this.pKey?this.pKey:'',
+      page: 1,
+      productTypes: [],
+    }
+  },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang);
+    this.$root.$on('searchProductKey',this.changeProductKeyHandle);
+    this.$root.$on('changeProductType',this.selectType);
+    // this.loadData();
+  },
+  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
+        }
+      }
+    },
+    selectType(nextType){
+      console.log(nextType)
+      this.type = nextType;
+      this.searchProduct();
+    },
+    changeProductKeyHandle(key){
+      if(this.key === key){
+        return 0;
+      }
+      this.key = key;
+      this.searchProduct();
+    },
+    async searchProduct(){
+      const formData = new FormData();
+      formData.append('key',this.key);
+      formData.append('type',this.type);
+      formData.append('page',this.page);
+      // 获取数据
+      let [err,res] = await handle(this.$axios.get())
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

plugins/svg-icon.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import SvgIcon from "@/components/IconSvg/iconSvg";
+
+// 注册组件
+Vue.component("svg-icon", SvgIcon);
+//预请求svg组件(通过之前的svg-sprite-loader加载)
+const req = require.context("@/assets/icons/svg", false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+requireAll(req);