Skip to content

Commit fe3b62f

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

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy