简柏林 / thingskit-scada · Commits

Commit ef71e5bb681d587d16b3f6ca05a8e21a3f8286c8

Authored by ww
1 parent 6a7d8a27

perf: video component responsvie layout on resize

Inline Side-by-side
Showing 4 changed files with 315 additions and 293 deletions
... ... @@ -171,7 +171,17 @@
171 171 /**
172 172 * @description 图表实例ID
173 173 */
174   - CHART_INSTANCE_ID: 'chartInstanceId'
  174 + CHART_INSTANCE_ID: 'chartInstanceId',
  175 +
  176 + /**
  177 + * @description 视频播放地址
  178 + */
  179 + VIDEO_URL: 'videoUrl',
  180 +
  181 + /**
  182 + * @description 视频类型
  183 + */
  184 + VIDEO_TYPE: 'videoType'
175 185 }
176 186
177 187 /**
... ... @@ -259,7 +269,6 @@
259 269 */
260 270 Sidebar.prototype.enumPermissionPanel = {
261 271 DATA_SOURCE: 'dataSource',
262   - // DISPLAY_TYPE: 'displayType',
263 272 LINE_CHART_EXPAND: 'lineChartExpandDataSource',
264 273 BAR_CHART_EXPAND: 'barChartExpandDataSource',
265 274 INTERACTION: 'interaction',
... ...
... ... @@ -53,31 +53,8 @@
53 53 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
54 54 })),
55 55 this.addEntry(this.getTagsForStencil('mxgraph.basic', '视频', 'basic').join(' '), mxUtils.bind(this, function () {
56   - const m3u8 = 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
57   - const mp4 = 'http://vjs.zencdn.net/v/oceans.mp4'
58   - const m3u8Type = 'application/x-mpegURL'
59   - const mp4Type = 'video/mp4'
60   - // const cell = new mxCell('<video></video>', new mxGeometry(0, 0, 100, 95), 'image;image=images/thingskit/video.svg;imageAspect=0;');
61   - const template = `
62   - <video
63   - id="my-player"
64   - class="video-js"
65   - controls
66   - preload="auto"
67   - muted="muted"
68   - poster="/thingskit-drawio/images/youtube.png"
69   - data-setup='{}'>
70   - <source src="${mp4}" type="${mp4Type}">
71   - <p class="vjs-no-js">
72   - To view this video please enable JavaScript, and consider upgrading to a
73   - web browser that
74   - <a href="https://videojs.com/html5-video-support/" target="_blank">
75   - supports HTML5 video
76   - </a>
77   - </p>
78   - </video>
79   - `
80   - const cell = new mxCell(template, new mxGeometry(0, 0, 100, 95), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
  56 + const template = createVideoTemplate()
  57 + const cell = new mxCell(template, new mxGeometry(0, 0, 300, 150), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
81 58 cell.setVertex(true)
82 59 this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
83 60 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
... ... @@ -88,6 +65,42 @@
88 65 this.setCurrentSearchEntryLibrary();
89 66 };
90 67
  68 + Sidebar.prototype.isVideo = function (cell) {
  69 + const basicAttr = Sidebar.prototype.enumCellBasicAttribute
  70 + const componentType = Sidebar.prototype.enumComponentType
  71 + return cell.getAttribute(basicAttr.COMPONENT_TYPE) === componentType.VIDEO
  72 + }
  73 +
  74 + /**
  75 + * @description charts cell发生resize时改变charts size
  76 + * @type {Function}
  77 + */
  78 + const cellResized = mxGraph.prototype.cellResized
  79 + mxGraph.prototype.cellResized = function (cell, rect) {
  80 + if (Sidebar.prototype.isVideo(cell)) {
  81 + const { width, height } = rect
  82 + cell.setAttribute('label', createVideoTemplate(width, height))
  83 + }
  84 + cellResized.apply(this, arguments)
  85 + }
  86 +
  87 + function createVideoTemplate(width = '100%', height = '100%') {
  88 + const m3u8 = 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
  89 + const mp4 = 'http://vjs.zencdn.net/v/oceans.mp4'
  90 + const m3u8Type = 'application/x-mpegURL'
  91 + const mp4Type = 'video/mp4'
  92 + const poster = `/thingskit-drawio/images/youtube.png`
  93 +
  94 + // const cell = new mxCell('<video></video>', new mxGeometry(0, 0, 100, 95), 'image;image=images/thingskit/video.svg;imageAspect=0;');
  95 + const template = `<video controls preload="auto" muted="muted" width="${width}" height="${height}" poster="${poster}" data-setup='{}'>
  96 + <source src="${mp4}" type="${mp4Type}">
  97 + <p class="vjs-no-js">
  98 + 要查看此视频,请启用JavaScript,并考虑升级web浏览器.
  99 + </p>
  100 + </video>`
  101 + return template
  102 + }
  103 +
91 104 //封装日期函数
92 105 function getCurrentDate() {
93 106 var date = new Date(); //创建日期对象
... ...
... ... @@ -13538,24 +13538,24 @@ class HandleDynamicEffect {
13538 13538 videoPlay() {
13539 13539 const basicAttr = Sidebar.prototype.enumCellBasicAttribute
13540 13540 const videoCell = this.DispatchInstance.contentAllCell.filter(cell => cell.getAttribute(basicAttr.COMPONENT_TYPE) === 'video')
13541   - const options = {
13542   - hls: {
13543   - withCredentials: true
13544   - }
13545   - }
13546   - var player = videojs('my-player', options, function onPlayerReady() {
13547   - videojs.log('Your player is ready!');
  13541 + // const options = {
  13542 + // hls: {
  13543 + // withCredentials: true
  13544 + // }
  13545 + // }
  13546 + // var player = videojs('my-player', options, function onPlayerReady() {
  13547 + // videojs.log('Your player is ready!');
13548 13548
13549   - // In this context, `this` is the player that was created by Video.js.
13550   - this.play();
  13549 + // // In this context, `this` is the player that was created by Video.js.
  13550 + // this.play();
13551 13551
13552   - // How about an event listener?
13553   - this.on('ended', function () {
13554   - videojs.log('Awww...over so soon?!');
13555   - });
13556   - });
  13552 + // // How about an event listener?
  13553 + // this.on('ended', function () {
  13554 + // videojs.log('Awww...over so soon?!');
  13555 + // });
  13556 + // });
13557 13557
13558   - console.log(player)
  13558 + // console.log(player)
13559 13559 // for (const cell of videoCell) {
13560 13560 // this.graph.getModel().beginUpdate()
13561 13561 // try {
... ...
... ... @@ -3,480 +3,480 @@
3 3 */
4 4
5 5 /* 更换主题后 layui 样式被覆盖 */
6   -.mxWindowPane .layui-form input[type=checkbox], .mxWindowPane .layui-form input[type=radio], .layui-form select {
7   - display: none !important;
  6 +.mxWindowPane .layui-form input[type='checkbox'],
  7 +.mxWindowPane .layui-form input[type='radio'],
  8 +.layui-form select {
  9 + display: none !important;
8 10 }
9 11
10 12 .mxWindowPane .layui-form input {
11   - border-color: #eee !important;
12   - border-width: 2px !important;
13   - padding: 0 10px !important;
  13 + border-color: #eee !important;
  14 + border-width: 2px !important;
  15 + padding: 0 10px !important;
14 16 }
15 17
16 18 .mxWindowPane .things-kit-tree-select__tree .layui-select-title {
17   - display: flex;
  19 + display: flex;
18 20 }
19 21
20   -
21 22 /* */
22 23 .override__panel--default {
23   - padding: 8px 14px !important;
24   - border-bottom: none !important;
  24 + padding: 8px 14px !important;
  25 + border-bottom: none !important;
25 26 }
26 27
27 28 .override__title--default {
28   - width: 100% !important;
29   - padding: 6px 0 6px 6px !important;
30   - border-top: 1px solid #dadce0 !important
  29 + width: 100% !important;
  30 + padding: 6px 0 6px 6px !important;
  31 + border-top: 1px solid #dadce0 !important;
31 32 }
32 33
33 34 .interaction__container {
34   - display: flex;
35   - justify-content: center;
36   - align-items: center;
  35 + display: flex;
  36 + justify-content: center;
  37 + align-items: center;
37 38 }
38 39
39 40 .interaction__container > div {
40   - flex: auto;
  41 + flex: auto;
41 42 }
42 43
43 44 .interaction__container > i {
44   - display: block;
45   - width: 20px;
46   - height: 20px;
47   - cursor: pointer;
48   - background-image: url(../images/edit20.png);
  45 + display: block;
  46 + width: 20px;
  47 + height: 20px;
  48 + cursor: pointer;
  49 + background-image: url(../images/edit20.png);
49 50 }
50 51
51 52 /* ==== 数据源组件样式 ==== */
52 53 .data-source__component-style {
53   - padding: 10px;
  54 + padding: 10px;
54 55 }
55 56
56 57 .data-source__component-style > div {
57   - margin-bottom: 10px;
  58 + margin-bottom: 10px;
58 59 }
59 60
60 61 .data-source__component-select > .layui-form-label {
61   - float: left;
62   - display: block;
63   - padding: 9px 10px 9px 0;
64   - width: 60px;
65   - font-weight: 400;
66   - line-height: 20px;
67   - text-align: right;
68   - box-sizing: border-box;
  62 + float: left;
  63 + display: block;
  64 + padding: 9px 10px 9px 0;
  65 + width: 60px;
  66 + font-weight: 400;
  67 + line-height: 20px;
  68 + text-align: right;
  69 + box-sizing: border-box;
69 70 }
70 71
71 72 .data-source__component-select > .layui-input-block {
72   - margin-left: 60px;
73   - min-height: 36px;
  73 + margin-left: 60px;
  74 + min-height: 36px;
74 75 }
75 76
76 77 /* ========= 数据源部分 ============ */
77 78 .data-source__select-container {
78   - display: flex;
79   - align-items: center;
80   - overflow: visible !important;
81   - padding: 8px 0 8px 14px !important;
82   - margin-left: 0;
  79 + display: flex;
  80 + align-items: center;
  81 + overflow: visible !important;
  82 + padding: 8px 0 8px 14px !important;
  83 + margin-left: 0;
83 84 }
84 85
85   -
86 86 .data-source__submit-panel {
87   - display: flex;
88   - padding: 10px !important;
89   - border-bottom: none;
90   - flex-direction: column-reverse;
  87 + display: flex;
  88 + padding: 10px !important;
  89 + border-bottom: none;
  90 + flex-direction: column-reverse;
91 91 }
92 92
93 93 /* ============ event layer 事件弹窗 ====================== */
94 94 .event-layer__override .layui-layer-content {
95   - overflow: visible !important;
  95 + overflow: visible !important;
96 96 }
97 97
98 98 /* ================ Tree Select ================== */
99 99
100   -
101 100 .things-kit-tree-select__tree .layui-select-title span {
102   - line-height: 38px;
  101 + line-height: 38px;
103 102 }
104 103
105 104 .things-kit-tree-select__tree dl {
106   - padding: 10px 0;
  105 + padding: 10px 0;
107 106 }
108 107
109 108 .things-kit-tree-select__tree dl dd:hover {
110   - background-color: #fff;
  109 + background-color: #fff;
111 110 }
112 111
113 112 .things-kit-tree-select__tree .layui-input {
114   - border-width: 2px;
  113 + border-width: 2px;
115 114 }
116 115
117 116 /* ============== checkbox ===================== */
118 117
119 118 .things-kit__checkbox .layui-form-label {
120   - max-width: 80px;
121   - padding: 9px 0;
122   - width: auto;
123   - border: none;
  119 + max-width: 80px;
  120 + padding: 9px 0;
  121 + width: auto;
  122 + border: none;
124 123 }
125 124
126 125 .things-kit__checkbox {
127   - display: flex;
128   - margin-bottom: 0;
  126 + display: flex;
  127 + margin-bottom: 0;
129 128 }
130 129
131 130 .things-kit__checkbox .layui-input-block {
132   - margin-left: 0;
133   - padding: 0 10px;
134   - flex: auto;
  131 + margin-left: 0;
  132 + padding: 0 10px;
  133 + flex: auto;
135 134 }
136 135
137 136 /* ================== override table ===================== */
138   -.override__table th, .override__table td {
139   - min-width: 150px;
140   - flex: 1;
141   - box-sizing: border-box;
142   - display: flex;
143   - align-items: center;
144   - justify-content: center;
  137 +.override__table th,
  138 +.override__table td {
  139 + min-width: 150px;
  140 + flex: 1;
  141 + box-sizing: border-box;
  142 + display: flex;
  143 + align-items: center;
  144 + justify-content: center;
145 145 }
146 146
147   -.override__table th:last-of-type, .override__table td:last-of-type {
148   - flex: 0 0 80px;
  147 +.override__table th:last-of-type,
  148 +.override__table td:last-of-type {
  149 + flex: 0 0 80px;
149 150 }
150 151
151 152 .override__table thead {
152   - width: calc(100% - 14px) !important;
  153 + width: calc(100% - 14px) !important;
153 154 }
154 155
155 156 .override__table tbody {
156   - display: block;
157   - max-height: 300px;
158   - overflow-y: scroll;
159   - scroll-behavior: smooth;
  157 + display: block;
  158 + max-height: 300px;
  159 + overflow-y: scroll;
  160 + scroll-behavior: smooth;
160 161 }
161 162
162   -.override__table thead, .override__table tr {
163   - display: flex;
164   - width: 100%;
165   - table-layout: fixed;
  163 +.override__table thead,
  164 +.override__table tr {
  165 + display: flex;
  166 + width: 100%;
  167 + table-layout: fixed;
166 168 }
167 169
168 170 /**/
169 171 .override__radio-default {
170   - margin-right: 16px;
  172 + margin-right: 16px;
171 173 }
172 174
173 175 .override__radio-default .override__radio-label {
174   - cursor: pointer;
  176 + cursor: pointer;
175 177 }
176 178
177   -.override__radio-default input[type="radio"] {
178   - position: absolute;
179   - opacity: 0;
  179 +.override__radio-default input[type='radio'] {
  180 + position: absolute;
  181 + opacity: 0;
180 182 }
181 183
182   -.override__radio-default input[type="radio"] + .override__radio-label:before {
183   - content: "";
184   - background: #fff;
185   - border-radius: 100%;
186   - border: 1px solid #c8c8c8;
187   - display: inline-block;
188   - width: 14px;
189   - height: 14px;
190   - position: relative;
191   - margin-right: 8px;
192   - top: 1.5px;
193   - vertical-align: top;
194   - cursor: pointer;
195   - text-align: center;
196   - -webkit-transition: all 250ms ease;
197   - transition: all 250ms ease;
  184 +.override__radio-default input[type='radio'] + .override__radio-label:before {
  185 + content: '';
  186 + background: #fff;
  187 + border-radius: 100%;
  188 + border: 1px solid #c8c8c8;
  189 + display: inline-block;
  190 + width: 14px;
  191 + height: 14px;
  192 + position: relative;
  193 + margin-right: 8px;
  194 + top: 1.5px;
  195 + vertical-align: top;
  196 + cursor: pointer;
  197 + text-align: center;
  198 + -webkit-transition: all 250ms ease;
  199 + transition: all 250ms ease;
198 200 }
199 201
200   -.override__radio-default input[type="radio"] + .override__radio-label:hover:before {
201   - border: 1px solid #5FB878;
  202 +.override__radio-default input[type='radio'] + .override__radio-label:hover:before {
  203 + border: 1px solid #5fb878;
202 204 }
203 205
204   -.override__radio-default input[type="radio"]:checked + .override__radio-label:before {
205   - background-color: #5FB878;
206   - box-shadow: inset 0 0 0 3px #f4f4f4;
207   - border-color: #5FB878;
  206 +.override__radio-default input[type='radio']:checked + .override__radio-label:before {
  207 + background-color: #5fb878;
  208 + box-shadow: inset 0 0 0 3px #f4f4f4;
  209 + border-color: #5fb878;
208 210 }
209 211
210   -.override__radio-default input[type="radio"]:focus + .override__radio-label:before {
211   - outline: none;
212   - border-color: #5FB878;
  212 +.override__radio-default input[type='radio']:focus + .override__radio-label:before {
  213 + outline: none;
  214 + border-color: #5fb878;
213 215 }
214 216
215   -.override__radio-default input[type="radio"]:disabled:checked + .override__radio-label:before {
216   - box-shadow: inset 0 0 0 3px #f4f4f4;
217   - border-color: #c8c8c8;
218   - background: #c8c8c8;
  217 +.override__radio-default input[type='radio']:disabled:checked + .override__radio-label:before {
  218 + box-shadow: inset 0 0 0 3px #f4f4f4;
  219 + border-color: #c8c8c8;
  220 + background: #c8c8c8;
219 221 }
220 222
221   -.override__radio-default input[type="radio"]:disabled + .override__radio-label:before {
222   - border-color: #c8c8c8;
223   - cursor: not-allowed;
  223 +.override__radio-default input[type='radio']:disabled + .override__radio-label:before {
  224 + border-color: #c8c8c8;
  225 + cursor: not-allowed;
224 226 }
225 227
226   -.override__radio-default input[type="radio"]:disabled + .override__radio-label {
227   - color: #c8c8c8;
228   - cursor: not-allowed;
  228 +.override__radio-default input[type='radio']:disabled + .override__radio-label {
  229 + color: #c8c8c8;
  230 + cursor: not-allowed;
229 231 }
230 232
231   -.override__radio-default input[type="radio"]:disabled:checked + .override__radio-label {
232   - color: #c8c8c8;
233   - cursor: not-allowed;
  233 +.override__radio-default input[type='radio']:disabled:checked + .override__radio-label {
  234 + color: #c8c8c8;
  235 + cursor: not-allowed;
234 236 }
235 237
236   -.override__radio-default input[type="radio"] + .override__radio-label:empty:before {
237   - margin-right: 0;
  238 +.override__radio-default input[type='radio'] + .override__radio-label:empty:before {
  239 + margin-right: 0;
238 240 }
239 241
240 242 /* ======= 图片上传 ====== */
241 243
242 244 .variableImageTableSetImgEl {
243   - width: 70px;
244   - height: 70px;
245   - position: relative;
246   - border: 1px solid #f2f2f2;
247   - color: #d3d2d2;
248   - cursor: pointer;
  245 + width: 70px;
  246 + height: 70px;
  247 + position: relative;
  248 + border: 1px solid #f2f2f2;
  249 + color: #d3d2d2;
  250 + cursor: pointer;
249 251 }
250 252
251 253 .variableImageTableSetImgEl .add__button {
252   - font-size: 50px;
253   - text-align: center;
254   - width: 100%;
255   - height: 70px;
256   - line-height: 70px;
257   - color: #d3d2d2;
258   - display: none;
  254 + font-size: 50px;
  255 + text-align: center;
  256 + width: 100%;
  257 + height: 70px;
  258 + line-height: 70px;
  259 + color: #d3d2d2;
  260 + display: none;
259 261 }
260 262
261 263 .variableImageTableSetImgEl .img__delete {
262   - position: absolute;
263   - top: 0;
264   - width: 8px;
265   - height: 8px;
266   - right: 0;
267   - line-height: 8px;
268   - cursor: pointer;
  264 + position: absolute;
  265 + top: 0;
  266 + width: 8px;
  267 + height: 8px;
  268 + right: 0;
  269 + line-height: 8px;
  270 + cursor: pointer;
269 271 }
270 272
271 273 .variableImageTableSetImgEl .img__delete:hover {
272   - color: #5FB878;
  274 + color: #5fb878;
273 275 }
274 276
275 277 .variableImageTableSetImgEl img {
276   - position: absolute;
277   - width: 80%;
278   - height: 80%;
279   - top: 10%;
280   - left: 10%;
  278 + position: absolute;
  279 + width: 80%;
  280 + height: 80%;
  281 + top: 10%;
  282 + left: 10%;
281 283 }
282 284
283 285 .variableImageTableSetImgEl img[src=''] {
284   - opacity: 0;
  286 + opacity: 0;
285 287 }
286 288
287 289 .variableImageTableSetImgEl img[src=''] ~ .add__button {
288   - display: block;
  290 + display: block;
289 291 }
290 292
291 293 .variableImageTableSetImgEl img[src=''] ~ .img__delete {
292   - display: none;
  294 + display: none;
293 295 }
294 296
295 297 .var-image__radio {
296   - padding: 0 20px;
  298 + padding: 0 20px;
297 299 }
298 300
299 301 #imgSelectContainerEl {
300   - color: #666;
301   - padding: 10px 20px;
  302 + color: #666;
  303 + padding: 10px 20px;
302 304 }
303 305
304 306 #var-image__upload--local {
305   - width: 100px;
306   - height: 100px;
307   - border: 1px solid #F0F0F0;
308   - margin-bottom: 20px;
309   - cursor: pointer;
  307 + width: 100px;
  308 + height: 100px;
  309 + border: 1px solid #f0f0f0;
  310 + margin-bottom: 20px;
  311 + cursor: pointer;
310 312 }
311 313
312 314 .var-image__container--local {
313   - padding: 10px 20px;
  315 + padding: 10px 20px;
314 316 }
315 317
316 318 .var-image__container--gallery {
317   - display: flex;
318   - padding: 10px 20px;
  319 + display: flex;
  320 + padding: 10px 20px;
319 321 }
320 322
321 323 #var-image__container-sidebar {
322   - display: flex;
323   - flex-direction: column;
324   - flex: 0 0 150px;
325   - height: 200px;
326   - overflow-y: auto;
327   - margin-right: 5px;
328   - border: 1px solid #F2F2F2;
  324 + display: flex;
  325 + flex-direction: column;
  326 + flex: 0 0 150px;
  327 + height: 200px;
  328 + overflow-y: auto;
  329 + margin-right: 5px;
  330 + border: 1px solid #f2f2f2;
329 331 }
330 332
331 333 .var-image__category {
332   - height: 20px;
333   - padding: 10px;
334   - cursor: pointer;
  334 + height: 20px;
  335 + padding: 10px;
  336 + cursor: pointer;
335 337 }
336 338
337 339 #var-image__container-content {
338   - display: flex;
339   - flex: 0 0 400px;
340   - flex-wrap: wrap;
341   - height: 200px;
342   - overflow: auto;
343   - justify-content: start;
344   - align-content: flex-start;
345   - border: 1px solid #F2F2F2;
  340 + display: flex;
  341 + flex: 0 0 400px;
  342 + flex-wrap: wrap;
  343 + height: 200px;
  344 + overflow: auto;
  345 + justify-content: start;
  346 + align-content: flex-start;
  347 + border: 1px solid #f2f2f2;
346 348 }
347 349
348 350 .var-image__img-item {
349   - flex: 0 0 70px;
350   - height: 70px;
351   - box-sizing: border-box;
352   - overflow: hidden;
353   - margin: 10px;
354   - padding: 5px;
355   - cursor: pointer;
  351 + flex: 0 0 70px;
  352 + height: 70px;
  353 + box-sizing: border-box;
  354 + overflow: hidden;
  355 + margin: 10px;
  356 + padding: 5px;
  357 + cursor: pointer;
356 358 }
357 359
358 360 .var-image__img-item img {
359   - width: 100%;
360   - height: 100%;
361   - cursor: pointer;
362   - pointer-events: none;
  361 + width: 100%;
  362 + height: 100%;
  363 + cursor: pointer;
  364 + pointer-events: none;
363 365 }
364 366
365 367 .var-image__img-item:hover {
366   - border: 2px solid #5FB878;
  368 + border: 2px solid #5fb878;
367 369 }
368 370
369 371 .var-image__category--checked {
370   - background-color: #F2F2F2;
371   - color: #5FB878;
  372 + background-color: #f2f2f2;
  373 + color: #5fb878;
372 374 }
373 375
374 376 .var-image__img-item--checked {
375   - border: 2px solid #5FB878;
  377 + border: 2px solid #5fb878;
376 378 }
377 379
378 380 #var-image__container--local {
379   - position: relative;
380   - cursor: pointer;
381   - width: 100px;
382   - height: 100px;
  381 + position: relative;
  382 + cursor: pointer;
  383 + width: 100px;
  384 + height: 100px;
383 385 }
384 386
385 387 #var-image__container--local .preview__img {
386   - width: 100%;
387   - height: 100%;
  388 + width: 100%;
  389 + height: 100%;
388 390 }
389 391
390 392 #preview__img--preview {
391   - position: absolute;
392   - top: 10%;
393   - left: 10%;
394   - width: 80%;
395   - height: 80%;
  393 + position: absolute;
  394 + top: 10%;
  395 + left: 10%;
  396 + width: 80%;
  397 + height: 80%;
396 398 }
397 399
398   -
399 400 #var-image__container--local {
400   - border: 1px solid #d3d2d2;
  401 + border: 1px solid #d3d2d2;
401 402 }
402 403
403 404 #var-image__container--local .var-image__del-icon {
404   - position: absolute;
405   - top: 0;
406   - right: 0;
407   - width: 8px;
408   - height: 8px;
409   - line-height: 8px;
410   - color: #D3D2D2;
411   - display: block;
412   - user-select: none;
  405 + position: absolute;
  406 + top: 0;
  407 + right: 0;
  408 + width: 8px;
  409 + height: 8px;
  410 + line-height: 8px;
  411 + color: #d3d2d2;
  412 + display: block;
  413 + user-select: none;
413 414 }
414 415
415 416 #var-image__container--local .var-image__del-icon:hover {
416   - color: #5FB878;
  417 + color: #5fb878;
417 418 }
418 419
419 420 #var-image__container--local .var_image__add-icon {
420   - position: absolute;
421   - top: 0;
422   - line-height: 100px;
423   - width: 100%;
424   - text-align: center;
425   - font-size: 50px;
426   - color: #d3d2d2;
427   - display: none;
  421 + position: absolute;
  422 + top: 0;
  423 + line-height: 100px;
  424 + width: 100%;
  425 + text-align: center;
  426 + font-size: 50px;
  427 + color: #d3d2d2;
  428 + display: none;
428 429 }
429 430
430   -#var-image__container--local img[src=""] + .var_image__add-icon {
431   - display: block;
  431 +#var-image__container--local img[src=''] + .var_image__add-icon {
  432 + display: block;
432 433 }
433 434
434   -#var-image__container--local img[src=""] ~ .var-image__del-icon {
435   - display: none;
  435 +#var-image__container--local img[src=''] ~ .var-image__del-icon {
  436 + display: none;
436 437 }
437 438
438   -#var-image__container--local img[src=""] {
439   - opacity: 0;
  439 +#var-image__container--local img[src=''] {
  440 + opacity: 0;
440 441 }
441 442
442 443 /* ===== 数据动效 */
443 444 .dynamic-effect__data-source-comp--override {
444   - padding: 0;
  445 + padding: 0;
445 446 }
446 447
447 448 .dynamic-effect__data-source-comp--override .data-source__component-select > .layui-form-label {
448   - float: left;
449   - display: block;
450   - padding: 9px 15px;
451   - width: 80px;
452   - font-weight: 400;
453   - line-height: 20px;
454   - text-align: right;
455   - box-sizing: content-box;
  449 + float: left;
  450 + display: block;
  451 + padding: 9px 15px;
  452 + width: 80px;
  453 + font-weight: 400;
  454 + line-height: 20px;
  455 + text-align: right;
  456 + box-sizing: content-box;
456 457 }
457 458
458 459 .dynamic-effect__data-source-comp--override .data-source__component-select > .layui-input-block {
459   - margin-left: 110px;
460   - min-height: 36px;
  460 + margin-left: 110px;
  461 + min-height: 36px;
461 462 }
462 463
463 464 // 展示类型
464 465
465 466 .chart-panel__style {
466   - padding: 10px;
  467 + padding: 10px;
467 468 }
468 469
469 470 .chart-panel__style .layui-form-item {
470   - display: flex
  471 + display: flex;
471 472 }
472 473
473   -.chart-panel__style .layui-form-label{
474   - width: 60px;
475   - box-sizing: border-box;
476   - padding: 9px 10px 9px 0;
  474 +.chart-panel__style .layui-form-label {
  475 + width: 60px;
  476 + box-sizing: border-box;
  477 + padding: 9px 10px 9px 0;
477 478 }
478 479
479   -
480   -.chart-panel__style .layui-input-block{
481   - margin-left: 0px !important;
  480 +.chart-panel__style .layui-input-block {
  481 + margin-left: 0px !important;
482 482 }
... ...