官网基础布局完成,多语言兼容

assets/public.css

@@ -2,6 +2,16 @@
   margin: 0;
   padding: 0;
 }
+
+.noScroll::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+.noScroll {
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+
 .header{
   width: 100%;
   height: 110px;
@@ -9,6 +19,8 @@
   top: 0;
   left: 0;
   z-index: 999;
+  /*mix-blend-mode: difference;*/
+  background-color: #ffffffad;
 }
 .content{
   width: 100%;
@@ -16,7 +28,7 @@
   /*top: 110px;*/
 }
 .conBox{
-  width: 1200px;
+  width: 1320px;
   margin: 0 auto;
 }
 .dropMap{
@@ -24,9 +36,141 @@
   top: 100%;
   background-color: #fff;
   box-shadow: 1px 0 4px #c2bfbf;
+  color: black;
 }
+
 .drop-default{
-  width: 560px;
+  width: 740px;
   height: 340px;
   display: flex;
 }
+.drop-default .drop-menus{
+  width: 250px;
+  height: 100%;
+  /*border-right: 1px solid darkgray;*/
+  padding: 5px;
+  box-sizing: border-box;
+  box-shadow: 1px 0 1px gray;
+}
+.drop-default .drop-menus .menu{
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  font-size: 1.1em;
+  cursor: default;
+}
+.drop-default .drop-menus .now {
+  background-color: #b9b7b7;
+  color: white;
+}
+
+.drop-default .drop-view{
+  width: 540px;
+  box-sizing: border-box;
+  padding: 5px;
+  overflow: auto;
+  cursor: default;
+}
+.drop-default .drop-view .sub-item{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  align-items: center;
+}
+.drop-default .drop-view .now-sub{
+  background-color: #f3f3f3;
+}
+.drop-default .drop-view .sub-item .con{
+  width: 100%;
+  height: 90px;
+  display: flex;
+}
+.drop-default .drop-view .sub-item .img-box{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90px;
+  height: 90px;
+  box-sizing: border-box;
+  padding: 5px;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px beige;
+  flex-shrink: 0;
+}
+.img-box img{
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.drop-default .drop-view .sub-item .text-box{
+  width: 420px;
+}
+.drop-default .drop-view .sub-item .text-box .name{
+
+}
+.drop-default .drop-view .sub-item .text-box .remark{
+  font-size: 0.9em;
+}
+.blurImg{
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.blur{
+  -webkit-filter: blur(5px); /* Chrome, Opera */
+  -moz-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+}
+
+.footer{
+  box-shadow: 1px 1px 3px black;
+  margin-top: 20px;
+}
+
+.footer-list{
+  display: flex;
+  padding: 15px 0;
+}
+.footer-list .footerItem{
+  width: calc(1320px / 5);
+}
+.footer-list .footerItem .title{
+  font-size: 1.4em;
+  color: black;
+  padding-top: 10px;
+  padding-bottom: 20px;
+}
+.footer-list .footerItem .footer-list-item{
+  display: block;
+  height: 35px;
+}
+.footer-list .footerItem .footer-list-item:hover{
+  color: #1e45e7;
+}
+
+.big-title{
+  height: 80px;
+  font-size: 2.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 70px;
+  margin-bottom: 70px;
+  letter-spacing: 0.5rem;
+  position: relative;
+}
+
+.big-title .hr{
+  width: 80px;
+  height: 4px;
+  background-color: orangered;
+  position: absolute;
+  bottom: 5px;
+}

components/banner.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="banner">
+
+    <!--      轮播图片,通过show切换-->
+    <div
+        v-for="(item,i) in banners"
+        :key="'img-'+item.id"
+        :class="{
+            'banner-show':true,
+            'banner-show-now':i===bannerIndex
+          }"
+        v-show="i===bannerIndex"
+    >
+      <!--        图片框-->
+      <img :src="item.img" :alt="item.title">
+      <!--        文本框-->
+      <div class="w-p1200 h-full py-2 border-box relative" v-show="showText">
+        <div class="view-text">
+          <div class="title">{{item.title}}</div>
+          <div class="content indent-8">
+            {{item.text}}
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+
+    <!--      点击切换控制 -->
+    <div class="banner-control bottom-14">
+      <div
+          v-for="(item,i) in banners"
+          :key="'handle-'+item.id"
+          :class="{
+               'banner-handle':true,
+               'banner-handle-now':i===bannerIndex
+               }"
+          @click="changeBanner(i)"
+      >
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "banner",
+  props: {
+    waitTime: {default:5000}
+  },
+  data(){
+    return {
+      banners:[{
+        id: '1',
+        url:'#/recommends',
+        title: '',
+        text: '',
+        img:'image/banner/index.jpg',
+        diffColor: "#000"
+      },{
+        id: '2',
+        url:'#/recommend?recommendId=2',
+        title: '',
+        text: '',
+        img:'image/banner/banner_show.png',
+        diffColor: "#fafafa"
+      },{
+        id: '3',
+        url:'http://',
+        title: '',
+        text: '',
+        img:'image/banner/banner_gb28181.jpg',
+        diffColor: "#ffffff"
+      },
+      ],
+      bannerIndex:0,
+      timer:null,
+      showText: false,
+    }
+},mounted() {
+    this.cursor()
+  },
+  methods:{
+    cursor(){
+      clearTimeout(this.timer);
+      this.timer=setTimeout(()=>{
+        this.nextBanner();
+      },this.waitTime);
+    },
+    nextBanner(){
+      let nextBanner = this.bannerIndex+1;
+      if(nextBanner>=this.banners.length){
+        nextBanner = 0;
+      }
+      this.changeBanner(nextBanner);
+    },
+    changeBanner(i){
+      this.bannerIndex = i;
+      this.cursor();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.banner {
+  width: 100%;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 615px;
+}
+
+.banner .banner-show {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 25px;
+  display: flex;
+  justify-content: center;
+}
+
+.banner .banner-show .view-text {
+  height: 80%;
+  width: 480px;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0.47);
+  color: floralwhite;
+  padding: 2px 5px;
+}
+
+.banner .banner-show .view-text .title {
+  font-size: 1.7em;
+}
+
+.banner .banner-show .view-text .content {
+  font-size: 0.9em;
+}
+
+
+.banner .banner-show img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+.banner .banner-show .blurImg{
+  top: -110px;
+}
+
+.banner .banner-control {
+  width: auto;
+  height: auto;
+  position: absolute;
+  left: 50%;
+  bottom: 15px;
+  transform: translate(-50%, 0);
+  z-index: 10;
+  display: flex;
+  padding: 5px;
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.8;
+}
+
+.banner .banner-control .banner-handle {
+  width: 10px;
+  height: 5px;
+  border-radius: 2px;
+  transition: all 0.6s;
+  margin: 0 5px;
+  cursor: pointer;
+  background-color: rgba(178, 160, 160, 0.79);
+}
+
+.banner .banner-control .banner-handlehover {
+  background-color: rgba(196, 167, 167, 0.79);
+}
+
+.banner .banner-control .banner-handle-now {
+  width: 15px;
+  background-color: #f49b00;
+}
+
+</style>

components/devView.vue

@@ -0,0 +1,41 @@
+<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/footer/defaultFooter.vue

@@ -1,15 +1,164 @@
 <template>
-  <div class="w-full bg-black h-12 text-pink-500">
-    footer
+  <div class='content footer'>
+    <div class='conBox'>
+
+      <div class='footer-list'>
+        <div class="footerItem"
+             v-for="(item,i) in footers"
+             :key="'footer-'+item.key"
+        >
+          <div class="title">{{lang===langType.cn?item.title:getAbbrText(item.title)}}</div>
+          <a
+            v-for="(subItem,subI) in item.items"
+            :key="`footer-${item.key}-item-${subI}`"
+            :href="subItem.src"
+            class="footer-list-item">
+            {{lang===langType.cn?subItem.text:getAbbrText(subItem.text)}}
+          </a>
+        </div>
+        </div>
+      </div>
+      <div class="bg">
+
+      </div>
   </div>
 </template>
 
 <script>
+import langMap from "~/map/langMap";
 export default {
-  
+  name:"defaultFooter",
+  props:{
+    lang:{
+      default: langMap.lang.cn
+    },
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      footers:[
+        {
+          title: "关于我们",
+          key: 'about us',
+          items: [
+            {
+              text: '公司简介',
+              src: '/about',
+            },
+            {
+              text: '招贤纳士',
+              src: '/jobs',
+            },
+            {
+              text: '产品购买',
+              src: '/buy',
+              showType: 2,
+              show: '产品购买服务请联系  刘工15817487997微信同号'
+            },
+            {
+              text: '诚招代理',
+              src: '/agency',
+            },
+            {
+              text: '联系我们',
+              src: '/contact',
+            }
+          ],
+        },
+        {
+          title: "智能产品",
+          key: 'product',
+          items: [
+            {
+              text: '公司简介',
+              src: '/about',
+            },
+            {
+              text: '招贤纳士',
+              src: '/jobs',
+            },
+            {
+              text: '产品购买',
+              src: '/buy',
+              showType: 2,
+              show: '产品购买服务请联系  刘工15817487997微信同号'
+            },
+            {
+              text: '诚招代理',
+              src: '/agency',
+            },
+            {
+              text: '联系我们',
+              src: '/contact',
+            }
+          ],
+        },
+        {
+          title: "服务与支持",
+          key: 'support',
+          items: [
+            {
+              text: '公司简介',
+              src: '/about',
+            },
+            {
+              text: '招贤纳士',
+              src: '/jobs',
+            },
+            {
+              text: '产品购买',
+              src: '/buy',
+              showType: 2,
+              show: '产品购买服务请联系  刘工15817487997微信同号'
+            },
+            {
+              text: '诚招代理',
+              src: '/agency',
+            },
+            {
+              text: '联系我们',
+              src: '/contact',
+            }
+          ],
+        },
+        {
+          title: "快速链接",
+          key: 'quick',
+          items: [
+            {
+              text: '管理平台',
+              src: 'https://gpscore.net/',
+            },
+          ],
+        },
+        {
+          title: "选择语言",
+          key: 'Languages',
+          items: [
+            {
+              text: '中文',
+              src: '/',
+            },
+            {
+              text: 'en',
+              src: '/index_en',
+            },
+          ],
+        },
+      ]
+    }
+  },
+  methods: {
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+  }
 }
 </script>
 
 <style>
 
-</style>
+</style>

components/header/lucencyHeader.vue

@@ -28,16 +28,21 @@
     </div>
     <div class="conBox header-main">
       <ul class="main-menus">
-        <li class="main-menu" v-for="(item,i) in mainMenus"
+        <li class="main-menu"
+            v-for="(item,i) in mainMenus"
             :key="`main-${item.path}-${i}`"
-            :title="lang===langType.cn?item.text:getLangText(item.text)"
             @mouseenter="showSubMenu(item)"
+            @mouseleave="startHideSubMenu(item)"
         >
           <a :href="item.url" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
           <span class="now" v-if="pageKey===item.key"></span>
-          <produce-drop
+          <menu-drop
             v-show="item.showSub"
-            v-if="item.isSub&&item.subKey==='product'"></produce-drop>
+            v-if="item.isSub"
+            :type="item.subKey"
+            :lang="lang"
+
+          />
         </li>
       </ul>
       <div class="search-box">
@@ -56,7 +61,7 @@
 
 <script>
 import langMap from "~/map/langMap";
-import produceDrop from "@/components/header/menuDrops/produceDrop";
+import menuDrop from "~/components/header/menuDrops/menuDrop";
 export default {
   name: "lucencyHeader",
   props: {
@@ -65,10 +70,11 @@ export default {
     },
     pageKey:{
       default: "index"
-    }
+    },
+
   },
   components:{
-    produceDrop
+    menuDrop
   },
   data(){
     return {
@@ -148,6 +154,8 @@ export default {
         }
       ],
       searchKey: "",
+      nowSub: "",
+      hideTimer: null,
     }
   },
 
