elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ddd

shibei_master
dai 4 years ago
parent
671f0c64c7
commit
a809b8abb6
3 changed files with 160 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      src/assets/scss/main-shuju.scss
  2. 14
      src/router/index.js
  3. 152
      src/views/main-shuju/main-navbar.vue

100
src/assets/scss/main-shuju.scss
View File

@ -1,5 +1,5 @@
@import '~@/element-ui/theme-variables.scss'; @import "~@/element-ui/theme-variables.scss";
@import './variables.scss'; @import "./variables.scss";
// $navbar--height: 60px; // $navbar--height: 60px;
body { body {
@ -72,8 +72,8 @@ body {
background-color: transparent; background-color: transparent;
} }
&-add { &-add {
> span > *[class*='el-icon-'], > span > *[class*="el-icon-"],
> span > *[class*='icon'] { > span > *[class*="icon"] {
vertical-align: middle; vertical-align: middle;
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
@ -233,17 +233,13 @@ body {
font-family: FZZCHJW; font-family: FZZCHJW;
font-weight: normal; font-weight: normal;
color: #ffffff; color: #ffffff;
background: linear-gradient( background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
0deg,
#03c7ff 24.609375%,
#ffffff 81.0791015625%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: rgba(#fff, 0.7); -webkit-text-fill-color: rgba(#fff, 0.7);
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: "";
z-index: 100000; z-index: 100000;
display: block; display: block;
bottom: -10px; bottom: -10px;
@ -289,13 +285,15 @@ body {
text-decoration: none; text-decoration: none;
} }
&.z-div { &.z-div {
.el-menu-item { .el-menu-item,
.sub-menu {
position: relative; position: relative;
&.is-active { &.is-active,
&.z-on {
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: "";
display: block; display: block;
bottom: -6px; bottom: -6px;
left: 0; left: 0;
@ -317,7 +315,7 @@ body {
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: "";
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -328,8 +326,41 @@ body {
} }
} }
} }
.sub-menu {
position: relative;
float: left;
cursor: pointer;
&:hover {
.sub-menu-list {
display: block;
}
}
.sub-menu-list {
position: absolute;
display: none;
padding: 0 10px;
width: 120px;
left: -100px;
right: -100px;
margin: 0 auto;
background-color: rgba(#176dec, 0.9);
text-align: center;
cursor: pointer;
> div {
border-top: 1px dashed rgba(#fff, 0.4);
color: rgba(#fff, 0.7);
transition: all ease 0.5s;
&:hover {
color: #fff;
}
}
}
}
.el-menu-item, .el-menu-item,
.el-submenu > .el-submenu__title { .sub-menu {
height: $navbar--height; height: $navbar--height;
padding: 0 15px; padding: 0 15px;
line-height: $navbar--height; line-height: $navbar--height;
@ -337,14 +368,12 @@ body {
color: #fff; color: #fff;
} }
.el-menu-item.is-active, .el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title { .sub-menu.z-on {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
&:focus,
&:hover {
} }
} .el-menu-item,
.el-menu-item { .sub-menu {
i { i {
color: #fff; color: #fff;
} }
@ -388,9 +417,10 @@ body {
} }
} }
} }
.navbar__search { .navbar__search {
> *[class*='el-icon-'], > *[class*="el-icon-"],
> *[class*='icon'] { > *[class*="icon"] {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -446,9 +476,7 @@ body {
min-height: calc(#{$content--fill-height} - 2px); min-height: calc(#{$content--fill-height} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
#{$content--fill-height} - #{$content--card-header-height} - 2px
);
} }
&--tabs { &--tabs {
padding: $content--tabs-header-height 0 0; padding: $content--tabs-header-height 0 0;
@ -520,7 +548,7 @@ body {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
content: ''; content: "";
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: $--color-primary; background-color: $--color-primary;
@ -553,15 +581,10 @@ body {
min-height: calc(#{$content--fill-height-tabs} - 2px); min-height: calc(#{$content--fill-height-tabs} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
#{$content--fill-height-tabs} - #{$content--card-header-height} -
2px
);
} }
&.is-iframe { &.is-iframe {
height: calc( height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
#{$content--fill-height-tabs} + #{$content--padding * 2}
);
margin: -$content--padding; margin: -$content--padding;
min-height: auto; min-height: auto;
> .aui-card--fill { > .aui-card--fill {
@ -580,10 +603,7 @@ body {
background-color: #fff; background-color: #fff;
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
height: calc( height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
#{$content--fill-height-tabs} - #{$content--card-header-height} -
2px
);
} }
} }
} }
@ -613,7 +633,7 @@ body {
/* Page /* Page
------------------------------ */ ------------------------------ */
*[class*='aui-page__'] { *[class*="aui-page__"] {
padding-top: 0; padding-top: 0;
.aui-content { .aui-content {
min-height: auto; min-height: auto;
@ -625,9 +645,7 @@ body {
min-height: calc(100vh - #{$content--padding * 2} - 2px); min-height: calc(100vh - #{$content--padding * 2} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px
);
} }
} }
} }

14
src/router/index.js
View File

@ -229,9 +229,21 @@ router.beforeEach((to, from, next) => {
window.SITE_CONFIG["menuShujuList"] = [ window.SITE_CONFIG["menuShujuList"] = [
{ {
icon: "icon-setting", icon: "icon-setting",
id: "2", id: "22213213",
name: "基础信息", name: "基础信息",
url: "visual/basicinfo/basicInfoMain", url: "visual/basicinfo/basicInfoMain",
children: [
{
url: "/visual/basicinfo/basicInfoMain",
name: "基础信息",
id: "5feawfwaefwa5",
},
{
url: "/visual/basicinfo/basicInfoMain",
name: "人员类别分析",
id: "5fwaefwaefawef5",
},
],
}, },
{ {
icon: "icon-setting", icon: "icon-setting",

152
src/views/main-shuju/main-navbar.vue
View File

@ -1,13 +1,10 @@
<template> <template>
<div> <div>
<nav <nav v-if="showHeader" class="m-navbar">
v-if="showHeader"
class="m-navbar"
>
<div class="navbar__header"> <div class="navbar__header">
<h1 class="navbar__brand" @click="$router.push({ name: 'home' })"> <h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
<a class="navbar__brand-lg" href="javascript:;">{{ <a class="navbar__brand-lg" href="javascript:;">{{
userType === 'work' ? customerName : $t('brand.lg') userType === "work" ? customerName : $t("brand.lg")
}}</a> }}</a>
<a class="navbar__brand-mini" href="javascript:;">{{ <a class="navbar__brand-mini" href="javascript:;">{{
customerName.slice(0, 2) customerName.slice(0, 2)
@ -21,10 +18,7 @@
@click="$store.state.sidebarFold = !$store.state.sidebarFold" @click="$store.state.sidebarFold = !$store.state.sidebarFold"
> >
<svg <svg
class=" class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
icon-svg
navbar__icon-menu navbar__icon-menu--switch
"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#icon-outdent"></use> <use xlink:href="#icon-outdent"></use>
@ -45,14 +39,31 @@
mode="horizontal" mode="horizontal"
class="navbar__menu mr-auto z-div" class="navbar__menu mr-auto z-div"
> >
<el-menu-item <el-menu-item index="index" @click="toIndexPage">
@click="toIndexPage"
>
<span>首页</span> <span>首页</span>
</el-menu-item> </el-menu-item>
<template v-for="(menu, idx) in $store.state.mainShuju.menuList">
<li
class="sub-menu"
:class="$store.state.mainShuju.activeName==menu.name ? 'z-on':''"
v-if="menu.children"
:key="menu.id"
@click="gotoRouteHandle(menu.id, idx)"
>
<span>{{ menu.name }}</span>
<div class="sub-menu-list">
<div
:key="subMenu.id"
@click="gotoRouteHandle(subMenu.id, subIndex)"
v-for="(subMenu, subIndex) in menu.children"
>
{{ subMenu.name }}
</div>
</div>
</li>
<el-menu-item <el-menu-item
v-for="(menu, idx) in $store.state.mainShuju.menuList" v-else
:key="menu.id" :key="menu.id"
:menu="menu" :menu="menu"
:index="menu.id" :index="menu.id"
@ -60,6 +71,7 @@
> >
<span>{{ menu.name }}</span> <span>{{ menu.name }}</span>
</el-menu-item> </el-menu-item>
</template>
</el-menu> </el-menu>
<el-menu class="navbar__menu" mode="horizontal"> <el-menu class="navbar__menu" mode="horizontal">
@ -83,10 +95,8 @@
</svg> </svg>
</a> </a>
</el-menu-item> --> </el-menu-item> -->
<el-menu-item index="3" <el-menu-item index="3" @click="fullscreenHandle()">
@click="fullscreenHandle()"> <svg class="icon-svg navbar__icon-menu" aria-hidden="true">
<svg class="icon-svg navbar__icon-menu"
aria-hidden="true">
<use xlink:href="#icon-fullscreen"></use> <use xlink:href="#icon-fullscreen"></use>
</svg> </svg>
</el-menu-item> </el-menu-item>
@ -99,12 +109,11 @@
<i class="el-icon-arrow-down"></i> <i class="el-icon-arrow-down"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item @click.native="updatePasswordHandle()">{{
@click.native="updatePasswordHandle()" $t("updatePassword.title")
>{{ $t('updatePassword.title') }}</el-dropdown-item }}</el-dropdown-item>
>
<el-dropdown-item @click.native="logoutHandle()">{{ <el-dropdown-item @click.native="logoutHandle()">{{
$t('logout') $t("logout")
}}</el-dropdown-item> }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -122,114 +131,114 @@
</template> </template>
<script> <script>
import { messages } from '@/i18n' import { messages } from "@/i18n";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import screenfull from 'screenfull' import screenfull from "screenfull";
import UpdatePasswordWork from './main-navbar-update-password-work' import UpdatePasswordWork from "./main-navbar-update-password-work";
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from "@/utils";
export default { export default {
inject: ['refresh'], inject: ["refresh"],
data() { data() {
return { return {
showHeader: true, showHeader: true,
i18nMessages: messages, i18nMessages: messages,
updatePassowrdVisible: false, updatePassowrdVisible: false,
customerName: localStorage.getItem('customerName') customerName: localStorage.getItem("customerName"),
} };
}, },
components: { components: {
UpdatePasswordWork UpdatePasswordWork,
}, },
created() { created() {
let platformToken = localStorage.getItem('showHeader') || '' let platformToken = localStorage.getItem("showHeader") || "";
if ( if (
typeof platformToken !== 'undefined' && typeof platformToken !== "undefined" &&
platformToken !== 'undefined' && platformToken !== "undefined" &&
platformToken !== '' platformToken !== ""
) { ) {
this.showHeader = false this.showHeader = false;
} }
console.log('=============================', this.userType) console.log("=============================", this.userType);
this.$store.state.mainShuju.menuList = window.SITE_CONFIG['menuShujuList'] this.$store.state.mainShuju.menuList = window.SITE_CONFIG["menuShujuList"];
}, },
computed: { computed: {
userType() { userType() {
return localStorage.getItem('userType') return localStorage.getItem("userType");
} },
}, },
methods: { methods: {
toIndexPage(){ toIndexPage() {
this.$router.replace('/indexWork') this.$router.replace("/indexWork");
}, },
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由 // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
gotoRouteHandle(menuId, idx) { gotoRouteHandle(menuId, idx) {
var route = window.SITE_CONFIG['dynamicMenuRoutesShuju'].filter( var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
(item) => item.meta.menuId === menuId (item) => item.meta.menuId === menuId
)[0] )[0];
if (route) { if (route) {
this.$router.push({ name: route.name }) this.$router.push({ name: route.name });
} }
this.$store.state.mainShuju.activeName = menuId this.$store.state.mainShuju.activeName = menuId;
}, },
changeCustomerName(customerName) { changeCustomerName(customerName) {
this.customerName = localStorage.getItem('customerName') this.customerName = localStorage.getItem("customerName");
}, },
// 全屏 // 全屏
fullscreenHandle() { fullscreenHandle() {
if (!screenfull.enabled) { if (!screenfull.enabled) {
return this.$message({ return this.$message({
message: this.$t('fullscreen.prompt'), message: this.$t("fullscreen.prompt"),
type: 'warning', type: "warning",
duration: 500 duration: 500,
}) });
} }
screenfull.toggle() screenfull.toggle();
}, },
// 修改密码 // 修改密码
updatePasswordHandle() { updatePasswordHandle() {
this.updatePassowrdVisible = true this.updatePassowrdVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.updatePassowrd.init() this.$refs.updatePassowrd.init();
}) });
}, },
// 退出 // 退出
logoutHandle() { logoutHandle() {
this.$confirm( this.$confirm(
this.$t('prompt.info', { handle: this.$t('logout') }), this.$t("prompt.info", { handle: this.$t("logout") }),
this.$t('prompt.title'), this.$t("prompt.title"),
{ {
confirmButtonText: this.$t('confirm'), confirmButtonText: this.$t("confirm"),
cancelButtonText: this.$t('cancel'), cancelButtonText: this.$t("cancel"),
type: 'warning' type: "warning",
} }
) )
.then(() => { .then(() => {
//关闭所有标签页 //关闭所有标签页
// tabs, 关闭全部 // tabs, 关闭全部
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name === 'home2' (item) => item.name === "home2"
) );
this.$http this.$http
.post('/auth/login/logout') .post("/auth/login/logout")
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
//别处登陆时 退出不提示 直接跳登陆页即可 //别处登陆时 退出不提示 直接跳登陆页即可
if (res.code !== 10007) { if (res.code !== 10007) {
this.$message.error(res.msg) this.$message.error(res.msg);
} }
} }
clearLoginInfo() clearLoginInfo();
this.$router.push({ name: 'login' }) this.$router.push({ name: "login" });
}) })
.catch(() => {}) .catch(() => {});
}) })
.catch(() => {}) .catch(() => {});
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -240,4 +249,3 @@ export default {
</style> </style>
<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style> <style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>

Write Preview
Loading…
Cancel
Save