Skip to content

O
openApi
Commit 2e4eac7a authored by hangjun83's avatar hangjun83
Browse files
Options

前端 样式更改

parent 0a618642
Hide whitespace changes
Inline Side-by-side
Showing with 300 additions and 345 deletions
front/src/views/Main.vue
View file @ 2e4eac7a
...@@ -3,130 +3,83 @@ ...@@ -3,130 +3,83 @@
</style> </style>
<template> <template>
<div class="main" :class="{ 'main-hide-text': shrink }"> <div class="main" :class="{ 'main-hide-text': shrink }">
<!-- 左侧菜单 --> <!-- 左侧菜单 -->
<div <div :class="`sidebar-menu-content side-bar-menu-theme-${menuTheme}`" :style="{
:class="`sidebar-menu-content side-bar-menu-theme-${menuTheme}`"
:style="{
width: shrink ? '60px' : menuWidth + 'px', width: shrink ? '60px' : menuWidth + 'px',
overflow: shrink ? 'visible' : 'auto', overflow: shrink ? 'visible' : 'auto',
}" }">
> <shrinkable-menu :shrink="shrink" @on-change="handleSubmenuChange" :theme="menuTheme" :before-push="beforePush" :menu-list="menuList">
<shrinkable-menu <div slot="top" class="logo-content" v-if="showLogo || fixNav">
:shrink="shrink" <Icon type="ios-game-controller-b" size="100"></Icon>
@on-change="handleSubmenuChange" <img v-show="!shrink && menuTheme == 'light' && mainTheme != 'darkMode'" src="@/assets/logo-black.png" />
:theme="menuTheme" <img v-show="shrink" src="@/assets/logo-min.png" key="min-logo" />
:before-push="beforePush" </div>
:menu-list="menuList" </shrinkable-menu>
>
</shrinkable-menu>
</div> </div>
<!-- 右上顶部导航条 --> <!-- 右上顶部导航条 -->
<div <div :class="`main-header-content fix-nav-${fixNav}`" :style="{
:class="`main-header-content fix-nav-${fixNav}`"
:style="{
paddingLeft: navPaddingLeft, paddingLeft: navPaddingLeft,
}" }">
> <div :class="`main-header header-theme-${navTheme}`">
<div :class="`main-header header-theme-${navTheme}`"> <div class="header-left">
<div class="header-left"> <!-- 固定图标 -->
<!-- 固定图标 --> <div v-if="fixNav && showLogo" style="width: 220px" class="fix-logo">
<div v-if="fixNav && showLogo" style="width: 220px" class="fix-logo"> <span style='font-size:22px;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'>System</span>
<span style='font-size:22px;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'>System</span> </div>
</div> <!-- 收缩图标 -->
<!-- 收缩图标 --> <div class="header-navicon-content header-action" @click="toggleClick" v-if="showFold">
<div <Icon custom="iconfont icon-menu-unfold" size="20" v-show="this.shrink" />
class="header-navicon-content header-action" <Icon custom="iconfont icon-menu-fold" size="20" v-show="!this.shrink" />
@click="toggleClick" </div>
v-if="showFold" <div class="header-middle-content">
> <!-- 顶部菜单 -->
<Icon <div v-if="navType == 1">
custom="iconfont icon-menu-unfold" <navMenu :theme="navTheme" :currNav="currNav" :navList="navList" @on-click="selectNav" :sliceNum="sliceNum" :showIcon="showNavMenuIcon" />
size="20" </div>
v-show="this.shrink" <!-- 下拉菜单 -->
/> <div v-if="navType == 2">
<Icon <navApp currType="tabs" placement="bottom-start" :currNavTitle="currNavTitle" :currNav="currNav" :navList="navList" :type="navShowType" :theme="navTheme" @on-click="selectNav" />
custom="iconfont icon-menu-fold" </div>
size="20" <!-- 面包导航 -->
v-show="!this.shrink" <div class="main-breadcrumb" v-if="navType == 3">
/> <breadcrumb-nav :theme="navTheme" :currentPath="currentPath" />
</div> </div>
<div class="header-middle-content"> </div>
<!-- 顶部菜单 -->
<div v-if="navType == 1">
<navMenu
:theme="navTheme"
:currNav="currNav"
:navList="navList"
@on-click="selectNav"
:sliceNum="sliceNum"
:showIcon="showNavMenuIcon"
/>
</div>
<!-- 下拉菜单 -->
<div v-if="navType == 2">
<navApp
currType="tabs"
placement="bottom-start"
:currNavTitle="currNavTitle"
:currNav="currNav"
:navList="navList"
:type="navShowType"
:theme="navTheme"
@on-click="selectNav"
/>
</div> </div>
<!-- 面包导航 --> <!-- 顶部右侧按钮 -->
<div class="main-breadcrumb" v-if="navType == 3"> <div class="header-right-content">
<breadcrumb-nav :theme="navTheme" :currentPath="currentPath" /> <navApp :currNav="currNav" :navList="navList" :type="navShowType" @on-click="selectNav" v-if="navType == 3" />
<full-screen v-model="isFullScreen" @on-change="fullscreenChange" />
<message-tip />
<user />
</div> </div>
</div>
</div>
<!-- 顶部右侧按钮 -->
<div class="header-right-content">
<navApp
:currNav="currNav"
:navList="navList"
:type="navShowType"
@on-click="selectNav"
v-if="navType == 3"
/>
<full-screen v-model="isFullScreen" @on-change="fullscreenChange" />
<message-tip />
<user />
</div> </div>
</div>
</div> </div>
<!-- Tags 标签 --> <!-- Tags 标签 -->
<div <div class="nav-tags" :style="{
class="nav-tags"
:style="{
paddingLeft: shrink ? '60px' : menuWidth + 'px', paddingLeft: shrink ? '60px' : menuWidth + 'px',
}" }">
> <tags-page-opened :pageTagsList="pageTagsList" v-if="showTags" />
<tags-page-opened :pageTagsList="pageTagsList" v-if="showTags" />
</div> </div>
<!-- 页面部分 --> <!-- 页面部分 -->
<div <div class="single-page-content" :style="{
class="single-page-content"
:style="{
left: shrink ? '60px' : menuWidth + 'px', left: shrink ? '60px' : menuWidth + 'px',
top: showTags ? '100px' : '60px', top: showTags ? '100px' : '60px',
}" }">
> <div class="single-page">
<div class="single-page"> <keep-alive :include="cachePage">
<keep-alive :include="cachePage"> <router-view />
<router-view /> </keep-alive>
</keep-alive> </div>
</div> <!-- 页面页脚 -->
<!-- 页面页脚 --> <div class="main-page-footer-content" v-if="showFooter">
<div class="main-page-footer-content" v-if="showFooter"> <Footer class="main-page-footer" />
<Footer class="main-page-footer" /> </div>
</div>
</div> </div>
<!-- 全局加载动画 --> <!-- 全局加载动画 -->
<circleLoading class="loading-position" v-show="loading" /> <circleLoading class="loading-position" v-show="loading" />
</div> </div>
</template> </template>
<script> <script>
...@@ -143,250 +96,252 @@ import Footer from "./main-components/footer.vue"; ...@@ -143,250 +96,252 @@ import Footer from "./main-components/footer.vue";
import circleLoading from "@/views/my-components/xboot/circle-loading.vue"; import circleLoading from "@/views/my-components/xboot/circle-loading.vue";
import util from "@/libs/util.js"; import util from "@/libs/util.js";
import XIcon from './my-components/xboot/x-icon/x-icon.vue';
export default { export default {
components: { components: {
shrinkableMenu, shrinkableMenu,
tagsPageOpened, tagsPageOpened,
breadcrumbNav, breadcrumbNav,
navMenu, navMenu,
navApp, navApp,
fullScreen, fullScreen,
messageTip, messageTip,
user, user,
Footer, Footer,
circleLoading, circleLoading,
}, XIcon,
data() { },
return { data() {
navPaddingLeft: this.menuWidth, return {
searchType: "input", navPaddingLeft: this.menuWidth,
shrink: false, searchType: "input",
sliceNum: 3, shrink: false,
currNav: "", sliceNum: 3,
isFullScreen: false, currNav: "",
}; isFullScreen: false,
}, };
computed: { },
// 主题 computed: {
mainTheme() { // 主题
return this.$store.state.theme.theme.mainTheme; mainTheme() {
}, return this.$store.state.theme.theme.mainTheme;
menuTheme() { },
return this.$store.state.theme.theme.menuTheme; menuTheme() {
}, return this.$store.state.theme.theme.menuTheme;
navTheme() { },
return this.$store.state.theme.theme.navTheme; navTheme() {
}, return this.$store.state.theme.theme.navTheme;
menuWidth() { },
return this.$store.state.theme.theme.menuWidth; menuWidth() {
}, return this.$store.state.theme.theme.menuWidth;
fixNav() { },
return this.$store.state.theme.theme.fixNav; fixNav() {
}, return this.$store.state.theme.theme.fixNav;
navType() { },
return this.$store.state.theme.theme.navType; navType() {
}, return this.$store.state.theme.theme.navType;
showTags() { },
return this.$store.state.theme.theme.showTags; showTags() {
}, return this.$store.state.theme.theme.showTags;
showNavMenuIcon() { },
return this.$store.state.theme.theme.showNavMenuIcon; showNavMenuIcon() {
}, return this.$store.state.theme.theme.showNavMenuIcon;
navShowType() { },
return this.$store.state.theme.theme.navShowType; navShowType() {
}, return this.$store.state.theme.theme.navShowType;
showFold() { },
return this.$store.state.theme.theme.showFold; showFold() {
}, return this.$store.state.theme.theme.showFold;
showLogo() { },
return this.$store.state.theme.theme.showLogo; showLogo() {
}, return this.$store.state.theme.theme.showLogo;
showSearch() { },
return this.$store.state.theme.theme.showSearch; showSearch() {
}, return this.$store.state.theme.theme.showSearch;
showFooter() { },
return this.$store.state.theme.theme.showFooter; showFooter() {
}, return this.$store.state.theme.theme.showFooter;
weakMode() { },
return this.$store.state.theme.theme.weakMode; weakMode() {
}, return this.$store.state.theme.theme.weakMode;
// 应用 },
loading() { // 应用
return this.$store.state.app.loading; loading() {
}, return this.$store.state.app.loading;
navList() { },
return this.$store.state.app.navList; navList() {
}, return this.$store.state.app.navList;
currNavTitle() { },
return this.$store.state.app.currNavTitle; currNavTitle() {
}, return this.$store.state.app.currNavTitle;
menuList() { },
return this.$store.state.app.menuList; menuList() {
}, return this.$store.state.app.menuList;
pageTagsList() { },
return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象 pageTagsList() {
}, return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
currentPath() { },
return this.$store.state.app.currentPath; // 当前面包屑数组 currentPath() {
}, return this.$store.state.app.currentPath; // 当前面包屑数组
cachePage() { },
return this.$store.state.app.cachePage; cachePage() {
}, return this.$store.state.app.cachePage;
lang() { },
return this.$store.state.app.lang; lang() {
}, return this.$store.state.app.lang;
}, },
methods: { },
init() { methods: {
this.changeFixNav(); init() {
// 菜单 this.changeFixNav();
let pathArr = util.setCurrentPath(this, this.$route.name); // 菜单
this.checkTag(this.$route.name); let pathArr = util.setCurrentPath(this, this.$route.name);
let currWidth = document.body.clientWidth; this.checkTag(this.$route.name);
if (currWidth <= 1200) { let currWidth = document.body.clientWidth;
this.sliceNum = 2; if (currWidth <= 1200) {
} this.sliceNum = 2;
this.setStore("currNav", 'page_index'); }
this.$store.commit("setCurrNav", '平台首页'); this.setStore("currNav", 'page_index');
}, this.$store.commit("setCurrNav", '平台首页');
getCurrNav() { },
// 读取选中顶部菜单名 getCurrNav() {
let currNav = this.getStore("currNav"); // 读取选中顶部菜单名
if (currNav) { let currNav = this.getStore("currNav");
this.currNav = currNav; if (currNav) {
} else { this.currNav = currNav;
// 默认第一个 } else {
if (this.navList && this.navList.length > 0) { // 默认第一个
this.currNav = this.navList[0].name; if (this.navList && this.navList.length > 0) {
} this.currNav = this.navList[0].name;
} }
}, }
selectNav(name) { },
let flag = false; selectNav(name) {
this.navList.forEach((e) => { let flag = false;
if (e.name == name && e.isMenu == false) { this.navList.forEach((e) => {
flag = true; if (e.name == name && e.isMenu == false) {
if (e.description == "direct") { flag = true;
window.location.href = e.url; if (e.description == "direct") {
} else if (e.description == "window") { window.location.href = e.url;
window.open(e.url); } else if (e.description == "window") {
} else if (e.description == "route") { window.open(e.url);
this.$router.push({ } else if (e.description == "route") {
name: e.url, this.$router.push({
name: e.url,
});
}
}
}); });
} if (flag) {
} // 第三方站外链接 不作其他操作
}); return;
if (flag) { }
// 第三方站外链接 不作其他操作 // 缓存当前顶部菜单名
return; this.currNav = name;
} this.setStore("currNav", name);
// 缓存当前顶部菜单名 this.$store.commit("setCurrNav", name);
this.currNav = name; // 点击顶部菜单 回到首页
this.setStore("currNav", name); if (this.$route.name != "home_index") {
this.$store.commit("setCurrNav", name); this.$router.push({
// 点击顶部菜单 回到首页 name: "home_index",
if (this.$route.name != "home_index") { });
this.$router.push({ }
name: "home_index", util.initRouter(this);
},
toggleClick() {
this.shrink = !this.shrink;
this.changeFixNav();
},
changeFixNav() {
if (this.fixNav) {
this.navPaddingLeft = "0px";
} else {
this.navPaddingLeft = this.shrink ? "60px" : this.menuWidth + "px";
}
},
checkTag(name) {
let openpageHasTag = this.pageTagsList.some((item) => {
if (item.name == name) {
return true;
}
});
if (!openpageHasTag) {
// 解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
util.openNewPage(
this,
name,
this.$route.params || {},
this.$route.query || {}
);
}
},
handleSubmenuChange(val) {
// console.log(val)
},
beforePush(name) {
// console.log(name)
return true;
},
fullscreenChange(isFullScreen) {
// console.log(isFullScreen);
},
resize() {
let currWidth = document.body.clientWidth;
if (currWidth <= 1200 && currWidth > 900) {
this.sliceNum = 2;
this.shrink = true;
} else if (currWidth <= 900) {
this.sliceNum = 1;
this.shrink = true;
} else {
this.sliceNum = 3;
this.shrink = false;
}
if (currWidth < 1325 && currWidth > 1200) {
this.searchType = "icon";
} else if (currWidth < 1000 && currWidth > 900) {
this.searchType = "icon";
} else if (currWidth < 835) {
this.searchType = "icon";
} else {
this.searchType = "input";
}
this.changeFixNav();
},
},
watch: {
$route(to) {
this.$store.commit("setCurrentPageName", to.name);
let pathArr = util.setCurrentPath(this, to.name);
this.checkTag(to.name);
},
lang() {
util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
},
fixNav() {
this.changeFixNav();
},
menuWidth() {
this.changeFixNav();
},
navList() {
setTimeout(() => {
this.getCurrNav();
}, 100);
},
},
created() {
// 显示打开的页面的列表
this.$store.commit("setOpenedList");
this.init();
this.resize();
window.addEventListener("resize", () => {
this.resize();
}); });
} if (this.navList && this.navList.length > 0) {
util.initRouter(this); this.getCurrNav();
},
toggleClick() {
this.shrink = !this.shrink;
this.changeFixNav();
},
changeFixNav() {
if (this.fixNav) {
this.navPaddingLeft = "0px";
} else {
this.navPaddingLeft = this.shrink ? "60px" : this.menuWidth + "px";
}
},
checkTag(name) {
let openpageHasTag = this.pageTagsList.some((item) => {
if (item.name == name) {
return true;
} }
});
if (!openpageHasTag) {
// 解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
util.openNewPage(
this,
name,
this.$route.params || {},
this.$route.query || {}
);
}
},
handleSubmenuChange(val) {
// console.log(val)
},
beforePush(name) {
// console.log(name)
return true;
},
fullscreenChange(isFullScreen) {
// console.log(isFullScreen);
},
resize() {
let currWidth = document.body.clientWidth;
if (currWidth <= 1200 && currWidth > 900) {
this.sliceNum = 2;
this.shrink = true;
} else if (currWidth <= 900) {
this.sliceNum = 1;
this.shrink = true;
} else {
this.sliceNum = 3;
this.shrink = false;
}
if (currWidth < 1325 && currWidth > 1200) {
this.searchType = "icon";
} else if (currWidth < 1000 && currWidth > 900) {
this.searchType = "icon";
} else if (currWidth < 835) {
this.searchType = "icon";
} else {
this.searchType = "input";
}
this.changeFixNav();
},
},
watch: {
$route(to) {
this.$store.commit("setCurrentPageName", to.name);
let pathArr = util.setCurrentPath(this, to.name);
this.checkTag(to.name);
},
lang() {
util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
},
fixNav() {
this.changeFixNav();
},
menuWidth() {
this.changeFixNav();
},
navList() {
setTimeout(() => {
this.getCurrNav();
}, 100);
}, },
},
created() {
// 显示打开的页面的列表
this.$store.commit("setOpenedList");
this.init();
this.resize();
window.addEventListener("resize", () => {
this.resize();
});
if (this.navList && this.navList.length > 0) {
this.getCurrNav();
}
},
}; };
</script> </script>
\ No newline at end of file
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