zartui 1.0.18 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ .zt-circle{position:relative;display:inline-block;width:100px;height:100px;text-align:center}.zt-circle svg{position:absolute;top:0;left:0;width:100%;height:100%}.zt-circle__layer{stroke:#fff}.zt-circle__hover{fill:none;stroke:#0091fa;stroke-linecap:round}.zt-circle__text{position:absolute;top:50%;left:0;box-sizing:border-box;width:100%;padding:0 4px;color:rgba(0,0,0,.6);font-weight:700;font-size:14px;line-height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
@@ -0,0 +1,175 @@
1
+ import { createNamespace, isObject, addUnit } from '../utils';
2
+ import { raf, cancelRaf } from '../utils/dom/raf';
3
+
4
+ var _createNamespace = createNamespace('circle'),
5
+ createComponent = _createNamespace[0],
6
+ bem = _createNamespace[1];
7
+
8
+ var PERIMETER = 3140;
9
+ var uid = 0;
10
+
11
+ function format(rate) {
12
+ return Math.min(Math.max(rate, 0), 100);
13
+ }
14
+
15
+ function getPath(clockwise, viewBoxSize) {
16
+ var sweepFlag = clockwise ? 1 : 0;
17
+ return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
18
+ }
19
+
20
+ export default createComponent({
21
+ props: {
22
+ text: String,
23
+ size: [Number, String],
24
+ color: [String, Object],
25
+ layerColor: String,
26
+ strokeLinecap: String,
27
+ value: {
28
+ type: Number,
29
+ default: 0
30
+ },
31
+ speed: {
32
+ type: [Number, String],
33
+ default: 0
34
+ },
35
+ fill: {
36
+ type: String,
37
+ default: 'none'
38
+ },
39
+ rate: {
40
+ type: [Number, String],
41
+ default: 100
42
+ },
43
+ strokeWidth: {
44
+ type: [Number, String],
45
+ default: 40
46
+ },
47
+ clockwise: {
48
+ type: Boolean,
49
+ default: true
50
+ }
51
+ },
52
+ beforeCreate: function beforeCreate() {
53
+ this.uid = "zt-circle-gradient-" + uid++;
54
+ },
55
+ computed: {
56
+ style: function style() {
57
+ var size = addUnit(this.size);
58
+ return {
59
+ width: size,
60
+ height: size
61
+ };
62
+ },
63
+ path: function path() {
64
+ return getPath(this.clockwise, this.viewBoxSize);
65
+ },
66
+ viewBoxSize: function viewBoxSize() {
67
+ return +this.strokeWidth + 1000;
68
+ },
69
+ layerStyle: function layerStyle() {
70
+ return {
71
+ fill: "" + this.fill,
72
+ stroke: "" + this.layerColor,
73
+ strokeWidth: this.strokeWidth + "px"
74
+ };
75
+ },
76
+ hoverStyle: function hoverStyle() {
77
+ var offset = PERIMETER * this.value / 100;
78
+ return {
79
+ stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
80
+ strokeWidth: +this.strokeWidth + 1 + "px",
81
+ strokeLinecap: this.strokeLinecap,
82
+ strokeDasharray: offset + "px " + PERIMETER + "px"
83
+ };
84
+ },
85
+ gradient: function gradient() {
86
+ return isObject(this.color);
87
+ },
88
+ LinearGradient: function LinearGradient() {
89
+ var _this = this;
90
+
91
+ var h = this.$createElement;
92
+
93
+ if (!this.gradient) {
94
+ return;
95
+ }
96
+
97
+ var Stops = Object.keys(this.color).sort(function (a, b) {
98
+ return parseFloat(a) - parseFloat(b);
99
+ }).map(function (key, index) {
100
+ return h("stop", {
101
+ "key": index,
102
+ "attrs": {
103
+ "offset": key,
104
+ "stop-color": _this.color[key]
105
+ }
106
+ });
107
+ });
108
+ return h("defs", [h("linearGradient", {
109
+ "attrs": {
110
+ "id": this.uid,
111
+ "x1": "100%",
112
+ "y1": "0%",
113
+ "x2": "0%",
114
+ "y2": "0%"
115
+ }
116
+ }, [Stops])]);
117
+ }
118
+ },
119
+ watch: {
120
+ rate: {
121
+ handler: function handler(rate) {
122
+ this.startTime = Date.now();
123
+ this.startRate = this.value;
124
+ this.endRate = format(rate);
125
+ this.increase = this.endRate > this.startRate;
126
+ this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
127
+
128
+ if (this.speed) {
129
+ cancelRaf(this.rafId);
130
+ this.rafId = raf(this.animate);
131
+ } else {
132
+ this.$emit('input', this.endRate);
133
+ }
134
+ },
135
+ immediate: true
136
+ }
137
+ },
138
+ methods: {
139
+ animate: function animate() {
140
+ var now = Date.now();
141
+ var progress = Math.min((now - this.startTime) / this.duration, 1);
142
+ var rate = progress * (this.endRate - this.startRate) + this.startRate;
143
+ this.$emit('input', format(parseFloat(rate.toFixed(1))));
144
+
145
+ if (this.increase ? rate < this.endRate : rate > this.endRate) {
146
+ this.rafId = raf(this.animate);
147
+ }
148
+ }
149
+ },
150
+ render: function render() {
151
+ var h = arguments[0];
152
+ return h("div", {
153
+ "class": bem(),
154
+ "style": this.style
155
+ }, [h("svg", {
156
+ "attrs": {
157
+ "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
158
+ }
159
+ }, [this.LinearGradient, h("path", {
160
+ "class": bem('layer'),
161
+ "style": this.layerStyle,
162
+ "attrs": {
163
+ "d": this.path
164
+ }
165
+ }), h("path", {
166
+ "attrs": {
167
+ "d": this.path
168
+ },
169
+ "class": bem('hover'),
170
+ "style": this.hoverStyle
171
+ })]), this.slots() || this.text && h("div", {
172
+ "class": bem('text')
173
+ }, [this.text])]);
174
+ }
175
+ });
@@ -0,0 +1,41 @@
1
+ @import '../style/var';
2
+
3
+ .zt-circle {
4
+ position: relative;
5
+ display: inline-block;
6
+ width: @circle-size;
7
+ height: @circle-size;
8
+ text-align: center;
9
+
10
+ svg {
11
+ position: absolute;
12
+ top: 0;
13
+ left: 0;
14
+ width: 100%;
15
+ height: 100%;
16
+ }
17
+
18
+ &__layer {
19
+ stroke: @circle-layer-color;
20
+ }
21
+
22
+ &__hover {
23
+ fill: none;
24
+ stroke: @circle-color;
25
+ stroke-linecap: round;
26
+ }
27
+
28
+ &__text {
29
+ position: absolute;
30
+ top: 50%;
31
+ left: 0;
32
+ box-sizing: border-box;
33
+ width: 100%;
34
+ padding: 0 @padding-base;
35
+ color: @circle-text-color;
36
+ font-weight: @circle-text-font-weight;
37
+ font-size: @circle-text-font-size;
38
+ line-height: @circle-text-line-height;
39
+ transform: translateY(-50%);
40
+ }
41
+ }
@@ -0,0 +1,2 @@
1
+ import '../../style/base.css';
2
+ import '../index.css';
@@ -0,0 +1,2 @@
1
+ import '../../style/base.less';
2
+ import '../index.less';
package/es/index.js CHANGED
@@ -10,6 +10,7 @@ import Cell from './cell';
10
10
  import CellGroup from './cell-group';
11
11
  import Checkbox from './checkbox';
12
12
  import CheckboxGroup from './checkbox-group';
13
+ import Circle from './circle';
13
14
  import Col from './col';
14
15
  import Collapse from './collapse';
15
16
  import CollapseItem from './collapse-item';
@@ -76,10 +77,10 @@ import Tag from './tag';
76
77
  import Timeline from './timeline';
77
78
  import Toast from './toast';
78
79
  import Uploader from './uploader';
79
- var version = '1.0.18';
80
+ var version = '1.0.20';
80
81
 
81
82
  function install(Vue) {
82
- var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
83
+ var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
83
84
  components.forEach(function (item) {
84
85
  if (item.install) {
85
86
  Vue.use(item);
@@ -93,7 +94,7 @@ if (typeof window !== 'undefined' && window.Vue) {
93
94
  install(window.Vue);
94
95
  }
95
96
 
96
- export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
97
+ export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
97
98
  export default {
98
99
  install: install,
99
100
  version: version
@@ -1 +1 @@
1
- .zt-pdf-viewer-v2{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-pdf-viewer-v2__inner-container{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll}.zt-pdf-viewer-v2::-webkit-scrollbar{width:0;height:0}.zt-pdf-viewer-v2__page-box{width:100%;height:44px;background-color:#fff;text-align:center;font-size:16px;line-height:44px}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__next,.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__pre{cursor:pointer;color:#3a90f6}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__page{margin:0 10px}.zt-pdf-viewer-v2 .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-top:-18px}
1
+ .zt-pdf-viewer-v2{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-pdf-viewer-v2__inner-body{height:calc(100% - 44px);overflow:hidden}.zt-pdf-viewer-v2__inner-container{height:100%;overflow:scroll}.zt-pdf-viewer-v2::-webkit-scrollbar{width:0;height:0}.zt-pdf-viewer-v2__page-box{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;background-color:#fff;text-align:center;font-size:16px;line-height:44px}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__next,.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__pre{cursor:pointer;color:#3a90f6}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__page{margin:0 10px}.zt-pdf-viewer-v2 .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-top:-18px}.zt-pdf-viewer-v2__loadding-circle{position:absolute;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
@@ -6,6 +6,7 @@ var _createNamespace = createNamespace('pdf-viewer-v2'),
6
6
 
7
7
  import Toast from '../toast';
8
8
  import Loading from '../loading';
9
+ import Circle from '../circle';
9
10
  import Picker from '../picker';
10
11
  import { resetObject } from "../utils/index";
11
12
 
@@ -19,7 +20,11 @@ var defaultData = function defaultData() {
19
20
  loading: false,
20
21
  PDFJS: null,
21
22
  pageChangeByButton: false,
22
- showPicker: false
23
+ showPicker: false,
24
+ // 进度范围:0~100
25
+ progress: 0,
26
+ // circle绑定值
27
+ circleProgress: 0
23
28
  };
24
29
  };
25
30
 
@@ -49,7 +54,8 @@ export default createComponent({
49
54
  default: function _default() {
50
55
  return {};
51
56
  }
52
- }
57
+ },
58
+ showProgress: Boolean
53
59
  },
54
60
  data: function data() {
55
61
  return defaultData();
@@ -170,9 +176,10 @@ export default createComponent({
170
176
  var offsetHeight = element.offsetHeight;
171
177
 
172
178
  do {
173
- var start = _this3.findPos(document.getElementById("pdfCanvas" + i));
174
-
175
- var end = start + document.getElementById("pdfCanvas" + i).offsetHeight;
179
+ var zoom = 1 / _this3.dpr;
180
+ var pdfCanvas = document.getElementById("pdfCanvas" + i);
181
+ var start = _this3.findPos(pdfCanvas) * zoom;
182
+ var end = start + pdfCanvas.offsetHeight * zoom;
176
183
 
177
184
  if (element.scrollTop + offsetHeight >= start && element.scrollTop + offsetHeight <= end) {
178
185
  _this3.currentPage = i;
@@ -195,9 +202,9 @@ export default createComponent({
195
202
  findPos: function findPos(obj) {
196
203
  if (obj) {
197
204
  return obj.offsetTop;
198
- } else {
199
- return 0;
200
205
  }
206
+
207
+ return 0;
201
208
  },
202
209
  renderPdf: function renderPdf() {
203
210
  var _this4 = this;
@@ -206,7 +213,8 @@ export default createComponent({
206
213
  this.PDFJS = window['pdfjs-dist/build/pdf'] || window.pdfjsLib;
207
214
 
208
215
  if (this.PDFJS && this.PDFJS.GlobalWorkerOptions) {
209
- this.PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
216
+ // 当前版本这个workerSrc是没有使用
217
+ this.PDFJS.GlobalWorkerOptions.workerSrc = "egova-pdfjs-dist/es5/build/pdf.worker.js";
210
218
  }
211
219
  }
212
220
 
@@ -223,6 +231,14 @@ export default createComponent({
223
231
  cMapUrl: this.cMapUrl,
224
232
  cMapPacked: true
225
233
  });
234
+
235
+ pdfLoadingTask.onProgress = function (progressData) {
236
+ // 返回的进度可能会超过100
237
+ _this4.progress = Math.min(100, Math.floor(progressData.loaded * 100 / progressData.total));
238
+
239
+ _this4.$emit('progress', _this4.progress);
240
+ };
241
+
226
242
  pdfLoadingTask.promise.then(function (pdfDoc) {
227
243
  if (pdfDoc && pdfViewerDom) {
228
244
  // 缓存pdf内容
@@ -283,9 +299,13 @@ export default createComponent({
283
299
  }
284
300
  },
285
301
  render: function render(h) {
302
+ var _this5 = this;
303
+
286
304
  return h("div", {
287
305
  "class": bem(),
288
306
  "ref": "pdfContainer"
307
+ }, [h("div", {
308
+ "class": bem("inner-body")
289
309
  }, [h("div", {
290
310
  "class": bem("inner-container"),
291
311
  "attrs": {
@@ -294,7 +314,7 @@ export default createComponent({
294
314
  }, [h(Loading, {
295
315
  "directives": [{
296
316
  name: "show",
297
- value: this.loading
317
+ value: !this.showProgress && this.loading
298
318
  }],
299
319
  "class": bem('loading-icon')
300
320
  }), h("div", {
@@ -304,7 +324,21 @@ export default createComponent({
304
324
  }],
305
325
  "ref": "pdfViewerContainer",
306
326
  "class": bem("container")
307
- })]), this.totalPage ? h("div", {
327
+ })])]), this.showProgress && this.progress < 100 ? h("div", {
328
+ "class": bem("loadding-circle")
329
+ }, [h(Circle, {
330
+ "attrs": {
331
+ "rate": this.progress,
332
+ "speed": "100",
333
+ "text": this.progress + '%'
334
+ },
335
+ "model": {
336
+ value: _this5.circleProgress,
337
+ callback: function callback($$v) {
338
+ _this5.circleProgress = $$v;
339
+ }
340
+ }
341
+ })]) : "", this.totalPage ? h("div", {
308
342
  "class": bem("page-box")
309
343
  }, [h("span", {
310
344
  "class": bem("pre"),
@@ -6,8 +6,12 @@
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
 
9
+ &__inner-body {
10
+ height: calc(100% - 44px);
11
+ overflow: hidden;
12
+ }
9
13
  &__inner-container {
10
- flex: 1;
14
+ height: 100%;
11
15
  overflow: scroll;
12
16
  }
13
17
 
@@ -17,6 +21,10 @@
17
21
  }
18
22
 
19
23
  &__page-box {
24
+ position: absolute;
25
+ left: 0;
26
+ right: 0;
27
+ bottom: 0;
20
28
  width: 100%;
21
29
  height: 44px;
22
30
  background-color: #fff;
@@ -41,4 +49,13 @@
41
49
  margin-left: -18px;
42
50
  margin-top: -18px;
43
51
  }
52
+
53
+ &__loadding-circle {
54
+ position: absolute;
55
+ width: 100%;
56
+ height: 100%;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ }
44
61
  }
@@ -6,4 +6,5 @@ import '../../popup/index.css';
6
6
  import '../../loading/index.css';
7
7
  import '../../toast/index.css';
8
8
  import '../../picker/index.css';
9
+ import '../../circle/index.css';
9
10
  import '../index.css';
@@ -6,4 +6,5 @@ import '../../popup/index.less';
6
6
  import '../../loading/index.less';
7
7
  import '../../toast/index.less';
8
8
  import '../../picker/index.less';
9
+ import '../../circle/index.less';
9
10
  import '../index.less';
@@ -1 +1 @@
1
- .zt-table{position:relative}.zt-table__normal-box{display:-webkit-box;display:-webkit-flex;display:flex;overflow-x:scroll}.zt-table__normal-box::-webkit-scrollbar{width:unset;background-color:unset;height:4px}.zt-table__normal-box::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.zt-table__fixed-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;left:0;z-index:2}.zt-table__fixed-box.shadow::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}.zt-table__head{-webkit-flex-shrink:0;flex-shrink:0}.zt-table__head-item{height:40px;font-weight:600;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fafafa}.zt-table__table-data{height:40px;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fff}
1
+ .zt-table table{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto;box-sizing:border-box}.zt-table--fixed{overflow:auto scroll}.zt-table--fixed::-webkit-scrollbar{width:0;height:0}.zt-table--fixed table{table-layout:fixed}.zt-table--thead-fixed{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt-table--fix-left{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt-table--bordered{border-left:1px solid #f0f0f0}.zt-table--bordered>table{border-top:1px solid #f0f0f0}.zt-table--bordered .zt-table__thead>tr>th{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}.zt-table--bordered .zt-table__tbody>tr>td{border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0}.zt-table__thead>tr>th{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-weight:600;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fafafa}.zt-table__tbody>tr>td{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fff}.zt-table--striped .zt-table__tbody>tr:nth-child(even)>td{background:#fafafa}.zt-table--left-last{border-right:none!important}.zt-table--left-last::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}