Skip to content

Commit c2ae4c6

Browse files
luoxiao-supermapluoxiao-supermap
committed
【update】房地产和土地利用模板适配移动端 review by xiongjj
1 parent 06ed31c commit c2ae4c6

File tree

2 files changed

+427
-344
lines changed

2 files changed

+427
-344
lines changed

‎examples/component/components_demo_vue.html‎

Lines changed: 83 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
<div id="main">
4848
<a-row>
4949
<a-col :md="8" class="left-container">
50+
<a-row v-if="!showMap">
51+
<div class="map-wrap">
52+
<sm-web-map server-url="http://support.supermap.com.cn:8092" map-id="213343819">
53+
<sm-zoom></sm-zoom>
54+
<sm-scale position="bottom-left"></sm-scale>
55+
</sm-web-map>
56+
</div>
57+
</a-row>
5058
<a-row class="title-text-wrap">
5159
<sm-text
5260
id="titleText"
@@ -179,7 +187,7 @@
179187
<a-col :md="6" :sm="8" :xs="8">
180188
<sm-indicator
181189
id="farmlandIndicator"
182-
title="耕地地保有量"
190+
title="耕地保有量"
183191
unit="万亩"
184192
num="300"
185193
font-size="26"
@@ -217,13 +225,10 @@
217225
</a-row>
218226
</a-col>
219227

220-
<a-col :md="16">
221-
<a-row>
228+
<a-col :md="16" :xs="24">
229+
<a-row v-if="showMap">
222230
<div class="map-wrap">
223-
<sm-web-map
224-
server-url='http://support.supermap.com.cn:8092'
225-
map-id="213343819"
226-
>
231+
<sm-web-map server-url="http://support.supermap.com.cn:8092" map-id="213343819">
227232
<sm-zoom></sm-zoom>
228233
<sm-scale position="bottom-left"></sm-scale>
229234
</sm-web-map>
@@ -237,7 +242,7 @@
237242
<sm-text id="ecologicalText" :font-style="categoryFontStyle" title="生态环境"></sm-text>
238243
</a-row>
239244
<a-row class="environment-progress-holder">
240-
<a-col class='progress-col' :md="24" :xs="24">
245+
<a-col class="progress-col" :md="24" :xs="24">
241246
<sm-progress
242247
id="progress1"
243248
stroke-color="#2ec7c9"
@@ -246,7 +251,7 @@
246251
type="line"
247252
></sm-progress>
248253
</a-col>
249-
<a-col class='progress-col' :md="24" :xs="24">
254+
<a-col class="progress-col" :md="24" :xs="24">
250255
<sm-progress
251256
id="progress2"
252257
stroke-color="#ffb980"
@@ -255,7 +260,7 @@
255260
type="line"
256261
></sm-progress>
257262
</a-col>
258-
<a-col class='progress-col' :md="24" :xs="24">
263+
<a-col class="progress-col" :md="24" :xs="24">
259264
<sm-progress
260265
id="progress3"
261266
stroke-color="#b6a2de"
@@ -264,7 +269,7 @@
264269
type="line"
265270
></sm-progress>
266271
</a-col>
267-
<a-col class='progress-col' :md="24" :xs="24">
272+
<a-col class="progress-col" :md="24" :xs="24">
268273
<sm-progress
269274
id="progress4"
270275
stroke-color="#5ab1ef"
@@ -288,11 +293,12 @@
288293
<a-row>
289294
<a-col :md="24" :xs="24">
290295
<sm-chart
291-
icon-class=""
292-
:options="echartOption"
293-
:dataset="dataset"
294-
:dataset-options="datasetOptions">
295-
</sm-chart>
296+
icon-class=""
297+
:options="echartOption"
298+
:dataset="dataset"
299+
:dataset-options="datasetOptions"
300+
>
301+
</sm-chart>
296302
</a-col>
297303
</a-row>
298304
</a-col>
@@ -304,58 +310,69 @@
304310
<script>
305311
//本示例数据纯属虚构
306312
new Vue({
307-
el: "#main",
313+
el: '#main',
308314
data() {
309315
return {
310-
dataset: {
311-
type: "iPortal", //iServer iPortal
312-
url: "http://support.supermap.com.cn:8092/web/datas/1920557079",
316+
dataset: {
317+
type: 'iPortal', //iServer iPortal
318+
url: 'http://support.supermap.com.cn:8092/web/datas/1920557079',
313319
queryInfo: {
314320
maxFeatures: 20
315321
}
316322
},
317323
datasetOptions: [
318324
{
319-
seriesType: "bar", //图表类型
325+
seriesType: 'bar', //图表类型
320326
isStastic: true, //是否统计, 默认不统计
321-
xField: "机场", //x坐标轴数据字段
322-
yField: "2016起降架次（架次）" //统计的数据，legned默认名字
327+
xField: '机场', //x坐标轴数据字段
328+
yField: '2016起降架次（架次）' //统计的数据，legned默认名字
323329
},
324330
{
325-
seriesType: "bar", //图表类型
331+
seriesType: 'bar', //图表类型
326332
isStastic: true, //是否统计, 默认不统计
327-
xField: "机场", //x坐标轴数据字段
328-
yField: "2017起降架次（架次）" //统计的数据，legned默认名字
333+
xField: '机场', //x坐标轴数据字段
334+
yField: '2017起降架次（架次）' //统计的数据，legned默认名字
329335
}
330336
],
331337
echartOption: {
332-
legend: { data: ["2017起降架次（架次）", "2016起降架次（架次）"] }, //与 yField数据一致
338+
legend: { data: ['2017起降架次（架次）', '2016起降架次（架次）'] }, //与 yField数据一致
333339
grid: {
334340
top: 30,
335-
bottom: 60,
336-
left: 100,
337-
right: 30
341+
bottom: 65,
342+
left: 55,
343+
right: 40
338344
}
339345
},
340346
titleFontStyle: {
341-
fontFamily: "微软雅黑",
342-
fontWeight: "bolder"
347+
fontFamily: '微软雅黑',
348+
fontWeight: 'bolder'
343349
},
344350
categoryFontStyle: {
345-
fontFamily: "微软雅黑",
346-
fontWeight: "bolder",
347-
textAlign: "left"
351+
fontFamily: '微软雅黑',
352+
fontWeight: 'bolder',
353+
textAlign: 'left'
348354
},
349355
textFontStyle: {
350-
fontFamily: "微软雅黑",
351-
fontWeight: "bolder",
352-
textAlign: "center"
353-
}
356+
fontFamily: '微软雅黑',
357+
fontWeight: 'bolder',
358+
textAlign: 'center'
359+
},
360+
showMap: true
354361
};
362+
},
363+
mounted() {
364+
let screenWidth = document.body.clientWidth;
365+
if (screenWidth <= 540) {
366+
this.showMap = false;
367+
}
355368
}
356369
});
357370
</script>
358371
<style>
372+
html {
373+
font-size: 10px;
374+
}
375+
359376
.left-container {
360377
padding-top: 2.2vh;
361378
padding-right: 1.2vw;
@@ -365,24 +382,24 @@
365382
height: 63vh;
366383
}
367384
#titleText {
368-
font-size: 1.8vw;
385+
font-size: 2rem;
369386
}
370387
.title-text-wrap .sm-component-text {
371388
width: 100%;
372-
font-size: 1.66vw;
389+
font-size: 1.6rem;
373390
line-height: 1.5;
374391
}
375392

