diff --git a/src/assets/images/logo-2.png b/src/assets/images/logo-2.png index 8d7adf1..d347353 100644 Binary files a/src/assets/images/logo-2.png and b/src/assets/images/logo-2.png differ diff --git a/src/assets/images/logo-3.png b/src/assets/images/logo-3.png new file mode 100644 index 0000000..78b92a2 Binary files /dev/null and b/src/assets/images/logo-3.png differ diff --git a/src/assets/images/top.png b/src/assets/images/top.png new file mode 100644 index 0000000..a29784f Binary files /dev/null and b/src/assets/images/top.png differ diff --git a/src/assets/styles/bigScreen.scss b/src/assets/styles/bigScreen.scss new file mode 100644 index 0000000..1801094 --- /dev/null +++ b/src/assets/styles/bigScreen.scss @@ -0,0 +1,53 @@ +// 媒体查询，适配大于2000px分辨率的大屏样式 +@media (min-width: 2000px) { + .el-tabs--top .el-tabs__item.is-top:nth-child(2), + .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), + .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), + .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) { + padding-left: 0.2rem !important; + } + .el-tabs__item.is-active { + height: 0.48rem !important; + border-radius: 0.06rem 0.06rem 0px 0px !important; + font-size: 0.18rem !important; + line-height: 0.48rem !important; + } + .el-tabs__item { + margin-right: 0.06rem !important; + padding: 0 0.2rem !important; + height: 0.48rem !important; + border-radius: 0.06rem 0.06rem 0px 0px !important; + font-size: 0.18rem !important; + line-height: 0.48rem !important; + } + .el-switch { + font-size: 0.14rem !important; + line-height: 0.2rem !important; + height: 0.2rem !important; + } + .el-switch__label { + height: 0.2rem !important; + font-size: 0.14rem !important; + } + .el-switch__core { + width: 0.4rem !important; + height: 0.2rem !important; + border-radius: 0.1rem !important; + } + .el-switch__core:after { + top: 0.01rem !important; + width: 0.16rem !important; + height: 0.16rem !important; + } + .el-switch__label * { + font-size: 0.14rem !important; + } + + .el-input--mini{ + font-size: 0.12rem !important; + } + .el-input--mini .el-input__inner { + height: 0.28rem !important; + line-height: 0.28rem !important; +} +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 992cede..ab199b3 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -2,6 +2,7 @@ @import "./mixin.scss"; @import "./transition.scss"; @import "./element-ui.scss"; +@import "./bigScreen.scss"; @import "./sidebar.scss"; @import "./btn.scss"; diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index d3b1578..564bf3e 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -308,3 +308,9 @@ h6 { .splitpanes.default-theme .splitpanes__pane { background-color: transparent !important; } +// 媒体查询，适配大于2000px分辨率的大屏样式 +@media (min-width: 2000px) { + .el-icon-arrow-down { + font-size: 0.12rem !important; + } +} diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 0e799b8..7f4d181 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -282,6 +282,59 @@ // 媒体查询，适配大于2000px分辨率的大屏样式 @media (min-width: 2000px) { :root { - --base-sidebar-width: 232px; + --base-sidebar-width: 2.32rem; + } + #app { + .sidebar-container { + &.has-logo { + .el-scrollbar { + height: calc(100% -0.5rem) !important; + } + } + + .svg-icon { + margin-right: 0.16rem !important; + } + } + + .hideSidebar { + .sidebar-container { + width: 0.54rem !important; + } + + .main-container { + margin-left: 0.54rem !important; + } + + .submenu-title-noDropdown { + .el-tooltip { + .svg-icon { + margin-left: 0.2rem !important; + } + } + } + .el-submenu { + & > .el-submenu__title { + font-size: 0.14rem !important; + .svg-icon { + margin-left: 0.2rem !important; + } + } + } + } + } + .hideSidebar .fixed-header{ + width: calc(100% - 0.54rem) !important; + } + .el-submenu__title { + font-size: 0.14rem !important; + height: 0.56rem !important; + line-height: 0.56rem !important; + font-size:0.14rem !important; + padding: 0 0.2rem !important; + } + #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, + #app .sidebar-container .el-submenu .el-menu-item { + padding: 0 0.35rem !important; } } diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 222be5b..c427fde 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -2,7 +2,11 @@ - {{ item.meta.title }} + {{ item.meta.title }} {{ item.meta.title }} @@ -13,80 +17,86 @@ export default { data() { return { - levelList: null - } + levelList: null, + }; }, watch: { $route(route) { // if you go to the redirect page, do not update the breadcrumbs - if (route.path.startsWith('/redirect/')) { - return + if (route.path.startsWith("/redirect/")) { + return; } - this.getBreadcrumb() - } + this.getBreadcrumb(); + }, }, created() { - this.getBreadcrumb() + this.getBreadcrumb(); }, methods: { getBreadcrumb() { // only show routes with meta.title - let matched = [] - const router = this.$route - const pathNum = this.findPathNum(router.path) + let matched = []; + const router = this.$route; + const pathNum = this.findPathNum(router.path); // multi-level menu if (pathNum > 2) { - const reg = /\/\w+/gi + const reg = /\/\w+/gi; const pathList = router.path.match(reg).map((item, index) => { - if (index !== 0) item = item.slice(1) - return item - }) - this.getMatched(pathList, this.$store.getters.defaultRoutes, matched) + if (index !== 0) item = item.slice(1); + return item; + }); + this.getMatched(pathList, this.$store.getters.defaultRoutes, matched); } else { - matched = router.matched.filter(item => item.meta && item.meta.title) + matched = router.matched.filter((item) => item.meta && item.meta.title); } // 判断是否为首页 if (!this.isDashboard(matched[0])) { - matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched) + matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched); } - this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) + this.levelList = matched.filter( + (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false + ); }, findPathNum(str, char = "/") { - let index = str.indexOf(char) - let num = 0 + let index = str.indexOf(char); + let num = 0; while (index !== -1) { - num++ - index = str.indexOf(char, index + 1) + num++; + index = str.indexOf(char, index + 1); } - return num + return num; }, getMatched(pathList, routeList, matched) { - let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]) + let data = routeList.find( + (item) => + item.path == pathList[0] || + (item.name += "").toLowerCase() == pathList[0] + ); if (data) { - matched.push(data) + matched.push(data); if (data.children && pathList.length) { - pathList.shift() - this.getMatched(pathList, data.children, matched) + pathList.shift(); + this.getMatched(pathList, data.children, matched); } } }, isDashboard(route) { - const name = route && route.name + const name = route && route.name; if (!name) { - return false + return false; } - return name.trim() === 'Index' + return name.trim() === "Index"; }, handleLink(item) { - const { redirect, path } = item + const { redirect, path } = item; if (redirect) { - this.$router.push(redirect) - return + this.$router.push(redirect); + return; } - this.$router.push(path) - } - } -} + this.$router.push(path); + }, + }, +}; diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 076ac8f..8280917 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -45,4 +45,11 @@ export default { .svg-path { fill: white; } +/* 媒体查询，适配大于2000px分辨率的大屏样式 */ +@media (min-width: 2000px) { + .hamburger { + width: 0.2rem !important; + height: 0.2rem !important; +} +} diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue index e4bf5ad..70205ad 100644 --- a/src/components/SvgIcon/index.vue +++ b/src/components/SvgIcon/index.vue @@ -57,5 +57,14 @@ export default { background-color: currentColor; mask-size: cover!important; display: inline-block; +} +/* 媒体查询，适配大于2000px分辨率的大屏样式 */ +@media (min-width: 2000px) { + .svg-icon { + width: 0.14rem !important; + height: 0.14rem !important; + vertical-align: -0.15em; +} + } diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue index e27a12f..43ce1e1 100644 --- a/src/components/TopNav/index.vue +++ b/src/components/TopNav/index.vue @@ -5,25 +5,38 @@ @select="handleSelect" > - + @@ -36,7 +49,7 @@ import { constantRoutes } from "@/router"; import { isHttp } from "@/utils/validate"; // 隐藏侧边栏路由 -const hideList = ['/index', '/user/profile']; +const hideList = ["/index", "/user/profile"]; export default { data() { @@ -44,7 +57,7 @@ export default { // 顶部栏初始数 visibleNumber: 5, // 当前激活菜单的 index - currentIndex: undefined + currentIndex: undefined, }; }, computed: { @@ -76,11 +89,12 @@ export default { this.routers.map((router) => { for (var item in router.children) { if (router.children[item].parentPath === undefined) { - if(router.path === "/") { + if (router.path === "/") { router.children[item].path = "/" + router.children[item].path; } else { - if(!isHttp(router.children[item].path)) { - router.children[item].path = router.path + "/" + router.children[item].path; + if (!isHttp(router.children[item].path)) { + router.children[item].path = + router.path + "/" + router.children[item].path; } } router.children[item].parentPath = router.path; @@ -94,25 +108,29 @@ export default { activeMenu() { const path = this.$route.path; let activePath = path; - if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { + if ( + path !== undefined && + path.lastIndexOf("/") > 0 && + hideList.indexOf(path) === -1 + ) { const tmpPath = path.substring(1, path.length); if (!this.$route.meta.link) { activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); - this.$store.dispatch('app/toggleSideBarHide', false); + this.$store.dispatch("app/toggleSideBarHide", false); } - } else if(!this.$route.children) { + } else if (!this.$route.children) { activePath = path; - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } this.activeRoutes(activePath); return activePath; }, }, beforeMount() { - window.addEventListener('resize', this.setVisibleNumber) + window.addEventListener("resize", this.setVisibleNumber); }, beforeDestroy() { - window.removeEventListener('resize', this.setVisibleNumber) + window.removeEventListener("resize", this.setVisibleNumber); }, mounted() { this.setVisibleNumber(); @@ -126,24 +144,24 @@ export default { // 菜单选择事件 handleSelect(key, keyPath) { this.currentIndex = key; - const route = this.routers.find(item => item.path === key); + const route = this.routers.find((item) => item.path === key); if (isHttp(key)) { // http(s):// 路径新窗口打开 window.open(key, "_blank"); } else if (!route || !route.children) { // 没有子路由路径内部打开 - const routeMenu = this.childrenMenus.find(item => item.path === key); + const routeMenu = this.childrenMenus.find((item) => item.path === key); if (routeMenu && routeMenu.query) { let query = JSON.parse(routeMenu.query); this.$router.push({ path: key, query: query }); } else { this.$router.push({ path: key }); } - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } else { // 显示左侧联动菜单 this.activeRoutes(key); - this.$store.dispatch('app/toggleSideBarHide', false); + this.$store.dispatch("app/toggleSideBarHide", false); } }, // 当前激活的路由 @@ -156,12 +174,12 @@ export default { } }); } - if(routes.length > 0) { + if (routes.length > 0) { this.$store.commit("SET_SIDEBAR_ROUTERS", routes); } else { - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } - } + }, }, }; @@ -169,25 +187,48 @@ export default { diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 122a9ca..dc491f9 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -97,4 +97,24 @@ export default { background-color: #c0c0c0; border-radius: 3px; } +// 媒体查询，适配大于2000px分辨率的大屏样式 +@media (min-width: 2000px) { + .app-main { + /* 50= navbar 50 */ + min-height: calc(100vh - 0.84rem) !important; + padding: 0 0.25rem 0.2rem 0.25rem !important; + top: 0.84rem !important; + } + + .hasTagsView { + .app-main { + /* 84 = navbar + tags-view = 50 + 34 */ + min-height: calc(100vh - 0.84rem) !important; + } + + .fixed-header + .app-main { + padding-top: 0.15rem !important; + } + } +} diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 6a9f861..3cc8b02 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,19 +1,31 @@