Skip to content

X
x-training
提交 a4d29753 authored 作者: 高一's avatar 高一
浏览文件
操作

修改菜单导航栏

上级 04d5f0ca
隐藏空白字符变更
内嵌 并排
正在显示 包含 142 行增加 和 71 行删除
build/webpack.base.conf.js
浏览文件 @ a4d29753
...@@ -145,7 +145,7 @@ $GLOBAL.BaseConfig = { ...@@ -145,7 +145,7 @@ $GLOBAL.BaseConfig = {
'webConf': JSON.stringify($GLOBAL.webConf) 'webConf': JSON.stringify($GLOBAL.webConf)
}), }),
new webpack.ProvidePlugin($GLOBAL.ProvidePlugin) new webpack.ProvidePlugin($GLOBAL.ProvidePlugin)
] ],
} }
$GLOBAL.BaseConfig = WebpackMerge($GLOBAL.BaseConfig, _conf.webpack) $GLOBAL.BaseConfig = WebpackMerge($GLOBAL.BaseConfig, _conf.webpack)
......
package-lock.json
浏览文件 @ a4d29753
...@@ -6124,6 +6124,11 @@ ...@@ -6124,6 +6124,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true "dev": true
}, },
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"js-base64": { "js-base64": {
"version": "2.6.4", "version": "2.6.4",
"resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.4.tgz?cache=0&sync_timestamp=1604450395858&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.4.tgz", "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.4.tgz?cache=0&sync_timestamp=1604450395858&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.4.tgz",
......
package.json
浏览文件 @ a4d29753
...@@ -76,6 +76,7 @@ ...@@ -76,6 +76,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"vue": "^2.6.12", "vue": "^2.6.12",
......
src/components/layout/aside.vue
浏览文件 @ a4d29753
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<template slot="title"> <template slot="title">
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</template> </template>
<template v-if="item.children"> <!-- <template v-if="item.children">
<el-menu-item v-for="(subitem, index) in item.children" :index="subitem.path" :key="index">{{ <el-menu-item v-for="(subitem, index) in item.children" :index="subitem.path" :key="index">{{
subitem.title subitem.title
}}</el-menu-item> }}</el-menu-item>
</template> </template> -->
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>
...@@ -28,21 +28,21 @@ export default { ...@@ -28,21 +28,21 @@ export default {
{ {
title: '用户分群', title: '用户分群',
icon: '', icon: '',
path: '/yhfq', path: '/yhfq/albj',
children: [ children: [
{ title: '案例背景', path: '/yhfq/albj' }, { title: '案例背景', path: '/yhfq/albj' }
{ title: '案例分析', path: '/yhfq/alfx' }, // { title: '案例详情', path: '/yhfq/alfx' },
{ title: '用户群分析', path: '/yhfq/yhqfx' } // { title: '用户群分析', path: '/yhfq/yhqfx' }
] ]
}, },
{ {
title: '用户触达', title: '用户触达',
icon: '', icon: '',
path: '/2', // path: '/2',
children: [ children: [
{ title: '短信', path: '/2/1-1' }, { title: '短信' },
{ title: '邮件', path: '/2/1-1' }, { title: '邮件' },
{ title: '推送消息', path: '/2/1-1' } { title: '推送消息' }
] ]
} }
] ]
......
src/pages/yhfq/albj/index.vue
浏览文件 @ a4d29753
<template> <template>
<app-container title="请选择您要进入的案例背景"> <app-container title="请选择您要进入的案例背景">
<it-em> <template>
<template v-slot:title> <div class="list" v-for="item in arr" :key="item.index" @click="clk(item.index)" ref="main" :flag="flag">
<div> <it-em :id="activeIndex == item.index ? 'clk' : ''">
<img src="../../../assets/images/gsxx.png" alt="" srcset=""> <template v-slot:title>
<p>案例分析1</p> <div>
</div> <img :src="item.imgsrc" alt="" srcset="" />
</template> <p>{{ item.title }}</p>
<template v-slot:xm> </div>
<div>姓名</div> </template>
<div>立马</div> <template v-slot:xm>
</template> <div>姓名</div>
<template v-slot:gs> <div>{{ item.name }}</div>
<div>公司</div> </template>
<div>建国保险公司</div> <template v-slot:gs>
</template> <div>公司</div>
<template v-slot:bm> <div>{{ item.gs }}</div>
<div>部门</div> </template>
<div>市场营销部</div> <template v-slot:bm>
</template> <div>部门</div>
<template v-slot:zw> <div>{{ item.bm }}</div>
<div>职位</div> </template>
<div>市场营销专员</div> <template v-slot:zw>
</template> <div>职位</div>
<template v-slot:cp> <div>{{ item.zw }}</div>
<div>营销产品</div> </template>
<div>建国重疾险</div> <template v-slot:cp>
</template> <div>营销产品</div>
</it-em> <div>{{ item.cp }}</div>
<it-em> </template>
</it-em>
</div>
</template>
<!-- <it-em>
<template v-slot:title> <template v-slot:title>
<div> <div>
<img src="../../../assets/images/gsxx.png" alt="" srcset=""> <img src="../../../assets/images/gsxx.png" alt="" srcset="">
...@@ -83,11 +87,11 @@ ...@@ -83,11 +87,11 @@
<div>营销产品</div> <div>营销产品</div>
<div>建国重疾险</div> <div>建国重疾险</div>
</template> </template>
</it-em> </it-em> -->
<template #footer> <template #footer>
<div class="app-container-ft"> <div class="app-container-ft">
<el-button type="primary" size="mini">开始实训</el-button> <el-button type="primary" size="mini">开始实训</el-button>
<el-button type="primary" size="mini">查看背景详情</el-button> <el-button type="primary" size="mini" @click="jump()">查看背景详情</el-button>
</div> </div>
</template> </template>
</app-container> </app-container>
...@@ -102,17 +106,69 @@ import ItEm from './item.vue' ...@@ -102,17 +106,69 @@ import ItEm from './item.vue'
export default { export default {
components: { AppContainer, ItEm }, components: { AppContainer, ItEm },
data() { data() {
return {} return {
arr: [
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析1',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 1
},
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析2',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 2
},
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析3',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 3
}
],
activeIndex: -1,
flag: false,
main1: false,
main2: false,
main3: false
}
},
methods: {
clk(index) {
this.activeIndex = index
},
jump() {
if (this.activeIndex !== -1) {
this.$router.push('/yhfq/alfx')
}
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
app-container { app-container {
overflow: hidden; overflow: hidden;
// it-em { // it-em {
// float: left; // float: left;
// margin-right: 20px; // margin-right: 20px;
// } // }
} }
#clk {
box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4);
border: 1px solid #c01540;
}
</style> </style>
src/pages/yhfq/albj/item.vue
浏览文件 @ a4d29753
<template> <template>
<div class="main" ref="main" @click="clk()"> <div class="main" ref="main" flag='true'>
<div class="head"> <div class="head">
<slot name="title"></slot> <slot name="title"></slot>
</div> </div>
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
</template> </template>
<script> <script>
// import $ from 'jquery'
export default { export default {
data() { data() {
return { return {
...@@ -36,14 +37,16 @@ export default { ...@@ -36,14 +37,16 @@ export default {
} }
}, },
methods: { methods: {
clk() { // clk() {
this.flag = !this.flag // this.flag = !this.flag
if (this.flag) { // if (this.flag) {
this.$refs.main.id = 'clk' // this.$refs.main.id = 'clk'
} else { // // this.$refs.main.id = ''
this.$refs.main.id = '' // // console.log(this.$refs.main.nextSbiling)
} // } else {
} // this.$refs.main.id = ''
// }
// }
} }
} }
</script> </script>
...@@ -122,8 +125,8 @@ export default { ...@@ -122,8 +125,8 @@ export default {
.main:hover { .main:hover {
box-shadow: 0px 8px 16px 0px rgba(88, 111, 174, 0.3); box-shadow: 0px 8px 16px 0px rgba(88, 111, 174, 0.3);
} }
#clk { // #clk {
box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4); // box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4);
border: 1px solid #C01540; // border: 1px solid #c01540;
} // }
</style> </style>
src/pages/yhfq/alfx/index.vue
浏览文件 @ a4d29753
<template> <template>
<app-container title="案例分析"> <app-container title="案例分析">
<template #header> <template #header>
<img style="cursor:pointer" src="../../../assets/images/out.png" alt="" srcset="" /> <img style="cursor: pointer" src="../../../assets/images/out.png" alt="" srcset="" @click="out()" />
</template> </template>
<it-em> <it-em>
<template v-slot:title> <template v-slot:title>
<div> <div>
<img src="../../../assets/images/gsxx.png" alt="" srcset=""> <img src="../../../assets/images/gsxx.png" alt="" srcset="" />
<p>公司信息</p> <p>公司信息</p>
</div> </div>
</template> </template>
<template v-slot:content> <template v-slot:content>
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
<it-em> <it-em>
<template v-slot:title> <template v-slot:title>
<div> <div>
<img src="../../../assets/images/cpxx.png" alt="" srcset=""> <img src="../../../assets/images/cpxx.png" alt="" srcset="" />
<p>产品信息</p> <p>产品信息</p>
</div> </div>
</template> </template>
<template v-slot:content> <template v-slot:content>
...@@ -28,8 +28,8 @@ ...@@ -28,8 +28,8 @@
<it-em> <it-em>
<template v-slot:title> <template v-slot:title>
<div> <div>
<img src="../../../assets/images/zwxx.png" alt="" srcset=""> <img src="../../../assets/images/zwxx.png" alt="" srcset="" />
<p>职位信息</p> <p>职位信息</p>
</div> </div>
</template> </template>
<template v-slot:content> <template v-slot:content>
...@@ -51,6 +51,11 @@ export default { ...@@ -51,6 +51,11 @@ export default {
components: { AppContainer, ItEm }, components: { AppContainer, ItEm },
data() { data() {
return {} return {}
},
methods: {
out() {
this.$router.push('/yhfq/albj')
}
} }
} }
</script> </script>
src/pages/yhfq/alfx/item.vue
浏览文件 @ a4d29753
<template> <template>
<div class="main" ref="main" @click="clk()"> <div class="main" ref="main">
<div class="head"> <div class="head">
<slot name="title"></slot> <slot name="title"></slot>
</div> </div>
......
src/router/routes.js
浏览文件 @ a4d29753
...@@ -5,6 +5,7 @@ const userGroup = [ ...@@ -5,6 +5,7 @@ const userGroup = [
/* 首页 */ /* 首页 */
{ path: '/yhfq', redirect: '/yhfq/albj' }, { path: '/yhfq', redirect: '/yhfq/albj' },
{ path: '/yhfq/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') }, { path: '/yhfq/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') }, { path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') },
{ path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') } { path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') }
] ]
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论