更新

src/layout/index/native.vue

@@ -1,22 +1,23 @@
 <template>
   <div id="native">
     <el-row>
-      <el-col :span="24" class="info">
-        <ul class="menu">
-          <li class="submenu">新闻资讯
-            <ul class="submenu-ul">
-              <li>新闻资讯</li>
-              <li>新闻资讯</li>
-            </ul>
-          </li>
-          <li class="submenu">计算服务
-            <ul class="submenu-ul">
-              <li>计算服务</li>
-              <li>计算服务</li>
-            </ul>
-          </li>
-        </ul>
-      </el-col>
+      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+               background-color="rgba(0,0,0,0.4)" text-color="#fff" active-text-color="#fff">
+        <el-submenu index="1">
+          <template slot="title">新闻资讯</template>
+          <el-menu-item index="1-1" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">新闻资讯
+          </el-menu-item>
+          <el-menu-item index="1-2" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">新闻资讯</el-menu-item>
+          <el-menu-item index="1-3" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">新闻资讯</el-menu-item>
+        </el-submenu>
+        <el-submenu index="2">
+          <template slot="title">计算服务</template>
+          <el-menu-item index="2-1" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">计算服务
+          </el-menu-item>
+          <el-menu-item index="2-2" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">计算服务</el-menu-item>
+          <el-menu-item index="2-3" style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">计算服务</el-menu-item>
+        </el-submenu>
+      </el-menu>
     </el-row>
   </div>
 </template>
@@ -29,7 +30,7 @@ export default {
   components: {},
   data: () => ({
 
-    activeIndex2: '',
+    activeIndex2: '1'
   }),
   created() { },
   computed: {
@@ -39,63 +40,21 @@ export default {
     turnTo(url) {
       window.open(url);
     },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    }
   },
 };
 </script>
 
 <style lang="less" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.hover:hover {
+  background-color: #215299 !important;
 }
-.info {
-  height: 70px;
-  background-color: rgba(0, 0, 0, 0.4);
+/deep/.el-submenu__title {
+  font-size: 20px;
 }
-.menu {
-  text-align: left;
-  display: inline-block;
-}
-.menu .submenu {
-  float: left;
-  position: relative;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  padding: 20px 21px;
-  font-size: 23px;
-  color: #fff;
-  border-right: 1px solid #ccc;
-  cursor: pointer;
-}
-.menu .submenu:hover {
-  background-color: #215299;
-}
-.submenu-ul {
-  position: fixed;
-  top: 120px;
-  left: 76px;
-  width: 1200px;
-  display: none;
-  z-index: 1;
-  background: rgba(0, 0, 0, 0.4);
-  text-align: center;
-  border-radius: 10px;
-  -webkit-box-shadow: 0 0 5px #ccc;
-  box-shadow: 0 0 5px #ccc;
-}
-
-/*这里定义了二级菜单的子项的宽度*/
-.submenu-ul li {
-  width: 135px;
-  height: 70px;
-  line-height: 70px;
-  float: left;
-}
-.submenu-ul li:hover {
-  background-color: #215299;
-}
-li:hover ul {
-  display: block; /*当鼠标放到一级菜单上的li时为li下的ul标签也就是二级菜单附加类，使其能够显示*/
+/deep/.el-submenu__title:hover {
+  background-color: #215299 !important;
 }
 </style>