Skip to content

H
haoban-3
Commit 7a7d3c53 by caoyanzhi
Options

update: 好办菜单

parent 4fd057d3
Showing with 497 additions and 5 deletions
src/components/layout/aside-menu.vue 0 → 100644
<template>
<el-menu class="aside-menu-box" default-active="2" :default-openeds="['1']">
<el-submenu class="aside-menu-list" index="1">
<div class="aside-menu-list-title" slot="title">
<i class="iconfont-hb3 iconwodekehu menu-icon"></i>
<span>我的客户</span>
</div>
<el-menu-item class="aside-menu-title" index="1-1">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title actived" index="1-2">客户标签</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-3">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-4">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-5">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-6">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-7">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-8">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-9">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-10">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-11">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-12">客户列表123</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name: 'AsideMenu'
};
</script>
<style lang="scss" scoped>
.aside-menu-box {
flex-shrink: 0;
padding: 8px 10px;
width: 190px;
height: calc(100vh - 60px);
box-sizing: border-box;
overflow-y: auto;
.aside-menu-list {
.aside-menu-list-title {
position: relative;
.menu-icon {
position: absolute;
top: 50%;
left: 12px;
z-index: 1;
transform: translate(0, -50%);
font-size: 16px;
}
}
.aside-menu-list-title,
.aside-menu-title {
padding-left: 36px;
min-width: auto;
height: 44px;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 44px;
box-sizing: border-box;
border-radius: 2px;
&:hover {
background: #f2f3f5;
}
&.actived {
font-size: 14px;
font-weight: 600;
color: #2f54eb;
background: rgba(47, 84, 235, 0.05);
}
}
}
}
</style>
<style lang="scss">
.aside-menu-list {
.el-submenu__title {
padding: 0 !important;
height: auto;
&:hover {
background: transparent;
}
.el-icon-arrow-down {
font-family: 'iconfont-hb3' !important;
color: #303133;
&::before {
content: '\E9E9';
}
}
}
}
</style>
src/components/layout/bread-menu.vue 0 → 100644
<template>
<div class="bread-menu">
<span class="bread-menu-item">
<span class="bread-menu-text is-link">客户标签</span>
</span>
<span class="bread-menu-item">
<i class="bread-menu-icon iconfont-hb3 iconnavigate_next"></i>
<span class="bread-menu-text bread-menu-active">同步记录</span>
</span>
</div>
</template>
<script>
export default {
name: 'BreadMenu'
};
</script>
<style lang="scss" scoped>
.bread-menu {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 8px;
.bread-menu-item {
display: flex;
justify-content: flex-start;
align-items: center;
+ .bread-menu-item {
margin-left: 10px;
}
.bread-menu-text {
height: 22px;
font-size: 14px;
font-weight: 400;
color: #606266;
line-height: 22px;
cursor: default;
&.is-link {
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
&.bread-menu-active {
font-weight: 500;
color: #303133;
}
}
.bread-menu-icon {
margin-right: 10px;
}
}
}
</style>
src/components/layout/components/change-store.vue 0 → 100644
<template>
<div>
<el-popover placement="top" popper-class="change-store-popper" trigger="hover">
<span class="change-store-btn" slot="reference">
切换商户
<i class="iconfont-hb3 iconxiajiantou change-store-icon"></i>
</span>
<div class="change-store">
<div class="store-item active">
<div>
<div class="store-name">金华达摩</div>
<div class="default-store-tag">默认商户</div>
</div>
<i class="el-icon-check checked"></i>
</div>
<div class="store-item">
<div class="store-name">达摩演示</div>
</div>
<div class="store-item">
<div class="store-name">金华达摩代理商</div>
</div>
<div class="change-default-store">
<div class="change-default-store-btn" @click="onShow">更改默认商户</div>
</div>
</div>
</el-popover>
<el-dialog :visible.sync="changeStore.show" title="更改默认商户" width="600px" @closed="onClosed">
<div class="change-store-title">选择商户</div>
<el-select class="change-store-selector" v-show="changeStore.selectShow">
<el-option label="金华达摩" value="1"></el-option>
</el-select>
<div slot="footer">
<el-button @click="changeStore.show = false">取消</el-button>
<el-button type="primary" :loading="changeStore.loading" @click="onSave">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// 获取商户列表
// 切换商户
// 更改默认商户
import { getRequest } from '@/api/api.js';
export default {
name: 'ChangeStore',
data() {
return {
changeStore: {
show: false,
selectShow: false,
loading: false
}
};
},
created() {
// this.getStoreList();
},
methods: {
getStoreList() {
getRequest('/haoban-manage3-web/login-wx-enterprise-list', { requestProject: 'haoban-manage-web' }).then(resp => {
console.log(resp);
});
},
onShow() {
this.changeStore.show = true;
this.changeStore.selectShow = false;
setTimeout(() => {
this.changeStore.selectShow = true;
}, 300);
},
// onClosed() {},
onSave() {
this.changeStore.loading = true;
setTimeout(() => {
this.changeStore.loading = false;
}, 1000);
}
}
};
</script>
<style lang="scss" scoped>
.change-store-btn {
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
padding: 9px;
font-size: 16px;
font-weight: 500;
color: #303133;
border-radius: 4px;
cursor: pointer;
.change-store-icon {
display: inline-block;
margin-left: 5px;
transition: 0.3s;
}
&:hover {
background: #f2f3f5;
.change-store-icon {
transform: rotateZ(180deg);
}
}
}
.change-store-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.change-store-selector {
width: 100%;
}
</style>
<style lang="scss">
.change-store-popper {
padding: 7px 0 0 !important;
width: 200px;
box-sizing: border-box;
.change-store {
.store-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 12px;
+ .store-item {
margin-top: 4px;
}
&.active {
background: #f7f8fa;
.store-name {
color: #2f54eb;
font-weight: 500;
}
.checked {
color: #2f54eb;
}
}
&:hover {
background: #f7f8fa;
}
.store-name {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.default-store-tag {
height: 18px;
text-align: center;
line-height: 18px;
font-size: 12px;
font-weight: 400;
color: #2f54eb;
background: #dee3fc;
border-radius: 2px;
}
}
.change-default-store {
margin-top: 7px;
padding: 0 12px;
.change-default-store-btn {
width: 100%;
height: 36px;
font-size: 14px;
font-weight: 400;
color: #2f54eb;
line-height: 36px;
border-top: 1px solid #e4e7ed;
cursor: pointer;
}
}
}
}
</style>
src/components/layout/index.vue 0 → 100644
<template>
<div class="hb-layout">
<main-menu></main-menu>
<aside-menu></aside-menu>
<div class="hb-layout-content">
<bread-menu v-if="breadShow"></bread-menu>
<div class="hb-layout-pager" :style="{ height: breadShow ? `calc(100% - 30px)` : '100%' }">
<slot>
<!-- <div style="width: 1300px;height: 1000px;border:1px solid red"></div>
页面内容 -->
</slot>
</div>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api.js';
import MainMenu from './main-menu.vue';
import AsideMenu from './aside-menu.vue';
import BreadMenu from './bread-menu.vue';
export default {
name: 'DmHbLayout',
components: { MainMenu, AsideMenu, BreadMenu },
data() {
return {
breadShow: true
};
},
created() {
this.getMenuList();
},
methods: {
// /get-haoban-menu
getMenuList() {
getRequest('/haoban-manage3-web/get-haoban-menu', { requestProject: 'haoban-web' }).then(res => {
console.log(res);
});
}
}
};
</script>
<style lang="scss" scoped>
.hb-layout {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
min-width: 1440px;
height: 100vh;
background: #f2f3f5;
box-sizing: border-box;
overflow: hidden;
overflow-x: auto;
.hb-layout-content {
padding: 20px 0 0 16px;
width: calc(100% - 190px);
height: calc(100vh - 60px);
box-sizing: border-box;
.hb-layout-pager {
height: 100%;
background: #fff;
overflow: auto;
box-sizing: border-box;
}
}
}
</style>
src/components/layout/main-menu.vue 0 → 100644
<template>
<div class="main-menu-box">
<div class="main-menu">
<img class="main-menu-logo" src="@/assets/logo-layout.png" alt="" @click="toIndex" />
<div class="main-menu-item active">客户</div>
<div class="main-menu-item">营销</div>
<div class="main-menu-item">数据</div>
</div>
<div class="main-info">
<change-store></change-store>
<div>消息中心</div>
<dm-user-info user-name-class="hb-layout-user-name"></dm-user-info>
</div>
</div>
</template>
<script>
import ChangeStore from './components/change-store.vue';
export default {
name: 'main-menu',
components: { ChangeStore },
provide: {
projectName: 'haoban-web'
},
methods: {
toIndex() {
this.$router.push('/');
}
}
};
</script>
<style lang="scss" scoped>
.main-menu-box {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-shrink: 0;
padding: 0 22px;
width: 100%;
height: 60px;
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
.main-menu {
display: flex;
justify-content: flex-start;
align-items: center;
.main-menu-logo {
margin-right: 70px;
width: 65px;
height: 28px;
cursor: pointer;
}
.main-menu-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 16px;
font-weight: 400;
color: #303133;
cursor: pointer;
+ .main-menu-item {
margin-left: 40px;
}
&.active {
font-weight: 600;
color: #2f54eb;
&::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 2px;
background: #2f54eb;
height: 2px;
border-radius: 1px 1px 0px 0px;
}
}
&:hover {
color: #2f54eb;
}
}
}
.main-info {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>
<style lang="scss">
.hb-layout-user-name {
color: #303133 !important;
}
</style>
src/router/index.js
...@@ -37,11 +37,7 @@ if (window.sessionStorage.getItem('token')) { ...@@ -37,11 +37,7 @@ if (window.sessionStorage.getItem('token')) {
/* eslint-disable */ /* eslint-disable */
store.commit(types.LOGIN, window.sessionStorage.getItem('token')); store.commit(types.LOGIN, window.sessionStorage.getItem('token'));
} }
export const constantRouterMap = [{ export const constantRouterMap = [
path: '/',
name: '/',
redirect: 'login'
},
{ {
path: '/login', path: '/login',
name: '登录', name: '登录',
......
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