Skip to content

Commit fe3b62f

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【fix】基础微件，主题切换样式优化， review by songym
1 parent bd00e2e commit fe3b62f

File tree

7 files changed

+87
-46
lines changed

7 files changed

+87
-46
lines changed

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11710,7 +11710,9 @@ body .mapboxgl-ctrl {
1171011710
font-size: 16px; }
1171111711

1171211712
.sm-text {
11713-
background: rgba(27, 24, 24, 0.8); }
11713+
background: rgba(27, 24, 24, 0.8);
11714+
line-height: 1.5;
11715+
padding: 4px; }
1171411716

1171511717
.sm-time-text {
1171611718
background: rgba(27, 24, 24, 0.8);
@@ -11835,7 +11837,10 @@ body .mapboxgl-ctrl {
1183511837
transform-origin: top right; }
1183611838

1183711839
.sm-liquidFill {
11838-
height: 140px; }
11840+
height: 100px; }
11841+
11842+
.sm-progress {
11843+
text-align: center; }
1183911844

1184011845
@charset "UTF-8";
1184111846
/* Element Chalk Variables */
@@ -23070,7 +23075,9 @@ body .mapboxgl-ctrl {
2307023075
font-size: 16px; }
2307123076

2307223077
.sm-text {
23073-
background: #FFFFFF; }
23078+
background: #FFFFFF;
23079+
line-height: 1.5;
23080+
padding: 4px; }
2307423081

2307523082
.sm-time-text {
2307623083
background: #FFFFFF;
@@ -23195,5 +23202,8 @@ body .mapboxgl-ctrl {
2319523202
transform-origin: top right; }
2319623203

2319723204
.sm-liquidFill {
23198-
height: 140px; }
23205+
height: 100px; }
23206+
23207+
.sm-progress {
23208+
text-align: center; }
2319923209

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42828,12 +42828,12 @@ var TimeText_component = normalizeComponent(
4282842828
)
4282942829

4283042830
/* harmony default export */ var TimeText = (TimeText_component.exports);
42831-
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/view/components/Progress.vue?vue&type=template&id=e8528960&
42832-
var Progressvue_type_template_id_e8528960_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"sm-progress"},[_c('el-progress',{attrs:{"percentage":parseFloat(_vm.percentage),"type":_vm.type,"stroke-width":parseFloat(_vm.strokeWidth),"show-text":_vm.showText,"width":_vm.type==='circle'?parseFloat(_vm.circleWidth):null,"color":_vm.curColor,"status":_vm.status}})],1)}
42833-
var Progressvue_type_template_id_e8528960_staticRenderFns = []
42831+
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/view/components/Progress.vue?vue&type=template&id=7e314806&
42832+
var Progressvue_type_template_id_7e314806_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"sm-progress"},[_c('el-progress',{attrs:{"percentage":parseFloat(_vm.percentage),"type":_vm.type,"stroke-width":parseFloat(_vm.strokeWidth),"show-text":_vm.showText,"width":_vm.type==='circle'?parseFloat(_vm.circleWidth):null,"color":_vm.curColor,"status":_vm.status}})],1)}
42833+
var Progressvue_type_template_id_7e314806_staticRenderFns = []
4283442834

4283542835

42836-
// CONCATENATED MODULE: ./src/view/components/Progress.vue?vue&type=template&id=e8528960&
42836+
// CONCATENATED MODULE: ./src/view/components/Progress.vue?vue&type=template&id=7e314806&
4283742837

