Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
8a640b55 by renchao@pashanhoo.com
Options

style:上报配置修改

1 parent 6ca0b7a5
Expand all
Inline Side-by-side
Showing 23 changed files with 6 additions and 2093 deletions
1 { 1 {
2 "TITLE": "汉中市数据上报系统", 2 "TITLE": "汉中市数据上报系统",
3 "THEME": "sb",
4 "LOGIN": "sb",
5 "CODE": "BDCSBPT", 3 "CODE": "BDCSBPT",
6 "AREARMAP": "610702", 4 "AREARMAP": "610702",
7 "XZQ": "汉中市", 5 "XZQ": "汉中市",
......
1 { 1 {
2 "TITLE": "玉树州数据上报系统", 2 "TITLE": "玉树州数据上报系统",
3 "THEME": "sb",
4 "LOGIN": "sb",
5 "CODE": "BDCSBPT", 3 "CODE": "BDCSBPT",
6 "AREARMAP": "632701", 4 "AREARMAP": "632701",
7 "XZQ": "玉树州", 5 "XZQ": "玉树州",
......
1 <template>
2 <section class="app-main">
3 <transition name="fade-transform" mode="out-in">
4 <router-view />
5 </transition>
6 </section>
7 </template>
8 <script>
9
10 export default {
11 name: 'AppMain',
12 computed: {
13 key () {
14 return this.$route.path
15 }
16 }
17 }
18 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="navbar-con">
3 <div class="navbar">
4 <div class="title">
5 {{ BASE_API.TITLE }}
6 </div>
7 <div class="user">
8 欢迎进入系统 {{ userName }}
9 <span @click="onCancel">
10 <svg-icon icon-class="close" class="closeStyle" />退出系统</span>
11 </div>
12 <div class="sidebarLeft">
13 <sidebarLeft />
14 </div>
15 <div class="sidebarRight d-center">
16 <sidebarRight />
17 </div>
18 </div>
19 </div>
20 </template>
21 <script>
22 import sidebarLeft from "./Sidebar/sidebarLeft";
23 import sidebarRight from "./Sidebar/sidebarRight";
24 import { logout } from "@/api/login.js";
25 import { mapGetters } from "vuex";
26 export default {
27 components: {
28 sidebarLeft,
29 sidebarRight,
30 },
31 computed: {
32 ...mapGetters(["userInfo"]),
33 userName () {
34 return this.userInfo ? this.userInfo.name : ""
35 }
36 },
37 methods: {
38 onCancel () {
39 logout()
40 .then((res) => {
41 sessionStorage.removeItem("token");
42 this.$store.dispatch("user/resetState");
43 this.$store.dispatch("permission/resetRoutes");
44 this.$router.replace({
45 path: "/jg"
46 })
47 })
48 .catch((error) => {
49 })
50 }
51 }
52 }
53 </script>
54 <style lang="scss" scoped>
55 .menubg {
56 height: 34px;
57 width: 130px !important;
58 text-align: center;
59 color: #ffffff;
60 background: url("~@/image/navbar.png") no-repeat;
61 background-size: 100% 100%;
62 }
63
64 /deep/.el-menu-item {
65 @extend .menubg;
66 }
67
68 /deep/.el-submenu {
69 @extend .menubg;
70 }
71
72 /deep/.el-submenu__title {
73 height: 34px;
74 color: #ffffff;
75 }
76
77 /deep/.el-submenu__title span {
78 font-size: 14px;
79 }
80
81 .sidebarLeft {
82 position: relative;
83 top: 13px;
84 width: 30%;
85 }
86
87 /deep/.el-menu {
88 display: flex;
89 justify-content: space-between;
90 width: 100%;
91 background: transparent !important;
92 }
93
94 /deep/.el-menu-item {
95 flex: 1;
96 width: 100%;
97 }
98
99 .sidebarRight {
100 position: relative;
101 top: 13px;
102 width: 30%;
103 }
104
105 // 导航选中背景色
106 .xuanzhong {
107 background: url("~@/image/selNavbar.png") no-repeat;
108 background-size: 100% 100%;
109 color: #ffffff !important;
110 font-weight: 700;
111 }
112
113 /deep/.el-menu-item:hover {
114 @extend .xuanzhong;
115 }
116
117 /deep/.el-submenu__title:hover {
118 @extend .xuanzhong;
119 }
120
121 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
122 @extend .xuanzhong;
123 }
124
125 /deep/.is-active {
126 @extend .xuanzhong;
127 }
128
129 .navbar {
130 height: $headerHeight;
131 overflow: hidden;
132 position: relative;
133 display: flex;
134 align-items: center;
135 padding: 0 20px;
136 justify-content: space-between;
137 background: url("~@/image/header.png") no-repeat;
138 background-size: 100% 100%;
139
140 .user {
141 font-size: 12px;
142 color: #ffffff;
143 position: absolute;
144 right: 20px;
145 top: 0;
146 cursor: pointer;
147
148 .closeStyle {
149 margin-right: 5px;
150 }
151 }
152
153 .title {
154 position: absolute;
155 left: 0;
156 top: 10px;
157 bottom: 0;
158 right: 0;
159 margin: 0 auto;
160 font-size: 32px;
161 color: #ffffff;
162 font-weight: 700;
163 text-align: center;
164 }
165
166 .right-menu {
167 float: right;
168 height: 100%;
169 line-height: 50px;
170 display: flex;
171 align-items: center;
172
173 .shutdown {
174 font-size: 20px;
175 margin-left: 15px;
176 cursor: pointer;
177 }
178
179 .organization-item {
180 margin-right: 40px;
181 margin-top: -40px !important;
182 }
183
184 .item {
185 margin-right: 40px;
186 margin-top: -20px;
187 line-height: 18.4px;
188 cursor: pointer;
189 position: relative;
190
191 .item-box {
192 position: absolute;
193 top: -5px;
194 left: 3px;
195 width: 100%;
196 min-width: 25px;
197 height: 25px;
198 cursor: pointer;
199 z-index: 100;
200 }
201 }
202
203 &:focus {
204 outline: none;
205 }
206
207 .right-menu-item {
208 display: inline-block;
209 height: 100%;
210 font-size: 18px;
211 color: #fff;
212 vertical-align: text-bottom;
213
214 &.hover-effect {
215 cursor: pointer;
216 transition: background 0.3s;
217 display: flex;
218 align-items: center;
219
220 &:hover {
221 background: rgba(0, 0, 0, 0.025);
222 }
223 }
224 }
225
226 .avatar-wrapper {
227 position: relative;
228 display: flex;
229 height: 40px;
230 align-items: center;
231
232 .user-avatar {
233 cursor: pointer;
234 width: 35px;
235 height: 35px;
236 border-radius: 50%;
237 }
238
239 .el-icon-caret-bottom {
240 cursor: pointer;
241 position: absolute;
242 right: -15px;
243 top: 17px;
244 font-size: 12px;
245 }
246 }
247 }
248 }
249 </style>
1 export default {
2 computed: {
3 device() {
4 return this.$store.state.app.device
5 }
6 },
7 mounted() {
8 // In order to fix the click on menu on the ios device will trigger the mouseleave bug
9 // https://github.com/PanJiaChen/vue-element-admin/issues/1135
10 this.fixBugIniOS()
11 },
12 methods: {
13 fixBugIniOS() {
14 const $subMenu = this.$refs.subMenu
15 if ($subMenu) {
16 const handleMouseleave = $subMenu.handleMouseleave
17 $subMenu.handleMouseleave = (e) => {
18 if (this.device === 'mobile') {
19 return
20 }
21 handleMouseleave(e)
22 }
23 }
24 }
25 }
26 }
1 <script>
2 export default {
3 name: 'MenuItem',
4 functional: true,
5 props: {
6 icon: {
7 type: String,
8 default: ''
9 },
10 title: {
11 type: String,
12 default: ''
13 }
14 },
15 render (h, context) {
16 const { title } = context.props
17 const vnodes = []
18 if (title) {
19 vnodes.push(<span slot='title'>{(title)}</span>)
20 }
21 return vnodes
22 }
23 }
24 </script>
1 <template>
2 <component :is="type" v-bind="linkProps(to)">
3 <slot />
4 </component>
5 </template>
6
7 <script>
8 import { isExternal } from '@/utils/validate'
9
10 export default {
11 props: {
12 to: {
13 type: String,
14 required: true
15 }
16 },
17 computed: {
18 isExternal() {
19 return isExternal(this.to)
20 },
21 type() {
22 if (this.isExternal) {
23 return 'a'
24 }
25 return 'router-link'
26 }
27 },
28 methods: {
29 linkProps(to) {
30 if (this.isExternal) {
31 return {
32 href: to,
33 target: '_blank',
34 rel: 'noopener'
35 }
36 }
37 return {
38 to: to
39 }
40 }
41 }
42 }
43 </script>
1 <template>
2 <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
3 <transition name="sidebarLogoFade">
4 <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5 <img v-if="logo" :src="logo" class="sidebar-logo">
6 <h1 v-else class="sidebar-title">
7 {{ title }}
8 </h1>
9 </router-link>
10 <router-link v-else key="expand" class="sidebar-logo-link" to="/">
11 <h1 class="sidebar-title">
12 {{ title }}
13 </h1>
14 </router-link>
15 </transition>
16 </div>
17 </template>
18
19 <script>
20 import defaultSettings from '@/settings'
21 const { title } = defaultSettings
22 export default {
23 name: 'SidebarLogo',
24 props: {
25 collapse: {
26 type: Boolean,
27 required: true
28 }
29 },
30 data () {
31 return {
32 title: title,
33 }
34 }
35 }
36 </script>
37
38 <style lang="scss" scoped>
39 .sidebarLogoFade-enter-active {
40 transition: opacity 1.5s;
41 }
42
43 .sidebarLogoFade-enter,
44 .sidebarLogoFade-leave-to {
45 opacity: 0;
46 }
47
48 .sidebar-logo-container {
49 position: relative;
50 width: 100%;
51 text-align: center;
52 overflow: hidden;
53 height: 100px;
54
55 & .sidebar-logo-link {
56 height: 100%;
57 width: 100%;
58
59 & .sidebar-logo {
60 width: 41px;
61 height: 39px;
62 vertical-align: middle;
63 // margin-left: 47px;
64 // margin-right: 48px;
65 margin-top: 22px;
66 }
67
68 & .sidebar-title {
69 margin: 0;
70 margin-top: 10px;
71 margin-bottom: 20px;
72 color: #fff;
73 font-weight: 600;
74 line-height: 25px;
75 font-size: 16px;
76 font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
77 vertical-align: middle;
78 }
79 }
80
81 &.collapse {
82 .sidebar-logo {
83 margin-right: 0px;
84 width: 32.8px;
85 height: 31.2px;
86 }
87 }
88 }
89 </style>
1 <template>
2 <div v-if="!item.hidden">
3 <template
4 v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
5 <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
6 <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
7 <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title"
8 class="menu-icon" />
9 </el-menu-item>
10 </app-link>
11 </template>
12
13 <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
14 <template slot="title">
15 <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
16 </template>
17 <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
18 :base-path="resolvePath(child.path)" class="nest-menu" />
19 </el-submenu>
20 </div>
21 </template>
22
23 <script>
24 import path from 'path'
25 import { isExternal } from '@/utils/validate'
26 import Item from './Item'
27 import AppLink from './Link'
28 import FixiOSBug from './FixiOSBug'
29
30 export default {
31 name: 'SidebarItem',
32 components: { Item, AppLink },
33 mixins: [FixiOSBug],
34 props: {
35 // route object
36 item: {
37 type: Object,
38 required: true
39 },
40 isNest: {
41 type: Boolean,
42 default: false
43 },
44 basePath: {
45 type: String,
46 default: ''
47 }
48 },
49 data () {
50 // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
51 // TODO: refactor with render function
52 this.onlyOneChild = null
53 return {}
54 },
55 methods: {
56 hasOneShowingChild (children = [], parent) {
57 const showingChildren = children.filter(item => {
58 if (item.hidden) {
59 return false
60 } else {
61 // Temp set(will be used if only has one showing child)
62 this.onlyOneChild = item
63 return true
64 }
65 })
66
67 // When there is only one child router, the child router is displayed by default
68 if (showingChildren.length === 1) {
69 return true
70 }
71
72 // Show parent if there are no child router to display
73 if (showingChildren.length === 0) {
74 this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
75 return true
76 }
77
78 return false
79 },
80 resolvePath (routePath) {
81 if (isExternal(routePath)) {
82 return routePath
83 }
84 if (isExternal(this.basePath)) {
85 return this.basePath
86 }
87 return path.resolve(this.basePath, routePath)
88 }
89 }
90 }
91 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Description: log
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-23 16:29:12
5 -->
6 <template>
7 <el-menu router :default-active="activeMenu" mode="horizontal">
8 <!-- 权限菜单 -->
9 <sidebar-item v-for="route in permission_routes.slice(4, 7)" :key="route.path" :item="route"
10 :base-path="route.path" />
11 <!-- 菜单全部展示 -->
12 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
13 </el-menu>
14 </template>
15
16 <script>
17 import { mapGetters } from 'vuex'
18 import Logo from './Logo'
19 import SidebarItem from './SidebarItem'
20 import variables from '@/styles/variables.scss'
21 import { asyncRoutes } from '@/router'
22 export default {
23 components: { SidebarItem, Logo },
24 computed: {
25 ...mapGetters(['permission_routes', 'sidebar']),
26
27 activeMenu () {
28
29 const route = this.$route
30 const { meta, path } = route
31 if (meta.activeMenu) {
32 return meta.activeMenu
33 }
34 return path
35 },
36 variables () {
37 return variables
38 },
39 asyncRoutes () {
40 return asyncRoutes.slice(0, 3)
41 }
42 }
43 }
44 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Author: xiaomiao 1158771342@qq.com
3 * @Date: 2023-01-10 09:03:06
4 * @LastEditors: Please set LastEditors
5 * @LastEditTime: 2023-03-23 16:29:24
6 * @FilePath: \监管系统\js-web-jianguan\src\layout\components\Sidebar\sidebarRight.vue
7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 -->
9 <template>
10 <el-menu router :default-active="activeMenu" mode="horizontal">
11 <!-- 权限菜单 -->
12 <sidebar-item v-for="route in permission_routes.slice(7, 10)" :key="route.path" :item="route"
13 :base-path="route.path" />
14 <!-- 菜单全部展示 -->
15 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
16 </el-menu>
17 </template>
18
19 <script>
20 import { mapGetters } from 'vuex'
21 import Logo from './Logo'
22 import SidebarItem from './SidebarItem'
23 import variables from '@/styles/variables.scss'
24 import { asyncRoutes } from '@/router'
25 export default {
26 components: { SidebarItem, Logo },
27 computed: {
28 ...mapGetters(['permission_routes', 'sidebar']),
29 activeMenu () {
30 const route = this.$route
31 const { meta, path } = route
32 if (meta.activeMenu) {
33 return meta.activeMenu
34 }
35 return path
36 },
37 variables () {
38 return variables
39 },
40 asyncRoutes () {
41 return asyncRoutes.slice(3, 6)
42 }
43 }
44 }
45 </script>
1 <template>
2 <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
3 <slot />
4 </el-scrollbar>
5 </template>
6
7 <script>
8 const tagAndTagSpacing = 4 // tagAndTagSpacing
9
10 export default {
11 name: 'ScrollPane',
12 data () {
13 return {
14 left: 0
15 }
16 },
17 computed: {
18 scrollWrapper () {
19 return this.$refs.scrollContainer.$refs.wrap
20 }
21 },
22 mounted () {
23 this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
24 },
25 beforeDestroy () {
26 this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
27 },
28 methods: {
29 handleScroll (e) {
30 const eventDelta = e.wheelDelta || -e.deltaY * 40
31 const $scrollWrapper = this.scrollWrapper
32 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
33 },
34 emitScroll () {
35 this.$emit('scroll')
36 },
37 moveToTarget (currentTag) {
38 const $container = this.$refs.scrollContainer.$el
39 const $containerWidth = $container.offsetWidth
40 const $scrollWrapper = this.scrollWrapper
41 const tagList = this.$parent.$refs.tag
42
43 let firstTag = null
44 let lastTag = null
45
46 // find first tag and last tag
47 if (tagList.length > 0) {
48 firstTag = tagList[0]
49 lastTag = tagList[tagList.length - 1]
50 }
51
52 if (firstTag === currentTag) {
53 $scrollWrapper.scrollLeft = 0
54 } else if (lastTag === currentTag) {
55 $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
56 } else {
57 // find preTag and nextTag
58 const currentIndex = tagList.findIndex(item => item === currentTag)
59 const prevTag = tagList[currentIndex - 1]
60 const nextTag = tagList[currentIndex + 1]
61
62 // the tag's offsetLeft after of nextTag
63 const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
64
65 // the tag's offsetLeft before of prevTag
66 const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
67
68 if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
69 $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
70 } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
71 $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
72 }
73 }
74 }
75 }
76 }
77 </script>
78
79 <style lang="scss" scoped>
80 .scroll-container {
81 white-space: nowrap;
82 position: relative;
83 overflow: hidden;
84 width: 100%;
85 height: 100%;
86 }
87
88 /deep/ .el-scrollbar__view {
89 display: inline-block !important;
90 }
91
92 /deep/ .el-scrollbar__wrap {
93 overflow-x: hidden !important;
94 }
95 </style>
1 <template>
2 <div id="tags-view-container" class="tags-view-container">
3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
4 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''"
5 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
6 @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
7 @contextmenu.prevent.native="openMenu(tag,$event)">
8 {{ tag.title }}
9 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
10 </router-link>
11 </scroll-pane>
12 <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
13 <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
14 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
15 <li @click="closeOthersTags">Close Others</li>
16 <li @click="closeAllTags(selectedTag)">Close All</li>
17 </ul>
18 </div>
19 </template>
20
21 <script>
22 import ScrollPane from './ScrollPane'
23 import path from 'path'
24
25 export default {
26 components: { ScrollPane },
27 data () {
28 return {
29 visible: false,
30 top: 0,
31 left: 0,
32 selectedTag: {},
33 affixTags: []
34 }
35 },
36 computed: {
37 visitedViews () {
38 return this.$store.state.tagsView.visitedViews
39 },
40 routes () {
41 return this.$store.state.permission.routes
42 }
43 },
44 watch: {
45 $route () {
46 this.addTags()
47 this.moveToCurrentTag()
48 },
49 visible (value) {
50 if (value) {
51 document.body.addEventListener('click', this.closeMenu)
52 } else {
53 document.body.removeEventListener('click', this.closeMenu)
54 }
55 }
56 },
57 mounted () {
58 this.initTags()
59 this.addTags()
60 },
61 methods: {
62 isActive (route) {
63 return route.path === this.$route.path
64 },
65 isAffix (tag) {
66 return tag.meta && tag.meta.affix
67 },
68 filterAffixTags (routes, basePath = '/') {
69 let tags = []
70 routes.forEach(route => {
71 if (route.meta && route.meta.affix) {
72 const tagPath = path.resolve(basePath, route.path)
73 tags.push({
74 fullPath: tagPath,
75 path: tagPath,
76 name: route.name,
77 meta: { ...route.meta }
78 })
79 }
80 if (route.children) {
81 const tempTags = this.filterAffixTags(route.children, route.path)
82 if (tempTags.length >= 1) {
83 tags = [...tags, ...tempTags]
84 }
85 }
86 })
87 return tags
88 },
89 initTags () {
90 const affixTags = this.affixTags = this.filterAffixTags(this.routes)
91 for (const tag of affixTags) {
92 // Must have tag name
93 if (tag.name) {
94 this.$store.dispatch('tagsView/addVisitedView', tag)
95 }
96 }
97 },
98 addTags () {
99 const { name } = this.$route
100 if (name) {
101 this.$store.dispatch('tagsView/addView', this.$route)
102 }
103 return false
104 },
105 moveToCurrentTag () {
106 const tags = this.$refs.tag
107 this.$nextTick(() => {
108 for (const tag of tags) {
109 if (tag.to.path === this.$route.path) {
110 this.$refs.scrollPane.moveToTarget(tag)
111 // when query is different then update
112 if (tag.to.fullPath !== this.$route.fullPath) {
113 this.$store.dispatch('tagsView/updateVisitedView', this.$route)
114 }
115 break
116 }
117 }
118 })
119 },
120 refreshSelectedTag (view) {
121 this.$store.dispatch('tagsView/delCachedView', view).then(() => {
122 const { fullPath } = view
123 this.$nextTick(() => {
124 this.$router.replace({
125 path: '/redirect' + fullPath
126 })
127 })
128 })
129 },
130 closeSelectedTag (view) {
131 this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
132 if (this.isActive(view)) {
133 this.toLastView(visitedViews, view)
134 }
135 })
136 },
137 closeOthersTags () {
138 this.$router.push(this.selectedTag)
139 this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
140 this.moveToCurrentTag()
141 })
142 },
143 closeAllTags (view) {
144 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
145 if (this.affixTags.some(tag => tag.path === view.path)) {
146 return
147 }
148 this.toLastView(visitedViews, view)
149 })
150 },
151 toLastView (visitedViews, view) {
152 const latestView = visitedViews.slice(-1)[0]
153 if (latestView) {
154 this.$router.push(latestView.fullPath)
155 } else {
156 // now the default is to redirect to the home page if there is no tags-view,
157 // you can adjust it according to your needs.
158 if (view.name === 'Dashboard') {
159 // to reload home page
160 this.$router.replace({ path: '/redirect' + view.fullPath })
161 } else {
162 this.$router.push('/')
163 }
164 }
165 },
166 openMenu (tag, e) {
167 const menuMinWidth = 105
168 const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
169 const offsetWidth = this.$el.offsetWidth // container width
170 const maxLeft = offsetWidth - menuMinWidth // left boundary
171 const left = e.clientX - offsetLeft + 15 // 15: margin right
172
173 if (left > maxLeft) {
174 this.left = maxLeft
175 } else {
176 this.left = left
177 }
178
179 this.top = e.clientY
180 this.visible = true
181 this.selectedTag = tag
182 },
183 closeMenu () {
184 this.visible = false
185 },
186 handleScroll () {
187 this.closeMenu()
188 }
189 }
190 }
191 </script>
192
193 <style lang="scss" scoped>
194 .tags-view-container {
195 height: 40px;
196 width: 100%;
197 background: #fff;
198 border-bottom: 1px solid #d8dce5;
199 box-sizing: border-box;
200 padding-top: 3px;
201 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
202
203 .tags-view-wrapper {
204 .tags-view-item {
205 display: inline-block;
206 position: relative;
207 cursor: pointer;
208 height: 26px;
209 line-height: 26px;
210 border: 1px solid #d8dce5;
211 color: #495060;
212 background: #fff;
213 padding: 0 8px;
214 font-size: 12px;
215 margin-left: 5px;
216 margin-top: 4px;
217
218 &:first-of-type {
219 margin-left: 15px;
220 }
221
222 &:last-of-type {
223 margin-right: 15px;
224 }
225
226 &.active {
227 background-color: #0794FF;
228 color: #fff;
229 border-color: #0794FF;
230
231 &::before {
232 content: '';
233 background: #fff;
234 display: inline-block;
235 width: 8px;
236 height: 8px;
237 border-radius: 50%;
238 position: relative;
239 margin-right: 2px;
240 }
241 }
242 }
243 }
244
245 .contextmenu {
246 margin: 0;
247 background: #fff;
248 z-index: 3000;
249 position: absolute;
250 list-style-type: none;
251 padding: 5px 0;
252 border-radius: 4px;
253 font-size: 12px;
254 font-weight: 400;
255 color: #333;
256 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
257
258 li {
259 margin: 0;
260 padding: 7px 16px;
261 cursor: pointer;
262
263 &:hover {
264 background: #eee;
265 }
266 }
267 }
268 }
269 </style>
270
271 <style lang="scss">
272 //reset element css of el-icon-close
273 .tags-view-wrapper {
274 .tags-view-item {
275 .el-icon-close {
276 width: 16px;
277 height: 16px;
278 vertical-align: 2px;
279 border-radius: 50%;
280 text-align: center;
281 transition: all .3s cubic-bezier(.645, .045, .355, 1);
282 transform-origin: 100% 50%;
283
284 &:before {
285 transform: scale(.6);
286 display: inline-block;
287 vertical-align: -3px;
288 }
289
290 &:hover {
291 background-color: #b4bccc;
292 color: #fff;
293 }
294 }
295 }
296 }
297 </style>
1 export { default as AppMain } from './AppMain'
2 export { default as Navbar } from './Navbar'
3 export { default as Sidebar } from './Sidebar/sidebarRight.vue'
4 export { default as TagsView } from './TagsView/index.vue'
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-23 15:17:24
5 -->
6 <template>
7 <div class="app-wrapper jgWrapper">
8 <navbar />
9 <div class="appMain">
10 <app-main />
11 </div>
12 </div>
13 </template>
14 <script>
15 import { AppMain, Navbar, Sidebar, TagsView } from './components'
16 import ResizeMixin from './mixin/ResizeHandler'
17 import { mapState } from 'vuex'
18 export default {
19 name: 'Layout',
20 components: {
21 AppMain,
22 Navbar,
23 Sidebar,
24 TagsView
25 },
26 created () {
27 this.$store.dispatch("products/setData", "BDCJGPT");
28 },
29 mixins: [ResizeMixin],
30 computed: {
31 ...mapState({
32 sidebar: state => state.app.sidebar,
33 needTagsView: state => state.settings.tagsView,
34 fixedHeader: state => state.settings.fixedHeader
35 })
36 }
37 }
38 </script>
39 <style lang="scss">
40 @import "~@/styles/jgSidebar.scss";
41 </style>
42 <style lang="scss" scoped>
43 @import "~@/styles/mixin.scss";
44
45 .app-wrapper {
46 @include clearfix;
47 position: relative;
48 height: 100%;
49 width: 100%;
50 min-width: 1280px;
51 background: url("~@/image/bg.png") no-repeat;
52 background-size: 100% 100%;
53 padding: 12px;
54 box-sizing: border-box;
55
56 &.mobile.openSidebar {
57 position: fixed;
58 top: 0;
59 }
60 }
61
62 .appMain {
63 // min-width: 1280px;
64 height: calc(100vh - 101px) !important;
65 box-sizing: border-box;
66
67 .app-main {
68 height: 100%;
69 }
70 }
71 </style>
1 import store from '@/store'
2
3 const { body } = document
4 const WIDTH = 992 // refer to Bootstrap's responsive design
5
6 export default {
7 watch: {
8 $route(route) {
9 if (this.device === 'mobile' && this.sidebar.opened) {
10 store.dispatch('app/closeSideBar', { withoutAnimation: false })
11 }
12 }
13 },
14 beforeMount() {
15 window.addEventListener('resize', this.$_resizeHandler)
16 },
17 beforeDestroy() {
18 window.removeEventListener('resize', this.$_resizeHandler)
19 },
20 mounted() {
21 const isMobile = this.$_isMobile()
22 if (isMobile) {
23 store.dispatch('app/toggleDevice', 'mobile')
24 store.dispatch('app/closeSideBar', { withoutAnimation: true })
25 }
26 },
27 methods: {
28 // use $_ for mixins properties
29 // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30 $_isMobile() {
31 const rect = body.getBoundingClientRect()
32 return rect.width - 1 < WIDTH
33 },
34 $_resizeHandler() {
35 if (!document.hidden) {
36 const isMobile = this.$_isMobile()
37 store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
38
39 if (isMobile) {
40 store.dispatch('app/closeSideBar', { withoutAnimation: true })
41 }
42 }
43 }
44 }
45 }
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 Vue.use(Router) 3 Vue.use(Router)
4 import Layout from '@/layout' 4 import Layout from '@/layout1'
5 5
6 export const constantRoutes = [ 6 export const constantRoutes = [
7 { 7 {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: xiaomiao 1158771342@qq.com 2 * @Author: xiaomiao 1158771342@qq.com
3 * @Date: 2023-03-09 15:24:53 3 * @Date: 2023-03-09 15:24:53
4 * @LastEditors: Please set LastEditors 4 * @LastEditors: Please set LastEditors
5 * @LastEditTime: 2023-03-23 10:19:35 5 * @LastEditTime: 2023-05-11 16:30:18
6 * @FilePath: \上报\bdcjg-web\src\store\modules\permission.js 6 * @FilePath: \上报\bdcjg-web\src\store\modules\permission.js
7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 */ 8 */
...@@ -26,12 +26,7 @@ const mutations = { ...@@ -26,12 +26,7 @@ const mutations = {
26 const actions = { 26 const actions = {
27 // 添加全部菜单 27 // 添加全部菜单
28 generateRoutes ({ commit }, getMenuInfo) { 28 generateRoutes ({ commit }, getMenuInfo) {
29 let Layout; 29 let Layout = r => require.ensure([], () => r(require(`@/layout1`)))
30 if (Vue.prototype.BASE_API.THEME == 'sb') {
31 Layout = r => require.ensure([], () => r(require(`@/layout1`)))
32 } else {
33 Layout = r => require.ensure([], () => r(require(`@/layout`)))
34 }
35 function asyncRouter (routers) { 30 function asyncRouter (routers) {
36 routers.forEach(item => { 31 routers.forEach(item => {
37 if (!item.children) { 32 if (!item.children) {
......
1 // cover some element-ui styles
2 .el-breadcrumb__inner,
3 .el-breadcrumb__inner a {
4 font-weight: 400 !important;
5 color: #686666;
6 }
7
8 .el-table .cell {
9 line-height: 16px;
10 }
11
12 // input 样式
13 // 全局css 加上以下代码，可以隐藏上下箭头
14
15 // 取消input的上下箭头
16 input::-webkit-inner-spin-button {
17 -webkit-appearance: none !important;
18
19 }
20
21 input::-webkit-outer-spin-button {
22 -webkit-appearance: none !important;
23
24 }
25
26 input[type="number"] {
27 -moz-appearance: textfield;
28
29 }
30
31 .el-upload {
32 input[type="file"] {
33 display: none !important;
34 }
35 }
36
37 .el-upload__input {
38 display: none;
39 }
40
41 .cell {
42 .el-tag {
43 margin-right: 0px;
44 }
45 }
46
47 .small-padding {
48 .cell {
49 padding-left: 5px;
50 padding-right: 5px;
51 }
52 }
53
54 .fixed-width {
55 .el-button--mini {
56 padding: 7px 10px;
57 min-width: 60px;
58 }
59 }
60
61 .status-col {
62 .cell {
63 padding: 0 10px;
64 text-align: center;
65
66 .el-tag {
67 margin-right: 0px;
68 }
69 }
70 }
71
72 .el-icon-date,
73 .el-icon-time {
74 display: none;
75 }
76
77 // to fixed https://github.com/ElemeFE/element/issues/2461
78 // refine element ui upload
79 .el-input.is-disabled .el-input__inner {
80 color: #FFFFFF !important;
81 background-color: transparent !important;
82 border: 1px solid #224C7C !important;
83 }
84
85 .upload-container {
86 .el-upload {
87 width: 100%;
88
89 .el-upload-dragger {
90 width: 100%;
91 height: 200px;
92 }
93 }
94 }
95
96 // dropdown
97 .el-dropdown-menu {
98 a {
99 display: block
100 }
101 }
102
103 // fix date-picker ui bug in filter-item
104 .el-range-editor.el-input__inner {
105 display: inline-flex !important;
106 }
107
108 // to fix el-date-picker css style
109 .el-range-separator {
110 box-sizing: content-box;
111 }
112
113 .el-submenu__icon-arrow {
114 margin-top: -5px;
115 }
116
117 /* --------------进度条美化---------------- */
118 ::-webkit-scrollbar {
119 width: 7px;
120 height: 7px;
121 }
122
123 ::-webkit-scrollbar-corner {
124 display: none;
125 }
126
127 ::-webkit-scrollbar-track {
128 width: 7px;
129 background-color: rgba(0, 0, 0, 0);
130 -webkit-border-radius: 6px;
131 -moz-border-radius: 6px;
132 border-radius: 6px;
133 }
134
135 ::-webkit-scrollbar-thumb {
136 background: rgba(69, 138, 207, .6);
137 background-clip: padding-box;
138 min-height: 28px;
139 -webkit-border-radius: 6px;
140 -moz-border-radius: 6px;
141 border-radius: 6px;
142 }
143
144 ::-webkit-scrollbar-thumb:hover {
145 background: rgba(69, 138, 207, .6);
146 }
147
148 // 滚动条位置
149
150
151 // element 样式补丁
152 .el-menu--horizontal {
153 border-bottom: none !important;
154 }
155
156 .el-radio-group {
157 .el-radio-button__inner {
158 height: 36px;
159 line-height: 36px;
160 padding: 0 20px;
161 font-size: 14px;
162 }
163
164 .el-radio-button:first-child {
165 border-radius: 4px 0 0 4px;
166 }
167
168 .el-radio-button:last-child {
169 border-radius: 0 4px 4px 0;
170 }
171 }
172
173 .el-tabs__item:focus.is-active.is-focus:not(:active) {
174 box-shadow: none !important;
175 }
176
177 // Divider 分割线 样式的修改
178 .el-divider--horizontal {
179 margin: 10px 0 !important;
180 }
181
182 .el-row {
183 margin-bottom: 0 !important;
184 }
185
186 // form
187 .el-form-item__content {
188 margin-left: 0 !important;
189 }
190
191 .el-icon-full-screen,
192 .el-icon-rank {
193 cursor: pointer;
194 }
195
196 // element table 样式修改
197 //去掉表格内的线
198 table th {
199 border-bottom: none !important;
200 }
201
202 // .el-table__body {
203 // -webkit-border-vertical-spacing: 6px !important; // 垂直间距
204 // }
205
206 table td {
207 box-sizing: border-box;
208 border-bottom: 1px solid #458ACF !important;
209 }
210
211 //去掉最下面的那一条线
212 .el-table::before {
213 height: 0;
214 }
215
216 .el-table__body tr {
217 box-sizing: content-box !important;
218 cursor: pointer;
219 }
220
221 .el-table__body-wrapper .el-table__body tr:hover {
222 background: #063160 !important;
223 box-shadow: inset 0px 0px 20px 0px #03DBFF !important;
224 }
225
226 .el-table__body tr:hover>td,
227 .el-table__body tr.hover-row>td.el-table__cell {
228 background: none !important;
229 }
230
231 // table 固定列样式
232 .el-table__fixed-right-patch {
233 background-color: #073781;
234 border-bottom: none;
235 }
236
237 .el-table__fixed-right {
238 background-color: #073781
239 }
240
241 .el-table__fixed::before,
242 .el-table__fixed-right::before {
243 display: none;
244 }
245
246 // 表格样式
247 .el-table th {
248 height: 48px !important;
249 font-size: 14px;
250 color: #4A4A4A;
251 }
252
253 .twoLineCls {
254 text-overflow: -o-ellipsis-lastline;
255 overflow: hidden;
256 text-overflow: ellipsis;
257 display: -webkit-box;
258 -webkit-line-clamp: 2;
259 line-clamp: 2;
260 -webkit-box-orient: vertical;
261 }
262
263 .el-table tr td {
264 font-size: 14px;
265 color: #7A7A7A;
266 }
267
268 .lb-table .el-table {
269 border-bottom: none;
270 border-radius: 4px 4px 0 0;
271 }
272
273 .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
274 display: none !important
275 }
276
277 .el-message-box__btns {
278 display: flex;
279 flex-direction: row-reverse;
280 }
281
282 .el-message-box__btns .el-button--primary {
283 margin-right: 10px;
284 }
285
286 .el-form-item__content {
287 flex: 1;
288 }
289
290 .el-submenu__title {
291 .svg-icon {
292 position: relative;
293 top: 2px;
294 }
295 }
296
297
298 // element 下拉框样式
299 .el-menu--popup,
300 .el-select-dropdown {
301 background: url("~@/image/slbg.png") no-repeat;
302 background-size: 100% 100%;
303 padding: 10px;
304 border: none;
305 }
306
307 .el-popper[x-placement^="bottom"] .popper__arrow::after {
308 display: none;
309 }
310
311 .el-popper[x-placement^="bottom"] .popper__arrow {
312 display: none;
313 }
314
315 .el-popper[x-placement^="bottom"] {
316 margin-top: 0px;
317 }
318
319 // 时间选择框样式
320 .el-date-picker {
321 background: url("~@/image/slbg.png") no-repeat;
322 background-size: 100% 100%;
323 padding-top: 13px;
324 padding-bottom: 13px;
325 border: none;
326
327 margin-top: 5px !important;
328
329 table {
330 background: url("~@/image/rqjx.png") no-repeat;
331 background-size: 100% 100%;
332 padding: 8px;
333 }
334
335 table td {
336 box-sizing: border-box;
337 border-bottom: 0px solid #074487 !important;
338 }
339
340 .el-input__inner {
341 background-color: #031a46;
342 }
343
344 .el-picker-panel {
345 border: none;
346 }
347
348 .el-picker-panel__footer {
349 display: none;
350 background-color: #031a46;
351 }
352
353 .el-date-table td.disabled div {
354 background-color: #074487;
355 }
356
357 .el-date-picker__header {
358 margin-bottom: 0px;
359 }
360
361 .el-date-picker__header-label {
362 color: #A6CFD6;
363 }
364
365 .el-picker-panel__content {
366 padding-top: 0px;
367 margin-top: 0px;
368
369 .disabled {
370 background-color: #074487;
371
372 div {
373 span {
374 color: rgba(172, 239, 250, .5)
375 }
376 }
377
378 }
379 }
380
381
382 .el-picker-panel__icon-btn {
383 color: #A6CFD6;
384 }
385
386 .el-date-table th {
387 color: #02D9FD;
388 }
389
390 .el-date-table td span {
391 color: #DBFAFF
392 }
393
394 .el-date-table td span:hover {
395 background-color: #074487;
396 border: 1px solid #02D9FD;
397 color: #02D9FD
398 }
399
400 .el-date-table td.current:not(.disabled) span {
401 background-color: #074487;
402 // border:1px solid saddlebrown;
403 box-shadow: inset 0 0 7px #02D9FD;
404 border: 1px solid #02D9FD;
405 color: #02D9FD
406 }
407
408 }
409
410 // 时间选择框分两个框
411 .el-date-range-picker {
412 .el-date-range-picker__time-header>.el-icon-arrow-right {
413 color: #E3F1FF;
414 }
415
416 background-color: #074487;
417 color: #fff;
418
419 .el-input__inner {
420 background: color #074487;
421 }
422
423 .el-input.is-disabled .el-input__inner {
424 background-color: #074487;
425 }
426
427 .el-date-range-picker__time-header {
428 background-color: #031a46;
429 }
430
431 .el-time-panel {
432 background-color: #074487 !important;
433 color: #E3F1FF;
434 }
435
436 .el-picker-panel__icon-btn {
437 color: #E3F1FF;
438 }
439
440 .el-date-table th {
441 color: #E3F1FF;
442 }
443
444 .el-time-spinner__item {
445 color: #E3F1FF;
446 }
447
448 .el-time-spinner__item.active:not(.disabled) {
449 color: #fff;
450 }
451
452 .el-time-panel__btn {
453 color: #0F93F6;
454 }
455
456 .el-time-panel__btn.confirm {
457 width: 50px;
458 height: 25px;
459 line-height: 25px;
460 border-radius: 3px;
461 background-color: #fff;
462 }
463
464 .el-time-panel__footer {
465 background-color: #031a46;
466 }
467
468 .el-date-table td.in-range div {
469 background-color: #031a46;
470 }
471
472 .el-date-table td.start-date span,
473 .el-date-table td.end-date span {
474 background-color: #074487;
475 box-shadow: inset 0 0 7px #02D9FD;
476 border: 1px solid #02D9FD;
477 }
478 }
479
480 .el-button--text {
481 line-height: 10px;
482 }
483
484 // 时间组件input框部分
485 .el-date-editor {
486
487 [class^="el-icon-"],
488 [class*=" el-icon-"] {
489 // display: none;
490 }
491
492 .el-range-separator {
493 color: #E3F1FF;
494 }
495
496 .el-range-input {
497 background: none !important;
498 color: #fff;
499 }
500 }
501
502 .el-menu--horizontal .el-menu .el-menu-item,
503 .el-select-dropdown__item,
504 .el-menu--horizontal .el-menu .el-submenu__title {
505 background: url("~@/image/slitembg.png") no-repeat;
506 height: 26px;
507 line-height: 26px;
508 background-size: 100% 100%;
509 margin-bottom: 12px;
510 color: #02D9FD !important;
511 }
512
513 .el-select-dropdown {
514 margin-top: 5px !important;
515 }
516
517 .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):hover,
518 .el-select-dropdown__item:hover,
519 .el-select-dropdown__item.selected,
520 .el-menu--horizontal .el-menu .el-menu-item.is-active,
521 .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):focus {
522 background: url("~@/image/xzslitembg.png") no-repeat;
523 background-size: 100% 100%;
524 color: #FFFFFF !important;
525 font-weight: 700;
526 }
527
528 .el-select-dropdown__item.hover,
529 .el-select-dropdown__item:hover {
530 background-color: transparent !important;
531 }
532
533 // 提示框
534 .el-message-box {
535 background: #031A46;
536 -webkit-box-shadow: inset 0px 0px 12px 0px #02d9fd;
537 box-shadow: inset 0px 0px 12px 0px #02d9fd;
538 border-radius: 0px 2px 2px 2px;
539 border: 1px solid #6BC1FC;
540 padding: 15px;
541
542 .el-message-box__title {
543 color: white;
544 }
545
546 .el-message-box__content {
547 color: white;
548 }
549 }
550
551 // 上级菜单
552 .el-cascader__dropdown {
553 background-color: #031a46;
554 border: 1px solid #5f82c7;
555
556 }
557
558 .el-cascader-menu {
559 color: white;
560 }
561
562 .el-radio {
563 .el-cascader-menu:hover {
564 color: white;
565 }
566 }
567
568 .el-cascader-node:not(.is-disabled):hover,
569 .el-cascader-node:not(.is-disabled):focus {
570 background: #F5F7FA;
571 background-image: initial;
572 background-position-x: initial;
573 background-position-y: initial;
574 background-size: initial;
575 background-repeat-x: initial;
576 background-repeat-y: initial;
577 background-attachment: initial;
578 background-origin: initial;
579 background-clip: initial;
580 background-color: rgb(80, 142, 235);
581 }
582
583 // 下拉框
584 .el-menu--popup {
585 padding-top: 20px;
586 }
...\ No newline at end of file ...\ No newline at end of file
1 .jgWrapper {
2 .main-container {
3 width: 100%;
4 height: calc(100% - 74px);
5 transition: margin-left 0.28s;
6 display: flex;
7 background-color: $containerbg;
8 }
9
10 .sidebar-container {
11 transition: width 0.28s;
12 width: $sideBarWidth !important;
13 font-size: 0px;
14 margin-right: 15px;
15
16 .horizontal-collapse-transition {
17 transition: 0s width ease-in-out, 0s padding-left ease-in-out,
18 0s padding-right ease-in-out;
19 }
20
21 .scrollbar-wrapper {
22 overflow-x: hidden !important;
23 margin-right: 0 !important;
24
25 &::-webkit-scrollbar {
26 display: none;
27 }
28 }
29
30 a {
31 display: inline-block;
32 width: 100%;
33 overflow: hidden;
34 }
35
36 .svg-icon {
37 margin-right: 5px;
38 }
39
40 .sub-el-icon {
41 margin-right: 12px;
42 margin-left: -2px;
43 }
44
45 .el-menu {
46 background-color: transparent !important;
47 border: none;
48 height: 100%;
49 width: 100% !important;
50 }
51
52 // menu hover
53 .el-menu--collapse .el-submenu__title,
54 .el-menu--collapse .submenu-title-noDropdown {
55 margin-left: 0px !important;
56 }
57
58 // 有子级
59 .el-submenu__title {
60 padding-left: 10px !important;
61 color: $menuText;
62 height: 42px;
63 background: linear-gradient(90deg, #013874 0%, #081B56 100%);
64 margin-bottom: 8px;
65
66 &:hover {
67 color: $subMenuActiveText !important;
68 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
69
70 .svg-icon,
71 i,
72 span {
73 color: $subMenuActiveText !important;
74 }
75 }
76 }
77
78 // 没有子级
79 .submenu-title-noDropdown {
80 color: $menuText;
81 padding-left: 20px;
82 margin-bottom: 8px;
83 background: linear-gradient(90deg, #013874 0%, #081B56 100%);
84
85 &:hover {
86 color: $menuActiveText !important;
87 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
88
89 .svg-icon {
90 color: #1ea6f8 !important;
91 }
92
93 i {
94 color: #1ea6f8 !important;
95 }
96 }
97 }
98
99 .submenu-title-noDropdown.is-active,
100 .el-submenu__title.is-active {
101 color: $menuActiveText;
102 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
103
104 .svg-icon {
105 color: #1ea6f8 !important;
106 }
107
108 i {
109 color: #1ea6f8 !important;
110 }
111 }
112
113 .submenu-title-noDropdown,
114 .el-submenu__title {
115 font-weight: 600;
116 font-size: $sideBarFontSize;
117
118 // margin: 0 10px;
119 >i {
120 color: $subMenuActiveText !important;
121 transform: rotate(90deg);
122 -webkit-transform: rotate(90deg);
123 -moz-transform: rotate(90deg);
124 -ms-transform: rotate(90deg);
125 -o-transform: rotate(90deg);
126 margin-right: 10px;
127 }
128
129 .svg-icon {
130 font-size: 18px;
131 margin-top: -5px;
132 }
133 }
134
135 .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
136 transform: rotateZ(0deg) !important;
137 -webkit-transform: rotateZ(0deg) !important;
138 -moz-transform: rotateZ(0deg) !important;
139 -ms-transform: rotateZ(0deg) !important;
140 -o-transform: rotateZ(0deg) !important;
141 }
142
143 .is-active>.el-submenu__title {
144 color: #fff !important;
145 }
146
147 & .nest-menu .el-submenu>.el-submenu__title,
148 & .el-submenu .el-menu-item {
149 &.is-active {
150 background-color: $subMenuHover !important;
151 color: $menuActiveText !important;
152 }
153
154 &:hover {
155 background-color: $subMenuHover !important;
156 color: $menuActiveText !important;
157 }
158
159 min-width: 130px !important;
160 background-color: transparent !important;
161 font-weight: 600;
162 font-size: $sideBarFontSize;
163 margin: 0 10px;
164 // border-radius: 6px;
165 }
166 }
167
168 .hideSidebar {
169 .sidebar-container {
170 width: 54px !important;
171 }
172
173 .submenu-title-noDropdown {
174 padding: 0 !important;
175 position: relative;
176
177 .el-tooltip {
178 padding: 0 !important;
179
180 .svg-icon {
181 margin-left: 16px;
182 }
183
184 .sub-el-icon {
185 margin-left: 19px;
186 }
187 }
188 }
189
190 .el-submenu {
191 overflow: hidden;
192
193 &>.el-submenu__title {
194 padding: 0 !important;
195
196 .svg-icon {
197 margin-left: 16px;
198 }
199
200 .sub-el-icon {
201 margin-left: 19px;
202 }
203
204 .el-submenu__icon-arrow {
205 display: none;
206 }
207 }
208 }
209
210 .el-menu--collapse {
211 .el-submenu {
212 &>.el-submenu__title {
213 &>span {
214 height: 0;
215 width: 0;
216 overflow: hidden;
217 visibility: hidden;
218 display: inline-block;
219 }
220 }
221 }
222 }
223 }
224
225 .el-menu--collapse .el-menu .el-submenu {
226 min-width: $sideBarWidth !important;
227 }
228
229 // mobile responsive
230 .mobile {
231 .main-container {
232 margin-left: 0px;
233 }
234
235 .sidebar-container {
236 transition: transform 0.28s;
237 width: $sideBarWidth !important;
238 }
239
240 &.hideSidebar {
241 .sidebar-container {
242 pointer-events: none;
243 transition-duration: 0.3s;
244 transform: translate3d(-$sideBarWidth, 0, 0);
245 }
246 }
247 }
248
249 .withoutAnimation {
250
251 .main-container,
252 .sidebar-container {
253 transition: none;
254 }
255 }
256 }
257
258 // when menu collapsed
259 .el-menu--vertical {
260 &>.el-menu {
261 .svg-icon {
262 margin-right: 16px;
263 }
264
265 .sub-el-icon {
266 margin-right: 12px;
267 margin-left: -2px;
268 }
269 }
270
271 .nest-menu .el-submenu>.el-submenu__title,
272 .el-menu-item {
273 width: calc(100% - 12px);
274 border-top-right-radius: 8px;
275 border-bottom-right-radius: 8px;
276 font-weight: 600 !important;
277 font-size: 15px !important;
278 background-color: $menuHover !important;
279 color: $menuText !important;
280
281 &:hover {
282 background-color: $menuHover !important;
283 opacity: .9;
284
285 .svg-icon,
286 i,
287 span {
288 color: $menuText;
289 }
290 }
291 }
292
293 // the scroll bar appears when the subMenu is too long
294 >.el-menu--popup {
295 max-height: 100vh;
296 overflow-y: auto;
297 background-color: #32ACFE !important;
298 border-top-right-radius: 8px;
299 border-bottom-right-radius: 8px;
300 min-width: 140px;
301 padding: 12px 0;
302
303 &::-webkit-scrollbar-track-piece {
304 background: #d3dce6;
305 }
306
307 &::-webkit-scrollbar {
308 width: 6px;
309 }
310
311 &::-webkit-scrollbar-thumb {
312 background: #99a9bf;
313 border-radius: 20px;
314 }
315 }
316 }
317
318 .el-submenu__title {
319 display: flex;
320 align-items: center;
321 }
322
323 .el-submenu__title span {
324 white-space: normal;
325 word-break: break-all;
326 line-height: 20px;
327 flex: 1;
328 padding-right: 20px;
329 }
330
331 .el-menu-item {
332 height: 42px;
333 display: flex;
334 align-items: center;
335 padding-right: 20px !important;
336 }
337
338 .el-menu-item span {
339 white-space: normal;
340 word-break: break-all;
341 line-height: 20px;
342 flex: 1;
343 }
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-23 15:26:37 4 * @LastEditTime: 2023-05-11 16:31:01
5 */ 5 */
6 6
7 var Layout; 7 var Layout;
8 let ApiUrl = localStorage.getItem('ApiUrl') 8 let ApiUrl = localStorage.getItem('ApiUrl')
9 if (ApiUrl.THEME == 'sb') { 9 Layout = r => require.ensure([], () => r(require(`@/layout1`)))
10 Layout = r => require.ensure([], () => r(require(`@/layout1`)))
11 } else {
12 Layout = r => require.ensure([], () => r(require(`@/layout`)))
13 }
14
15 export default function filterAsyncRouter (routers) { 10 export default function filterAsyncRouter (routers) {
16 routers.forEach(item => { 11 routers.forEach(item => {
17 if (!item.children) { 12 if (!item.children) {
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-24 16:44:54 4 * @LastEditTime: 2023-05-11 16:25:43
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 export default function getTheme (theme = Vue.prototype.BASE_API.THEME) { 7 export default function getTheme (theme = Vue.prototype.BASE_API.THEME) {
8 const resultMap = { 8 const resultMap = {
9 'jg': function () {
10 return import("@/styles/jgPublic.scss");
11 },
12 'sb': function () { 9 'sb': function () {
13 return import("@/styles/sbPublic.scss"); 10 return import("@/styles/sbPublic.scss");
14 }, 11 },
......