前端
This commit is contained in:
xvv
parent
6dd19b5972
commit
6f4671b5e2
@ -11,6 +11,6 @@ VUE_APP_BASE_API = '/dev-api'
|
||||
VUE_APP_PUBLIC_PATH = '/'
|
||||
|
||||
# 后端接口地址
|
||||
VUE_APP_SERVER_URL = 'http://localhost:8080/'
|
||||
VUE_APP_SERVER_URL = 'http://192.168.31.54:8085/'
|
||||
|
||||
# http://192.168.0.121:8080/
|
||||
|
||||
@ -9,17 +9,17 @@ $yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color:#ffffff;// 菜单全部字体颜色
|
||||
$base-menu-color-active:#ffffff;// 父级菜单激活的字体颜色
|
||||
$base-menu-background:#5a91ff;
|
||||
$base-logo-title-color: #ffffff;
|
||||
$base-menu-color:#144a6e;// 菜单全部字体颜色
|
||||
$base-menu-color-active:#144a6e;// 父级菜单激活的字体颜色
|
||||
$base-menu-background:#fff;
|
||||
$base-logo-title-color: #144a6e;
|
||||
|
||||
$base-menu-light-color:#ffffff;
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #1a5982;
|
||||
|
||||
$base-sub-menu-background: #4e77cc;//展开的背景色
|
||||
$base-sub-menu-hover:#001528;
|
||||
$base-sub-menu-background: #c6c6c6;//展开的背景色
|
||||
$base-sub-menu-hover: #adadad;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
|
||||
@ -147,7 +147,7 @@ export default {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #144a6e;
|
||||
background-image: url("../../assets/images/kkx.png") ;
|
||||
//background-image: url("../../assets/images/kkx.png") ;
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img :src="logo" class="sidebar-logo" />
|
||||
<!-- <img :src="logo" class="sidebar-logo" />-->
|
||||
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||
<!-- <h1 v-else class="sidebar-title" style="color: #00ff80" >{{ title }} </h1>-->
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" />-->
|
||||
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
|
||||
@ -1,31 +1,32 @@
|
||||
<template>
|
||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<div class="store-info" v-if="storeName">
|
||||
<div class="name">{{ storeName }}</div>
|
||||
<div class="role" v-if="role">（{{ role }}）</div>
|
||||
</div>
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="false"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
text-color="#ffffff"
|
||||
:unique-opened="true"
|
||||
active-text-color="#44DABF"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
style="margin-bottom: 80px;"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<div class="store-info" v-if="storeName">
|
||||
<div class="name">{{ storeName }}</div>
|
||||
<div class="role" v-if="role">（{{ role }}）</div>
|
||||
</div>
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="settings.theme"
|
||||
:collapse-transition="false"
|
||||
mode="horizontal "
|
||||
style="margin-bottom: 80px;"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -35,72 +36,74 @@ import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/assets/styles/variables.scss";
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
},
|
||||
showLogo() {
|
||||
return this.$store.state.settings.sidebarLogo;
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened;
|
||||
},
|
||||
storeName() {
|
||||
if (this.$store.getters.merchantName && this.$store.getters.merchantId) {
|
||||
return this.$store.getters.merchantName;
|
||||
}
|
||||
if (this.$store.getters.storeName && this.$store.getters.storeId) {
|
||||
return this.$store.getters.storeName;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
role() {
|
||||
console.log()
|
||||
if (this.$store.getters.storeName && this.$store.getters.storeId) {
|
||||
|
||||
return this.$store.getters.storeName;
|
||||
}else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
},
|
||||
showLogo() {
|
||||
return this.$store.state.settings.sidebarLogo;
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened;
|
||||
},
|
||||
storeName() {
|
||||
if (this.$store.getters.merchantName && this.$store.getters.merchantId) {
|
||||
return this.$store.getters.merchantName;
|
||||
}
|
||||
if (this.$store.getters.storeName && this.$store.getters.storeId) {
|
||||
return this.$store.getters.storeName;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
role() {
|
||||
if (this.$store.getters.storeName && this.$store.getters.storeId) {
|
||||
return '店铺管理员';
|
||||
}
|
||||
if (this.$store.getters.merchantName && this.$store.getters.merchantId) {
|
||||
return '商户管理员';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.store-info {
|
||||
height: 42px;
|
||||
padding-top: 2px;
|
||||
.store-info {
|
||||
|
||||
padding-top: 2px;
|
||||
text-align: center;
|
||||
background: #3f5050;
|
||||
overflow: hidden;
|
||||
border: 1px #ffffff solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0px;
|
||||
border-radius: 8px;
|
||||
margin: 0px 6px 10px 6px;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #00acac;
|
||||
overflow: hidden;
|
||||
border: 1px #ffffff solid;
|
||||
border-radius: 2px;
|
||||
margin: 0px 6px 10px 6px;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.role {
|
||||
font-size: 10px;
|
||||
margin-top: 3px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.role {
|
||||
font-size: 10px;
|
||||
margin-top: 3px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user