4283842838
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/view/components/Progress.vue?vue&type=script&lang=js&
4283942839
//
@@ -42884,7 +42884,7 @@ var Progressvue_type_template_id_e8528960_staticRenderFns = []
4288442884
data: function data() {
4288542885
return {
4288642886
curColor: "",
42887-
circleWidth: 126
42887+
circleWidth: 110
4288842888
};
4288942889
},
4289042890
watch: {
@@ -42903,9 +42903,11 @@ var Progressvue_type_template_id_e8528960_staticRenderFns = []
4290342903
var _this = this;
4290442904

4290542905
this.curColor = this.color || this.getColor(0);
42906-
this.circleWidth = Math.min(this.$parent.$el.offsetWidth, this.$parent.$el.offsetHeight);
42906+
this.$nextTick(function () {
42907+
this.circleWidth = Math.min(this.$el.parentNode.offsetWidth, this.$el.parentNode.offsetHeight);
42908+
});
4290742909
window.addEventListener('resize', function () {
42908-
_this.circleWidth = Math.min(_this.$parent.$el.offsetWidth, _this.$parent.$el.offsetHeight);
42910+
_this.circleWidth = Math.min(_this.$el.parentNode.offsetWidth, _this.$el.parentNode.offsetHeight);
4290942911
});
4291042912
}
4291142913
});
@@ -42921,8 +42923,8 @@ var Progressvue_type_template_id_e8528960_staticRenderFns = []
4292142923

4292242924
var Progress_component = normalizeComponent(
4292342925
components_Progressvue_type_script_lang_js_,
42924-
Progressvue_type_template_id_e8528960_render,
42925-
Progressvue_type_template_id_e8528960_staticRenderFns,
42926+
Progressvue_type_template_id_7e314806_render,
42927+
Progressvue_type_template_id_7e314806_staticRenderFns,
4292642928
false,
4292742929
null,
4292842930
null,
@@ -43009,12 +43011,12 @@ var Icon_component = normalizeComponent(
4300943011
)
4301043012

4301143013
/* harmony default export */ var Icon = (Icon_component.exports);
43012-
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/view/components/LiquidFill.vue?vue&type=template&id=511ce336&
43013-
var LiquidFillvue_type_template_id_511ce336_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"chart",staticClass:"sm-liquidFill",attrs:{"id":"chart"}})}
43014-
var LiquidFillvue_type_template_id_511ce336_staticRenderFns = []
43014+
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/view/components/LiquidFill.vue?vue&type=template&id=c6232d14&
43015+
var LiquidFillvue_type_template_id_c6232d14_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"chart",staticClass:"sm-liquidFill",attrs:{"id":"chart"}})}
43016+
var LiquidFillvue_type_template_id_c6232d14_staticRenderFns = []
4301543017

4301643018

43017-
// CONCATENATED MODULE: ./src/view/components/LiquidFill.vue?vue&type=template&id=511ce336&
43019+
// CONCATENATED MODULE: ./src/view/components/LiquidFill.vue?vue&type=template&id=c6232d14&
4301843020

4301943021
// EXTERNAL MODULE: external "echarts-liquidfill"
4302043022
var external_echarts_liquidfill_ = __webpack_require__("hQXD");
@@ -43180,8 +43182,8 @@ var external_echarts_liquidfill_ = __webpack_require__("hQXD");
4318043182

4318143183
var LiquidFill_component = normalizeComponent(
4318243184
components_LiquidFillvue_type_script_lang_js_,
43183-
LiquidFillvue_type_template_id_511ce336_render,
43184-
LiquidFillvue_type_template_id_511ce336_staticRenderFns,
43185+
LiquidFillvue_type_template_id_c6232d14_render,
43186+
LiquidFillvue_type_template_id_c6232d14_staticRenderFns,
4318543187
false,
4318643188
null,
4318743189
null,

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/mapboxgl/widgets_basic_vue.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@
3333
left: 10px;
3434
z-index: 1000;
3535
}
36+
.sm-progress-wrap {
37+
height: 100px;
38+
}
39+
.sm-progress-wrap, .sm-liquidFill {
40+
width: 115px;
41+
display: inline-block;
42+
vertical-align: middle;
43+
}
3644
</style>
3745
</head>
3846

