简单修改启动端口,制作部分界面

assets/public.css

@@ -19,3 +19,14 @@
   width: 1200px;
   margin: 0 auto;
 }
+.dropMap{
+  position: absolute;
+  top: 100%;
+  background-color: #fff;
+  box-shadow: 1px 0 4px #c2bfbf;
+}
+.drop-default{
+  width: 560px;
+  height: 340px;
+  display: flex;
+}

components/header/lucencyHeader.vue

@@ -20,6 +20,7 @@
             <li class="menu" v-for="(item,i) in menus" :key="item.url+'_'+i"
                 :title="lang===langType.cn?item.text:getLangText(item.text)">
               <a :href="item.url" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
+
             </li>
           </ul>
         </div>
@@ -30,9 +31,13 @@
         <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)"
         >
           <a :href="item.url" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
-          <span class="now" v-if="pageKey===item.key">item.text</span>
+          <span class="now" v-if="pageKey===item.key"></span>
+          <produce-drop
+            v-show="item.showSub"
+            v-if="item.isSub&&item.subKey==='product'"></produce-drop>
         </li>
       </ul>
       <div class="search-box">
@@ -51,6 +56,7 @@
 
 <script>
 import langMap from "~/map/langMap";
+import produceDrop from "@/components/header/menuDrops/produceDrop";
 export default {
   name: "lucencyHeader",
   props: {
@@ -61,6 +67,9 @@ export default {
       default: "index"
     }
   },
+  components:{
+    produceDrop
+  },
   data(){
     return {
       langType: langMap.lang,
@@ -105,13 +114,16 @@ export default {
           path: "/product.html",
           text: "产品中心",
           isSub: true,
-          sub: []
+          subKey: "product",
+          showSub: false
         },
         {
           key: "solution",
           path: "/solution.html",
           text: "解决方案",
           isSub: true,
+          subKey: "solution",
+          showSub: false
         },
         {
           key: "new",
@@ -151,6 +163,12 @@ export default {
     },
     searchItem(){
 
+    },
+    showSubMenu(item){
+      console.log("0000000")
+      if(item.isSub){
+        item.showSub = true;
+      }
     }
   }
 }

components/header/menuDrops/produceDrop.vue

@@ -0,0 +1,29 @@
+<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>

nuxt.config.js

@@ -38,5 +38,9 @@ export default {
     },
 
     // Build Configuration (https://go.nuxtjs.dev/config-build)
-    build: {}
+    build: {},
+    server: {
+      port: 8000, // default: 3000
+      host: '0.0.0.0' // default: localhost
+    }
 }