Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
242cd2e2 by 任超
Options

style:首页完成

1 parent e1f0d80d
Inline Side-by-side
Showing 18 changed files with 212 additions and 236 deletions
1 <template> 1 <template>
2 <div>
3 <!-- 折线图 --> 2 <!-- 折线图 -->
4 <Echart 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template> 4 </template>
12 5
13 <script> 6 <script>
14 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
15 export default { 8 export default {
16 data() { 9 data () {
17 return { 10 return {
18 11 xAxisData: {},
19 xAxisData:{}, 12 yAxisData1: {},
20 yAxisData1:{}, 13 yAxisData2: {},
21 yAxisData2:{}, 14 yAxisData3: {},
22 yAxisData3:{},
23 options: {}, 15 options: {},
24 }; 16 };
25 }, 17 },
...@@ -46,29 +38,25 @@ export default { ...@@ -46,29 +38,25 @@ export default {
46 }, 38 },
47 watch: { 39 watch: {
48 cdata: { 40 cdata: {
49 handler(newData) { 41 handler (newData) {
50 this.xAxisData = newData.echartData.map(v => v.name); 42 this.xAxisData = newData.echartData.map(v => v.name);
51 //  ["1", "2", "3", "4", "5", "6", "7", "8"] 43 this.yAxisData1 = newData.echartData.map(v => v.value1);
52 this.yAxisData1 = newData.echartData.map(v => v.value1); 44 this.yAxisData2 = newData.echartData.map(v => v.value2);
53 // [100, 138, 350, 173, 180, 150, 180, 230] 45 this.yAxisData3 = newData.echartData.map(v => v.value3);
54 this.yAxisData2 = newData.echartData.map(v => v.value2);
55 // [233, 233, 200, 180, 199, 233, 210, 180]
56 this.yAxisData3 = newData.echartData.map(v => v.value3);
57 //[133,133,100,80,99,133,110,80]
58 this.options = { 46 this.options = {
59 color: newData.color, 47 color: newData.color,
60 legend: { 48 legend: {
61 center: true, 49 center: true,
62 top: 10, 50 top: '20%',
63 data: newData.legendItem, 51 data: newData.legendItem,
64 textStyle: { 52 textStyle: {
65 color: '#00DEFF', 53 color: '#00DEFF'
66 }, 54 }
67 }, 55 },
68 // calculable: true, 56 // calculable: true,
69 tooltip: { 57 tooltip: {
70 trigger: "axis", 58 trigger: "axis",
71 formatter: function(params) { 59 formatter: function (params) {
72 let html = ''; 60 let html = '';
73 params.forEach(v => { 61 params.forEach(v => {
74 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> 62 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
...@@ -77,9 +65,6 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -77,9 +65,6 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
77 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span> 65 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
78 个`; 66 个`;
79 }) 67 })
80
81
82
83 return html 68 return html
84 }, 69 },
85 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;', 70 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
...@@ -90,7 +75,7 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -90,7 +75,7 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
90 // containLabel: true 75 // containLabel: true
91 // }, 76 // },
92 grid: { 77 grid: {
93 top: "20%", 78 top: "30%",
94 left: "3%", 79 left: "3%",
95 right: "6%", 80 right: "6%",
96 bottom: "8%", 81 bottom: "8%",
...@@ -98,14 +83,10 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -98,14 +83,10 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
98 }, 83 },
99 xAxis: [{ 84 xAxis: [{
100 type: 'category', 85 type: 'category',
101 axisTick: {
102 show: false
103 },
104 axisLine: { 86 axisLine: {
105 show: true, 87 show: true,
106 lineStyle: { 88 lineStyle: {
107 type: "dashed", 89 color: "#458ACF"
108 color: "rgba(255, 255, 255,0.5)"
109 } 90 }
110 }, 91 },
111 axisLabel: { 92 axisLabel: {
...@@ -117,7 +98,6 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -117,7 +98,6 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
117 lineHeight: 22 98 lineHeight: 22
118 } 99 }
119 }, 100 },
120
121 data: this.xAxisData 101 data: this.xAxisData
122 }], 102 }],
123 yAxis: [{ 103 yAxis: [{
...@@ -128,17 +108,15 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -128,17 +108,15 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
128 } 108 }
129 }, 109 },
130 splitLine: { 110 splitLine: {
131 show: false, 111 show: true,
132 lineStyle: { 112 lineStyle: {
133 type: "dashed", 113 color: "#458ACF"
134 color: "rgba(255, 255, 255,0.5)"
135 } 114 }
136 }, 115 },
137 axisLine: { 116 axisLine: {
138 show: true, 117 show: true,
139 lineStyle: { 118 lineStyle: {
140 type: "dashed", 119 color: "#458ACF"
141 color: "rgba(255, 255, 255,0.5)"
142 } 120 }
143 }, 121 },
144 axisTick: { 122 axisTick: {
...@@ -148,8 +126,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -148,8 +126,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
148 series: [{ 126 series: [{
149 name: newData.legendItem[0], 127 name: newData.legendItem[0],
150 type: "line", 128 type: "line",
151 smooth: false, //是否平滑 129 smooth: true, //是否平滑
152 // showSymbol: false,/ 130 showSymbol: false,
153 symbolSize: 6, 131 symbolSize: 6,
154 zlevel: 3, 132 zlevel: 3,
155 lineStyle: { 133 lineStyle: {
...@@ -164,8 +142,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -164,8 +142,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
164 }, { 142 }, {
165 name: newData.legendItem[1], 143 name: newData.legendItem[1],
166 type: "line", 144 type: "line",
167 smooth: false, 145 smooth: true,
168 // showSymbol: false, 146 showSymbol: false,
169 symbolSize: 8, 147 symbolSize: 8,
170 zlevel: 3, 148 zlevel: 3,
171 lineStyle: { 149 lineStyle: {
...@@ -181,8 +159,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -181,8 +159,8 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
181 { 159 {
182 name: newData.legendItem[2], 160 name: newData.legendItem[2],
183 type: "line", 161 type: "line",
184 smooth: false, 162 smooth: true,
185 // showSymbol: false, 163 showSymbol: false,
186 symbolSize: 8, 164 symbolSize: 8,
187 zlevel: 3, 165 zlevel: 3,
188 lineStyle: { 166 lineStyle: {
...@@ -196,7 +174,7 @@ this.yAxisData3 = newData.echartData.map(v => v.value3); ...@@ -196,7 +174,7 @@ this.yAxisData3 = newData.echartData.map(v => v.value3);
196 data: this.yAxisData3 174 data: this.yAxisData3
197 } 175 }
198 ] 176 ]
199 }; 177 };
200 }, 178 },
201 immediate: true, 179 immediate: true,
202 deep: true, 180 deep: true,
......
1 <template> 1 <template>
2 <div> 2 <Chart :cdata="cdata" />
3 <Chart :cdata="cdata"/>
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
...@@ -10,13 +8,13 @@ export default { ...@@ -10,13 +8,13 @@ export default {
10 data () { 8 data () {
11 return { 9 return {
12 cdata: { 10 cdata: {
13 legendItem :['接入','上报','登簿'], 11 legendItem: ['接入', '上报', '登簿'],
14 color : [ 12 color: [
15 "#0090FF", 13 "#5324DA",
16 "#EE8931", 14 "#E873B2",
17 "#8B5CFF" 15 "#F4AF6F "
18 ], 16 ],
19 echartData :[{ 17 echartData: [{
20 name: "2017-11", 18 name: "2017-11",
21 value1: 1351, 19 value1: 1351,
22 value2: 600, 20 value2: 600,
...@@ -82,27 +80,12 @@ export default { ...@@ -82,27 +80,12 @@ export default {
82 value2: 839, 80 value2: 839,
83 value3: 886, 81 value3: 886,
84 }, 82 },
85 { 83 ]
86 name: "2019-05",
87 value1: 973,
88 value2: 816,
89 value3: 791,
90 } 84 }
91 ],
92
93 } 85 }
94 };
95 }, 86 },
96 components: { 87 components: {
97 Chart, 88 Chart
98 },
99 mounted () {
100
101 },
102 methods: {
103
104 } 89 }
105 }; 90 }
106 </script> 91 </script>
...\ No newline at end of file ...\ No newline at end of file
107
108 <style lang="scss" scoped></style>
......
1 <template> 1 <template>
2 <div> 2 <Echart :options="options" id="centreLeft1Chart" height="200px" width="95%"></Echart>
3 <Echart :options="options" id="centreLeft1Chart" height="220px" width="100%"></Echart>
4 </div>
5 </template> 3 </template>
6
7 <script> 4 <script>
8 import Echart from '@/common/echart' 5 import Echart from '@/common/echart'
9 export default { 6 export default {
10 data () {
11 return {
12 options: {},
13 };
14 },
15 components: { 7 components: {
16 Echart, 8 Echart,
17 }, 9 },
...@@ -27,9 +19,8 @@ export default { ...@@ -27,9 +19,8 @@ export default {
27 this.options = { 19 this.options = {
28 grid: { 20 grid: {
29 // 让图表占满容器 21 // 让图表占满容器
30 top: "0%", 22 top: "50%",
31 left: "10%", 23 right: '30%',
32 right: "40%",
33 bottom: "0%", 24 bottom: "0%",
34 }, 25 },
35 color: [ 26 color: [
...@@ -50,7 +41,6 @@ export default { ...@@ -50,7 +41,6 @@ export default {
50 show: true 41 show: true
51 }, 42 },
52 calculable: true, 43 calculable: true,
53
54 series: [ 44 series: [
55 { 45 {
56 name: "业务量", 46 name: "业务量",
...@@ -70,5 +60,7 @@ export default { ...@@ -70,5 +60,7 @@ export default {
70 </script> 60 </script>
71 61
72 <style lang="scss" scoped> 62 <style lang="scss" scoped>
73 63 #centreLeft1Chart {
64 margin-left: -20px;
65 }
74 </style> 66 </style>
......
...@@ -52,5 +52,7 @@ export default { ...@@ -52,5 +52,7 @@ export default {
52 text-align: center; 52 text-align: center;
53 border-radius: 6px; 53 border-radius: 6px;
54 font-weight: 600; 54 font-weight: 600;
55 color: #02D9FD;
56 margin-top: 20px;
55 } 57 }
56 </style> 58 </style>
......
1 <template> 1 <template>
2 <div>
3 <!-- 柱状图 --> 2 <!-- 柱状图 -->
4 <Echart 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template> 4 </template>
12 5
13 <script> 6 <script>
14 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
15 export default { 8 export default {
16 data() { 9 data () {
17 return { 10 return {
18 options: {}, 11 options: {},
19 }; 12 };
...@@ -29,8 +22,8 @@ export default { ...@@ -29,8 +22,8 @@ export default {
29 }, 22 },
30 watch: { 23 watch: {
31 cdata: { 24 cdata: {
32 handler(newData) { 25 handler (newData) {
33 this.options ={ 26 this.options = {
34 grid: { 27 grid: {
35 // 让图表占满容器 28 // 让图表占满容器
36 top: "12%", 29 top: "12%",
...@@ -124,7 +117,7 @@ export default { ...@@ -124,7 +117,7 @@ export default {
124 data: newData.lineData, 117 data: newData.lineData,
125 }, 118 },
126 ], 119 ],
127 } 120 }
128 }, 121 },
129 immediate: true, 122 immediate: true,
130 deep: true, 123 deep: true,
......
1 <template> 1 <template>
2 <div>
3 <Chart :cdata="cdata" /> 2 <Chart :cdata="cdata" />
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
...@@ -48,4 +46,5 @@ export default { ...@@ -48,4 +46,5 @@ export default {
48 </script> 46 </script>
49 47
50 <style lang="scss" scoped> 48 <style lang="scss" scoped>
49
51 </style> 50 </style>
......
1 <template> 1 <template>
2 <div>
3 <!-- 地图 --> 2 <!-- 地图 -->
4 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px" 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="470px"
5 :options="options"></Echart> 4 :options="options"></Echart>
6 </div>
7 </template> 5 </template>
8 6
9 <script> 7 <script>
...@@ -111,8 +109,8 @@ export default { ...@@ -111,8 +109,8 @@ export default {
111 visualMap: { 109 visualMap: {
112 min: 0, 110 min: 0,
113 max: _this.max, 111 max: _this.max,
114 top: "bottom", 112 bottom: '2%',
115 right: 10, 113 right: 30,
116 splitNumber: 6, 114 splitNumber: 6,
117 seriesIndex: [0], 115 seriesIndex: [0],
118 itemWidth: 20, // 每个图元的宽度 116 itemWidth: 20, // 每个图元的宽度
...@@ -133,7 +131,7 @@ export default { ...@@ -133,7 +131,7 @@ export default {
133 aspectScale: 1, //长宽比 131 aspectScale: 1, //长宽比
134 zoom: 1.1, 132 zoom: 1.1,
135 mapType: '汉中市', // 自定义扩展图表类型 133 mapType: '汉中市', // 自定义扩展图表类型
136 top: '20%', 134 top: '15%',
137 left: '10%', 135 left: '10%',
138 itemStyle: { 136 itemStyle: {
139 normal: { 137 normal: {
......
1 <template> 1 <template>
2 <div>
3 <Chart :cdata="cdata" /> 2 <Chart :cdata="cdata" />
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
......
1 <template> 1 <template>
2 <div class="centercard"> 2 <div class="centercard">
3 <div class="card1 bg-shadow"> 3 <div class="card1">
4 <div class="title">陕西省不动产接入信息</div>
4 <maps class="map" /> 5 <maps class="map" />
5 </div> 6 </div>
6 <div class="card2 bg-shadow"> 7 <div class="card2 mt-10">
7 <Brokenline class="Brokenline" /> 8 <div class="title">数据趋势</div>
9 <brokenline class="Brokenline" />
8 </div> 10 </div>
9 </div> 11 </div>
10 </template> 12 </template>
11 13
12 <script> 14 <script>
13 import maps from "@/components/echart/map"; 15 import maps from "@/components/echart/map";
14 import Brokenline from "@/components/echart/Brokenline"; 16 import brokenline from "@/components/echart/brokenline";
15 export default { 17 export default {
16 data () { 18 data () {
17 return {}; 19 return {};
18 }, 20 },
19 components: { maps, Brokenline }, 21 components: { maps, brokenline },
20 mounted () { }, 22 mounted () { },
21 beforeDestroy () { }, 23 beforeDestroy () { },
22 methods: {}, 24 methods: {},
...@@ -26,26 +28,60 @@ export default { ...@@ -26,26 +28,60 @@ export default {
26 <style lang="scss" scoped> 28 <style lang="scss" scoped>
27 .centercard { 29 .centercard {
28 width: 48%; 30 width: 48%;
29 height: 100%; 31 height: calc(100vh - 114px);
32 box-sizing: border-box;
33 padding: 0 10px;
34 display: flex;
35 flex-direction: column;
30 36
31 .card1 { 37 .card1 {
32 width: 100%; 38 width: 100%;
33 height: 600px; 39 background: url("~@/image/mapcenter.png") no-repeat;
40 background-size: 100% 100%;
41 position: relative;
42 height: 470px;
34 43
35 .map { 44 .title {
36 margin: auto; 45 position: absolute;
37 width: 95%; 46 font-weight: bold;
38 height: 600px; 47 color: #02D9FD;
48 line-height: 26px;
49 font-size: 22px;
50 position: absolute;
51 left: 0;
52 right: 0;
53 top: 9px;
54 text-align: right;
55 padding-right: 15%;
39 } 56 }
40 } 57 }
41 58
42 .card2 { 59 .card2 {
43 width: 100%; 60 width: 100%;
61 background: url("~@/image/sjqs.png") no-repeat;
62 background-size: 100% 100%;
63 position: relative;
64 flex: 1;
65 height: 100%;
66 width: 100%;
67
68 .title {
69 position: absolute;
70 font-weight: bold;
71 color: #02D9FD;
72 line-height: 26px;
73 font-size: 22px;
74 position: absolute;
75 left: 0;
76 right: 0;
77 top: 9px;
78 text-align: center;
79 margin-bottom: 10px;
80 }
44 81
45 .Brokenline { 82 .Brokenline {
46 margin: auto; 83 margin: auto;
47 width: 100%; 84 width: 100%;
48 height: 300px;
49 } 85 }
50 } 86 }
51 } 87 }
......
...@@ -5,18 +5,18 @@ ...@@ -5,18 +5,18 @@
5 <div class="cardcontent"> 5 <div class="cardcontent">
6 <ul class="cardcontent-left d-center"> 6 <ul class="cardcontent-left d-center">
7 <div class="rjjrlList"> 7 <div class="rjjrlList">
8 <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> 8 <p v-for="(item, index) in rjjrlList" class="d-center qxjr" :key="index">{{ item }}</p>
9 </div> 9 </div>
10 <li>日均接入量</li> 10 <li>日均接入量</li>
11 </ul> 11 </ul>
12 <div class="cardcontent-right d-center"> 12 <div class="cardcontent-right d-center">
13 <p> 13 <p>
14 <span>失败</span> 14 <span>失败</span>
15 <span>0</span> 15 <span class="bad">0</span>
16 </p> 16 </p>
17 <p> 17 <p>
18 <span>成功率</span> 18 <span>成功率</span>
19 <span>99%</span> 19 <span class="cg">99%</span>
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
...@@ -26,18 +26,18 @@ ...@@ -26,18 +26,18 @@
26 <div class="cardcontent"> 26 <div class="cardcontent">
27 <ul class="cardcontent-left d-center"> 27 <ul class="cardcontent-left d-center">
28 <div class="rjjrlList"> 28 <div class="rjjrlList">
29 <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> 29 <p v-for="(item, index) in rjjrlList" class="d-center sthj" :key="index">{{ item }}</p>
30 </div> 30 </div>
31 <li>日均接入量</li> 31 <li>日均接入量</li>
32 </ul> 32 </ul>
33 <div class="cardcontent-right d-center"> 33 <div class="cardcontent-right d-center">
34 <p> 34 <p>
35 <span>失败</span> 35 <span>失败</span>
36 <span>0</span> 36 <span class="bad">0</span>
37 </p> 37 </p>
38 <p> 38 <p>
39 <span>成功率</span> 39 <span>成功率</span>
40 <span>99%</span> 40 <span class="cg">99%</span>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
...@@ -78,17 +78,22 @@ export default { ...@@ -78,17 +78,22 @@ export default {
78 .leftcard { 78 .leftcard {
79 width: 30%; 79 width: 30%;
80 height: 100%; 80 height: 100%;
81 81 display: flex;
82 flex-direction: column;
82 .card { 83 .card {
83 background: url("~@/image/homeLeftBg.png") no-repeat; 84 background: url("~@/image/homeLeftBg.png") no-repeat;
84 background-size: 100% 100%; 85 background-size: 100% 100%;
85 position: relative; 86 position: relative;
87 flex: 1;
88 height: 100%;
89 padding: 8px 0;
86 } 90 }
87 91
88 .card1 { 92 .card1 {
89 background: url("~@/image/qxsj.png") no-repeat; 93 background: url("~@/image/qxsj.png") no-repeat;
90 background-size: 100% 100%; 94 background-size: 100% 100%;
91 position: relative; 95 position: relative;
96 padding: 10px 0;
92 } 97 }
93 98
94 .cardhead { 99 .cardhead {
...@@ -107,25 +112,33 @@ export default { ...@@ -107,25 +112,33 @@ export default {
107 112
108 .rjjrlList { 113 .rjjrlList {
109 display: flex; 114 display: flex;
115 margin-top: 15px;
110 116
111 p { 117 .qxjr {
112 background: url('~@/image/jrl3.png'); 118 background: url('~@/image/jrl3.png');
119 }
120
121 .sthj {
122 background: url('~@/image/jh.png');
123 }
124
125 p {
113 margin: 0 3px 10px 3px; 126 margin: 0 3px 10px 3px;
114 font-weight: 700; 127 font-weight: 700;
115 width: 24px; 128 width: 24px;
116 height: 36px; 129 height: 36px;
117 font-size: 30px; 130 font-size: 30px;
118 font-size: 30px; 131 font-size: 32px;
119 } 132 }
120 } 133 }
121 134
122 .cardcontent { 135 .cardcontent {
123 width: 100%; 136 width: 100%;
124 height: 160px; 137 height: 100%;
125 display: flex; 138 display: flex;
126 padding: 35px 20px 20px 20px; 139 padding: 35px 20px 20px 20px;
127 box-sizing: border-box; 140 box-sizing: border-box;
128 color: #FFFFFF; 141 color: #E3F1FF;
129 142
130 .cardcontent-left { 143 .cardcontent-left {
131 width: 60%; 144 width: 60%;
...@@ -147,9 +160,28 @@ export default { ...@@ -147,9 +160,28 @@ export default {
147 flex: 1; 160 flex: 1;
148 width: 100%; 161 width: 100%;
149 flex-direction: column; 162 flex-direction: column;
163 font-size: 16px;
164
165 .bad {
166 color: #C97168;
167 }
168
169 .cg {
170 color: #5FBA7D;
171 }
172
173 p {
174 margin-bottom: 8px;
175
176 span:nth-child(1) {
177 margin-right: 15px;
178 }
150 179
151 p:nth-child(1) { 180 span:nth-child(2) {
152 span:nth-child(1) {} 181 font-size: 20px;
182 font-weight: 900;
183
184 }
153 } 185 }
154 } 186 }
155 } 187 }
......
1 <template> 1 <template>
2 <div class="rightcard"> 2 <div class="rightcard">
3 <div class="card bg-shadow"> 3 <div class="card1 cardCon d-center">
4 <div class="cardhead">房屋情况统计表</div> 4 <div class="cardhead">房屋情况统计表</div>
5 <div class="cardcontent"> 5 <div class="cardcontent" style="margin-top: 50px">
6 <el-table class="bueatyScroll" 6 <dv-scroll-board :config="config" class="board" />
7 :header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
8 :cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
9 ref="tableref" height="250px" style="width: 100%">
10 <el-table-column type="index" label="序号" />
11 <el-table-column prop="use" label="用途" />
12 <el-table-column prop="property" label="性质" />
13 <el-table-column prop="area" label="面积" />
14 </el-table>
15 </div> 7 </div>
16 </div> 8 </div>
17 <div class="card bg-shadow"> 9 <div class="card2 cardCon mt-10">
18 <div class="cardhead">登记业务量</div> 10 <div class="cardhead">登记业务量</div>
19 <Rose /> 11 <Rose />
20 </div> 12 </div>
21 <div class="card bg-shadow"> 13 <div class="card3 cardCon mt-10">
22 <div class="cardhead">登记类型总量</div> 14 <div class="cardhead">登记类型总量</div>
23 <columnarsmat /> 15 <columnarsmat />
24 </div> 16 </div>
...@@ -31,114 +23,88 @@ import Rose from "@/components/echart/Rose"; ...@@ -31,114 +23,88 @@ import Rose from "@/components/echart/Rose";
31 export default { 23 export default {
32 data () { 24 data () {
33 return { 25 return {
34 tableData: [{ 26 config: {
35 use: '居住', 27 headerBGC: '#016AC5',
36 property: '住宅', 28 oddRowBGC: '#154295',
37 area: '120' 29 evenRowBGC: '#154295',
38 }, { 30 header: ['序号', '行政区名称', '行政区总数', '接入量'],
39 use: '水果店', 31 data: [
40 property: '商铺', 32 ['1', '咸阳市', '6', '998'],
41 area: '342' 33 ['1', '咸阳市', '6', '998'],
42 }, { 34 ['1', '咸阳市', '6', '998'],
43 use: '商场', 35 ['1', '咸阳市', '6', '998'],
44 property: '商业', 36 ['1', '咸阳市', '6', '998'],
45 area: '2343' 37 ['1', '咸阳市', '6', '998'],
46 }, { 38 ]
47 use: '耕地', 39 }
48 property: '农田', 40 }
49 area: '29987'
50 }, {
51 use: '林场',
52 property: '林地',
53 area: '67894'
54 }, {
55 use: '旅游',
56 property: '旅游区',
57 area: '22328'
58 }, {
59 use: '政府',
60 property: '建筑用地',
61 area: '1228'
62 }, {
63 use: '学校',
64 property: '建筑用地',
65 area: '2328'
66 }, {
67 use: '采矿',
68 property: '矿场',
69 area: '2328'
70 }]
71 };
72 }, 41 },
73 components: { columnarsmat, Rose }, 42 components: { columnarsmat, Rose },
74 mounted () { 43 mounted () {
75 scroll(tableref.value.$refs.bodyWrapper);//设置滚动 44 scroll(tableref.value.$refs.bodyWrapper);//设置滚动
76 }, 45 }
77 beforeDestroy () { }, 46 }
78 };
79 </script> 47 </script>
80
81 <style lang="scss" scoped> 48 <style lang="scss" scoped>
49 /deep/.row-item:not(:last-child) {
50 margin-bottom: 5px;
51 }
52
82 .rightcard { 53 .rightcard {
54 display: flex;
55 flex-direction: column;
56
83 .cardhead { 57 .cardhead {
84 width: 100%; 58 font-size: 20px;
85 height: 40px; 59 font-weight: bold;
86 margin-left: 10px; 60 color: #02D9FD;
87 line-height: 40px; 61 text-align: center;
88 color: rgb(27, 185, 206); 62 position: absolute;
89 font-size: 26px; 63 left: 0;
64 right: 0;
65 top: 15px;
66 text-align: center;
90 } 67 }
91 68
92 .cardcontent { 69 .cardcontent {
93 width: 100%; 70 width: 100%;
94 height: 250px; 71 height: 250px;
95
96 /deep/.el-table tr:nth-child(even) {
97 background-color: #043d72 !important;
98 } 72 }
99 73
100 /deep/.el-table__body-wrapper { 74 .cardCon {
101 background-color: #043d72 75 padding: 20px 10px;
102 } 76 position: relative;
103 77 text-align: center;
104 /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */ 78 width: 100%;
105 /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
106 background: #043d72
107 } 79 }
108 80
109 /* 非斑马纹颜色 */ 81 .card1 {
110 /deep/.el-table tr { 82 height: 240px;
111 background: #043d72 83 background: url("~@/image/homeLeftBg.png") no-repeat;
112 } 84 background-size: 100% 100%;
113 85
114 /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */ 86 .board {
115 /deep/.el-table td, 87 width: 90%;
116 .building-top .el-table th.is-leaf { 88 margin: 0 auto;
117 border: none; 89 height: 165px;
118 color: white; 90 margin-top: 40px;
119 } 91 }
120
121 /* 这里是滑过斑马纹滑过时的颜色 */
122 /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
123 background-color: #021c55;
124 } 92 }
125 93
126 .el-table { 94 .card2 {
127 --el-table-border: 0px; 95 background: url("~@/image/djywl.png") no-repeat;
128 --el-table-border-color: rgb(0 0 0 / 0%); 96 background-size: 100% 100%;
129 97 padding: 70px 0 20px 0;
130 } 98 }
131 99
132 /deep/.el-table .el-table__cell { 100 .card3 {
133 padding: 6px 0; 101 height: 170px;
102 background: url("~@/image/lxzl.png") no-repeat;
103 background-size: 100% 100%;
134 } 104 }
135 105
106 .cardhead {
107 position: absolute;
136 } 108 }
137
138 .card {
139 width: 100%;
140 height: 300px;
141 }
142
143 } 109 }
144 </style> 110 </style>
......
...@@ -41,12 +41,11 @@ export default { ...@@ -41,12 +41,11 @@ export default {
41 41
42 <style scoped lang="scss"> 42 <style scoped lang="scss">
43 .content { 43 .content {
44 width: 98%; 44 width: 100%;
45 height: calc(100% -94px); 45 height: calc(100% -94px);
46 margin: auto; 46 margin: auto;
47 display: flex; 47 display: flex;
48 display: flex; 48 justify-content: space-between;
49
50 .centercard { 49 .centercard {
51 width: 40%; 50 width: 40%;
52 51
......