@@ -165,9 +173,37 @@ export default {
 
     },
     showSubMenu(item){
-      console.log("0000000")
+      // console.log("0000000")
       if(item.isSub){
+        // 清除隐藏定时器
+        if(this.hideTimer){
+          clearTimeout(this.hideTimer);
+          this.hideTimer = null;
+        }
+        if(this.nowSub !== item.key){
+          // 不同key切换
+          let oldItem = this.mainMenus.find(val => val.key === this.nowSub);
+          console.log(oldItem)
+          if(oldItem){
+            this.hideSubMenu(oldItem);
+          }
+        }
         item.showSub = true;
+        this.nowSub = item.key;
+
+      }
+    },
+    startHideSubMenu(item){
+      this.hideTimer = setTimeout(()=>{
+        this.hideSubMenu(item);
+      },700)
+    },
+    hideSubMenu(item){
+      item.showSub = false;
+      this.nowSub = "";
+      if(this.hideTimer){
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
       }
     }
   }
@@ -176,8 +212,9 @@ export default {
 
 <style scoped>
 .header{
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(5px);
   box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 20%) ;
+  /*text-shadow: 0 0 5px skyblue;*/
 }
 .header-content {
   display: flex;
@@ -195,7 +232,7 @@ export default {
   height: 65px;
 }
 .header-content .right-header{
-  width: 940px;
+  width: 1060px;
   height: 100%;
   margin-left: 11px;
   position: relative;
@@ -248,7 +285,8 @@ export default {
 }
 .menus .subMenu .menu{
   font-size: 0.85em;
-  color: #8a8a8a;
+  color: #343434;
+
 }
 .header-main{
   height: 40px;
@@ -265,10 +303,11 @@ export default {
 .main-menus .main-menu{
   width: auto;
   height: auto;
-  color: black;
+  /*color: #1a1a1a;*/
   margin-left: 15px;
   cursor: pointer;
   position: relative;
+
 }
 .main-menus .main-menu:first-child{
   margin-left: 0px;

components/header/menuDrops/menuDrop.vue

@@ -0,0 +1,163 @@
+<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)"
+      >
+        <span >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</span>
+      </div>
+    </div>
+    <div class="drop-view noScroll">
+      <div
+        v-for="(item,i) in showMenuItems"
+        :class="`sub-item ${nowSubMenuId===item.id?'now-sub':''}`"
+        :key=" `${nowMenuKey}-${item.id}-${i}`"
+        @mouseenter="subItemHandle(item.id)"
+        @click="subItemClickHandle(item)"
+      >
+        <div class="con">
+          <div class="img-box">
+            <img :src="'public/'+item.image" :alt="item.name"  class="img"/>
+          </div>
+          <div class="text-box">
+            <div class="name">{{item.name}}</div>
+            <div class="remark">{{item.remark}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "~/map/langMap";
+import handle from "~/until/handle";
+const productMenus = [
+  {
+  text: "M2M产品",
+  typeKey: "m2m"
+},
+  {
+    text: "智能终端",
+    typeKey: "sm"
+  },
+  {
+    text: "输电线路摄像头",
+    typeKey: "eCam"
+  },
+  {
+    text: "4G低功耗摄像头",
+    typeKey: "4gCam"
+  },
+  {
+    text: "自动变焦双目协同摄像头",
+    typeKey: "nCam"
+  }
+];
+/**
+ * 解决方案
+ * @type {[{typeKey: string, text: string}, {typeKey: string, text: string}]}
+ */
+const solutionMenus = [
+  {
+    text: "M2M产品",
+    typeKey: "m2m"
+  },
+  {
+    text: "智能终端",
+    typeKey: "sm"
+  },
+];
+export default {
+  name: "menuDrop",
+  props:{
+    lang:{
+      default: langMap.lang.cn
+    },
+    type:{default:'product'}
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      menus: [
+      ],
+      menuSubItems: {},
+      showMenuItems: [],
+      nowMenuKey: "",
+      nowSubMenuId: ""
+    }
+  },
+  beforeMount() {
+    this.loadMenus();
+  },
+  methods:{
+    getLangText(str){
+      return langMap.getText(this.lang,str);
+    },
+    getAbbrText(str){
+      return langMap.getAbbrText(this.lang,str);
+    },
+    loadMenus(){
+      if(this.type === "solution"){
+        console.log("solution data")
+        this.menus = solutionMenus;
+      }else{
+        this.menus = productMenus;
+      }
+    },
+    subItemHandle(id){
+      this.nowSubMenuId = id;
+    },
+    toMenuHandle(item){
+      this.nowMenuKey = item.typeKey;
+      this.loadMenuItems();
+    },
+    async loadMenuItems(){
+      if(this.menuSubItems[this.nowMenuKey]){
+        console.log('load catch');
+        this.showMenuItems = this.menuSubItems[this.nowMenuKey];
+        return null;
+      }
+      let url = '';
+      if(this.type === "solution"){
+        url = 'api/loadSolution.php'
+      }else{
+        url = 'api/loadProduct.php'
+      }
+      url+=`?key=${this.nowMenuKey}&p=1&l=10`
+      // 请求服务端接口
+      let [err,result] = await handle(this.$axios.get(url));
+      if(err){
+        console.log(err);
+        return;
+      }
+      let res = result.data;
+      console.log(res)
+      if(res.rcode === 1){
+        this.menuSubItems[this.nowMenuKey] = res.data;
+        this.showMenuItems = this.menuSubItems[this.nowMenuKey];
+        this.nowSubMenuId = this.showMenuItems[0].id;
+        console.log(this.nowSubMenuId);
+        // console.log(this.menuSubItems);
+      }else{
+        console.error(res);
+        console.log(res.msg);
+      }
+    },
+    subItemClickHandle(item){
+      if(item.sourceType == "1"){
+        // 尝试加载特定静态页面
+        window.location.href = item.source
+      }else{
+        window.location.href = `${this.nowMenuKey}.html?id=${item.id}`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/header/menuDrops/produceDrop.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="dropMap drop-default">
-    <div class="drop-menus"></div>
-    <div class="drop-view"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "produceDrop",
-  data(){
-    return {
-      menus: [],
-    }
-  },
-  beforeMount() {
-    this.loadMenus();
-  },
-  methods:{
-    loadMenus(){
-
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

components/showingStand.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="content">
+    <div class="conBox big-title">
+      <span>
+        {{lang===langType.cn?"关于我们":getAbbrText("关于我们")}}
+      </span>
+      <div class="hr"></div>
+    </div>
+    <div class="conBox showing">
+      <a
+        v-for="(item,i) in chunkItems"
+        :class="`chunk chunk${(i+1)}`"
+         :key="item.id"
+      >
+<!--         实时管理(物联网) -->
+        <img class="chunkBg" :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>
+          <span class="chunkMore">
+          {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
+        </span>
+        </p>
+
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import langMap from "~/map/langMap";
+
+export default {
+  name: "showingStand",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      // chunk 1-7
+      chunkItems:[
+        {
+          id: 'iotManger',
+          img: 'image/showing/szman.jpg',
+          href: 'https://gpscore.net/',
+          title: "管理平台",
+          subTitle: "一站式管理,专业高效"
+        },
+        {
+          id: 'ePower',
+          img: 'image/showing/szman.jpg',
+          href: 'https://gpscore.net/',
+          title: "智慧能源",
+          subTitle: "1+3综合数字能源管理平台"
+        },
+        {
+          id: 'aiCamera',
+          img: 'image/showing/ai_h.jpg',
+          href: 'https://gpscore.net/',
+          title: "ai视觉",
+          subTitle: "摄像头+ai算法,各种算法,各种场景"
+        },
+        {
+          id: 'iot',
+          img: 'image/showing/iot.jpg',
+          href: 'https://gpscore.net/',
+          title: "合方圆物联网解决方案",
+          subTitle: "积极开阔物联网在行业,医疗,家居等大众市场上的应用"
+        },
+        {
+          id: 'gps',
+          img: 'image/showing/gps.jpg',
+          href: 'https://gpscore.net/',
+          title: "北斗导航",
+          subTitle: "合方圆关于GPS与北斗功能区别详细说明"
+        },
+        {
+          id: 'etc',
+          img: 'image/showing/etc.jpg',
+          href: 'https://gpscore.net/',
+          title: "智慧停车场",
+          subTitle: "ai视觉落地成套方案"
+        },
+        {
+          id: 'aiCamera',
+          img: 'image/showing/lowCam.jpg',
+          href: 'https://gpscore.net/',
+          title: "低功耗摄像头",
+          subTitle: "超低功耗,超长工作时长"
+        }
+      ]
+    }
+  },
+  methods: {
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+
+.showing{
+  display: grid;
+  grid-template-columns: repeat(3, 425px);
+  grid-template-rows: repeat(3, 350px);
+  grid-template-areas:
+    'a b c'
+    'd d c'
+    'e f g';
+  grid-gap: 20px;
+}
+.showing .chunk {
+  box-shadow: 1px 1px 3px black;
+  /*box-sizing: border-box;*/
+  /*padding:5px;*/
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.showing .chunk:hover{
+  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{
+  left: -20px;
+  top: -20px;
+  max-width: calc(100% + 40px);
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+}
+.showing .chunk .chunkText{
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 150px;
+  bottom: -50px;
+  /*background: #000;*/
+  color: white;
+  transition: all .5s;
+  padding: 0 15px;
+  background-image: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0.5) 75% );
+}
+.showing .chunk:hover .chunkText{
+  bottom: 0;
+  background-image: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0.66) 66% 15% 80% );
+}
+.showing .chunk .chunkText .title{
+  height: 40px;
+  font-size: 1.5em;
+  display: flex;
+  /*justify-content: center;*/
+  align-items: center;
+}
+.showing .chunk .chunkText .subTitle{
+  padding: 5px 0;
+  min-height: 35px;
+  max-height: 80px;
+  font-size: 1.2em;
+}
+.showing .chunk .chunkText .chunkMore{
+  margin-top: 20px;
+  height: 30px;
+  font-size: 0.9em;
+  color: #ff6e3f;
+}
+.showing .chunk .chunkText .chunkMore:hover{
+  color: orangered;
+}
+
+.showing .chunk .chunkText > *{
+  display: block;
+}
+.showing .chunk1 {
+  grid-area: a;
+}
+.showing .chunk2{
+  grid-area: b;
+}
+.showing .chunk3{
+  grid-area: c;
+}
+.showing .chunk4{
+  grid-area: d;
+}
+.showing .chunk5{
+  grid-area: e;
+}
+.showing .chunk6{
+  grid-area: f;
+}
+.showing .chunk7{
+  grid-area: g;
+}
+</style>

map/langMap.js

@@ -4,50 +4,81 @@ const lang = {
 }
 const textArr = [
   {
-    key: "首页",
+    keys: ["首页"],
     "en-us": 'index'
   },
   {
-    key: "English",
+    keys: ["English"],
     "en-us": '中文'
   },
   {
-    key: "合方圆管理平台",
+    keys: ["合方圆管理平台","管理平台"],
     "en-us": 'HFY management platform',
     "abbr-en-us": 'HFY DMP'
   },
   {
-    key: "智慧能源",
+    keys: ["智慧能源"],
     "en-us": 'Smart Energy (SE)',
     "abbr-en-us": 'S Energy'
   },
   {
-    key: "输电线路摄像头",
+    keys: ["输电线路摄像头"],
     "en-us": 'Power Transmission Line Camera',
     "abbr-en-us": 'TCLC ',
-
   },
   {
-    key: "4G低功耗摄像头",
+    keys: ["4G低功耗摄像头"],
     "en-us": '4G Low Power Camera',
     "abbr-en-us": '4G-LP Camera'
   },
   {
-    key: "自动变焦双目协同摄像头",
+    keys: ["自动变焦双目协同摄像头"],
     "en-us": 'Auto-focus Dual-lens Coordinated Camera',
     "abbr-en-us": 'AF dual-camera'
   },
   {
-    key: "M2M产品",
+    keys: ["M2M产品"],
     "en-us": 'M2M Products',
   },
   {
-    key: "智能终端",
+    keys: ["智能终端"],
     "en-us": 'Intelligent Terminal',
   },
+  {
+    keys: ["关于我们"],
+    "en-us": 'about us',
+  },
+  {
+    keys: ["智能产品"],
+    "en-us": 'smart product',
+  },
+  {
+    keys: ["服务与支持"],
+    "en-us": 'server & support',
+  },
+  {
+    keys: ["快速链接"],
+    "en-us": 'quick link',
+  },
+  {
+    keys: ["选择语言"],
+    "en-us": 'Languages',
+  },
+  {
+    keys: ["联系我们"],
+    "en-us": 'contact us',
+  },
+  {
+    keys: ["产品中心"],
+    "en-us": 'product center',
+  },
+  {
+    keys: ["了解更多"],
+    "en-us": 'more',
+  },
 ]
 function getText(langType,langKey){
-  let item = textArr.find(val=>val.key===langKey);
+  let item = textArr.find(val=>val.keys.includes(langKey));
   if(item && item[langType]){
     return item[langType]
   }else{
@@ -56,7 +87,7 @@ function getText(langType,langKey){
 }
 
 function getAbbrText(langType,langKey){
-  let item = textArr.find(val=>val.key===langKey);
+  let item = textArr.find(val=>val.keys.includes(langKey));
   let AbbrTypeKey = "abbr-"+langType
   if(item){
       if(item[AbbrTypeKey]){
@@ -66,8 +97,6 @@ function getAbbrText(langType,langKey){
       }
   }
   return langKey
-
-
 }
 export default {
   lang,

nuxt.config.js

@@ -36,11 +36,27 @@ export default {
     axios: {
       proxy: true
     },
+    proxy: {
+      '/api': {
+        target: 'http://szhfy.com.cn/', // 目标接口域名
+        pathRewrite: {
+          '^/api': '/api', // 把 /api 替换成 /
+          changeOrigin: true // 表示是否跨域
+        }
+      },
+      '/public': {
+        target: 'http://szhfy.com.cn/', // 目标接口域名
+        pathRewrite: {
+          changeOrigin: true // 表示是否跨域
+        }
+      }
+    },
 
     // Build Configuration (https://go.nuxtjs.dev/config-build)
     build: {},
     server: {
       port: 8000, // default: 3000
-      host: '0.0.0.0' // default: localhost
+      host: '0.0.0.0', // default: localhost
+
     }
 }

pages/index.vue

@@ -1,25 +1,30 @@
 <template>
   <div class="w-full">
     <lucency-header :lang="lang" page-key="index" ></lucency-header>
-    <div class="content h-screen">
-      server data = {{msg}}
-    </div>
-    <div class="content h-screen">
-      server data = {{msg}}
-    </div>
-
+    <banner :wait-time="2500"></banner>
+<!--    产品列表,-->
+    <dev-view :lang="lang"></dev-view>
+<!--    优势项目部分展示,参考海康-->
+    <showing-stand :lang="lang"></showing-stand>
+<!--    产品分类,参考大华,动态加载这部分内容-->
+    <default-footer :lang="lang"/>
   </div>
 </template>
 
 <script>
 import lucencyHeader from "~/components/header/lucencyHeader";
+import banner from "~/components/banner";
+import devView from "~/components/devView";
+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 },
+  components: { lucencyHeader,banner,showingStand,defaultFooter,devView },
+  props:['uLang'],
   data(){
     return {
-      lang: langMap.lang.cn,
+      lang: this.uLang?this.uLang:langMap.lang.cn,
       msg: ""
     }
   },
@@ -53,7 +58,7 @@ export default {
         console.log("set msg")
        this.msg = result.msg ;
       }
-    }
+    },
   }
 }
 </script>

pages/index_en.vue

@@ -0,0 +1,21 @@
+<template>
+  <index :u-lang="lang"></index>
+</template>
+
+<script>
+import Index from "~/pages/index";
+import langMap from "~/map/langMap";
+export default {
+  name: "index_en",
+  components: {Index},
+  data(){
+    return {
+      lang: langMap.lang.en
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>