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