Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
270872d8 by 任超
Options

style;首页样式修改

1 parent e64a60ba
Inline Side-by-side
Showing 4 changed files with 204 additions and 66 deletions
...@@ -74,4 +74,4 @@ ...@@ -74,4 +74,4 @@
74 "type": "git", 74 "type": "git",
75 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" 75 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
76 } 76 }
77 } 77 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -43,18 +43,6 @@ class data extends filter { ...@@ -43,18 +43,6 @@ class data extends filter {
43 { 43 {
44 prop: "jrdf", 44 prop: "jrdf",
45 label: "接入得分", 45 label: "接入得分",
46 },
47 {
48 prop: "jrdf",
49 label: "未上传登薄日志区县",
50 },
51 {
52 prop: "jrdf",
53 label: "登薄日志得分",
54 },
55 {
56 prop: "jrdf",
57 label: "总评分",
58 } 46 }
59 ] 47 ]
60 } 48 }
......
...@@ -8,11 +8,23 @@ ...@@ -8,11 +8,23 @@
8 &-left { 8 &-left {
9 width: 40%; 9 width: 40%;
10 padding-top: 25px; 10 padding-top: 25px;
11 background-color: #000637;
12 color: #02D9FD;
11 } 13 }
12 14
13 &-right { 15 &-right {
14 width: 59.5%; 16 width: 59.5%;
15 17
18 .jrgk {
19 background-color: #000637;
20 color: #02D9FD;
21
22 .header {
23 text-align: center;
24 line-height: 36px;
25 }
26 }
27
16 .gkList { 28 .gkList {
17 @include flex-center; 29 @include flex-center;
18 flex-direction: column; 30 flex-direction: column;
...@@ -23,13 +35,46 @@ ...@@ -23,13 +35,46 @@
23 } 35 }
24 } 36 }
25 37
38 .jrl {
39 margin-top: 20px;
40 text-align: center;
41
42 li {
43 color: #E3F1FF;
44 }
45 }
46
47 // 日均接入量
48 .jrlList {
49 display: flex;
50 align-items: center;
51 justify-content: center;
52
53 p {
54 width: 24px;
55 height: 36px;
56 font-size: 30px;
57 display: flex;
58 align-items: center;
59 justify-content: center;
60 font-weight: 700;
61 }
62 }
63
26 .jrdgk { 64 .jrdgk {
27 display: flex; 65 display: flex;
28 margin-top: 5px; 66 margin-top: 5px;
29 justify-content: space-between; 67 justify-content: space-between;
30 68
31 .box-card { 69 .sxsjr {
32 width: 49.5%; 70 background-color: #000637;
71 width: 49%;
72
73 .header {
74 text-align: center;
75 color: #02D9FD;
76 line-height: 30px;
77 }
33 } 78 }
34 } 79 }
35 80
...@@ -39,46 +84,90 @@ ...@@ -39,46 +84,90 @@
39 flex-direction: column; 84 flex-direction: column;
40 85
41 li:nth-child(1) { 86 li:nth-child(1) {
42 color: #409EFF; 87 font-size: 30px;
43 font-size: 24px; 88 width: 50px;
89 height: 50px;
90 background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
91 border-radius: 2px;
92 color: #E3F1FF;
93 display: flex;
94 align-items: center;
95 justify-content: center;
96 margin: 10px 0;
97 }
98
99 li:nth-child(2) {
100 color: #FFFFFF;
101 font-size: 14px;
44 } 102 }
45 } 103 }
46 } 104 }
47 105
48 .jrdList:nth-of-type(2) { 106 .jrdList:nth-of-type(2) {
49 li:nth-child(1) { 107 li:nth-child(1) {
50 color: #67C23A; 108 background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
51 } 109 }
52 } 110 }
53 111
54 .jrdList:nth-of-type(3) { 112 .jrdList:nth-of-type(3) {
55 li:nth-child(1) { 113 li:nth-child(1) {
56 color: #F56C6C; 114 background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
57 } 115 }
58 } 116 }
59 } 117 }
60 118
119 // 上报情况概括
120 .sbqkgk {
121 text-align: center;
122 color: #02D9FD;
123 line-height: 30px;
124 width: 50%;
125 background-color: #000637;
126 }
127
61 .sbqkgs { 128 .sbqkgs {
62 display: flex;
63 justify-content: space-between;
64 width: 100%; 129 width: 100%;
65 130
66 li { 131 .header {
67 font-size: 24px; 132 text-align: center;
133 line-height: 36px;
68 } 134 }
69 135
70 li:nth-child(2) { 136 .sbqkgsList {
71 color: #409EFF; 137 display: flex;
72 margin-left: 25px; 138 justify-content: center;
139 font-size: 50px;
140 margin: 20px 0 10px 0;
141 color: #E3F1FF;
142 font-weight: 700;
143 }
144
145 .active {
146 width: 31px;
147 height: 46px;
148 background: #054AE9;
149 display: flex;
150 align-items: center;
151 justify-content: center;
152 border-radius: 3px 1px 3px 1px;
153 margin: 0 3px;
154 }
155
156 li {
157 font-size: 16px;
158 text-align: center;
159 color: #E3F1FF;
73 } 160 }
74 } 161 }
75 162
76 .jrxxlb { 163 .jrxxlb {
77 margin-top: 5px; 164 margin-top: 5px;
165 background-color: #000637;
78 166
79 .title { 167 .title {
80 text-align: center; 168 text-align: center;
81 line-height: 36px; 169 line-height: 36px;
170 color: #02D9FD;
82 } 171 }
83 } 172 }
84 } 173 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 <el-card class="home-left"> 3 <div class="home-left">
4 <!-- 地图 --> 4 <!-- 地图 -->
5 <wgsl></wgsl> 5 <wgsl></wgsl>
6 </el-card> 6 </div>
7 <div class="home-right"> 7 <div class="home-right">
8 <!-- 陕西省接入概括 --> 8 <!-- 陕西省接入概括 -->
9 <el-card> 9 <div class="jrgk">
10 <div slot="header"> 10 <div class="header">
11 陕西省接入概括 11 陕西省接入概括
12 </div> 12 </div>
13 <!-- 陕西省接入概括列表 --> 13 <!-- 陕西省接入概括列表 -->
14 <el-row :gutter="20"> 14 <el-row>
15 <el-col :span="6" v-for="(item, index) in gkList" :key="index"> 15 <el-col :span="6">
16 <ul class="gkList"> 16 <ul class="gkList">
17 <li>{{ item.value }}</li> 17 <li>总数量</li>
18 <li>{{ item.title }}</li> 18 <dv-digital-flop :config="config" style="height:70px;" />
19 </ul>
20 </el-col>
21 <el-col :span="6">
22 <ul class="jrl">
23 <div class="jrlList jrllsit1">
24 <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
25 </div>
26 <li>日均接入量</li>
27 </ul>
28 </el-col>
29 <el-col :span="6">
30 <ul class="jrl">
31 <div class="jrlList jrllsit2">
32 <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
33 </div>
34 <li>日均接入量</li>
35 </ul>
36 </el-col>
37 <el-col :span="6">
38 <ul class="jrl">
39 <div class="jrlList jrllsit3">
40 <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
41 </div>
42 <li>总体质量</li>
19 </ul> 43 </ul>
20 </el-col> 44 </el-col>
21 </el-row> 45 </el-row>
22 </el-card> 46 </div>
23 <div class="jrdgk"> 47 <div class="jrdgk">
24 <!-- 接入点概括 --> 48 <!-- 接入点概括 -->
25 <el-card class="box-card"> 49 <div class="sxsjr">
26 <div slot="header"> 50 <div class="header">
27 接入点概括 51 接入点概括
28 </div> 52 </div>
29 <el-row :gutter="20"> 53 <el-row>
30 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index"> 54 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
31 <ul> 55 <ul>
32 <li>{{ item.value }}</li> 56 <li>{{ item.value }}</li>
...@@ -34,25 +58,30 @@ ...@@ -34,25 +58,30 @@
34 </ul> 58 </ul>
35 </el-col> 59 </el-col>
36 </el-row> 60 </el-row>
37 </el-card> 61 </div>
38 <!-- 上报情况概括 --> 62 <!-- 上报情况概括 -->
39 <el-card class="box-card"> 63 <div class="sbqkgk">
40 <div slot="header"> 64 <div class="header">
41 上报情况概括 65 上报情况概括
42 </div> 66 </div>
43 <ul class="sbqkgs"> 67 <ul class="sbqkgs">
68 <div class="sbqkgsList">
69 <p v-for="(item, index) in sbqkgsList" :key="index"
70 :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
71 {{ item }}
72 </p>
73 </div>
44 <li>总数量</li> 74 <li>总数量</li>
45 <li>99999</li>
46 </ul> 75 </ul>
47 </el-card> 76 </div>
48 </div> 77 </div>
49 <!-- 底部表格 --> 78 <!-- 底部表格 -->
50 <el-card class="jrxxlb"> 79 <div class="jrxxlb">
51 <div class="title">陕西省平台接入情况</div> 80 <div class="title">陕西省平台接入情况</div>
52 <!-- 陕西省平台接入情况table --> 81 <!-- 陕西省平台接入情况table -->
53 <lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data"> 82 <lb-table ref="table" :pagination="false" :heightNum="408" :column="tableData.columns" :data="tableData.data">
54 </lb-table> 83 </lb-table>
55 </el-card> 84 </div>
56 </div> 85 </div>
57 </div> 86 </div>
58 </template> 87 </template>
...@@ -66,26 +95,32 @@ export default { ...@@ -66,26 +95,32 @@ export default {
66 name: "home", 95 name: "home",
67 components: { wgsl }, 96 components: { wgsl },
68 data () { 97 data () {
98 function formatter (number) {
99 const numbers = number.toString().split('').reverse()
100 const segs = []
101 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
102 return segs.join(',').split('').reverse().join('')
103 }
69 return { 104 return {
70 // 陕西省接入概括 105 // 总数量
71 gkList: [ 106 config: {
72 { 107 number: [6523],
73 value: 6269, 108 content: '{nt}',
74 title: '总数量' 109 formatter,
75 }, 110 style: {
76 { 111 fontSize: 50,
77 value: 300, 112 fontWeight: 700,
78 title: '日均接入量' 113 fill: '#FFDD00'
79 },
80 {
81 value: 0,
82 title: '当天接入量'
83 },
84 {
85 value: 3620,
86 title: '总体质量'
87 } 114 }
88 ], 115 },
116 // 日均接入量
117 jjrl: 300,
118 // 当天接入量
119 dtjrl: 100,
120 // 总体质量
121 ztzl: 3620,
122 // 上报情况概括
123 sbqkgs: 6296,
89 // 接入点概括 124 // 接入点概括
90 jrdList: [ 125 jrdList: [
91 { 126 {
...@@ -106,11 +141,37 @@ export default { ...@@ -106,11 +141,37 @@ export default {
106 // 表格头部信息 141 // 表格头部信息
107 columns: data.columns(), 142 columns: data.columns(),
108 // 表格列表数据 143 // 表格列表数据
109 data: [{}] 144 data: [{
145 xzqmc: '咸阳市',
146 xzqzs: 100,
147 jrl: 300,
148 jscgl: 20,
149 dk: 60,
150 wjrqx: '长安县',
151 jrdf: 50
152 }]
110 } 153 }
111 } 154 }
112 }, 155 },
113 methods: {} 156 computed: {
157 jrlList: function () {
158 return this.jjrl.toString().split('')
159 },
160 dtjrlList: function () {
161 return this.dtjrl.toString().split('')
162 },
163 ztzlList: function () {
164 return this.ztzl.toString().split('')
165 },
166 sbqkgsList: function () {
167 const numbers = this.sbqkgs.toString().split('').reverse()
168 const segs = []
169 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
170 return segs.join(',').split('').reverse().join('')
171 }
172 },
173 methods: {
174 }
114 } 175 }
115 </script> 176 </script>
116 <style scoped lang="scss"> 177 <style scoped lang="scss">
......