简柏林 / 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,7 +171,17 @@
171 /** 171 /**
172 * @description 图表实例ID 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,7 +269,6 @@
259 */ 269 */
260 Sidebar.prototype.enumPermissionPanel = { 270 Sidebar.prototype.enumPermissionPanel = {
261 DATA_SOURCE: 'dataSource', 271 DATA_SOURCE: 'dataSource',
262 - // DISPLAY_TYPE: 'displayType',  
263 LINE_CHART_EXPAND: 'lineChartExpandDataSource', 272 LINE_CHART_EXPAND: 'lineChartExpandDataSource',
264 BAR_CHART_EXPAND: 'barChartExpandDataSource', 273 BAR_CHART_EXPAND: 'barChartExpandDataSource',
265 INTERACTION: 'interaction', 274 INTERACTION: 'interaction',
@@ -53,31 +53,8 @@ @@ -53,31 +53,8 @@
53 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片'); 53 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
54 })), 54 })),
55 this.addEntry(this.getTagsForStencil('mxgraph.basic', '视频', 'basic').join(' '), mxUtils.bind(this, function () { 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 cell.setVertex(true) 58 cell.setVertex(true)
82 this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO }) 59 this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
83 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频'); 60 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
@@ -88,6 +65,42 @@ @@ -88,6 +65,42 @@
88 this.setCurrentSearchEntryLibrary(); 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 function getCurrentDate() { 105 function getCurrentDate() {
93 var date = new Date(); //创建日期对象 106 var date = new Date(); //创建日期对象
@@ -13538,24 +13538,24 @@ class HandleDynamicEffect { @@ -13538,24 +13538,24 @@ class HandleDynamicEffect {
13538 videoPlay() { 13538 videoPlay() {
13539 const basicAttr = Sidebar.prototype.enumCellBasicAttribute 13539 const basicAttr = Sidebar.prototype.enumCellBasicAttribute
13540 const videoCell = this.DispatchInstance.contentAllCell.filter(cell => cell.getAttribute(basicAttr.COMPONENT_TYPE) === 'video') 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 // for (const cell of videoCell) { 13559 // for (const cell of videoCell) {
13560 // this.graph.getModel().beginUpdate() 13560 // this.graph.getModel().beginUpdate()
13561 // try { 13561 // try {
@@ -3,480 +3,480 @@ @@ -3,480 +3,480 @@
3 */ 3 */
4 4
5 /* 更换主题后 layui 样式被覆盖 */ 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 .mxWindowPane .layui-form input { 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 .mxWindowPane .things-kit-tree-select__tree .layui-select-title { 18 .mxWindowPane .things-kit-tree-select__tree .layui-select-title {
17 - display: flex; 19 + display: flex;
18 } 20 }
19 21
20 -  
21 /* */ 22 /* */
22 .override__panel--default { 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 .override__title--default { 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 .interaction__container { 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 .interaction__container > div { 40 .interaction__container > div {
40 - flex: auto; 41 + flex: auto;
41 } 42 }
42 43
43 .interaction__container > i { 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 .data-source__component-style { 53 .data-source__component-style {
53 - padding: 10px; 54 + padding: 10px;
54 } 55 }
55 56
56 .data-source__component-style > div { 57 .data-source__component-style > div {
57 - margin-bottom: 10px; 58 + margin-bottom: 10px;
58 } 59 }
59 60
60 .data-source__component-select > .layui-form-label { 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 .data-source__component-select > .layui-input-block { 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 .data-source__select-container { 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 .data-source__submit-panel { 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 /* ============ event layer 事件弹窗 ====================== */ 93 /* ============ event layer 事件弹窗 ====================== */
94 .event-layer__override .layui-layer-content { 94 .event-layer__override .layui-layer-content {
95 - overflow: visible !important; 95 + overflow: visible !important;
96 } 96 }
97 97
98 /* ================ Tree Select ================== */ 98 /* ================ Tree Select ================== */
99 99
100 -  
101 .things-kit-tree-select__tree .layui-select-title span { 100 .things-kit-tree-select__tree .layui-select-title span {
102 - line-height: 38px; 101 + line-height: 38px;
103 } 102 }
104 103
105 .things-kit-tree-select__tree dl { 104 .things-kit-tree-select__tree dl {
106 - padding: 10px 0; 105 + padding: 10px 0;
107 } 106 }
108 107
109 .things-kit-tree-select__tree dl dd:hover { 108 .things-kit-tree-select__tree dl dd:hover {
110 - background-color: #fff; 109 + background-color: #fff;
111 } 110 }
112 111
113 .things-kit-tree-select__tree .layui-input { 112 .things-kit-tree-select__tree .layui-input {
114 - border-width: 2px; 113 + border-width: 2px;
115 } 114 }
116 115
117 /* ============== checkbox ===================== */ 116 /* ============== checkbox ===================== */
118 117
119 .things-kit__checkbox .layui-form-label { 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 .things-kit__checkbox { 125 .things-kit__checkbox {
127 - display: flex;  
128 - margin-bottom: 0; 126 + display: flex;
  127 + margin-bottom: 0;
129 } 128 }
130 129
131 .things-kit__checkbox .layui-input-block { 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 /* ================== override table ===================== */ 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 .override__table thead { 152 .override__table thead {
152 - width: calc(100% - 14px) !important; 153 + width: calc(100% - 14px) !important;
153 } 154 }
154 155
155 .override__table tbody { 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 .override__radio-default { 171 .override__radio-default {
170 - margin-right: 16px; 172 + margin-right: 16px;
171 } 173 }
172 174
173 .override__radio-default .override__radio-label { 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 .variableImageTableSetImgEl { 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 .variableImageTableSetImgEl .add__button { 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 .variableImageTableSetImgEl .img__delete { 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 .variableImageTableSetImgEl .img__delete:hover { 273 .variableImageTableSetImgEl .img__delete:hover {
272 - color: #5FB878; 274 + color: #5fb878;
273 } 275 }
274 276
275 .variableImageTableSetImgEl img { 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 .variableImageTableSetImgEl img[src=''] { 285 .variableImageTableSetImgEl img[src=''] {
284 - opacity: 0; 286 + opacity: 0;
285 } 287 }
286 288
287 .variableImageTableSetImgEl img[src=''] ~ .add__button { 289 .variableImageTableSetImgEl img[src=''] ~ .add__button {
288 - display: block; 290 + display: block;
289 } 291 }
290 292
291 .variableImageTableSetImgEl img[src=''] ~ .img__delete { 293 .variableImageTableSetImgEl img[src=''] ~ .img__delete {
292 - display: none; 294 + display: none;
293 } 295 }
294 296
295 .var-image__radio { 297 .var-image__radio {
296 - padding: 0 20px; 298 + padding: 0 20px;
297 } 299 }
298 300
299 #imgSelectContainerEl { 301 #imgSelectContainerEl {
300 - color: #666;  
301 - padding: 10px 20px; 302 + color: #666;
  303 + padding: 10px 20px;
302 } 304 }
303 305
304 #var-image__upload--local { 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 .var-image__container--local { 314 .var-image__container--local {
313 - padding: 10px 20px; 315 + padding: 10px 20px;
314 } 316 }
315 317
316 .var-image__container--gallery { 318 .var-image__container--gallery {
317 - display: flex;  
318 - padding: 10px 20px; 319 + display: flex;
  320 + padding: 10px 20px;
319 } 321 }
320 322
321 #var-image__container-sidebar { 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 .var-image__category { 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 #var-image__container-content { 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 .var-image__img-item { 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 .var-image__img-item img { 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 .var-image__img-item:hover { 367 .var-image__img-item:hover {
366 - border: 2px solid #5FB878; 368 + border: 2px solid #5fb878;
367 } 369 }
368 370
369 .var-image__category--checked { 371 .var-image__category--checked {
370 - background-color: #F2F2F2;  
371 - color: #5FB878; 372 + background-color: #f2f2f2;
  373 + color: #5fb878;
372 } 374 }
373 375
374 .var-image__img-item--checked { 376 .var-image__img-item--checked {
375 - border: 2px solid #5FB878; 377 + border: 2px solid #5fb878;
376 } 378 }
377 379
378 #var-image__container--local { 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 #var-image__container--local .preview__img { 387 #var-image__container--local .preview__img {
386 - width: 100%;  
387 - height: 100%; 388 + width: 100%;
  389 + height: 100%;
388 } 390 }
389 391
390 #preview__img--preview { 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 #var-image__container--local { 400 #var-image__container--local {
400 - border: 1px solid #d3d2d2; 401 + border: 1px solid #d3d2d2;
401 } 402 }
402 403
403 #var-image__container--local .var-image__del-icon { 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 #var-image__container--local .var-image__del-icon:hover { 416 #var-image__container--local .var-image__del-icon:hover {
416 - color: #5FB878; 417 + color: #5fb878;
417 } 418 }
418 419
419 #var-image__container--local .var_image__add-icon { 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 .dynamic-effect__data-source-comp--override { 444 .dynamic-effect__data-source-comp--override {
444 - padding: 0; 445 + padding: 0;
445 } 446 }
446 447
447 .dynamic-effect__data-source-comp--override .data-source__component-select > .layui-form-label { 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 .dynamic-effect__data-source-comp--override .data-source__component-select > .layui-input-block { 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 .chart-panel__style { 466 .chart-panel__style {
466 - padding: 10px; 467 + padding: 10px;
467 } 468 }
468 469
469 .chart-panel__style .layui-form-item { 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 }