# Conflicts:
#	fuintAdmin/.env.development
This commit is contained in:
DESKTOP-369JRHT\12997 2024-06-11 17:33:14 +08:00
commit f981c3062f
5 changed files with 99 additions and 95 deletions

View File

@ -13,4 +13,5 @@ VUE_APP_PUBLIC_PATH = '/'
# 后端接口地址 # 后端接口地址
VUE_APP_SERVER_URL = 'http://localhost:8081/' VUE_APP_SERVER_URL = 'http://localhost:8081/'
# http://192.168.0.121:8080/ # http://192.168.0.121:8080/

View File

@ -9,17 +9,17 @@ $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#ffffff;// 菜单全部字体颜色 $base-menu-color:#144a6e;// 菜单全部字体颜色
$base-menu-color-active:#ffffff;// 父级菜单激活的字体颜色 $base-menu-color-active:#144a6e;// 父级菜单激活的字体颜色
$base-menu-background:#5a91ff; $base-menu-background:#fff;
$base-logo-title-color: #ffffff; $base-logo-title-color: #144a6e;
$base-menu-light-color:#ffffff; $base-menu-light-color:#ffffff;
$base-menu-light-background:#ffffff; $base-menu-light-background:#ffffff;
$base-logo-light-title-color: #1a5982; $base-logo-light-title-color: #1a5982;
$base-sub-menu-background: #4e77cc;//展开的背景色 $base-sub-menu-background: #c6c6c6;//展开的背景色
$base-sub-menu-hover:#001528; $base-sub-menu-hover: #adadad;
$base-sidebar-width: 200px; $base-sidebar-width: 200px;

View File

@ -147,7 +147,7 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #144a6e; background: #144a6e;
background-image: url("../../assets/images/kkx.png") ; //background-image: url("../../assets/images/kkx.png") ;
background-size: 100% 100%; background-size: 100% 100%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;

View File

@ -2,12 +2,12 @@
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <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 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>--> <!-- <h1 v-else class="sidebar-title" style="color: #00ff80" >{{ title }} </h1>-->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <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> <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
</transition> </transition>

View File

@ -1,31 +1,32 @@
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<div class="store-info" v-if="storeName"> <div class="store-info" v-if="storeName">
<div class="name">{{ storeName }}</div> <div class="name">{{ storeName }}</div>
<div class="role" v-if="role">{{ role }}</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> </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> </template>
<script> <script>
@ -35,72 +36,74 @@ import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss"; import variables from "@/assets/styles/variables.scss";
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
computed: { computed: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]), ...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() { activeMenu() {
const route = this.$route; const route = this.$route;
const { meta, path } = route; const { meta, path } = route;
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu; return meta.activeMenu;
} }
return path; return path;
}, },
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
variables() { variables() {
return variables; return variables;
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened; return !this.sidebar.opened;
}, },
storeName() { storeName() {
if (this.$store.getters.merchantName && this.$store.getters.merchantId) { if (this.$store.getters.merchantName && this.$store.getters.merchantId) {
return this.$store.getters.merchantName; return this.$store.getters.merchantName;
} }
if (this.$store.getters.storeName && this.$store.getters.storeId) { if (this.$store.getters.storeName && this.$store.getters.storeId) {
return this.$store.getters.storeName; return this.$store.getters.storeName;
} }
return ''; return '';
}, },
role() { role() {
console.log() if (this.$store.getters.storeName && this.$store.getters.storeId) {
if (this.$store.getters.storeName && this.$store.getters.storeId) { return '店铺管理员';
}
return this.$store.getters.storeName; if (this.$store.getters.merchantName && this.$store.getters.merchantId) {
}else { return '商户管理员';
return ""; }
}
}
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.store-info { .store-info {
height: 42px;
padding-top: 2px; 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; text-align: center;
background: #00acac;
overflow: hidden; 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> </style>