Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
778b7e00 by 任超
Options

feat:引入配置文件

2 parents 0752255d f55854f3
Inline Side-by-side
Showing 5 changed files with 405 additions and 407 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description: 引入配置文件
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-15 14:48:13 4 * @LastEditTime: 2023-03-15 16:17:17
5 --> 5 -->
6 <!DOCTYPE html> 6 <!DOCTYPE html>
7 <html> 7 <html>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 24
25 </html> 25 </html>
26 <script> 26 <script>
27 document.write("<s" + "cript type='text/javascript' src='./dist/config.js?" + Math.random().toString(36).substr(2) + "'></scr" + "ipt>"); 27 document.write("<s" + "cript type='text/javascript' src='./config.js?" + Math.random().toString(36).substr(2) + "'></scr" + "ipt>");
28 window.baseUrl = location.origin || location.protocol + '//' + location.host 28 window.baseUrl = location.origin || location.protocol + '//' + location.host
29 // window.authorization = 'bearer AT-14-h4UlUGjPvgmrIgnDO-3QgMP0m4YJGQTR'; 29 // window.authorization = 'bearer AT-14-h4UlUGjPvgmrIgnDO-3QgMP0m4YJGQTR';
30 // window.authorization = 'bearer AT-223-c-Q86EHx75m7ig3EDf-SwMWl4U0AKn0b'; 30 // window.authorization = 'bearer AT-223-c-Q86EHx75m7ig3EDf-SwMWl4U0AKn0b';
......
1 <template> 1 <template>
2 <!-- 地图 --> 2 <!-- 地图 -->
3 <Echart 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
4 id="centreLeft2Chart"
5 class="centreLeft2Chart"
6 :key="key"
7 ref="centreLeft2ChartRef"
8 width="100%"
9 height="100%"
10 :options="options"></Echart> 4 :options="options"></Echart>
11 </template> 5 </template>
12 6
13 <script> 7 <script>
14 import Echart from "@/common/echart"; 8 import Echart from "@/common/echart";
15 import { mapGetters } from "vuex"; 9 import { mapGetters } from "vuex";
16 export default { 10 export default {
17 data () { 11 data () {
18 return { 12 return {
19 options: {}, 13 options: {},
20 max: "5000", //最大value值 14 max: "5000", //最大value值
21 min: "1", // 最小value值 15 min: "1", // 最小value值
22 key: 0, 16 key: 0,
23 mapjson: "", 17 mapjson: "",
24 }; 18 };
19 },
20 components: {
21 Echart,
22 },
23 created () { },
24 props: {
25 cdata: {
26 type: Array,
27 default: () => [],
25 }, 28 },
26 components: { 29 },
27 Echart, 30 mounted () {
28 }, 31 window.addEventListener("resize", () => {
29 created () { }, 32 this.key++;
30 props: { 33 });
31 cdata: { 34 this.getDistrictcode();
32 type: Array, 35 },
33 default: () => [], 36 watch: {
34 }, 37 cdata: {
35 }, 38 handler (newData) {
36 mounted () { 39 let _this = this;
37 40 // 设置点的位置(经纬度)
38 window.addEventListener("resize", () => { 41 const geoCoordMap = {
39 this.key++; 42 汉台区: [107.03187, 33.06774, 20],
40 }); 43 南郑区: [106.94024, 33.00299, 20],
41 this.getDistrictcode(); 44 城固县: [107.33367, 33.15661, 20],
42 }, 45 洋县: [107.545837, 33.222739, 20],
43 watch: { 46 西乡县: [107.76867, 32.98411, 20],
44 cdata: { 47 镇巴县: [107.89648, 32.53487, 20],
45 handler (newData) { 48 勉县: [106.673221, 33.153553, 20],
46 let _this = this; 49 留坝县: [106.92233, 33.61606, 20],
47 // 设置点的位置(经纬度) 50 佛坪县: [107.98974, 33.52496, 20],
48 const geoCoordMap = { 51 宁强县: [106.25958, 32.82881, 20],
49 汉台区: [107.03187, 33.06774, 20], 52 略阳县: [106.15399, 33.33009, 20],
50 南郑区: [106.94024, 33.00299, 20], 53 };
51 城固县: [107.33367, 33.15661, 20], 54 this.options = {
52 洋县: [107.545837, 33.222739, 20], 55 showLegendSymbol: true,
53 西乡县: [107.76867, 32.98411, 20], 56 tooltip: {
54 镇巴县: [107.89648, 32.53487, 20], 57 trigger: "item",
55 勉县: [106.673221, 33.153553, 20], 58 textStyle: {
56 留坝县: [106.92233, 33.61606, 20], 59 fontSize: 14,
57 佛坪县: [107.98974, 33.52496, 20], 60 lineHeight: 22,
58 宁强县: [106.25958, 32.82881, 20], 61 },
59 略阳县: [106.15399, 33.33009, 20], 62 position: (point) => {
60 }; 63 // 固定在顶部
61 this.options = { 64 return [point[0] + 50, point[1] - 20];
62 showLegendSymbol: true, 65 },
63 tooltip: { 66 // 如果需要自定义 tooltip样式，需要使用formatter
64 trigger: "item", 67 formatter: (params) => {
65 textStyle: { 68 return `<div style="">${params.name}:${params.value + "个"
66 fontSize: 14, 69 }</div>`;
67 lineHeight: 22,
68 },
69 position: (point) => {
70 // 固定在顶部
71 return [point[0] + 50, point[1] - 20];
72 },
73 // 如果需要自定义 tooltip样式，需要使用formatter
74 formatter: (params) => {
75 return `<div style="">${params.name}:${params.value + "个"
76 }</div>`;
77 },
78 }, 70 },
79 visualMap: { 71 },
80 min: 0, 72 visualMap: {
81 max: _this.max, 73 min: 0,
82 bottom: "13%", 74 max: _this.max,
83 left: 50, 75 bottom: "12%",
84 splitNumber: 6, 76 left: 50,
85 seriesIndex: [0], 77 splitNumber: 6,
86 itemWidth: 20, // 每个图元的宽度 78 seriesIndex: [0],
87 itemGap: 2, // 每两个图元之间的间隔距离，单位为px 79 itemWidth: 20, // 每个图元的宽度
88 pieces: [ 80 itemGap: 2, // 每两个图元之间的间隔距离，单位为px
89 // 自定义每一段的范围，以及每一段的文字 81 pieces: [
90 { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。 82 // 自定义每一段的范围，以及每一段的文字
91 { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" }, 83 { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
92 { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" }, 84 { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" },
93 { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" }, 85 { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" },
94 ], 86 { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" },
95 textStyle: { 87 ],
96 color: "#737373", 88 textStyle: {
89 color: "#737373",
90 },
91 },
92 geo: {
93 aspectScale: 1, //长宽比
94 zoom: 1.1,
95 mapType: "", // 自定义扩展图表类型
96 top: "15%",
97 left: "10%",
98 map: "汉中市",
99 itemStyle: {
100 normal: {
101 //阴影
102 areaColor: "#5689FD ",
103 shadowColor: "#21371d",
104 borderWidth: 0,
105 shadowOffsetX: 2,
106 shadowOffsetY: 25,
97 }, 107 },
98 }, 108 },
99 geo: { 109 },
110 series: [
111 {
112 type: "map",
100 aspectScale: 1, //长宽比 113 aspectScale: 1, //长宽比
101 zoom: 1.1, 114 zoom: 1.1,
102 mapType: "", // 自定义扩展图表类型 115 mapType: "汉中市", // 自定义扩展图表类型
103 top: "15%", 116 top: "15%",
104 left: "10%", 117 left: "10%",
105 map: "汉中市",
106 itemStyle: { 118 itemStyle: {
107 normal: { 119 normal: {
108 //阴影 120 areaColor: "rgba(19,54,162,.5)",
109 areaColor: "#5689FD ", 121 borderColor: "rgba(0,242,252,.5)",
110 shadowColor: "#21371d", 122 borderWidth: 2,
111 borderWidth: 0, 123 shadowBlur: 1,
112 shadowOffsetX: 2, 124 borderColor: "rgb(155, 200, 200)",
113 shadowOffsetY: 25, 125 shadowColor: "#44f2fc",
114 }, 126 },
115 }, 127 },
116 }, 128 label: {
117 series: [ 129 formatter: (params) => {
118 { 130 return `${params.name}\n${params.value + "个"}`;
119 type: "map",
120 aspectScale: 1, //长宽比
121 zoom: 1.1,
122 mapType: "汉中市", // 自定义扩展图表类型
123 top: "15%",
124 left: "10%",
125 itemStyle: {
126 normal: {
127 areaColor: "rgba(19,54,162,.5)",
128 borderColor: "rgba(0,242,252,.5)",
129 borderWidth: 2,
130 shadowBlur: 1,
131 borderColor: "rgb(155, 200, 200)",
132 shadowColor: "#44f2fc",
133 },
134 }, 131 },
135 label: { 132 show: true,
136 formatter: (params) => { 133 position: "insideRight",
137 return `${params.name}\n${params.value + "个"}`; 134 textStyle: {
138 }, 135 fontSize: 14,
139 show: true, 136 color: "#efefef",
140 position: "insideRight", 137 },
138 emphasis: {
141 textStyle: { 139 textStyle: {
142 fontSize: 14, 140 color: "#fff",
143 color: "#efefef",
144 },
145 emphasis: {
146 textStyle: {
147 color: "#fff",
148 },
149 }, 141 },
150 }, 142 },
151 data: newData,
152 }, 143 },
153 ], 144 data: newData,
154 }; 145 },
155 // 重新选择区域 146 ],
156 this.handleMapRandomSelect(); 147 };
157 }, 148 // 重新选择区域
158 149 this.handleMapRandomSelect();
159 immediate: true,
160 deep: true,
161 }, 150 },
151
152 immediate: true,
153 deep: true,
162 }, 154 },
163 computed: { 155 },
164 ...mapGetters(["sidebar", "dicData"]), 156 computed: {
165 logoName () { 157 ...mapGetters(["sidebar", "dicData"]),
166 return ( 158 logoName () {
167 this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" }) 159 return (
168 ); 160 this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
169 }, 161 );
170 }, 162 },
171 methods: { 163 },
172 // 根据行政区代码匹配行政区 164 methods: {
173 getDistrictcode () { 165 // 根据行政区代码匹配行政区
174 this.mapjson = "" 166 getDistrictcode () {
175 if (this.logoName[0].DNAME) { 167 this.mapjson = ""
176 this.mapjson = this.logoName[0].DNAME; 168 if (this.logoName[0].DNAME) {
177 require(`@/common/map/${this.mapjson}.js`); 169 this.mapjson = this.logoName[0].DNAME;
178 } 170 require(`@/common/map/${this.mapjson}.js`);
179 }, 171 }
180 // 开启定时器 172 },
181 startInterval () { 173 // 开启定时器
182 const _self = this; 174 startInterval () {
183 // 应通过接口获取配置时间，暂时写死5s 175 const _self = this;
184 const time = 2000; 176 // 应通过接口获取配置时间，暂时写死5s
185 if (this.intervalId !== null) { 177 const time = 2000;
186 clearInterval(this.intervalId); 178 if (this.intervalId !== null) {
179 clearInterval(this.intervalId);
180 }
181 this.intervalId = setInterval(() => {
182 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
183 }, time);
184 },
185 // 重新随机选中地图区域
186 reSelectMapRandomArea () {
187 const length = 9;
188 this.$nextTick(() => {
189 try {
190 const map = this.$refs.centreLeft2ChartRef.chart;
191 let index = Math.floor(Math.random() * length);
192 while (index === this.preSelectMapIndex || index >= length) {
193 index = Math.floor(Math.random() * length);
194 }
195 map.dispatchAction({
196 type: "mapUnSelect",
197 seriesIndex: 0,
198 dataIndex: this.preSelectMapIndex,
199 });
200 map.dispatchAction({
201 type: "showTip",
202 seriesIndex: 0,
203 dataIndex: index,
204 });
205 map.dispatchAction({
206 type: "mapSelect",
207 seriesIndex: 0,
208 dataIndex: index,
209 });
210 this.preSelectMapIndex = index;
211 } catch (error) {
212 console.log(error);
187 } 213 }
188 this.intervalId = setInterval(() => { 214 });
189 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea(); 215 },
190 }, time); 216 handleMapRandomSelect () {
191 }, 217 this.$nextTick(() => {
192 // 重新随机选中地图区域 218 try {
193 reSelectMapRandomArea () { 219 const map = this.$refs.centreLeft2ChartRef.chart;
194 const length = 9; 220 const _self = this;
195 this.$nextTick(() => { 221 setTimeout(() => {
196 try { 222 _self.reSelectMapRandomArea();
197 const map = this.$refs.centreLeft2ChartRef.chart; 223 }, 0);
198 let index = Math.floor(Math.random() * length); 224 // 移入区域，清除定时器、取消之前选中并选中当前
199 while (index === this.preSelectMapIndex || index >= length) { 225 map.on("mouseover", function (params) {
200 index = Math.floor(Math.random() * length); 226 clearInterval(_self.intervalId);
201 }
202 map.dispatchAction({ 227 map.dispatchAction({
203 type: "mapUnSelect", 228 type: "mapUnSelect",
204 seriesIndex: 0, 229 seriesIndex: 0,
205 dataIndex: this.preSelectMapIndex, 230 dataIndex: _self.preSelectMapIndex,
206 });
207 map.dispatchAction({
208 type: "showTip",
209 seriesIndex: 0,
210 dataIndex: index,
211 }); 231 });
212 map.dispatchAction({ 232 map.dispatchAction({
213 type: "mapSelect", 233 type: "mapSelect",
214 seriesIndex: 0, 234 seriesIndex: 0,
215 dataIndex: index, 235 dataIndex: params.dataIndex,
216 });
217 this.preSelectMapIndex = index;
218 } catch (error) {
219 console.log(error);
220 }
221 });
222 },
223 handleMapRandomSelect () {
224 this.$nextTick(() => {
225 try {
226 const map = this.$refs.centreLeft2ChartRef.chart;
227 const _self = this;
228 setTimeout(() => {
229 _self.reSelectMapRandomArea();
230 }, 0);
231 // 移入区域，清除定时器、取消之前选中并选中当前
232 map.on("mouseover", function (params) {
233 clearInterval(_self.intervalId);
234 map.dispatchAction({
235 type: "mapUnSelect",
236 seriesIndex: 0,
237 dataIndex: _self.preSelectMapIndex,
238 });
239 map.dispatchAction({
240 type: "mapSelect",
241 seriesIndex: 0,
242 dataIndex: params.dataIndex,
243 });
244 _self.preSelectMapIndex = params.dataIndex;
245 }); 236 });
246 // 移出区域重新随机选中地图区域，并开启定时器 237 _self.preSelectMapIndex = params.dataIndex;
247 map.on("globalout", function () { 238 });
248 _self.reSelectMapRandomArea(); 239 // 移出区域重新随机选中地图区域，并开启定时器
249 _self.startInterval(); 240 map.on("globalout", function () {
250 }); 241 _self.reSelectMapRandomArea();
251 this.startInterval(); 242 _self.startInterval();
252 } catch (error) { 243 });
253 console.log(error); 244 this.startInterval();
254 } 245 } catch (error) {
255 }); 246 console.log(error);
256 }, 247 }
248 });
257 }, 249 },
258 }; 250 },
251 };
259 </script> 252 </script>
260 <style></style> 253 <style></style>
......
...@@ -11,74 +11,75 @@ ...@@ -11,74 +11,75 @@
11 </template> 11 </template>
12 12
13 <script> 13 <script>
14 import maps from "@/components/Echart/Map"; 14 import maps from "@/components/Echart/Map";
15 import brokenline from "@/components/Echart/Brokenline"; 15 import brokenline from "@/components/Echart/Brokenline";
16 export default { 16 export default {
17 data () { 17 data () {
18 return {}; 18 return {};
19 }, 19 },
20 components: { maps, brokenline }, 20 components: { maps, brokenline },
21 mounted () { }, 21 mounted () { },
22 beforeDestroy () { }, 22 beforeDestroy () { },
23 methods: {}, 23 methods: {},
24 }; 24 };
25 </script> 25 </script>
26 26
27 <style lang="scss" scoped> 27 <style lang="scss" scoped>
28 .centercard { 28 .centercard {
29 width: 44%; 29 width: 40%;
30 height: calc(100vh - 114px); 30 height: calc(100vh - 114px);
31 box-sizing: border-box; 31 box-sizing: border-box;
32 padding: 0 0.0521rem; 32 padding: 0 0.0521rem;
33 display: flex; 33 display: flex;
34 flex-direction: column; 34 flex-direction: column;
35 35
36 .card1 { 36 .card1 {
37 width: 100%; 37 width: 100%;
38 background: url("~@/image/mapcenter.png") no-repeat; 38 background: url("~@/image/mapcenter.png") no-repeat;
39 background-size: 100% 100%; 39 background-size: 100% 100%;
40 position: relative; 40 position: relative;
41 height: 64%; 41 height: 64%;
42 42
43 .title { 43 .title {
44 position: absolute; 44 position: absolute;
45 font-weight: bold; 45 font-weight: bold;
46 color: #02d9fd; 46 color: #02d9fd;
47 line-height: 0.1354rem; 47 line-height: 0.1354rem;
48 font-size: 0.1146rem; 48 font-size: 0.1146rem;
49 position: absolute; 49 position: absolute;
50 left: 0; 50 left: 0;
51 right: 0; 51 right: 0;
52 top: 0.0365rem; 52 top: 0.0365rem;
53 text-align: right; 53 text-align: right;
54 padding-right: 15%; 54 padding-right: 15%;
55 }
56 } 55 }
56 }
57 57
58 .card2 { 58 .card2 {
59 width: 100%; 59 width: 100%;
60 background: url("~@/image/sjqs.png") no-repeat; 60 background: url("~@/image/sjqs.png") no-repeat;
61 background-size: 100% 100%; 61 background-size: 100% 100%;
62 position: relative; 62 position: relative;
63 flex: 1; 63 flex: 1;
64 64
65 .title { 65 .title {
66 position: absolute; 66 position: absolute;
67 font-weight: bold; 67 font-weight: bold;
68 color: #02d9fd; 68 color: #02d9fd;
69 line-height: 0.1354rem; 69 line-height: 0.1354rem;
70 font-size: 0.1146rem; 70 font-size: 0.1146rem;
71 position: absolute; 71 position: absolute;
72 left: 0; 72 left: 0;
73 right: 0; 73 right: 0;
74 top: 0.0365rem; 74 top: 0.0365rem;
75 text-align: center; 75 text-align: center;
76 margin-bottom: 0.0521rem; 76 margin-bottom: 0.0521rem;
77 } 77 }
78 .brokenline { 78
79 margin: auto; 79 .brokenline {
80 width: 100%; 80 margin: auto;
81 } 81 width: 100%;
82 } 82 }
83 } 83 }
84 }
84 </style> 85 </style>
......
...@@ -118,7 +118,7 @@ export default { ...@@ -118,7 +118,7 @@ export default {
118 118
119 <style lang="scss" scoped> 119 <style lang="scss" scoped>
120 .leftcard { 120 .leftcard {
121 width: 32%; 121 width: 30%;
122 display: flex; 122 display: flex;
123 height: calc(100vh - 114px); 123 height: calc(100vh - 114px);
124 flex-direction: column; 124 flex-direction: column;
......
...@@ -19,153 +19,157 @@ ...@@ -19,153 +19,157 @@
19 </template> 19 </template>
20 20
21 <script> 21 <script>
22 import columnarsmat from "@/components/Echart/Columnarsmat"; 22 import columnarsmat from "@/components/Echart/Columnarsmat";
23 import Rose from "@/components/Echart/Rose"; 23 import Rose from "@/components/Echart/Rose";
24 import work from "@/api/work"; 24 import work from "@/api/work";
25 export default { 25 export default {
26 data () { 26 data () {
27 return { 27 return {
28 config: { 28 config: {
29 headerBGC: '#016AC5', 29 headerBGC: '#016AC5',
30 oddRowBGC: '#154295', 30 oddRowBGC: '#154295',
31 evenRowBGC: '#154295', 31 evenRowBGC: '#154295',
32 header: ['序号', '业务名称', '登记业务量'], 32 header: ['序号', '业务名称', '登记业务量'],
33 columnWidth: [120, 270, 140], 33 columnWidth: [120, 270, 140],
34 data: [], 34 data: [],
35 key: 0 35 key: 0
36 }
37 } 36 }
38 }, 37 }
39 components: { columnarsmat, Rose }, 38 },
40 mounted () { 39 components: { columnarsmat, Rose },
40 mounted () {
41 this.getdjywltotal();
42 window.addEventListener("resize", () => {
43 this.cdata.seriesData = [];
41 this.getdjywltotal(); 44 this.getdjywltotal();
42 window.addEventListener("resize", () => { 45 });
43 this.cdata.seriesData = []; 46 // scroll(tableref.value.$refs.bodyWrapper);//设置滚动
44 this.getdjywltotal(); 47 },
45 }); 48 methods: {
46 // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 49 // 获取登记业务量玫瑰图数据
47 }, 50 async getdjywltotal () {
48 methods: { 51 try {
49 // 获取登记业务量玫瑰图数据 52 let p = {
50 async getdjywltotal () { 53 DJLX: "",
51 try { 54 QLLX: "",
52 let p = { 55 XZQDM: "",
53 DJLX: "", 56 };
54 QLLX: "", 57
55 XZQDM: "", 58 let res = await work.getdjywltotal(p);
56 }; 59 res.result.map((item, index) => {
57 60 this.config.data.push([index, item.AREACODE, item.ywtotal])
58 let res = await work.getdjywltotal(p); 61
59 res.result.map((item, index) => { 62 });
60 this.config.data.push([index, item.AREACODE, item.ywtotal]) 63
61 64 // 遍历修改数组键，作为echars图表的参数
62 }); 65
63 66
64 // 遍历修改数组键，作为echars图表的参数 67 } catch (error) {
65 68 console.log(error);
66 69 }
67 } catch (error) {
68 console.log(error);
69 }
70 70
71 },
72 }, 71 },
73 } 72 },
73 }
74 </script> 74 </script>
75 <style lang="scss" scoped> 75 <style lang="scss" scoped>
76 /deep/.row-item:not(:last-child) { 76 /deep/.row-item:not(:last-child) {
77 margin-bottom: 0.026rem; 77 margin-bottom: 0.026rem;
78 }
79
80 .rightcard {
81 width: 30%;
82 display: flex;
83 height: calc(100vh - 114px);
84 flex-direction: column;
85
86 .cardhead {
87 font-size: 0.1042rem;
88 font-weight: bold;
89 color: #02d9fd;
90 text-align: center;
91 position: absolute;
92 left: 0;
93 right: 0;
94 top: 0.0625rem;
95 text-align: center;
78 } 96 }
79 97
80 .rightcard { 98 .cardcontent {
81 width: 32%; 99 width: 100%;
82 display: flex; 100 height: 100%;
83 height: calc(100vh - 114px); 101 display: -webkit-box;
84 flex-direction: column; 102 overflow: hidden;
85 103
86 .cardhead { 104 .nodata {
87 font-size: 0.1042rem; 105 font-size: 0.1042rem;
88 font-weight: bold;
89 color: #02d9fd; 106 color: #02d9fd;
90 text-align: center; 107 font-weight: bold;
91 position: absolute; 108 margin: auto;
92 left: 0; 109 margin-top: 120px;
93 right: 0;
94 top: 0.0625rem;
95 text-align: center;
96 } 110 }
111 }
97 112
98 .cardcontent { 113 .cardCon {
99 width: 100%; 114 padding: 0.0521rem 0.026rem;
100 height: 100%; 115 position: relative;
101 display: -webkit-box; 116 text-align: center;
102 overflow: hidden; 117 width: 100%;
103 118 }
104 .nodata { 119
105 font-size: 0.1042rem; 120 .card1 {
106 color: #02d9fd; 121 height: 33%;
107 font-weight: bold; 122 background: url("~@/image/xjgyfwxx.png") no-repeat;
108 margin: auto; 123 background-size: 100% 100%;
109 margin-top: 120px; 124
125 /deep/.dv-scroll-board {
126 .header {
127 height: 0.1875rem;
128 align-items: center;
110 } 129 }
111 } 130 }
112 131
113 .cardCon { 132 .board {
114 padding: 0.0521rem 0.026rem; 133 width: 90%;
115 position: relative; 134 margin: 0 auto;
116 text-align: center; 135 height: 1.1031rem;
117 width: 100%; 136 margin-top: 0.0521rem;
118 }
119 137
120 .card1 { 138 /deep/.header {
121 height: 33%; 139 font-size: 0.0738rem;
122 background: url("~@/image/xjgyfwxx.png") no-repeat;
123 background-size: 100% 100%;
124 /deep/.dv-scroll-board {
125 .header {
126 height: 0.1875rem;
127 align-items: center;
128 }
129 } 140 }
130 .board { 141
131 width: 90%; 142 /deep/.rows {
132 margin: 0 auto; 143 .ceil {
133 height: 1.1031rem;
134 margin-top: 0.0521rem;
135 /deep/.header {
136 font-size: 0.0738rem; 144 font-size: 0.0738rem;
137 } 145 color: #6bc1fc;
138 /deep/.rows {
139 .ceil {
140 font-size: 0.0738rem;
141 color: #6bc1fc;
142 }
143 } 146 }
144 } 147 }
145 } 148 }
149 }
146 150
147 .card2 { 151 .card2 {
148 height: 33%; 152 height: 33%;
149 background: url("~@/image/djywl.png") no-repeat; 153 background: url("~@/image/djywl.png") no-repeat;
150 background-size: 100% 100%; 154 background-size: 100% 100%;
151 padding: 0.3825rem 0 0 0; 155 padding: 0.3825rem 0 0 0;
152 overflow: hidden; 156 overflow: hidden;
153 } 157 }
154
155 .card3 {
156 height: 33%;
157 flex: 1;
158 background: url("~@/image/djlxzl.png") no-repeat;
159 background-size: 100% 100%;
160 padding-bottom: 0;
161 158
162 .cardhead { 159 .card3 {
163 top: 0.0417rem; 160 height: 33%;
164 } 161 flex: 1;
165 } 162 background: url("~@/image/djlxzl.png") no-repeat;
163 background-size: 100% 100%;
164 padding-bottom: 0;
166 165
167 .cardhead { 166 .cardhead {
168 position: absolute; 167 top: 0.0417rem;
169 } 168 }
170 } 169 }
170
171 .cardhead {
172 position: absolute;
173 }
174 }
171 </style> 175 </style>
......