Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
1a69eeed by 任超
Options

style:项目架构

1 parent 355719a5
Inline Side-by-side
Showing 13 changed files with 58 additions and 27 deletions
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118748190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2584" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M938.666667 98.773333c16.128 0 29.226667 13.098667 29.226666 29.226667v528.64A114.56 114.56 0 0 1 853.333333 771.2h-334.208v68.437333h228.693334a29.226667 29.226667 0 0 1 4.352 58.154667l-4.309334 0.341333H236.928a29.226667 29.226667 0 0 1-4.309333-58.154666l4.266666-0.298667 223.786667-0.042667v-68.437333h-356.266667a29.226667 29.226667 0 0 1-28.928-24.917333l-0.298666-4.266667V213.333333a114.56 114.56 0 0 1 114.56-114.56z m-29.269334 58.453334H189.738667c-30.976 0-56.106667 25.130667-56.106667 56.106666v499.413334H853.333333c29.013333 0 52.906667-22.058667 55.808-50.346667l0.298667-5.76-0.042667-499.413333zM640 292.565333a146.304 146.304 0 0 1 122.026667 226.986667l51.029333 50.986667a29.269333 29.269333 0 0 1-37.717333 44.458666l-3.626667-3.072-51.029333-51.029333A146.304 146.304 0 1 1 640 292.522667z m-271.573333 210.773334a29.226667 29.226667 0 0 1 4.352 58.154666l-4.352 0.298667H273.066667a29.226667 29.226667 0 0 1-4.309334-58.112l4.309334-0.341333h95.36zM640 351.146667a87.765333 87.765333 0 1 0 0 175.530666 87.765333 87.765333 0 0 0 0-175.530666z m-189.226667-71.125334a29.226667 29.226667 0 0 1 4.266667 58.154667l-4.266667 0.298667H273.066667a29.226667 29.226667 0 0 1-4.309334-58.154667l4.309334-0.298667h177.706666z" fill="#ffffff" p-id="2585"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118934834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3136" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M822.869333 519.296c10.624 0 20.394667 5.76 25.6 15.061333l91.392 164.565334a29.269333 29.269333 0 0 1 0 28.416l-91.434666 164.565333a29.269333 29.269333 0 0 1-25.6 15.061333H640a29.269333 29.269333 0 0 1-25.6-15.061333l-91.392-164.565333a29.269333 29.269333 0 0 1 0-28.416l91.434667-164.565334a29.269333 29.269333 0 0 1 25.557333-15.061333z m36.565334-420.565333c14.677333 0 26.88 10.837333 28.928 24.96L888.746667 128v267.093333a29.269333 29.269333 0 0 1-58.197334 4.309334l-0.341333-4.309334V157.226667H213.333333c-29.013333 0-52.906667 22.101333-55.808 50.346666L157.269333 213.333333l-0.042666 397.397334h272.298666a29.44 29.44 0 0 1 4.693334 0.384 29.269333 29.269333 0 0 1 33.578666 24.576l0.298667 4.309333v208.426667h62.208a29.269333 29.269333 0 0 1 4.266667 58.24l-4.266667 0.298666h-256a29.269333 29.269333 0 0 1-4.352-58.197333l4.352-0.298667h135.253333v-179.2H128a29.269333 29.269333 0 0 1-28.928-24.96L98.730667 640V213.333333A114.602667 114.602667 0 0 1 206.08 98.986667L213.333333 98.730667h646.101334z m-53.76 479.061333h-148.437334l-75.178666 135.296 75.178666 135.338667h148.48l75.136-135.338667-75.178666-135.253333z" fill="#ffffff" p-id="3137"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118828860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2768" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M889.898667 98.730667c16.170667 0 29.269333 13.098667 29.269333 29.269333v719.232a114.602667 114.602667 0 0 1-114.602667 114.602667H128a71.936 71.936 0 0 1-71.936-71.936V213.333333A114.602667 114.602667 0 0 1 170.666667 98.730667z m-29.269334 58.496H170.666667c-30.976 0-56.064 25.173333-56.064 56.106666v676.565334c0 7.424 5.973333 13.397333 13.397333 13.397333h676.565333c30.976 0 56.064-25.088 56.064-56.064V157.226667zM597.333333 457.173333a146.304 146.304 0 0 1 134.826667 203.093334l68.693333 68.778666a29.269333 29.269333 0 0 1-37.717333 44.458667l-3.626667-3.114667-61.184-61.141333A146.304 146.304 0 1 1 597.333333 457.130667z m-219.434666 244.992a29.269333 29.269333 0 0 1 4.309333 58.197334l-4.266667 0.341333h-146.346666a29.269333 29.269333 0 0 1-4.266667-58.197333l4.266667-0.341334h146.346666zM597.333333 515.669333a87.765333 87.765333 0 1 0 0 175.530667 87.765333 87.765333 0 0 0 0-175.530667z m-219.434666 3.626667a29.269333 29.269333 0 0 1 4.309333 58.197333l-4.266667 0.341334h-146.346666a29.269333 29.269333 0 0 1-4.266667-58.197334l4.266667-0.341333h146.346666zM743.68 299.946667a29.269333 29.269333 0 0 1 4.266667 58.197333l-4.266667 0.298667h-512a29.269333 29.269333 0 0 1-4.352-58.197334l4.352-0.298666h512z" fill="#ffffff" p-id="2769"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118877999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2952" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M779.008 56.064c14.72 0 26.88 10.837333 28.970667 24.96l0.298666 4.309333v692.181334c0 14.72-10.837333 26.88-24.917333 28.970666l-4.352 0.298667H229.632a29.269333 29.269333 0 0 1-4.352-58.197333l4.352-0.298667 520.106667-0.042667V114.56H170.666667c-29.013333 0-52.906667 22.101333-55.808 50.346667L114.602667 170.666667l-0.042667 689.962666H810.666667c29.013333 0 52.906667-22.058667 55.808-50.346666l0.256-5.717334V262.528a29.269333 29.269333 0 0 1 58.197333-4.309333l0.341333 4.309333v542.037333a114.602667 114.602667 0 0 1-107.349333 114.346667l-7.253333 0.256H85.333333a29.269333 29.269333 0 0 1-28.928-24.96l-0.341333-4.266667V170.666667A114.602667 114.602667 0 0 1 163.413333 56.32L170.666667 56.064h608.341333z m-236.544 219.434667c10.112 0 19.456 5.205333 24.832 13.738666l91.434667 146.304a29.269333 29.269333 0 0 1 0 31.018667l-91.434667 146.261333a29.269333 29.269333 0 0 1-24.832 13.781334H359.68a29.269333 29.269333 0 0 1-24.832-13.781334l-91.434667-146.261333a29.269333 29.269333 0 0 1 0-31.018667l91.434667-146.304a29.269333 29.269333 0 0 1 24.832-13.738666z m-16.213333 58.496H375.893333l-73.173333 117.034666 73.173333 117.034667h150.357334l73.173333-117.034667-73.173333-117.034666z" fill="#ffffff" p-id="2953"></path></svg>
...\ No newline at end of file ...\ No newline at end of file