@@ -42,24 +50,27 @@
4250
<sm-web-map :web-map-options="webOptions" map-id="1649097980" ref="map"></sm-web-map>
4351
<el-card class="box-card">
4452
<!-- 图标微件 -->
45-
<sm-icon class-name="location" size="18px" background='unset' text-color='rgb(63, 177, 227)'>
53+
<sm-icon class-name="location" size="18px" text-color='rgb(63, 177, 227)'>
4654
</sm-icon>
4755
<!-- 文本微件 -->
4856
<sm-text title="点击图上点切换显示机场数据" :font-style='{ fontSize: "14px"}' text-color="#333">
4957
</sm-text>
5058
<sm-text title="机场" :font-style='{ fontSize: "12px",fontWeight: "bolder"}' text-color="rgb(51,51,51)">
5159
</sm-text>
52-
<sm-text :title="name" :font-style='{ fontSize: "18px", lineHeight: "18px", color:"#73b9ac", fontWeight: "700" }'>
60+
<sm-text :title="name" :font-style='{ fontSize: "18px", color:"#73b9ac", fontWeight: "700" }'>
5361
</sm-text>
5462
<!-- 指标微件 -->
55-
<sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" font-size="18px"></sm-indicator>
56-
<sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" font-size="18px"></sm-indicator>
63+
<sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber"></sm-indicator>
64+
<sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber"></sm-indicator>
5765
<sm-text title="同比增速" :font-style='{ fontSize: "12px",fontWeight: "bolder"}' text-color="rgb(51,51,51)"></sm-text>
5866
<!-- 水球微件 -->
59-
<sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" wave-animation="true" style="float:left">
67+
<sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" :wave-animation="true">
6068
</sm-liquid-fill>
6169
<!-- 进度条微件 -->
62-
<sm-progress type="circle" circle-width="100" :percentage="speedIncrease" style="float:right"></sm-progress>
70+
<div class="sm-progress-wrap">
71+
<sm-progress type="circle" :percentage="speedIncrease">
72+
</sm-progress>
73+
</div>
6374
<!-- 时间微件 -->
6475
<sm-time-text :font-style='{ fontSize: "12px"}' text-color="#333" time-type="date+second" style="float:right">
6576
</sm-time-text>
@@ -111,4 +122,4 @@
111122
</script>
112123
</body>
113124

114-
</html>
125+
</html>

‎examples/mapboxgl/widgets_demo_vue.html‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
overflow: auto;
2626
}
2727
}
28+
2829
@media screen and (max-height: 640px) {
2930
#main {
3031
overflow: auto;
@@ -110,12 +111,16 @@
110111
</el-col>
111112
<el-col :md="18" :sm="16" :xs="16" class="resource-chart">
112113
<el-col :md="12" :sm="12" :xs="12">
113-
<sm-progress id='progress5' color="#2ec7c9" percentage="30" stroke-width="10" type="circle">
114-
</sm-progress>
114+
<div class="sm-progress-wrap">
115+
<sm-progress id='progress5' color="#2ec7c9" percentage="30" stroke-width="10" type="circle">
116+
</sm-progress>
117+
</div>
115118
</el-col>
116119
<el-col :md="12" :sm="12" :xs="12">
117-
<sm-progress id='progress6' color="#b6a2de" percentage="50" stroke-width="10" type="circle">
118-
</sm-progress>
120+
<div class="sm-progress-wrap">
121+
<sm-progress id='progress6' color="#b6a2de" percentage="50" stroke-width="10" type="circle">
122+
</sm-progress>
123+
</div>
119124
</el-col>
120125
</el-col>
121126
</el-row>
@@ -125,12 +130,16 @@
125130
</el-col>
126131
<el-col :md="18" :sm="16" :xs="16" class="resource-chart">
127132
<el-col :md="12" :sm="12" :xs="12">
128-
<sm-progress id='progress7' color="#5ab1ef" percentage="20" stroke-width="10" type="circle">
129-
</sm-progress>
133+
<div class="sm-progress-wrap">
134+
<sm-progress id='progress7' color="#5ab1ef" percentage="20" stroke-width="10" type="circle">
135+
</sm-progress>
136+
</div>
130137
</el-col>
131138
<el-col :md="12" :sm="12" :xs="12">
132-
<sm-progress id='progress8' color="#ffb980" percentage="80" stroke-width="10" type="circle">
133-
</sm-progress>
139+
<div class="sm-progress-wrap">
140+
<sm-progress id='progress8' color="#ffb980" percentage="80" stroke-width="10" type="circle">
141+
</sm-progress>
142+
</div>
134143
</el-col>
135144
</el-col>
136145
</el-row>
@@ -276,7 +285,7 @@
276285

277286
.control-wrap .block-title,
278287
.resource-wrap .block-title {
279-
margin-bottom: 1.85vh;
288+
/* margin-bottom: 1.2vh; */
280289
padding-top: 2.78vh;
281290
}
282291

@@ -313,7 +322,7 @@
313322
margin-right: 0;
314323
}
315324

