Commit 0ea72fd1 authored by 夏敏伟's avatar 夏敏伟

增加导调控制模块和新技术实验模块

parent ddfb6557
......@@ -36,7 +36,6 @@
padding: 0px 60px;
.el-menu.el-menu--horizontal {
margin-top: 10px;
border: none;
&>.el-menu-item {
......
<template>
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()"
@click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
</div>
</el-menu-item>
</template>
</el-menu>
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view> </router-view>
</keep-alive>
</el-main>
</el-container>
</template>
<style lang="scss">
.myContainer {
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
overflow: hidden;
.myHeader {
width: 100%;
height: 40px !important;
padding: 0px 60px;
.el-menu.el-menu--horizontal {
border: none;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
<script>
import li_hover from "../../assets/img/main/04.png";
import bottom from "../../assets/img/main/bottom.png";
export default {
name: "dfzy",
data() {
return {
li_hover: li_hover,
bottom: bottom,
module: [
// { icon: "el-icon-user", text: "人物库", href: "rwk" },
// { icon: "el-icon-s-management", text: "机构库", href: "jgk" },
// // { icon: "el-icon-user", text: "大五画像", href: "dwhx" },
],
index: 0,
choice_status: 0,
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
href_choice(item, index) {
this.choice_status = index;
this.$router.push(item.path);
},
handleSelect(key, keyPath) { },
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
},
computed: {
// module(){
// // return this.$store.state.navList[0].children.//一级目录
// // filter(n=>n.icon)//过滤掉默认
// // [2].children.filter(n=>n.icon);//
// }
}
};
</script>
\ No newline at end of file
<template>
<div>123</div>
</template>
\ No newline at end of file
<template>
<div id="dfzy">
<div class="left-nav">
<el-menu
default-active="1"
class="el-menu-vertical-demo second-router"
@open="handleOpen"
@close="handleClose"
background-color="transparent"
text-color="#fff"
@select="handleSelect"
>
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item
:class="index == choice_status ? 'change-bg' : 'change-bg1'"
:index="(index + 1).toString()"
@click="href_choice(item, index)"
>
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()"
@click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
......@@ -23,54 +13,48 @@
</el-menu-item>
</template>
</el-menu>
</div>
<div class="right-nav">
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view> </router-view>
</keep-alive>
</div>
</div>
</el-main>
</el-container>
</template>
<style lang="scss">
#dfzy {
.myContainer {
width: 100%;
height: 100%;
margin: 0;
// padding: 20px;
box-sizing: border-box;
overflow: hidden;
.left-nav {
width: 7.5%;
// min-width: 144px;
height: 100%;
float: left;
background: url(../../assets/img/main/24.png) no-repeat;
background-size: 100% 100%;
}
.left-nav > ul {
.myHeader {
width: 100%;
margin-top: 70%;
border-right: none !important;
}
height: 40px !important;
padding: 0px 60px;
.el-menu-item:hover,
.el-menu-item:focus {
outline: none;
background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
border: none;
.bottom {
background-size: 100% 100%;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.right-nav {
width: 92.5%;
height: 100%;
float: left;
background: url(../../assets/img/main/25.png) no-repeat;
background-size: 100% 100%;
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
......@@ -104,14 +88,14 @@ export default {
this.choice_status = index;
this.$router.push(item.path);
},
handleSelect(key, keyPath) {},
handleSelect(key, keyPath) { },
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e=>e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e=>e.icon);
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
},
computed:{
computed: {
// module(){
// // return this.$store.state.navList[0].children.//一级目录
// // filter(n=>n.icon)//过滤掉默认
......
<template>
<div id="flfg">
<div class="left-nav">
<el-menu default-active="1" class="el-menu-vertical-demo second-router" @open="handleOpen" @close="handleClose" background-color="transparent" text-color="#fff" @select="handleSelect">
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()" @click="href_choice(item, index)">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'"
:index="(index + 1).toString()" @click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
......@@ -11,54 +13,48 @@
</el-menu-item>
</template>
</el-menu>
</div>
<div class="right-nav">
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view> </router-view>
</keep-alive>
</div>
</div>
</el-main>
</el-container>
</template>
<style lang="scss">
#flfg {
.myContainer {
width: 100%;
height: 100%;
margin: 0;
// padding: 20px;
box-sizing: border-box;
overflow: hidden;
.left-nav {
width: 7.5%;
// min-width: 144px;
height: 100%;
float: left;
background: url(../../assets/img/main/24.png) no-repeat;
background-size: 100% 100%;
}
.left-nav > ul {
.myHeader {
width: 100%;
margin-top: 70%;
border-right: none !important;
}
height: 40px !important;
padding: 0px 60px;
.el-menu-item:hover,
.el-menu-item:focus {
outline: none;
background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
border: none;
.bottom {
background-size: 100% 100%;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.right-nav {
width: 92.5%;
height: 100%;
float: left;
background: url(../../assets/img/main/25.png) no-repeat;
background-size: 100% 100%;
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
......@@ -92,9 +88,9 @@ export default {
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e=>e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e=>e.icon);
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
},
computed:{}
computed: {}
}
</script>
\ No newline at end of file
<template>
<div id="fzjc">
<div class="left-nav">
<el-menu default-active="1" class="el-menu-vertical-demo second-router" @open="handleOpen" @close="handleClose" background-color="transparent" text-color="#fff" @select="handleSelect">
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()" @click="href_choice(item, index)">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'"
:index="(index + 1).toString()" @click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
......@@ -11,54 +13,48 @@
</el-menu-item>
</template>
</el-menu>
</div>
<div class="right-nav">
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view v-if="isRouterAlive"> </router-view>
<router-view> </router-view>
</keep-alive>
</div>
</div>
</el-main>
</el-container>
</template>
<style lang="scss">
#fzjc {
.myContainer {
width: 100%;
height: 100%;
margin: 0;
// padding: 20px;
box-sizing: border-box;
overflow: hidden;
.left-nav {
width: 7.5%;
// min-width: 144px;
height: 100%;
float: left;
background: url(../../assets/img/main/24.png) no-repeat;
background-size: 100% 100%;
}
.left-nav > ul {
.myHeader {
width: 100%;
margin-top: 70%;
border-right: none !important;
}
height: 40px !important;
padding: 0px 60px;
.el-menu-item:hover,
.el-menu-item:focus {
outline: none;
background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
border: none;
.bottom {
background-size: 100% 100%;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.right-nav {
width: 92.5%;
height: 100%;
float: left;
background: url(../../assets/img/main/25.png) no-repeat;
background-size: 100% 100%;
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
......@@ -104,16 +100,16 @@ export default {
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e=>e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e=>e.icon);
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
for(let i=0;i< this.module.length; i++){
if(this.module[i].name == this.$route.name){
for (let i = 0; i < this.module.length; i++) {
if (this.module[i].name == this.$route.name) {
this.choice_status = i;
}
}
},
computed:{
computed: {
// module(){
// // return this.$store.state.navList[0].children.//一级目录
// // filter(n=>n.icon)//过滤掉默认
......
......@@ -257,6 +257,7 @@ export default {
}
});
this.isSelected = this.activeIndex;
this.choiceModule(this.activeIndex);
},
computed: {
userInfo() {
......
......@@ -36,7 +36,6 @@
padding: 0px 60px;
.el-menu.el-menu--horizontal {
margin-top: 10px;
border: none;
&>.el-menu-item {
......
......@@ -53,14 +53,16 @@
width: 100%;
height: 40px !important;
padding: 0px 60px;
.el-menu.el-menu--horizontal{
margin-top: 10px;
.el-menu.el-menu--horizontal {
border: none;
&> .el-menu-item{
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child){
&:not(:first-child) {
margin-left: 10px;
}
}
......
......@@ -34,14 +34,16 @@
width: 100%;
height: 40px !important;
padding: 0px 60px;
.el-menu.el-menu--horizontal{
margin-top: 10px;
.el-menu.el-menu--horizontal {
border: none;
&> .el-menu-item{
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child){
&:not(:first-child) {
margin-left: 10px;
}
}
......
<template>
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()"
@click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
</div>
</el-menu-item>
</template>
</el-menu>
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view> </router-view>
</keep-alive>
</el-main>
</el-container>
</template>
<style lang="scss">
.myContainer {
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
overflow: hidden;
.myHeader {
width: 100%;
height: 40px !important;
padding: 0px 60px;
.el-menu.el-menu--horizontal {
border: none;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
<script>
import li_hover from "../../assets/img/main/04.png";
import bottom from "../../assets/img/main/bottom.png";
export default {
name: "dfzy",
data() {
return {
li_hover: li_hover,
bottom: bottom,
module: [
// { icon: "el-icon-user", text: "人物库", href: "rwk" },
// { icon: "el-icon-s-management", text: "机构库", href: "jgk" },
// // { icon: "el-icon-user", text: "大五画像", href: "dwhx" },
],
index: 0,
choice_status: 0,
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
href_choice(item, index) {
this.choice_status = index;
this.$router.push(item.path);
},
handleSelect(key, keyPath) { },
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
},
computed: {
// module(){
// // return this.$store.state.navList[0].children.//一级目录
// // filter(n=>n.icon)//过滤掉默认
// // [2].children.filter(n=>n.icon);//
// }
}
};
</script>
\ No newline at end of file
<template>
<div id="xjsyf">
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__bounceInLeft"
leave-active-class="animate__bounceOutLeft"
mode="out-in"
>
<div class="tab-div" v-if="!xqIsShow" key="1">
<div class="left-divs">
<div class="bg-divs"></div>
</div>
<div class="center-divs">
<template v-for="(item, index) in tableData">
<div
class="cards-div animate__animated bk-xjs-animation animate__zoomIn"
@click="eyes(item)"
>
<div :class="['tilts']">
<div style="width: 80%; height: 72%; padding: 10%">
<div class="top-div">
<!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
<div
class="animate__animated animate__infinite animate__pulse animate__slower"
>
<span>
{{ item.title.toUpperCase() }}
</span>
</div>
</div>
<el-divider></el-divider>
<div class="subtitle-div">
{{ item.subtitle }}
</div>
<div class="content-div">
{{ item.content }}
</div>
</div>
</div>
</div>
</template>
</div>
<div class="right-divs">
<div class="bg-divs"></div>
</div>
</div>
<div class="div-xq" v-else="xqIsShow" key="2">
<div class="fh-div" title="返回" @click="eyes()"></div>
<div class="top-divs">
<span>
{{ obj_xq.title.toUpperCase() }}
</span>
</div>
<div class="subtitle-divs">
{{ obj_xq.subtitle }}
</div>
<el-divider></el-divider>
<div style="width: 100%; height: calc(100% - 140px)">
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>概念与定义</span>
</div>
</div>
<div class="content-divs">
{{ obj_xq.content }}
</div>
</div>
<div style="width: 100%; text-align: center">
<el-button
type="primary"
style="
line-height: 4px;
border-radius: 2px;
height: 30px;
background: linear-gradient( to bottom,rgb(92 204 211),rgb(102, 166, 255),rgb(92 204 211));
font-weight: 900;
letter-spacing: 2;
"
>开始试用</el-button
>
</div>
</div>
</transition>
</div>
</template>
<script>
import VanillaTilt from "vanilla-tilt";
import "animate.css";
export default {
data() {
return {
xqIsShow: false,
tableData: [
{
title: "andg",
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试",
content:
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ",
},
{
title: "andg",
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试",
content:
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ",
},
{
title: "andg",
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试",
content:
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ",
},
{
title: "andg",
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试",
content:
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ",
},
],
obj_xq: {},
};
},
props: {
clientDetails: {
type: Object,
default: {},
},
},
methods: {
eyes(e) {
if (e) {
this.obj_xq = e;
} else {
this.obj_xq = {};
}
this.xqIsShow = !this.xqIsShow;
},
},
mounted() {
let _this = this;
},
watch: {},
};
</script>
<style lang="scss">
#xjsyf {
width: calc(100% - 0px);
height: calc(100% - 0px);
padding: 20px;
box-sizing: border-box;
overflow: hidden;
background-size: 100% 100%;
position: relative;
.tab-div {
width: 100%;
height: 100%;
.left-divs {
width: 20%;
height: 100%;
float: left;
display: flex;
justify-content: center;
align-items: center;
.bg-divs {
width: 200px;
height: 300px;
background-image: url("../../assets/img/xjs/3.png");
background-size: 100% 100%;
}
}
.center-divs {
width: 60%;
height: 80%;
margin-top: 5%;
float: left;
display: flex;
flex-wrap: wrap;
.cards-div {
width: 46%;
margin: 2%;
height: 260px;
.tilts {
width: 100%;
height: 100%;
background-image: url("../../assets/img/xjs/2.png");
background-size: 100% 100%;
cursor: pointer;
.el-divider--horizontal {
margin: 6px;
width: calc(100% - 12px);
background: #727573;
}
.top-div {
font-size: 18px;
letter-spacing: 2px;
font-weight: 600;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 5%;
}
.subtitle-div {
width: 94%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 3%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
}
.content-div {
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
color: lightgrey;
letter-spacing: 1px;
width: 94%;
margin-left: 3%;
margin-top: 10px;
}
}
.tilts:hover {
transform-style: preserve-3d;
background-image: url("../../assets/img/xjs/1.png");
}
}
}
.right-divs {
width: 20%;
height: 100%;
float: left;
display: flex;
justify-content: center;
align-items: center;
.bg-divs {
width: 200px;
height: 300px;
background-image: url("../../assets/img/xjs/3.png");
background-size: 100% 100%;
transform: rotate(180deg);
}
}
}
.div-xq {
width: 96%;
height: 96%;
padding: 2%;
border: 1px solid #3a5f94c9;
border-radius: 0px 50px;
.el-divider--horizontal {
margin: 20px 6px;
width: calc(100% - 12px);
background: #727573;
}
.fh-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/xjs/4.png");
background-size: 100% 100%;
position: absolute;
right: 45px;
cursor: pointer;
}
.top-divs {
font-size: 22px;
letter-spacing: 5px;
font-weight: 600;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 20px;
}
.titles-div {
margin-left: 9px;
height: 30px;
.bgs-div {
width: 10px;
height: 10px;
float: left;
transform: rotate(45deg);
background: #e7c46f;
margin-top: 5px;
}
.bgs-span {
color: #e7c46f;
margin-left: 12px;
float: left;
letter-spacing: 2px;
font-weight: 600;
font-size: 15px;
}
}
.subtitle-divs {
width: 90%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 20px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
}
.content-divs {
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
color: lightgrey;
letter-spacing: 1px;
width: 94%;
margin-left: 3%;
margin-top: 10px;
}
.center-button {
width: 100%;
}
}
}
</style>
\ No newline at end of file
......@@ -36,7 +36,6 @@
padding: 0px 60px;
.el-menu.el-menu--horizontal {
margin-top: 10px;
border: none;
&>.el-menu-item {
......
<template>
<div id="xxxl">
<div class="left-nav">
<el-menu
default-active="1"
class="el-menu-vertical-demo second-router"
@open="handleOpen"
@close="handleClose"
background-color="transparent"
text-color="#fff"
@select="handleSelect"
>
<el-container class="myContainer">
<el-header class="myHeader">
<el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
background-color="transparent" text-color="#fff" @select="handleSelect">
<template v-for="(item, index) in module">
<el-menu-item
:class="index == choice_status ? 'change-bg' : 'change-bg1'"
:index="(index + 1).toString()"
@click="href_choice(item, index)"
>
<el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()"
@click="href_choice(item, index)">
<div>
<i :class="item.icon"></i>
<span v-text="item.name"></span>
......@@ -23,54 +13,48 @@
</el-menu-item>
</template>
</el-menu>
</div>
<div class="right-nav">
</el-header>
<el-main class="myMain">
<keep-alive>
<router-view> </router-view>
</keep-alive>
</div>
</div>
</el-main>
</el-container>
</template>
<style lang="scss">
#xxxl {
.myContainer {
width: 100%;
height: 100%;
margin: 0;
// padding: 20px;
box-sizing: border-box;
overflow: hidden;
.left-nav {
width: 7.5%;
// min-width: 144px;
height: 100%;
float: left;
background: url(../../assets/img/main/24.png) no-repeat;
background-size: 100% 100%;
}
.left-nav > ul {
.myHeader {
width: 100%;
margin-top: 70%;
border-right: none !important;
}
height: 40px !important;
padding: 0px 60px;
.el-menu-item:hover,
.el-menu-item:focus {
outline: none;
background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
border: none;
.bottom {
background-size: 100% 100%;
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child) {
margin-left: 10px;
}
}
}
}
.right-nav {
width: 92.5%;
height: 100%;
float: left;
background: url(../../assets/img/main/25.png) no-repeat;
background-size: 100% 100%;
.myMain {
width: 100%;
height: calc(100% - 40px);
padding: 0px 20px !important;
background-color: transparent;
}
}
</style>
......@@ -104,14 +88,14 @@ export default {
this.choice_status = index;
this.$router.push(item.path);
},
handleSelect(key, keyPath) {},
handleSelect(key, keyPath) { },
},
mounted() {
this.module = this.$store.state.navList[0].children.
filter(e=>e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e=>e.icon);
filter(e => e.meta && e.meta.code == this.$route.meta.parent_code)[0].children.
filter(e => e.icon);
},
computed:{
computed: {
}
};
......
......@@ -34,14 +34,16 @@
width: 100%;
height: 40px !important;
padding: 0px 60px;
.el-menu.el-menu--horizontal{
margin-top: 10px;
.el-menu.el-menu--horizontal {
border: none;
&> .el-menu-item{
&>.el-menu-item {
height: 40px;
line-height: 40px;
border-bottom: none !important;
&:not(:first-child){
&:not(:first-child) {
margin-left: 10px;
}
}
......@@ -78,9 +80,9 @@ export default {
};
},
methods: {
showMsg(val){
for(let i=0;i< this.module.length; i++){
if(this.module[i].name == val){
showMsg(val) {
for (let i = 0; i < this.module.length; i++) {
if (this.module[i].name == val) {
this.choice_status = i;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment