|
@@ -1,26 +1,23 @@
|
|
|
<template>
|
|
|
<div id="native">
|
|
|
<el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#336699"
|
|
|
- text-color="#fff" active-text-color="#fff" style="height:40px;" :router="true">
|
|
|
- <template v-for="(item, index) in menu">
|
|
|
- <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
|
|
|
- <template slot="title">
|
|
|
- {{ item.title }}
|
|
|
- </template>
|
|
|
- <template v-for="(sub, subIndex) in item.children">
|
|
|
- <el-menu-item :index="`${index}-${subIndex}`" :key="subIndex+'sub'" v-if="sub.children"
|
|
|
- style="float:left">
|
|
|
- <template slot="title">
|
|
|
- {{ sub.title }}
|
|
|
- </template>
|
|
|
- </el-menu-item>
|
|
|
- </template>
|
|
|
- </el-submenu>
|
|
|
- </template>
|
|
|
- </el-menu>
|
|
|
- </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>
|
|
@@ -33,7 +30,7 @@ export default {
|
|
|
components: {},
|
|
|
data: () => ({
|
|
|
|
|
|
- activeIndex2: '',
|
|
|
+ activeIndex2: '1'
|
|
|
}),
|
|
|
created() { },
|
|
|
computed: {
|
|
@@ -43,13 +40,21 @@ export default {
|
|
|
turnTo(url) {
|
|
|
window.open(url);
|
|
|
},
|
|
|
+ handleSelect(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
+.hover:hover {
|
|
|
+ background-color: #215299 !important;
|
|
|
+}
|
|
|
+/deep/.el-submenu__title {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+/deep/.el-submenu__title:hover {
|
|
|
+ background-color: #215299 !important;
|
|
|
}
|
|
|
</style>
|