316-
.resource-wrap .resource-chart .el-col {
325+
.resource-wrap .resource-chart .sm-progress-wrap {
317326
height: 12.96vh;
318327
}
319328

‎examples/mapboxgl/widgets_theme_vue.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@
5151
background: #fff;
5252
z-index: 1000;
5353
}
54+
.sm-progress-wrap {
55+
height: 100px;
56+
}
57+
.sm-progress-wrap, .sm-liquidFill {
58+
width: 130px;
59+
display: inline-block;
60+
}
5461
</style>
5562
</head>
5663

@@ -66,29 +73,31 @@
6673
</el-radio-group>
6774
<div class="box-card">
6875
<!-- 图标微件 -->
69-
<sm-icon class-name="location" size="18px" background='unset' style="float:left">
76+
<sm-icon class-name="location" size="18px">
7077
</sm-icon>
7178
<!-- 文本微件 -->
7279
<sm-text title="点击图上点切换显示机场数据" :font-style='{ fontSize: "14px"}' text-color="#333"></sm-text>
7380
<sm-text title="机场" :font-style='{ fontSize: "12px",fontWeight: "bolder"}' text-color="rgb(51,51,51)"
7481
style="width: 280px">
7582
</sm-text>
76-
<sm-text :title="name" :font-style='{ fontSize: "18px", lineHeight: "18px", color:"#73b9ac", fontWeight: "700" }'
83+
<sm-text :title="name" :font-style='{ fontSize: "18px", color:"#73b9ac", fontWeight: "700" }'
7784
style="width: 100%">
7885
</sm-text>
7986
<!-- 指标微件 -->
80-
<sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" font-size="18px" style="width: 100%">
87+
<sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" style="width: 100%">
8188
</sm-indicator>
82-
<sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" font-size="18px" style="width: 100%"></sm-indicator>
89+
<sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" style="width: 100%"></sm-indicator>
8390
<sm-text title="同比增速" :font-style='{ fontSize: "12px",fontWeight: "bolder"}' text-color="rgb(51,51,51)"></sm-text>
8491

8592
<div :style="divStyle">
8693
<!-- 水球微件 -->
87-
<sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" wave-animation="true" style="float:left;">
94+
<sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" :wave-animation="true">
8895
</sm-liquid-fill>
8996
<!-- 进度条微件 -->
90-
<sm-progress type="circle" circle-width="100" :percentage="speedIncrease" style="margin-left:110px;">
91-
</sm-progress>
97+
<div class="sm-progress-wrap">
98+
<sm-progress type="circle" circle-width="100" :percentage="speedIncrease">
99+
</sm-progress>
100+
</div>
92101
</div>
93102

94103
<!-- 时间微件 -->
@@ -197,4 +206,4 @@
197206
</script>
198207
</body>
199208

200-
</html>
209+
</html>

0 commit comments

Comments
 (0)