qiangmj / report-ui

Commit 498b93d0bd3ca6d51be5440cdd1396ac0de1ebe9

Authored by qianbao
1 parent 9c6116d7

1、大屏左侧操作菜单归类 

2、代码文件归类
3、添加雷达图
Inline Side-by-side
Showing 1 changed file with 17 additions and 176 deletions
src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
  View file @498b93d
1 1 <template>
2   - <superslide :options="options" class="slideBox">
3   - <!-- slides -->
4   - <div class="bd">
5   - <ul>
6   - <li>
7   - <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=717294809,2494697366&fm=26&gp=0.jpg" alt="">
8   - </li>
9   - <li>
10   - <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2090090414,3038344648&fm=26&gp=0.jpg" alt="">
11   - </li>
12   - </ul>
13   - </div>
14   - <!-- Optional controls slots -->
15   - <!-- slot="titCell" -->
16   - <div slot="titCell" class="hd">
17   - <ul>
18   - <li class="on">1</li>
19   - <li class="">2</li>
20   - <li class="">3</li>
21   - </ul>
22   - </div>
23   - <!-- slot="prev" -->
24   - <a slot="prev" class="prev" href="javascript:void(0)" />
25   - <!-- slot="next" -->
26   - <a slot="next" class="next" href="javascript:void(0)" />
27   - <!-- slot="pageStateCell" -->
28   - <span slot="pageStateCell" class="pageState" />
29   - </superslide>
30 2 <div :style="style">
31 3 <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
32 4 :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
... ... @@ -48,14 +20,9 @@ export default {
48 20 },
49 21 data() {
50 22 return {
51   - options: {
52   - mainCell: '.bd ul',
53   - autoPlay: true,
54   - effect: 'leftLoop',
55   - options: {},
56   - carouselKey: 0, // 重新渲染组件用
57   - },
58   - }
  23 + options: {},
  24 + carouselKey: 0, // 重新渲染组件用
  25 + };
59 26 },
60 27 computed: {
61 28 transStyle() {
... ... @@ -87,8 +54,8 @@ export default {
87 54 handler(val) {
88 55 this.options = val;
89 56 },
  57 + deep: true
90 58 },
91   - deep: true,
92 59 carouselStyle: {
93 60 handler(newValue, oldValue) {
94 61 if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
... ... @@ -100,152 +67,26 @@ export default {
100 67 created() {
101 68 this.options = this.value;
102 69 },
103   - mounted(){},
  70 + mounted() { },
104 71 methods: {},
105   -// created(){
106   - // this.options = this.value;
107   - // },
108   - // methods: {},
109   - // computed: {
110   - // transStyle(){
111   - // return this.objToOne(this.options);
112   - // },
113   - // style(){
114   - // return {
115   - // position: this.ispreview ? "absolute" : "static",
116   - // background: this.transStyle.background,
117   - // width: this.transStyle.width + "px",
118   - // height: this.transStyle.height + "px",
119   - // left: this.transStyle.left + "px",
120   - // top: this.transStyle.top + "px",
121   - // right: this.transStyle.right + "px",
122   - // };
123   - // },
124   - // carouselStyle() {
125   - // return {
126   - // imageList: this.transStyle.imageAdress.split(','),
127   - // direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
128   - // indicatorPosition: this.transStyle.tabSelector,
129   - // interval: this.transStyle.tabTime,
130   - // type: this.transStyle.tabType
131   - // }
132   - // },
133   - // },
134   - // watch: {
135   - // value: {
136   - // handler(val) {
137   - // this.options = val;
138   - // },
139   - // }
140   - // deep: true
141   - // },
142   - // carouselStyle: {
143   - // handler(newValue, oldValue) {
144   - // if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
145   - // this.carouselKey++;
146   - // }
147   - // },
148   - // },
149   - // },
150   -};
  72 +}
151 73 </script>
152 74  
153 75 <style scoped lang="scss">
154   -.slideBox {
155   - width: 450px;
156   - height: 230px;
  76 +.carousel {
  77 + width: 100%;
  78 + height: 100%;
157 79 overflow: hidden;
158   - position: relative;
159 80 }
160   -.slideBox .hd {
161   - height: 15px;
162   - .carousel {
163   - width: 100%;
164   - height: 100%;
165   - overflow: hidden;
166   - position: absolute;
167   - right: 5px;
168   - bottom: 5px;
169   - z-index: 1;
170   - }
171   - .slideBox .hd ul {
172   - overflow: hidden;
173   - zoom: 1;
174   - float: left;
175   - }
176   - .slideBox .hd ul li {
177   - float: left;
178   - margin-right: 2px;
179   - width: 15px;
180   - height: 15px;
181   - line-height: 14px;
182   - text-align: center;
183   - background: #fff;
184   - cursor: pointer;
185   - }
186   - .slideBox .hd ul li.on {
187   - background: #f00;
188   - color: #fff;
189   - }
190   - .slideBox .bd {
191   - position: relative;
192   -
193   - .carousel-img {
194   - width: 100%;
195   - height: 100%;
196   - z-index: 0;
197   - }
198   -
199   - .slideBox .bd li {
200   - zoom: 1;
201   - vertical-align: middle;
202   - }
203   -
204   - .slideBox .bd img {
205   - width: 450px;
206   - height: 230px;
207   - display: block;
208   - }
209   -
210   - /* 下面是前/后按钮代码，如果不需要删除即可 */
211   - .slideBox .prev,
212   - .slideBox .next {
213   - position: absolute;
214   - left: 3%;
215   - top: 50%;
216   - margin-top: -25px;
217   - display: block;
218   - width: 32px;
219   - height: 40px;
220   - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAAAgCAMAAADE+3+QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkYyNjE4RUVDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkYyNjE4RUZDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjI2MThFQ0NGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjI2MThFRENGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmLDzTcAAAAJUExURcHBwf///////wCiYf4AAAADdFJOU///ANfKDUEAAACjSURBVHja5JnRDUQhDMNM9h/6STfCgeKPsIBjhGgpnHPy7wLyYLUicC5IPJGtJfi5ngsSL1Q7AYgsW8QTV7YJJ6psFU1M2S6YiLJlLPFk21CiydaRaOT+7mKxhYOERDcuCBy+cheiJHBqHEYGqZzPug6d4aG7aajmDPUSQz3iUO8/9KYbeqsPzWCGZmtDM9OhWfjSH8fY31UuSMkT2UqET4ABAHo9NyVXKF5RAAAAAElFTkSuQmCC) -110px 5px no-repeat;
221   - filter: alpha(opacity=50);
222   - opacity: 0.5;
223   - }
224 81  
225   - .slideBox .next {
226   - left: auto;
227   - right: 3%;
228   - background-position: 8px 5px;
229   - object-fit: contain;
230   - }
231   -
232   - .slideBox .prev:hover,
233   - .slideBox .next:hover {
234   - filter: alpha(opacity=100);
235   - opacity: 1;
236   - }
237   -
238   - .slideBox .prevStop {
239   - display: none;
240   - }
241   -
242   - .slideBox .nextStop {
243   - display: none;
  82 +.carousel-img {
  83 + width: 100%;
  84 + height: 100%;
  85 + object-fit: contain;
  86 +}
244 87  
245   - /deep/ .el-carousel__mask {
246   - background: transparent;
247   - }
248   - }
249   - }
  88 +/deep/ .el-carousel__mask {
  89 + background: transparent;
250 90 }
251 91 </style>
  92 +
... ...