Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
e9a49a21 by 任超
Options

style:样式完成

1 parent 11853c3e
Inline Side-by-side
Showing 11 changed files with 30 additions and 65 deletions
1 <template> 1 <template>
2 <Echart :options="options" id="centreLeft1Chart" height="200px" width="95%"></Echart> 2 <Echart :options="options" id="centreLeft1Chart" height="200px" width="100%"></Echart>
3 </template> 3 </template>
4 <script> 4 <script>
5 import Echart from '@/common/echart' 5 import Echart from '@/common/echart'
...@@ -19,8 +19,8 @@ export default { ...@@ -19,8 +19,8 @@ export default {
19 this.options = { 19 this.options = {
20 grid: { 20 grid: {
21 // 让图表占满容器 21 // 让图表占满容器
22 top: "50%", 22 top: "60%",
23 right: '30%', 23 right: '0',
24 bottom: "0%", 24 bottom: "0%",
25 }, 25 },
26 color: [ 26 color: [
......
1 <template> 1 <template>
2 <!-- 柱状图 --> 2 <!-- 柱状图 -->
3 <Echart :options="options" id="bottomLeftChart" height="420px" width="100%"></Echart> 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
4 </template> 4 </template>
5 5
6 <script> 6 <script>
......
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
26 this.options = { 26 this.options = {
27 grid: { 27 grid: {
28 // 让图表占满容器 28 // 让图表占满容器
29 top: "12%", 29 top: "20%",
30 left: "15%", 30 left: "15%",
31 right: "10%", 31 right: "10%",
32 bottom: "26%", 32 bottom: "26%",
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route" 4 <sidebar-item v-for="route in permission_routes.slice(1, 4)" :key="route.path" :item="route"
5 :base-path="route.path" /> 5 :base-path="route.path" />
6 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <sidebar-item v-for="route in permission_routes.slice(5, 8)" :key="route.path" :item="route" 4 <sidebar-item v-for="route in permission_routes.slice(4, 7)" :key="route.path" :item="route"
5 :base-path="route.path" /> 5 :base-path="route.path" />
6 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
...@@ -27,7 +27,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -27,7 +27,7 @@ router.beforeEach(async (to, from, next) => {
27 if (routeTo && routeTo !== '/') { 27 if (routeTo && routeTo !== '/') {
28 next({ ...to, replace: true }) 28 next({ ...to, replace: true })
29 } else { 29 } else {
30 next('/jgHome') 30 next('/home')
31 } 31 }
32 } 32 }
33 NProgress.done() 33 NProgress.done()
......
...@@ -20,22 +20,17 @@ export const constantRoutes = [ ...@@ -20,22 +20,17 @@ export const constantRoutes = [
20 } 20 }
21 ] 21 ]
22 }, 22 },
23 {
24 path: '/dataView',
25 name: 'dataView',
26 component: () => import('@/views/dataView/index')
27 },
28 // 监管首页 23 // 监管首页
29 { 24 {
30 path: '/', 25 path: '/',
31 component: Layout, 26 component: Layout,
32 redirect: '/jgHome', 27 redirect: '/home',
33 meta: { title: '首页' }, 28 meta: { title: '首页' },
34 children: [ 29 children: [
35 { 30 {
36 path: 'jgHome', 31 path: 'home',
37 component: () => import('@/views/home/index'), 32 component: () => import('@/views/home/index'),
38 name: 'jgHome', 33 name: 'home',
39 meta: { title: '工作台', icon: 'workbench', affix: true } 34 meta: { title: '工作台', icon: 'workbench', affix: true }
40 } 35 }
41 ] 36 ]
......
...@@ -177,6 +177,7 @@ table th { ...@@ -177,6 +177,7 @@ table th {
177 } 177 }
178 178
179 table td { 179 table td {
180 box-sizing: border-box;
180 border-bottom: 8px solid rgba(0, 0, 0, 0.1) !important; 181 border-bottom: 8px solid rgba(0, 0, 0, 0.1) !important;
181 } 182 }
182 183
...@@ -187,12 +188,13 @@ table td { ...@@ -187,12 +188,13 @@ table td {
187 188
188 189
189 .el-table__body tr:hover { 190 .el-table__body tr:hover {
190 background: rgba(2, 160, 253, 0.1) !important; 191 background: rgba(2, 160, 253, 0.3) !important;
191 box-shadow: inset 0px 0px 18px 0px #02A0FD !important; 192 box-shadow: inset 0px 0px 18px 0px #02A0FD !important;
192 } 193 }
193 194
194 .el-table__body tr:hover>td.el-table__cell { 195 .el-table__body tr:hover>td {
195 background: none !important; 196 background: none !important;
197 border-bottom: 8px solid transparent !important;
196 } 198 }
197 199
198 // 表格样式 200 // 表格样式
......
...@@ -77,15 +77,14 @@ export default { ...@@ -77,15 +77,14 @@ export default {
77 <style lang="scss" scoped> 77 <style lang="scss" scoped>
78 .leftcard { 78 .leftcard {
79 width: 30%; 79 width: 30%;
80 height: 100%; 80 height: calc(100% -94px);
81 display: flex; 81 display: flex;
82 flex-direction: column; 82 flex-direction: column;
83
83 .card { 84 .card {
84 background: url("~@/image/homeLeftBg.png") no-repeat; 85 background: url("~@/image/homeLeftBg.png") no-repeat;
85 background-size: 100% 100%; 86 background-size: 100% 100%;
86 position: relative; 87 position: relative;
87 flex: 1;
88 height: 100%;
89 padding: 8px 0; 88 padding: 8px 0;
90 } 89 }
91 90
...@@ -94,6 +93,9 @@ export default { ...@@ -94,6 +93,9 @@ export default {
94 background-size: 100% 100%; 93 background-size: 100% 100%;
95 position: relative; 94 position: relative;
96 padding: 10px 0; 95 padding: 10px 0;
96 box-sizing: border-box;
97 flex: 1;
98 height: 100%;
97 } 99 }
98 100
99 .cardhead { 101 .cardhead {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="rightcard"> 2 <div class="rightcard">
3 <div class="card1 cardCon d-center"> 3 <div class="card1 cardCon d-center">
4 <div class="cardhead">房屋情况统计表</div> 4 <div class="cardhead">房屋情况统计表</div>
5 <div class="cardcontent" style="margin-top: 50px"> 5 <div class="cardcontent" style="margin-top: 70px">
6 <dv-scroll-board :config="config" class="board" /> 6 <dv-scroll-board :config="config" class="board" />
7 </div> 7 </div>
8 </div> 8 </div>
...@@ -51,7 +51,9 @@ export default { ...@@ -51,7 +51,9 @@ export default {
51 } 51 }
52 52
53 .rightcard { 53 .rightcard {
54 width: 30%;
54 display: flex; 55 display: flex;
56 height: calc(100% -94px);
55 flex-direction: column; 57 flex-direction: column;
56 58
57 .cardhead { 59 .cardhead {
...@@ -72,21 +74,21 @@ export default { ...@@ -72,21 +74,21 @@ export default {
72 } 74 }
73 75
74 .cardCon { 76 .cardCon {
75 padding: 20px 10px; 77 padding: 20px 5px;
76 position: relative; 78 position: relative;
77 text-align: center; 79 text-align: center;
78 width: 100%; 80 width: 100%;
79 } 81 }
80 82
81 .card1 { 83 .card1 {
82 height: 240px; 84 height: 200px;
83 background: url("~@/image/homeLeftBg.png") no-repeat; 85 background: url("~@/image/homeLeftBg.png") no-repeat;
84 background-size: 100% 100%; 86 background-size: 100% 100%;
85 87
86 .board { 88 .board {
87 width: 90%; 89 width: 90%;
88 margin: 0 auto; 90 margin: 0 auto;
89 height: 165px; 91 height: 135px;
90 margin-top: 40px; 92 margin-top: 40px;
91 } 93 }
92 } 94 }
...@@ -94,13 +96,15 @@ export default { ...@@ -94,13 +96,15 @@ export default {
94 .card2 { 96 .card2 {
95 background: url("~@/image/djywl.png") no-repeat; 97 background: url("~@/image/djywl.png") no-repeat;
96 background-size: 100% 100%; 98 background-size: 100% 100%;
97 padding: 70px 0 20px 0; 99 padding: 50px 0 15px 0;
98 } 100 }
99 101
100 .card3 { 102 .card3 {
101 height: 170px; 103 flex: 1;
104 height: 100%;
102 background: url("~@/image/lxzl.png") no-repeat; 105 background: url("~@/image/lxzl.png") no-repeat;
103 background-size: 100% 100%; 106 background-size: 100% 100%;
107 padding-bottom: 0;
104 } 108 }
105 109
106 .cardhead { 110 .cardhead {
......
...@@ -46,43 +46,5 @@ export default { ...@@ -46,43 +46,5 @@ export default {
46 margin: auto; 46 margin: auto;
47 display: flex; 47 display: flex;
48 justify-content: space-between; 48 justify-content: space-between;
49 .centercard {
50 width: 40%;
51
52 .card1 {
53 width: 100%;
54 box-sizing: border-box;
55 background-size: 100% 100%;
56 }
57
58 .card2 {
59 width: 100%;
60 box-sizing: border-box;
61 background-size: 100% 100%;
62 }
63 }
64
65 .rightcard {
66 width: 30%;
67 height: 100%;
68
69 .card1 {
70 width: 100%;
71 box-sizing: border-box;
72 background-size: 100% 100%;
73 }
74
75 .card2 {
76 width: 100%;
77 box-sizing: border-box;
78 background-size: 100% 100%;
79 }
80
81 .card3 {
82 width: 100%;
83 box-sizing: border-box;
84 background-size: 100% 100%;
85 }
86 }
87 } 49 }
88 </style> 50 </style>
......