qiangmj / report-ui

Commit 9c6116d7bcfeb07a78b320178403767db0259416

Authored by qianbao
1 parent d9ae8d34

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

2、代码文件归类
3、添加雷达图
Inline Side-by-side
Showing 1 changed file with 178 additions and 18 deletions
src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
  View file @9c6116d
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>
2 30 <div :style="style">
3 31 <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
4   - :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
5   - :type="carouselStyle.type" :key="carouselKey">
  32 + :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
  33 + :type="carouselStyle.type" :key="carouselKey">
6 34 <el-carousel-item v-for="(src, index) in carouselStyle.imageList" :key="index">
7 35 <img class="carousel-img" :src="src" alt="" />
8 36 </el-carousel-item>
... ... @@ -20,9 +48,14 @@ export default {
20 48 },
21 49 data() {
22 50 return {
23   - options: {},
24   - carouselKey: 0, // 重新渲染组件用
25   - };
  51 + options: {
  52 + mainCell: '.bd ul',
  53 + autoPlay: true,
  54 + effect: 'leftLoop',
  55 + options: {},
  56 + carouselKey: 0, // 重新渲染组件用
  57 + },
  58 + }
26 59 },
27 60 computed: {
28 61 transStyle() {
... ... @@ -54,8 +87,8 @@ export default {
54 87 handler(val) {
55 88 this.options = val;
56 89 },
57   - deep: true
58 90 },
  91 + deep: true,
59 92 carouselStyle: {
60 93 handler(newValue, oldValue) {
61 94 if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
... ... @@ -67,25 +100,152 @@ export default {
67 100 created() {
68 101 this.options = this.value;
69 102 },
70   - mounted() { },
  103 + mounted(){},
71 104 methods: {},
72   -}
  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 +};
73 151 </script>
74 152  
75 153 <style scoped lang="scss">
76   -.carousel {
77   - width: 100%;
78   - height: 100%;
  154 +.slideBox {
  155 + width: 450px;
  156 + height: 230px;
79 157 overflow: hidden;
  158 + position: relative;
80 159 }
  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;
81 192  
82   -.carousel-img {
83   - width: 100%;
84   - height: 100%;
85   - object-fit: contain;
86   -}
  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 +
  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 + }
87 237  
88   -/deep/ .el-carousel__mask {
89   - background: transparent;
  238 + .slideBox .prevStop {
  239 + display: none;
  240 + }
  241 +
  242 + .slideBox .nextStop {
  243 + display: none;
  244 +
  245 + /deep/ .el-carousel__mask {
  246 + background: transparent;
  247 + }
  248 + }
  249 + }
90 250 }
91 251 </style>
... ...