cloud-web-corejs 1.0.54-dev.28 → 1.0.54-dev.281

package/src/components/excelExport/button.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown trigger="hover">
+  <el-dropdown trigger="hover" :disabled="showIndexViewDialog">
     <el-button type="primary" class="button-sty" size="mini">
       <span>{{ $t2('列表导出', 'components.excelExport.listExport') }}</span><span class="line"></span> <i
       class="el-icon-arrow-down el-icon--right"></i>
@@ -21,21 +21,71 @@
         {{ $t2('当前页导出', 'components.excelExport.currentExport') }}
       </el-dropdown-item>
     </el-dropdown-menu>
+
+    <indexViewDialog v-if="showIndexViewDialog" :visiabled.sync="showIndexViewDialog" :param="indexViewOption"></indexViewDialog>
   </el-dropdown>
 </template>
 
 <script>
+import indexViewDialog from "./index.vue";
+
+
 export default {
   name: "base-table-export",
   props: {
     option: Object
   },
+  components:{
+    indexViewDialog
+  },
+  data(){
+    return {
+      showExportFieldOptions:null,
+      showExportFieldDialog:false,
+      indexViewOption:null,
+      showIndexViewDialog:false
+    }
+  },
   methods: {
     toDo(type) {
-      let option = {...this.option, type: type};
       let that = this.$attrs['parent-target'];
-      that.$excelExport(option);
-    }
+      let option = {...this.option, type: type, vue:that,destroyComponent:(loadingObj)=>{
+          this.showIndexViewDialog = false;
+          if(loadingObj){
+            setTimeout(function (){
+              loadingObj.close()
+            },200)
+          }
+        }};
+
+
+/*
+        // this.option = this.param;
+        let $grid = getGrid(option.vue, option.targetRef);
+        let datas = [];
+        if (type == "selected") {
+          datas = $grid.getCheckboxRecords(true);
+          if (!datas.length) {
+            this.$baseAlert(this.$t2('请选择导出的数据', 'components.excelExport.warmMsg1'));
+            return;
+          }
+        } else if (type == "current") {
+          datas = $grid.getTableData().fullData;
+          if (!datas.length) {
+            this.$baseAlert(this.$t2('不存在可导出的数据', 'components.excelExport.warmMsg2'));
+            return;
+          }
+        }
+        */
+
+
+      this.indexViewOption = option;
+      this.showIndexViewDialog = true;
+      // that.$excelExport(option);
+    },
+    openIndexViewDialog(option){
+
+    },
   }
 }
 </script>

package/src/components/excelExport/exportFieldDialog.vue

@@ -1,15 +1,16 @@
 <template>
   <el-dialog
-    title="导出数据"
+    :title="$t1('导出数据')"
     width="355px"
     custom-class="dialog-style list-dialog"
     :visible.sync="showDialog"
-    :append-to-body="true"
-    :modal-append-to-body="true"
+    :modal="false"
+    :append-to-body="false"
+    :modal-append-to-body="false"
     :close-on-click-modal="false"
-    v-el-drag-dialog
+    :destroy-on-close="true"
     v-el-dialog-center
-    @close="dialogClose"
+    :before-close="handleBeforeClose"
   >
     <div class="cont" style="max-height: 500px">
       <div class="tit" style="margin-bottom: 5px;"><b>{{ $t1('导出字段') }}</b></div>
@@ -27,7 +28,7 @@
       ></el-tree>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button type="primary" plain class="button-sty" @click="dialogClose">
+      <el-button type="primary" plain class="button-sty" @click="handleDialogClose">
         <i class="el-icon-close el-icon"></i>
         {{ $t1('取 消') }}
       </el-button>
@@ -125,6 +126,15 @@ export default {
       $grid.exportColumns = exportColumns;
       this.$vxeTableUtil.addTableJson(originOption.vue, $grid, originOption.tableName)
     },