376393
.time-text-wrap .sm-component-time-text {
377394
text-align: center;
378395
display: block;
379396
margin: 0 auto;
380-
font-size: 1.04vw;
397+
font-size: 1.2rem;
381398
}
382399

383400
.block-title .sm-component-text {
384401
width: 100%;
385-
font-size: 1.15vw;
402+
font-size: 1.4rem;
386403
line-height: 1.5;
387404
}
388405

@@ -396,7 +413,7 @@
396413

397414
.monitor-wrap .monitor-text .sm-component-text {
398415
width: 100%;
399-
font-size: 0.94vw;
416+
font-size: 1.1rem;
400417
line-height: 1.5;
401418
}
402419

@@ -414,7 +431,7 @@
414431
.resource-wrap .resource-year .sm-component-text {
415432
width: 100%;
416433
margin-bottom: 0.93vh;
417-
font-size: 0.94vw;
434+
font-size: 1.1rem;
418435
}
419436

420437
.resource-wrap .resource-item {
@@ -427,12 +444,12 @@
427444

428445
.resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__title,
429446
.resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__unit {
430-
font-size: 0.94vw;
447+
font-size: 1rem;
431448
line-height: 1.5;
432449
}
433450

434451
.resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__num {
435-
font-size: 1.35vw;
452+
font-size: 1.5rem;
436453
}
437454

438455
.resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__content {
@@ -471,7 +488,7 @@
471488
}
472489

473490
.environment-wrap,
474-
.environment-progress-holder .progress-col{
491+
.environment-progress-holder .progress-col {
475492
margin-bottom: 3.7vh;
476493
}
477494

@@ -492,6 +509,24 @@
492509
width: 100%;
493510
height: 28vh;
494511
}
512+
@media (max-width: 540px) {
513+
html {
514+
font-size: 10px;
515+
}
516+
.left-container {
517+
padding-top: 0;
518+
}
519+
.map-wrap {
520+
margin-left: -2.08vw;
521+
width: 100vw;
522+
height: 90vh;
523+
}
524+
}
525+
@media (min-width: 1200px) {
526+
html {
527+
font-size: 16px;
528+
}
529+
}
495530
</style>
496531
</body>
497532
</html>

0 commit comments

Comments
 (0)