|
@@ -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>
|