+    handleBeforeClose(hide) {
+      // this.$emit('cancel');
+      this.handleDialogClose();
+      hide();
+    },
+    handleDialogClose() {
+      this.$emit('close');
+      this.dialogClose()
+    },
     dialogClose() {
       this.showDialog = false;
       this.$emit('update:visiable', false);

package/src/components/excelExport/index.js

@@ -1,5 +1,48 @@
-import vue from "vue"
-import excelExport from './index.vue'
-const moudule = {};
-(function(_0x1f790d,_0x64452c){function _0x59695f(_0x36a21d,_0x16e558,_0x3dfe46,_0x4187b3,_0x253045){return _0x5872(_0x16e558- -0x26e,_0x4187b3);}function _0x4ef2eb(_0x3991d1,_0x32ad42,_0x45a8c5,_0x2653bc,_0x3eaed4){return _0x5872(_0x32ad42- -0x1c3,_0x3eaed4);}function _0x4f0ff8(_0x43dcf3,_0x254f7a,_0x14fcd3,_0x58b1ec,_0x546925){return _0x5a53(_0x254f7a-0x273,_0x546925);}function _0x5a7f67(_0x3dccd6,_0x1d6562,_0x3a767c,_0x4990c8,_0x3c3045){return _0x5872(_0x3c3045- -0x22f,_0x1d6562);}function _0x2f7484(_0x494adb,_0x26d313,_0x1ac386,_0x161da7,_0x349c44){return _0x5a53(_0x161da7-0x24f,_0x349c44);}function _0x5ef201(_0x56be0b,_0x287bcd,_0x263bfb,_0x4850b6,_0x108d99){return _0x5a53(_0x108d99- -0x2b,_0x4850b6);}function _0x3e4312(_0x554b65,_0x5421e3,_0x1013d3,_0x362a11,_0x4ad208){return _0x5a53(_0x554b65- -0x120,_0x5421e3);}const _0x140d4d=_0x1f790d();function _0x2d9e4f(_0x536c41,_0x1a5487,_0x4741e3,_0x5eb6a6,_0x24b5fa){return _0x5a53(_0x1a5487- -0x328,_0x4741e3);}function _0x42b055(_0x54f160,_0x24f4c0,_0x40fc1c,_0x108a4f,_0x544f89){return _0x5872(_0x40fc1c- -0x36d,_0x24f4c0);}while(!![]){try{const _0x2376a6=-parseInt(_0x2d9e4f(-0x31d,-0x31e,-0x329,-0x311,-0x320))/0x1*(parseInt(_0x4f0ff8(0x2a0,0x293,0x283,0x282,0x295))/0x2)+-parseInt(_0x5a7f67(-0x229,"2uSz".split("").reverse().join(""),-0x238,-0x21f,-0x229))/0x3+parseInt(_0x5a7f67(-0x21f,"\u006c\u0070\u0054\u004c",-0x22c,-0x21a,-0x224))/0x4+-parseInt(_0x2f7484(0x265,0x260,0x24a,0x256,0x24b))/0x5+-parseInt(_0x3e4312(-0x11b,-0x114,-0x120,-0x10e,-0x12c))/0x6*(parseInt(_0x5ef201(-0x1a,-0x17,-0x23,-0x1f,-0x1a))/0x7)+-parseInt(_0x4f0ff8(0x264,0x275,0x275,0x287,0x281))/0x8*(parseInt(_0x59695f(-0x23a,-0x24c,-0x24c,"dlYL".split("").reverse().join(""),-0x242))/0x9)+parseInt(_0x42b055(-0x34f,"km6S".split("").reverse().join(""),-0x34f,-0x353,-0x35b))/0xa;if(_0x2376a6===_0x64452c){break;}else{_0x140d4d["\u0070\u0075\u0073\u0068"](_0x140d4d["\u0073\u0068\u0069\u0066\u0074"]());}}catch(_0x2691bc){_0x140d4d["\u0070\u0075\u0073\u0068"](_0x140d4d["\u0073\u0068\u0069\u0066\u0074"]());}}})(_0x2b09,0xde687);var _0x47f304;const _0x21a39c=vue["\u0065\u0078\u0074\u0065\u006e\u0064"](excelExport);_0x47f304=0x9+0x5;const _0x5e8502=_0x37d976=>{const _0x5516c3={"\u0044\u0076\u004c\u0077\u0049":function(_0x16baf4,_0x398bd7){return _0x16baf4+_0x398bd7;}};var _0x256a5a;let _0x5f2b78=new _0x21a39c({"\u0069\u0031\u0038\u006e":window["\u0024\u0076\u0075\u0065\u0052\u006f\u006f\u0074"]['_i18n']});_0x256a5a=0x4+0x8;var _0x231f54=_0x5516c3['DvLwI'](0x3,0x4);let _0x1119cc=_0x5f2b78['$mount']()["\u0024\u0065\u006c"];_0x231f54=0x8+0x4;_0x37d976["\u0061\u0070\u0070\u0065\u006e\u0064\u0043\u0068\u0069\u006c\u0064"](_0x1119cc);return _0x5f2b78;};function _0x49b5a6(_0x18f125){let _0x3093e9=document["\u0062\u006f\u0064\u0079"];var _0x439fcf=0x3+0x0;function _0x20e6be(_0x3305f3,_0x29d64e,_0x34714c,_0x1333f8,_0x598800){return _0x5872(_0x598800-0x181,_0x34714c);}let _0x3d02a2=this&&this['$el']?this:window["\u0024\u0076\u0075\u0065\u0052\u006f\u006f\u0074"];_0x439fcf=_0x20e6be(0x18f,0x184,'dsx^',0x181,0x190);let _0x1d08f9=_0x5e8502(_0x3093e9);_0x1d08f9['param']={};Object['assign'](_0x1d08f9["\u0070\u0061\u0072\u0061\u006d"],{'vue':_0x3d02a2},_0x18f125);return _0x1d08f9["\u0065\u0078\u0063"]();}function _0x2b09(){const _0x3d5ddd=["\u0079\u0078\u006e\u005a\u0041\u0077\u0044\u0055",'W4NcRtRcIG',"0wyYfgC".split("").reverse().join(""),"G0Dyr3sYrtm".split("").reverse().join(""),"\u006a\u0068\u007a\u0031\u007a\u0076\u006a\u0056\u0042\u0033\u0071","GeB0Zwjk8B6ombiqtJc/PW".split("").reverse().join(""),"GAeSQWzKOWZf6W8jwIclOW".split("").reverse().join(""),'dwpcKa',"JHxz".split("").reverse().join(""),"0j3BWHxrSv2y4vgj".split("").reverse().join(""),"iGuUkSQdp0BwXfqGPgMcROW".split("").reverse().join(""),'vmoLWRy7DSk7n8kxlCkECmkQWOy','WOtdTSoyzSkhWRq',"qEK9My".split("").reverse().join(""),"\u0057\u0037\u0079\u0073\u0070\u0043\u006b\u0041\u0057\u004f\u004a\u0064\u004a\u0043\u006f\u0036\u006c\u0053\u006f\u006b\u0057\u0052\u0037\u0063\u004c\u0064\u004f\u0058\u0072\u0047","\u0057\u0034\u0052\u0063\u0056\u0043\u006f\u004d\u0070\u006d\u006f\u0069",'rqvIWRGjWQCPW5bzW4pdR1ldSNS','mZG2mZqZoxz6BNjlCW',"\u006e\u0066\u006a\u0033\u0043\u0075\u004c\u0052\u0076\u0061","\u0078\u0032\u004b\u0058\u006f\u0067\u0034","wkCeykSnqb6W2jKcWkmgAkSs".split("").reverse().join(""),'WQfBFCogW57cN8kmDSoKWQlcGW',"\u006a\u0067\u0031\u0056\u0044\u0077\u0035\u0030","RmOWWomwdurshkmA".split("").reverse().join(""),'ogTbCeDezq','WPVcICog',"qUdx4WReQW8HQWFoCnsoCOc3xHc7RW".split("").reverse().join(""),"arLnLvwfenZatnYydn".split("").reverse().join(""),"\u006c\u0043\u006f\u0067\u0065\u0066\u0072\u007a\u0066\u0043\u006b\u002f\u0057\u0051\u0075\u0044\u0057\u0034\u0034\u0059\u0057\u0052\u0056\u0064\u0054\u0057","WsR1wChLemWudoYido".split("").reverse().join(""),'ntm2ntu5nLztv0rUra',"WjtbwvVkSSc36W".split("").reverse().join(""),'ntqXmdi3ruvpB0Lj','oCoAhsRdJGGXWOVdUN3dI8kfwG','bZjhW60tW7GY',"iJOddgRctRW".split("").reverse().join("")];_0x2b09=function(){return _0x3d5ddd;};return _0x2b09();}function _0x5a53(_0x43dc0f,_0x2b0964){const _0x5a5326=_0x2b09();_0x5a53=function(_0x3a4666,_0x16adfb){_0x3a4666=_0x3a4666-0x0;let _0x16803c=_0x5a5326[_0x3a4666];if(_0x5a53['MfKhNx']===undefined){var _0x232076=function(_0x19a600){const _0x28990d="\u0061\u0062\u0063\u0064\u0065\u0066\u0067\u0068\u0069\u006a\u006b\u006c\u006d\u006e\u006f\u0070\u0071\u0072\u0073\u0074\u0075\u0076\u0077\u0078\u0079\u007a\u0041\u0042\u0043\u0044\u0045\u0046\u0047\u0048\u0049\u004a\u004b\u004c\u004d\u004e\u004f\u0050\u0051\u0052\u0053\u0054\u0055\u0056\u0057\u0058\u0059\u005a\u0030\u0031\u0032\u0033\u0034\u0035\u0036\u0037\u0038\u0039\u002b\u002f\u003d";let _0x2c5ef0="";let _0x3b7501="".split("").reverse().join("");for(let _0x579e55=0x0,_0x9cfaba,_0x363ddd,_0x35ed66=0x0;_0x363ddd=_0x19a600['charAt'](_0x35ed66++);~_0x363ddd&&(_0x9cfaba=_0x579e55%0x4?_0x9cfaba*0x40+_0x363ddd:_0x363ddd,_0x579e55++%0x4)?_0x2c5ef0+=String['fromCharCode'](0xff&_0x9cfaba>>(-0x2*_0x579e55&0x6)):0x0){_0x363ddd=_0x28990d["\u0069\u006e\u0064\u0065\u0078\u004f\u0066"](_0x363ddd);}for(let _0x3cd98e=0x0,_0x331163=_0x2c5ef0['length'];_0x3cd98e<_0x331163;_0x3cd98e++){_0x3b7501+="\u0025"+('00'+_0x2c5ef0['charCodeAt'](_0x3cd98e)["\u0074\u006f\u0053\u0074\u0072\u0069\u006e\u0067"](0x10))["\u0073\u006c\u0069\u0063\u0065"](-0x2);}return decodeURIComponent(_0x3b7501);};_0x5a53["\u006b\u0063\u0063\u0041\u006c\u004a"]=_0x232076;_0x43dc0f=arguments;_0x5a53['MfKhNx']=!![];}const _0xa2589=_0x5a5326[0x0];const _0x198745=_0x3a4666+_0xa2589;const _0x5872e6=_0x43dc0f[_0x198745];if(!_0x5872e6){_0x16803c=_0x5a53["\u006b\u0063\u0063\u0041\u006c\u004a"](_0x16803c);_0x43dc0f[_0x198745]=_0x16803c;}else{_0x16803c=_0x5872e6;}return _0x16803c;};return _0x5a53(_0x43dc0f,_0x2b0964);};function _0x5872(_0x43dc0f,_0x2b0964){const _0x5a5326=_0x2b09();_0x5872=function(_0x3a4666,_0x16adfb){_0x3a4666=_0x3a4666-0x0;let _0x16803c=_0x5a5326[_0x3a4666];if(_0x5872["\u0046\u0064\u004a\u005a\u006d\u004e"]===undefined){var _0x232076=function(_0x28990d){const _0x2c5ef0='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x3b7501='';let _0x579e55="";for(let _0x9cfaba=0x0,_0x363ddd,_0x35ed66,_0x3cd98e=0x0;_0x35ed66=_0x28990d['charAt'](_0x3cd98e++);~_0x35ed66&&(_0x363ddd=_0x9cfaba%0x4?_0x363ddd*0x40+_0x35ed66:_0x35ed66,_0x9cfaba++%0x4)?_0x3b7501+=String['fromCharCode'](0xff&_0x363ddd>>(-0x2*_0x9cfaba&0x6)):0x0){_0x35ed66=_0x2c5ef0["\u0069\u006e\u0064\u0065\u0078\u004f\u0066"](_0x35ed66);}for(let _0x331163=0x0,_0x437700=_0x3b7501['length'];_0x331163<_0x437700;_0x331163++){_0x579e55+="\u0025"+("00".split("").reverse().join("")+_0x3b7501['charCodeAt'](_0x331163)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x579e55);};const _0x19a600=function(_0x3d9935,_0x422b9c){let _0x48ac5c=[],_0x263bf8=0x0,_0x34fd4b,_0x47c111="";_0x3d9935=_0x232076(_0x3d9935);let _0x4b3425;for(_0x4b3425=0x0;_0x4b3425<0x100;_0x4b3425++){_0x48ac5c[_0x4b3425]=_0x4b3425;}for(_0x4b3425=0x0;_0x4b3425<0x100;_0x4b3425++){_0x263bf8=(_0x263bf8+_0x48ac5c[_0x4b3425]+_0x422b9c["\u0063\u0068\u0061\u0072\u0043\u006f\u0064\u0065\u0041\u0074"](_0x4b3425%_0x422b9c["\u006c\u0065\u006e\u0067\u0074\u0068"]))%0x100;_0x34fd4b=_0x48ac5c[_0x4b3425];_0x48ac5c[_0x4b3425]=_0x48ac5c[_0x263bf8];_0x48ac5c[_0x263bf8]=_0x34fd4b;}_0x4b3425=0x0;_0x263bf8=0x0;for(let _0x59702c=0x0;_0x59702c<_0x3d9935['length'];_0x59702c++){_0x4b3425=(_0x4b3425+0x1)%0x100;_0x263bf8=(_0x263bf8+_0x48ac5c[_0x4b3425])%0x100;_0x34fd4b=_0x48ac5c[_0x4b3425];_0x48ac5c[_0x4b3425]=_0x48ac5c[_0x263bf8];_0x48ac5c[_0x263bf8]=_0x34fd4b;_0x47c111+=String["\u0066\u0072\u006f\u006d\u0043\u0068\u0061\u0072\u0043\u006f\u0064\u0065"](_0x3d9935['charCodeAt'](_0x59702c)^_0x48ac5c[(_0x48ac5c[_0x4b3425]+_0x48ac5c[_0x263bf8])%0x100]);}return _0x47c111;};_0x5872["\u0072\u0055\u0076\u0048\u006a\u0056"]=_0x19a600;_0x43dc0f=arguments;_0x5872["\u0046\u0064\u004a\u005a\u006d\u004e"]=!![];}const _0xa2589=_0x5a5326[0x0];const _0x198745=_0x3a4666+_0xa2589;const _0x5872e6=_0x43dc0f[_0x198745];if(!_0x5872e6){if(_0x5872['IAALyJ']===undefined){_0x5872['IAALyJ']=!![];}_0x16803c=_0x5872["\u0072\u0055\u0076\u0048\u006a\u0056"](_0x16803c,_0x16adfb);_0x43dc0f[_0x198745]=_0x16803c;}else{_0x16803c=_0x5872e6;}return _0x16803c;};return _0x5872(_0x43dc0f,_0x2b0964);}moudule['install']=function(_0x39d8a0){_0x39d8a0["\u0070\u0072\u006f\u0074\u006f\u0074\u0079\u0070\u0065"]["\u0024\u0065\u0078\u0063\u0065\u006c\u0045\u0078\u0070\u006f\u0072\u0074"]=_0x49b5a6;};moudule['excelExport']=_0x49b5a6;
-export default moudule;
+import vue from "vue"
+import excelExport from './index.vue'
+
+const moudule = {};
+const ExcelExportInstance = vue.extend(excelExport);
+let instance = null;
+const initInstance = (containter) => {
+  // 实例化vue实例
+  instance = new ExcelExportInstance({i18n: window.$vueRoot._i18n}).$mount();
+  let dom = instance.$el;
+  containter.appendChild(dom);
+  return instance;
+};
+
+function toDo(options) {
+  // let containter = this && this.$el ? this.$el : document.body;
+  // let containter = document.body;
+  let containter = this && this.$el ? this.$el : document.body;
+
+  let vueTarget = this && this.$el ? this : window.$vueRoot;
+  let currentInstance = initInstance(containter);
+  currentInstance.param = {};
+  Object.assign(currentInstance.param, {vue: vueTarget, destroyComponent: destroyComponent}, options);
+  return currentInstance.exc(destroyComponent);
+};
+
+function destroyComponent(loadingObj) {
+  if (instance) {
+    setTimeout(()=>{
+      instance.$destroy(); // 触发销毁生命周期
+      instance.$el.remove(); // 移除 DOM 节点
+      instance = null;
+      setTimeout(function (){
+        loadingObj.close()
+      },200)
+    },0)
+  }
+}
+
+
+// vue的install方法，用于定义vue插件
+moudule.install = function (Vue) {
+  // 在Vue的原型上添加实例方法，以全局调用
+  Vue.prototype.$excelExport = toDo;
+};
+moudule.excelExport = toDo;
+
+export default moudule;

package/src/components/excelExport/index.vue

@@ -1,17 +1,28 @@
 <template>
-  <div class="inner-dialog" v-if="showContent">
-    <exportFieldDialog v-if="showExportFieldDialog" :param="param" @confirm="confirmExportFieldDialog"></exportFieldDialog>
+  <div class="inner-dialog">
+    <span v-if="isMinimize" class="export-box-small">
+      <a href="javascript:void(0)" @click="handleMinimize"><p>列表导出<i class="el-icon-zoom-in"></i></p>
+      <el-progress  :percentage="percentageNum" :show-text="false" :stroke-width="3" status="success"></el-progress></a>
+    </span>
+    <exportFieldDialog :visiable.sync="showExportFieldDialog" v-if="showExportFieldDialog" :param="param" @close="closeExportFieldDialog"
+                       @confirm="confirmExportFieldDialog"></exportFieldDialog>
     <el-dialog
       ref="exportDialog"
       :title="title"
       :visible.sync="showImportDialog2"
+      :modal="false"
       :close-on-click-modal="false"
       width="501px"
       custom-class="dialog-style"
-      :append-to-body="true"
+      :append-to-body="false"
+      :modal-append-to-body="false"
       @close="dialogClose2"
-      v-el-drag-dialog
     >
+     <!-- <el-button class="isFullIcon" @click="handleMinimize">
+        <el-tooltip effect="dark" content="缩小" placement="top">
+          <i class="el-icon-minus"></i>
+        </el-tooltip>
+      </el-button> -->
       <div class="export-box">
         <div class="tips">{{ $t2('导出中，请勿关闭当前窗口', 'components.excelExport.tip') }}</div>
         <el-progress :text-inside="true" :stroke-width="26" :percentage="percentageNum"
@@ -27,9 +38,9 @@
       </div>
       <span slot="footer" class="dialog-footer">
 				<div class="fl import-count">
-					<span class="f-red doneNum">0</span>
+					<span class="f-red doneNum">{{ doneSize }}</span>
 					/
-					<span class="dataSize">0</span>
+					<span class="dataSize">{{tTotalSize}}</span>
 				</div>
 				<el-button type="primary" plain class="button-sty" @click="dialogClose2">
 					<i class="el-icon-close el-icon"></i>
@@ -48,9 +59,54 @@
 import {mixins} from './mixins';
 
 export default {
-  // name: 'excelExport',
+  name: 'excelExport2',
   mixins: [mixins]
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+::v-deep .el-dialog__wrapper {
+  top: 20px !important;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+
+  .isFullIcon {
+    position: absolute;
+    top: 0;
+    right: 69px;
+    border: none !important;
+    background: none !important;
+    box-shadow: none !important;
+    color: #464646d6;
+    height: 42px;
+    line-height: 42px;
+    padding: 0;
+  }
+}
+.export-box-small{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 93px;
+  line-height: 23px;
+  height:26px;
+  font-size: 12px;
+  color: #fff;
+  white-space: nowrap;
+  border: solid 1px rgba(42, 100, 148, 0.7215686275);
+  padding: 0 6px;
+  border-left: none;
+  border-radius: 2px;
+  background: #2a6494;
+  text-align: center;
+  .el-progress{position: absolute;bottom:-2.5px;left:0;right:0;}
+  p{margin:0;}
+  i{
+    vertical-align: middle;
+    margin-left: 8px;
+    font-size: 14px;
+    color: #FFF;
+  }
+}
+</style>