6.3 KB | W: | H:

34.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -24,11 +24,13 @@ export default { ...@@ -24,11 +24,13 @@ export default {
24 <style lang="scss" scoped> 24 <style lang="scss" scoped>
25 .hasTagsView { 25 .hasTagsView {
26 .app-main { 26 .app-main {
27 height: calc(100% - 88px); 27 height: calc(100% - 48px);
28 overflow-x: auto; 28 overflow-x: auto;
29 padding: 15px; 29 padding: 15px;
30 box-sizing: border-box; 30 box-sizing: border-box;
31 background-color: #fefefe; 31 background-color: #EDF1F7;
32 box-sizing: border-box;
33
32 } 34 }
33 } 35 }
34 </style> 36 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="navbar"> 2 <div class="navbar">
3 <div class="logo">
4 <img v-if="logo" :src="logo" class="header-logo">
5 </div>
6 <div class="backdrop"></div>
3 <div class="right-menu"> 7 <div class="right-menu">
4 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand"> 8 <el-dropdown class="avatar-container right-menu-item hover-effect" @command="handleCommand">
5 <div class="avatar-wrapper"> 9 <div class="avatar-wrapper">
6 <span style="padding-right:10px">{{ name }}</span> 10 <span style="padding-right:10px">{{ name }}</span>
7 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> 11 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
...@@ -16,10 +20,16 @@ ...@@ -16,10 +20,16 @@
16 </template> 20 </template>
17 <script> 21 <script>
18 import { mapGetters } from 'vuex' 22 import { mapGetters } from 'vuex'
23 import logonImg from '@/image/logo.png'
19 export default { 24 export default {
20 computed: { 25 computed: {
21 ...mapGetters(['sidebar', 'avatar', 'name']) 26 ...mapGetters(['sidebar', 'avatar', 'name'])
22 }, 27 },
28 data () {
29 return {
30 logo: logonImg
31 }
32 },
23 methods: { 33 methods: {
24 searchMessageCenter () { 34 searchMessageCenter () {
25 this.$router.push({ name: 'messagecenter' }) 35 this.$router.push({ name: 'messagecenter' })
...@@ -75,11 +85,28 @@ export default { ...@@ -75,11 +85,28 @@ export default {
75 } 85 }
76 86
77 .navbar { 87 .navbar {
78 height: 40px; 88 height: $headerHeight;
79 overflow: hidden; 89 overflow: hidden;
80 position: relative; 90 position: relative;
81 background: #fff; 91 background: #fff;
92 background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%);
82 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); 93 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
94 display: flex;
95 align-items: center;
96 padding: 0 20px;
97 justify-content: space-between;
98
99 .header-logo {
100 width: 300px;
101 }
102
103 .backdrop {
104 flex: 1;
105 width: 60%;
106 background: url('../../image/backdrop.png');
107 background-size: 100% 100%;
108 height: $headerHeight;
109 }
83 110
84 .hamburger-container { 111 .hamburger-container {
85 line-height: 43px; 112 line-height: 43px;
...@@ -136,12 +163,14 @@ export default { ...@@ -136,12 +163,14 @@ export default {
136 padding: 0 8px; 163 padding: 0 8px;
137 height: 100%; 164 height: 100%;
138 font-size: 18px; 165 font-size: 18px;
139 color: #5a5e66; 166 color: #fff;
140 vertical-align: text-bottom; 167 vertical-align: text-bottom;
141 168
142 &.hover-effect { 169 &.hover-effect {
143 cursor: pointer; 170 cursor: pointer;
144 transition: background 0.3s; 171 transition: background 0.3s;
172 display: flex;
173 align-items: center;
145 174
146 &:hover { 175 &:hover {
147 background: rgba(0, 0, 0, 0.025); 176 background: rgba(0, 0, 0, 0.025);
...@@ -150,8 +179,6 @@ export default { ...@@ -150,8 +179,6 @@ export default {
150 } 179 }
151 180
152 .avatar-container { 181 .avatar-container {
153 margin-right: 20px;
154
155 .avatar-wrapper { 182 .avatar-wrapper {
156 position: relative; 183 position: relative;
157 display: flex; 184 display: flex;
......
1 <template> 1 <template>
2 <div class="app-wrapper"> 2 <div class="app-wrapper">
3 <sidebar class="sidebar-container" /> 3 <navbar />
4 <div :class="{ hasTagsView: needTagsView }" class="main-container"> 4 <div :class="{ hasTagsView: needTagsView }" class="main-container">
5 <div :class="{ 'fixed-header': fixedHeader }"> 5 <div :class="{ 'fixed-header': fixedHeader }">
6 <navbar /> 6 <sidebar class="sidebar-container" />
7 <tags-view v-if="needTagsView" /> 7 <tags-view v-if="needTagsView" />
8 </div> 8 </div>
9 <app-main /> 9 <app-main />
......
...@@ -88,7 +88,7 @@ export const asyncRoutes = [ ...@@ -88,7 +88,7 @@ export const asyncRoutes = [
88 id: '9', 88 id: '9',
89 parentId: null, 89 parentId: null,
90 component: Layout, 90 component: Layout,
91 meta: { title: '申请查询', icon: 'fykf' }, 91 meta: { title: '申请查询', icon: 'sqcx' },
92 redirect: '/sqcx/jtfc', 92 redirect: '/sqcx/jtfc',
93 alwaysShow: true, 93 alwaysShow: true,
94 name: 'sqcx', 94 name: 'sqcx',
...@@ -124,7 +124,7 @@ export const asyncRoutes = [ ...@@ -124,7 +124,7 @@ export const asyncRoutes = [
124 id: '13', 124 id: '13',
125 parentId: null, 125 parentId: null,
126 component: Layout, 126 component: Layout,
127 meta: { title: '综合查询', icon: 'fykf' }, 127 meta: { title: '综合查询', icon: 'zhcx' },
128 redirect: '/zhcx/jdcx', 128 redirect: '/zhcx/jdcx',
129 alwaysShow: true, 129 alwaysShow: true,
130 name: 'zhcx', 130 name: 'zhcx',
...@@ -160,7 +160,7 @@ export const asyncRoutes = [ ...@@ -160,7 +160,7 @@ export const asyncRoutes = [
160 id: '17', 160 id: '17',
161 parentId: null, 161 parentId: null,
162 component: Layout, 162 component: Layout,
163 meta: { title: '证书管理', icon: 'fykf' }, 163 meta: { title: '证书管理', icon: 'zsgl' },
164 redirect: '/zsgl/zsrk', 164 redirect: '/zsgl/zsrk',
165 alwaysShow: true, 165 alwaysShow: true,
166 name: 'zsgl', 166 name: 'zsgl',
...@@ -196,7 +196,7 @@ export const asyncRoutes = [ ...@@ -196,7 +196,7 @@ export const asyncRoutes = [
196 id: '21', 196 id: '21',
197 parentId: null, 197 parentId: null,
198 component: Layout, 198 component: Layout,
199 meta: { title: '系统管理', icon: 'fykf' }, 199 meta: { title: '系统管理', icon: 'system' },
200 redirect: '/system/dictionaries', 200 redirect: '/system/dictionaries',
201 alwaysShow: true, 201 alwaysShow: true,
202 name: 'system', 202 name: 'system',
......
1 //*****start*通用查询条件，列表样式******// 1 //*****start*通用查询条件，列表样式******//
2 .from-clues { 2 .from-clues {
3 padding: 10px;
4 background: #f7f7f7;
5 min-width: 1280px; 3 min-width: 1280px;
6 height: 100%; 4 height: 100%;
7 width: 100%; 5 width: 100%;
......
1 #app { 1 #app {
2 .main-container { 2 .main-container {
3 height: 100%; 3 height: calc(100% - 80px);
4 transition: margin-left 0.28s; 4 transition: margin-left 0.28s;
5 margin-left: $sideBarWidth; 5 margin-left: $sideBarWidth;
6 } 6 }
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
8 .sidebar-container { 8 .sidebar-container {
9 transition: width 0.28s; 9 transition: width 0.28s;
10 width: $sideBarWidth !important; 10 width: $sideBarWidth !important;
11 height: 100%; 11 height: calc(100% - $headerHeight);
12 position: fixed; 12 position: fixed;
13 font-size: 0px; 13 font-size: 0px;
14 top: 0; 14 top: $headerHeight;
15 bottom: 0; 15 bottom: 0;
16 left: 0; 16 left: 0;
17 z-index: 1001; 17 z-index: 1001;
...@@ -38,19 +38,11 @@ ...@@ -38,19 +38,11 @@
38 } 38 }
39 39
40 .el-scrollbar { 40 .el-scrollbar {
41 height: 100%;
42
43 &::-webkit-scrollbar { 41 &::-webkit-scrollbar {
44 display: none; 42 display: none;
45 } 43 }
46 } 44 }
47 45
48 &.has-logo {
49 .el-scrollbar {
50 height: calc(100% - 150px);
51 }
52 }
53
54 .is-horizontal { 46 .is-horizontal {
55 display: none; 47 display: none;
56 } 48 }
......
...@@ -8,10 +8,13 @@ $tiffany: #4AB7BD; ...@@ -8,10 +8,13 @@ $tiffany: #4AB7BD;
8 $yellow:#FEC171; 8 $yellow:#FEC171;
9 $panGreen: #30B08F; 9 $panGreen: #30B08F;
10 10
11 // header
12 $headerHeight: 80px;
13
11 // sidebar 14 // sidebar
12 $menuText:#ffffff; 15 $menuText:#ffffff;
13 $menuActiveText:#ffffff; 16 $menuActiveText:#ffffff;
14 $subMenuActiveText:#ffffff; // https://github.com/ElemeFE/element/issues/12951 17 $subMenuActiveText:#ffffff;
15 18
16 $menuBg:#202B3D; 19 $menuBg:#202B3D;
17 $menuHover:#0794FF; 20 $menuHover:#0794FF;
...@@ -38,4 +41,5 @@ $borderColor: #EBEEF5; ...@@ -38,4 +41,5 @@ $borderColor: #EBEEF5;
38 sideBarWidth: $sideBarWidth; 41 sideBarWidth: $sideBarWidth;
39 sideBarFontSize: $sideBarFontSize; 42 sideBarFontSize: $sideBarFontSize;
40 borderColor: $borderColor; 43 borderColor: $borderColor;
44 headerHeight: $headerHeight;
41 } 45 }
...\ No newline at end of file ...\ No newline at end of file
......