产品中心设置

assets/public.css

@@ -174,3 +174,22 @@
   position: absolute;
   bottom: 5px;
 }
+
+/**
+图片框,可以加上动态效果
+ */
+.imgBox{
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.imgBox > img{
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+}
+

components/devView.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}
-      </span>
-      <div class="hr"></div>
-    </div>
-    <div class="conBox"></div>
-  </div>
-</template>
-
-<script>
-import langMap from "~/map/langMap";
-
-export default {
-  name: "devView",
-  props: {
-    lang:{
-      default: langMap.lang.cn
-    },
-  },
-  data(){
-    return {
-      langType: langMap.lang,
-    }
-  },
-  methods:{
-    getLangText(str) {
-      return langMap.getText(this.lang, str);
-    },
-    getAbbrText(str) {
-      return langMap.getAbbrText(this.lang, str);
-    },
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

components/header/lucencyHeader.vue

@@ -34,7 +34,7 @@
             @mouseenter="showSubMenu(item)"
             @mouseleave="startHideSubMenu(item)"
         >
-          <a :href="item.url" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
+          <a :href="lang===langType.cn?item.path:getLangPathStr(item.path)" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
           <span class="now" v-if="pageKey===item.key"></span>
           <menu-drop
             v-show="item.showSub"
@@ -117,7 +117,7 @@ export default {
         },
         {
           key: "product",
-          path: "/product.html",
+          path: "/product",
           text: "产品中心",
           isSub: true,
           subKey: "product",
@@ -125,7 +125,7 @@ export default {
         },
         {
           key: "solution",
-          path: "/solution.html",
+          path: "/solution",
           text: "解决方案",
           isSub: true,
           subKey: "solution",
@@ -133,7 +133,7 @@ export default {
         },
         {
           key: "new",
-          path: "/new.html",
+          path: "/new",
           text: "新闻中心"
         },
         {
@@ -146,7 +146,7 @@ export default {
         },
         {
           key: "about",
-          path: "/about.html",
+          path: "/about",
           text: "关于我们",
           sub:{
             type: "about",
@@ -166,6 +166,9 @@ export default {
     getAbbrText(str){
       return langMap.getAbbrText(this.lang,str);
     },
+    getLangPathStr(pathStr){
+      return langMap.getLangPathStr(this.lang,pathStr)
+    },
     switchLangClickHandle(){
       this.$root.$emit('changeLang');
     },

components/productCenter.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="content">
+    <div class="conBox big-title">
+      <span>
+        {{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}
+      </span>
+      <div class="hr"></div>
+    </div>
+    <div class="conBox productCenter">
+        <a class="product"
+           v-for="(product,i) in products"
+           :key="'pro-'+product.key"
+        >
+          <span class="imgBox">
+             <img :src="product.img" :alt="product.title" class="img">
+          </span>
+          <span class="more">
+            {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
+          </span>
+          <p class="product-info">
+            <span class="title">
+              {{lang===langType.cn?product.title:getAbbrText(product.title)}}
+            </span>
+            <span class="description" v-if="product.sellPointer">
+              <span v-for="sell in product.sellPointer">
+                {{sell}}
+              </span>
+            </span>
+          </p>
+        </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "~/map/langMap";
+
+export default {
+  name: "productCenter",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      products:[
+        {
+          title: '20倍自动变焦摄像头',
+          img: 'image/product/20Cam.png',
+          key: 'p1',
+          sellPointer: [
+            '20倍超级变焦',
+            '高清影像',
+            '多种可选倍率'
+          ]
+        },
+        {
+          title: '车牌识别摄像头',
+          key: 'p2',
+          img: 'image/product/car.jpg',
+          sellPointer: [
+            'ai识别',
+            '智能联动',
+          ]
+        },
+        {
+          title: '火情识别摄像头',
+          key: 'p3',
+          img: 'image/product/fire.png',
+          sellPointer: [
+            '烟火识别',
+            '自动巡检',
+          ]
+        },
+        {
+          title: '4G低功耗智能摄像头',
+          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'
+        }
+      ]
+    }
+  },
+  methods:{
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+  }
+}
+</script>
+
+<style scoped>
+.productCenter{
+  display: grid;
+  grid-template-columns: repeat(4,310px);
+  grid-gap: 25px;
+  box-sizing: border-box;
+}
+.product{
+  display: block;
+  height: 380px;
+  background-color: #fff;
+  box-shadow: 1px 1px 3px black;
+  border-radius: 3px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+}
+.product:hover{
+  box-shadow: 1px 1px 5px #3a3838;
+}
+.product .more{
+  background-color: #912b02;
+  padding: 0 30px;
+  border-radius: 4px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%,0);
+  top: 250px;
+  opacity: 0;
+  transition:all 0.5s;
+  color: white;
+}
+.product:hover .more{
+  opacity: 1;
+  background-color: orangered;
+}
+.product .more:hover{
+  box-shadow: 1px 1px 5px white;
+  padding: 0 25px;
+}
+.product .product-info{
+  display: block;
+  padding: 5px;
+  height: calc(100% - 270px);
+  box-sizing: border-box;
+}
+.product .imgBox{
+  display: block;
+  width: 310px;
+  height: 270px;
+}
+.product:hover .imgBox img{
+  left: -10px;
+  top: -10px;
+  max-width: calc(100% + 20px);
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+}
+
+.product .title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  font-size: 1.6em;
+}
+.product-info .description{
+  display: block;
+  height: calc(100% - 40px);
+  border-top: 1px solid beige;
+  font-size: 0.9em;
+  color: #444343;
+}
+.product-info .description > span{
+  display: block;
+}
+</style>

components/showingStand.vue

@@ -9,11 +9,11 @@
     <div class="conBox showing">
       <a
         v-for="(item,i) in chunkItems"
-        :class="`chunk chunk${(i+1)}`"
+        :class="`chunk imgBox chunk${(i+1)}`"
          :key="item.id"
       >
 <!--         实时管理(物联网) -->
-        <img class="chunkBg" :src="item.img" alt="imgNotFound">
+        <img :src="item.img" alt="imgNotFound">
         <p class="chunkText">
           <span class="title">{{lang===langType.cn?item.title:getAbbrText(item.title)}}</span>
           <span class="subTitle">{{lang===langType.cn?item.subTitle:getAbbrText(item.subTitle)}}</span>
@@ -132,16 +132,8 @@ export default {
   box-shadow: 1px 1px 3px deepskyblue;
 }
 
-.showing .chunk .chunkBg{
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  transition: all .5s;
-}
-.showing .chunk:hover .chunkBg{
+
+.showing .chunk:hover > img{
   left: -20px;
   top: -20px;
   max-width: calc(100% + 40px);

map/langMap.js

@@ -77,6 +77,14 @@ const textArr = [
     "en-us": 'more',
   },
 ]
+const i18Paths =
+  [
+    {
+      keys: ['/','/index'],
+      "en-us": '/index_en',
+    }
+
+  ]
 function getText(langType,langKey){
   let item = textArr.find(val=>val.keys.includes(langKey));
   if(item && item[langType]){
@@ -98,8 +106,18 @@ function getAbbrText(langType,langKey){
   }
   return langKey
 }
+
+function getLangPathStr(langType,langKey){
+  let item = i18Paths.find(val=>val.keys.includes(langKey));
+  if(item && item[langType]){
+    return item[langType]
+  }else{
+    return langKey
+  }
+}
 export default {
   lang,
   getText,
-  getAbbrText
+  getAbbrText,
+  getLangPathStr
 }

pages/index.vue

@@ -1,26 +1,31 @@
 <template>
   <div class="w-full">
-    <lucency-header :lang="lang" page-key="index" ></lucency-header>
-    <banner :wait-time="2500"></banner>
-<!--    产品列表,-->
-    <dev-view :lang="lang"></dev-view>
+<!--    header 部分布局-->
+    <lucency-header :lang="lang" page-key="index" />
+    <banner :wait-time="2500"/>
+
 <!--    优势项目部分展示,参考海康-->
-    <showing-stand :lang="lang"></showing-stand>
-<!--    产品分类,参考大华,动态加载这部分内容-->
+    <showing-stand :lang="lang"/>
+<!--    产品中心,参考大华,动态加载这部分内容-->
+    <product-center :lang="lang"/>
+<!--    新闻中心-->
+
+<!--    页脚 -->
     <default-footer :lang="lang"/>
+
   </div>
 </template>
 
 <script>
 import lucencyHeader from "~/components/header/lucencyHeader";
 import banner from "~/components/banner";
-import devView from "~/components/devView";
+import productCenter from "~/components/productCenter";
 import showingStand from "~/components/showingStand";
 import defaultFooter from "~/components/footer/defaultFooter";
 import langMap from "~/map/langMap";
 import handle from "~/until/handle";
 export default {
-  components: { lucencyHeader,banner,showingStand,defaultFooter,devView },
+  components: { lucencyHeader,banner,showingStand,defaultFooter,productCenter },
   props:['uLang'],
   data(){
     return {
@@ -34,7 +39,7 @@ export default {
   },
   methods:{
     switchLang(nextLang){
-      console.log("11111111111111111")
+      // console.log("11111111111111111")
       if(nextLang){
         this.lang = nextLang;
       }else{

pages/index_en.vue

@@ -8,6 +8,11 @@ import langMap from "~/map/langMap";
 export default {
   name: "index_en",
   components: {Index},
+  head(){
+    return {
+      title: 'szhfy'
+    }
+  },
   data(){
     return {
       lang: langMap.lang.en