t

dist/static/js/chunk-72792626.27f66adb.js

@@ -1 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-72792626"],{"26fc":function(t,s,a){t.exports=a.p+"static/img/404_cloud.0f4bc32b.png"},"6d07":function(t,s,a){"use strict";a("7aa6")},"7aa6":function(t,s,a){},"8cdb":function(t,s,a){"use strict";a.r(s);var i=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"wscn-http404-container"},[a("div",{staticClass:"wscn-http404"},[t._m(0),a("div",{staticClass:"bullshit"},[a("div",{staticClass:"bullshit__oops"},[t._v("哎呀!")]),a("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message)+t._s(t.count)+"秒后自动跳回首页")]),a("div",{staticClass:"bullshit__info"},[t._v("请检查您输入的网址是否正确，或单击下面的按钮返回首页。")]),a("a",{staticClass:"bullshit__return-home",attrs:{href:"/"}},[t._v("返回首页")])])])])},c=[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"pic-404"},[i("img",{staticClass:"pic-404__parent",attrs:{src:a("a36b"),alt:"404"}}),i("img",{staticClass:"pic-404__child left",attrs:{src:a("26fc"),alt:"404"}}),i("img",{staticClass:"pic-404__child mid",attrs:{src:a("26fc"),alt:"404"}}),i("img",{staticClass:"pic-404__child right",attrs:{src:a("26fc"),alt:"404"}})])}],n={name:"Page404",data:function(){return{count:5}},created:function(){var t=this,s=window.setInterval((function(){t.count--,t.count<1&&(window.clearInterval(s),t.$router.push("/"))}),1e3)},computed:{message:function(){return"老板说你不能进入这个页面。。。"}}},e=n,l=(a("6d07"),a("2877")),r=Object(l["a"])(e,i,c,!1,null,"e9e54ed8",null);s["default"]=r.exports},a36b:function(t,s,a){t.exports=a.p+"static/img/404.a57b6f31.png"}}]);

dist/static/js/chunk-77c90766.68f8efe0.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-77c90766"],{"26fc":function(t,s,c){t.exports=c.p+"static/img/404_cloud.0f4bc32b.png"},"36f7":function(t,s,c){},7908:function(t,s,c){"use strict";c("36f7")},"8cdb":function(t,s,c){"use strict";c.r(s);var i=function(){var t=this,s=t.$createElement,c=t._self._c||s;return c("div",{staticClass:"wscn-http404-container"},[c("div",{staticClass:"wscn-http404"},[t._m(0),c("div",{staticClass:"bullshit"},[c("div",{staticClass:"bullshit__oops"},[t._v("哎呀!")]),c("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message)+t._s(t.count)+"秒后自动跳回首页")]),c("div",{staticClass:"bullshit__info"},[t._v("请检查您输入的网址是否正确，或单击下面的按钮返回首页。")]),c("a",{staticClass:"bullshit__return-home",attrs:{href:"/"}},[t._v("返回首页")])])])])},a=[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"pic-404"},[i("img",{staticClass:"pic-404__parent",attrs:{src:c("a36b"),alt:"404"}}),i("img",{staticClass:"pic-404__child left",attrs:{src:c("26fc"),alt:"404"}}),i("img",{staticClass:"pic-404__child mid",attrs:{src:c("26fc"),alt:"404"}}),i("img",{staticClass:"pic-404__child right",attrs:{src:c("26fc"),alt:"404"}})])}],n={name:"Page404",data:function(){return{count:5}},created:function(){var t=this,s=window.setInterval((function(){t.count--,t.count<1&&(window.clearInterval(s),t.$router.push("/"))}),1e3)},computed:{message:function(){return"老板说你不能进入这个页面。。。"}}},e=n,l=(c("7908"),c("2877")),r=Object(l["a"])(e,i,a,!1,null,"e9e54ed8",null);s["default"]=r.exports},a36b:function(t,s,c){t.exports=c.p+"static/img/404.a57b6f31.png"}}]);

dist/static/js/chunk-9c1e7474.54d459f8.js

@@ -1 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-9c1e7474","chunk-2d0ccfc9"],{"4fef":function(t,e,a){"use strict";a.r(e);var i=a("ade3"),c=a("5530");a("4e82"),a("e9c4"),a("a9e3");e["default"]={data:function(){return{listLoading:!1,tableData:[],currentPage:1,pageSize:10,totalRecords:1,listConfig:{},operations:[]}},created:function(){var t=this;this.$nextTick((function(){t.noCreated||t.fetchData()}))},methods:{searchHandle:function(t){this.currentPage=1,this.searchForm=t,this.fetchData()},sizeChange:function(t){this.pageSize=t,this.currentPage=1,this.fetchData()},pageHandle:function(t){this.currentPage=t,this.fetchData()},sortChange:function(t){this.currentPage=1;var e=Object(c["a"])({},this.searchForm);"ascending"===t.order?e.sort=JSON.stringify(Object(i["a"])({},t.prop,"asc")):e.sort=JSON.stringify(Object(i["a"])({},t.prop,"desc")),this.searchForm=Object(c["a"])({},e),this.fetchData(e)},fetchData:function(t){var e=this;if(this.apiStr){var a={page:this.currentPage,page_size:this.pageSize};t?a=Object(c["a"])(Object(c["a"])({},a),t):this.searchForm&&(a=Object(c["a"])(Object(c["a"])({},a),this.searchForm)),this.getDataBefore&&this.getDataBefore(a),this.listLoading=!0;var i=this.apiStr.split(".");this.$api[i[0]][i[1]](a).then((function(t){return 1===e.currentPage&&(e.pageSize=t.page_size||1),e.totalRecords=t.total?Number(t.total):0,e.tableData=t.list||[],e.listLoading=!1,e.getMoreData&&e.getMoreData(t,a),t})).catch((function(t){e.listLoading=!1}))}}}}},"9d49":function(t,e,a){"use strict";a.r(e),e["default"]={data:function(){return{bigImgSrc:"",bigImgShow:!1}},created:function(){},methods:{openbigImg:function(t){this.bigImgSrc=t,this.bigImgShow=!0},closebigImg:function(t){this.bigImgShow=!1}}}}}]);

dist/static/js/chunk-2d0ccfc9.f8948965.js → dist/static/js/chunk-9c1e7474.88001111.js

@@ -1 +1 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0ccfc9"],{"4fef":function(t,e,a){"use strict";a.r(e);var i=a("ade3"),r=a("5530");a("4e82"),a("e9c4"),a("a9e3");e["default"]={data:function(){return{listLoading:!1,tableData:[],currentPage:1,pageSize:10,totalRecords:1,listConfig:{},operations:[]}},created:function(){var t=this;this.$nextTick((function(){t.noCreated||t.fetchData()}))},methods:{searchHandle:function(t){this.currentPage=1,this.searchForm=t,this.fetchData()},sizeChange:function(t){this.pageSize=t,this.currentPage=1,this.fetchData()},pageHandle:function(t){this.currentPage=t,this.fetchData()},sortChange:function(t){this.currentPage=1;var e=Object(r["a"])({},this.searchForm);"ascending"===t.order?e.sort=JSON.stringify(Object(i["a"])({},t.prop,"asc")):e.sort=JSON.stringify(Object(i["a"])({},t.prop,"desc")),this.searchForm=Object(r["a"])({},e),this.fetchData(e)},fetchData:function(t){var e=this;if(this.apiStr){var a={page:this.currentPage,page_size:this.pageSize};t?a=Object(r["a"])(Object(r["a"])({},a),t):this.searchForm&&(a=Object(r["a"])(Object(r["a"])({},a),this.searchForm)),this.getDataBefore&&this.getDataBefore(a),this.listLoading=!0;var i=this.apiStr.split(".");this.$api[i[0]][i[1]](a).then((function(t){return 1===e.currentPage&&(e.pageSize=t.page_size||1),e.totalRecords=t.total?Number(t.total):0,e.tableData=t.list||[],e.listLoading=!1,e.getMoreData&&e.getMoreData(t,a),t})).catch((function(t){e.listLoading=!1}))}}}}}}]);
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-9c1e7474"],{"4fef":function(t,e,a){"use strict";a.r(e);var i=a("ade3"),n=a("5530");a("4e82"),a("e9c4"),a("a9e3");e["default"]={data:function(){return{listLoading:!1,tableData:[],currentPage:1,pageSize:10,totalRecords:1,listConfig:{},operations:[]}},created:function(){var t=this;this.$nextTick((function(){t.noCreated||t.fetchData()}))},methods:{searchHandle:function(t){this.currentPage=1,this.searchForm=t,this.fetchData()},sizeChange:function(t){this.pageSize=t,this.currentPage=1,this.fetchData()},pageHandle:function(t){this.currentPage=t,this.fetchData()},sortChange:function(t){this.currentPage=1;var e=Object(n["a"])({},this.searchForm);"ascending"===t.order?e.sort=JSON.stringify(Object(i["a"])({},t.prop,"asc")):e.sort=JSON.stringify(Object(i["a"])({},t.prop,"desc")),this.searchForm=Object(n["a"])({},e),this.fetchData(e)},fetchData:function(t){var e=this;if(this.apiStr){var a={page:this.currentPage,page_size:this.pageSize};t?a=Object(n["a"])(Object(n["a"])({},a),t):this.searchForm&&(a=Object(n["a"])(Object(n["a"])({},a),this.searchForm)),this.getDataBefore&&this.getDataBefore(a),this.listLoading=!0;var i=this.apiStr.split(".");this.$api[i[0]][i[1]](a).then((function(t){return 1===e.currentPage&&(e.pageSize=t.page_size||1),e.totalRecords=t.total?Number(t.total):0,e.tableData=t.list||[],e.listLoading=!1,e.getMoreData&&e.getMoreData(t,a),t})).catch((function(t){e.listLoading=!1}))}}}}},"9d49":function(t,e,a){"use strict";a.r(e),e["default"]={data:function(){return{bigImgSrc:"",bigImgShow:!1}},created:function(){},methods:{openbigImg:function(t){this.bigImgSrc=t,this.bigImgShow=!0},closebigImg:function(t){this.bigImgShow=!1}}}}}]);

package.json

@@ -22,6 +22,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qiniu-js": "^2.5.4",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-cropper": "^0.5.6",

src/api/base.js

@@ -11,6 +11,9 @@ export default {
   admLogin: params => { // 登录
     return nologinRequest('/adm/login', params, 'loading')
   },
+  admuploadtoken: params => { // 登录
+    return getRequest('/adm/upload/token', params, 'loading')
+  },
   admwechatuserloginlist: params => { // 小程序 登入日志
     return getRequest('/adm/wechat/user/login/list', params)
   },

src/utils/qiniuUploader.js

@@ -0,0 +1,185 @@
+(function () {
+    // 请参考demo的index.js中的initQiniu()方法，若在使用处对options进行了赋值，则此处config不需要赋默认值。init(options) 即updateConfigWithOptions(options)，会对config进行赋值
+    var config = {
+        // bucket 所在区域。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+        qiniuRegion: '',
+        // 七牛云bucket 外链前缀，外链在下载资源时用到
+        qiniuBucketURLPrefix: '',
+
+        // 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
+        // 由其他程序生成七牛云uptoken，然后直接写入uptoken
+        qiniuUploadToken: '',
+        // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
+        qiniuUploadTokenURL: '',
+        // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
+        qiniuUploadTokenFunction: function () { },
+
+        // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+        // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
+        // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
+        // 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
+        qiniuShouldUseQiniuFileName: false
+    }
+
+    // init(options) 将七牛云相关配置初始化进本sdk
+    // 在整个程序生命周期中，只需要 init(options); 一次即可
+    // 如果需要变更七牛云配置，再次调用 init(options); 即可
+    function init(options) {
+        updateConfigWithOptions(options);
+    }
+
+    // 更新七牛云配置
+    function updateConfigWithOptions(options) {
+        if (options.region) {
+            config.qiniuRegion = options.region;
+        } else {
+            console.error('qiniu uploader need your bucket region');
+        }
+        if (options.uptoken) {
+            config.qiniuUploadToken = options.uptoken;
+        } else if (options.uptokenURL) {
+            config.qiniuUploadTokenURL = options.uptokenURL;
+        } else if (options.uptokenFunc) {
+            config.qiniuUploadTokenFunction = options.uptokenFunc;
+        }
+        if (options.domain) {
+            config.qiniuBucketURLPrefix = options.domain;
+        }
+        config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
+    }
+
+    // 正式上传的前置方法，做预处理，应用七牛云配置
+    function upload(filePath, success, fail, options, progress, cancelTask) {
+        if (null == filePath) {
+            console.error('qiniu uploader need filePath to upload');
+            return;
+        }
+        if (options) {
+            updateConfigWithOptions(options);
+        }
+        if (config.qiniuUploadToken) {
+            doUpload(filePath, success, fail, options, progress, cancelTask);
+        } else if (config.qiniuUploadTokenURL) {
+            getQiniuToken(function () {
+                doUpload(filePath, success, fail, options, progress, cancelTask);
+            });
+        } else if (config.qiniuUploadTokenFunction) {
+            config.qiniuUploadToken = config.qiniuUploadTokenFunction();
+            if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
+                console.error('qiniu UploadTokenFunction result is null, please check the return value');
+                return
+            }
+            doUpload(filePath, success, fail, options, progress, cancelTask);
+        } else {
+            console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
+            return;
+        }
+    }
+
+    // 正式上传
+    function doUpload(filePath, success, fail, options, progress, cancelTask) {
+        if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
+            console.error('qiniu UploadToken is null, please check the init config or networking');
+            return
+        }
+        var url = uploadURLFromRegionCode(config.qiniuRegion);
+        var fileName = filePath.split('//')[1];
+        // 自定义上传key（即自定义上传文件名）。通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义文件名称。如果options非空，则使用options中的key作为fileName
+        if (options && options.key) {
+            fileName = options.key;
+        }
+        var formData = {
+            'token': config.qiniuUploadToken
+        };
+        // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+        if (!config.qiniuShouldUseQiniuFileName) {
+            formData['key'] = fileName
+        }
+        var uploadTask = wx.uploadFile({
+            url: url,
+            filePath: filePath,
+            name: 'file',
+            formData: formData,
+            success: function (res) {
+                var dataString = res.data
+                //   // this if case is a compatibility with wechat server returned a charcode, but was fixed
+                //   if(res.data.hasOwnProperty('type') && res.data.type === 'Buffer'){
+                //     dataString = String.fromCharCode.apply(null, res.data.data)
+                //   }
+                try {
+                    var dataObject = JSON.parse(dataString);
+                    // 拼接fileURL
+                    var fileURL = config.qiniuBucketURLPrefix + '/' + dataObject.key;
+                    dataObject.fileURL = fileURL;
+                    // imageURL字段和fileURL字段重复，但本sdk不做删除，因为在最初版本使用的是imageURL。直接删除可能导致原有用户升级至新版sdk后出现异常。
+                    dataObject.imageURL = fileURL;
+                    console.log(dataObject);
+                    if (success) {
+                        success(dataObject);
+                    }
+                } catch (e) {
+                    console.log('parse JSON failed, origin String is: ' + dataString)
+                    if (fail) {
+                        fail(e);
+                    }
+                }
+            },
+            fail: function (error) {
+                console.error(error);
+                if (fail) {
+                    fail(error);
+                }
+            }
+        })
+
+        // 文件上传进度
+        uploadTask.onProgressUpdate((res) => {
+            progress && progress(res)
+        })
+
+        // 中断文件上传
+        cancelTask && cancelTask(() => {
+            uploadTask.abort()
+        })
+    }
+
+    // 获取七牛云uptoken, url为后端服务器获取七牛云uptoken接口
+    function getQiniuToken(callback) {
+        wx.request({
+            url: config.qiniuUploadTokenURL,
+            success: function (res) {
+                var token = res.data.uptoken;
+                if (token && token.length > 0) {
+                    config.qiniuUploadToken = token;
+                    if (callback) {
+                        callback();
+                    }
+                } else {
+                    console.error('qiniuUploader cannot get your token, please check the uptokenURL or server')
+                }
+            },
+            fail: function (error) {
+                console.error('qiniu UploadToken is null, please check the init config or networking: ' + error);
+            }
+        })
+    }
+
+    // 选择七牛云文件上传接口，文件向匹配的接口中传输。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+    function uploadURLFromRegionCode(code) {
+        var uploadURL = null;
+        switch (code) {
+            case 'ECN': uploadURL = 'https://up.qiniup.com'; break;
+            case 'NCN': uploadURL = 'https://up-z1.qiniup.com'; break;
+            case 'SCN': uploadURL = 'https://up-z2.qiniup.com'; break;
+            case 'NA': uploadURL = 'https://up-na0.qiniup.com'; break;
+            case 'ASG': uploadURL = 'https://up-as0.qiniup.com'; break;
+            default: console.error('please make the region is with one of [ECN, SCN, NCN, NA, ASG]');
+        }
+        return uploadURL;
+    }
+
+    module.exports = {
+        init: init,
+        upload: upload,
+    }
+})();

src/views/room/components/popup/IndexEdit.vue

@@ -53,6 +53,40 @@
               <div class="dot">户</div>
             </div>
           </div>
+          <div class="sfd-item">
+            <div class="l">上传视频</div>
+            <div class="r">
+              <video
+                v-if="cObj.video"
+                controls 
+                muted 
+                loop 
+                width="300"
+                >
+                  <source 
+                  :src="cObj.video" 
+                  type="video/mp4" 
+                  />
+                </video>
+              <div class="tip">上传新的视频：先选取视频，然后点击上传服务器，<span class="b">上传成功</span>后再点击保存</div>
+              <el-upload
+                class="upload-demo"
+                ref="upload"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :multiple="false"
+                :limit="1"
+                :file-list="fileList"
+                @change="fileChange"
+                :auto-upload="false">
+                <el-button slot="trigger" size="small" type="primary">1选取视频</el-button>
+                <el-button v-if="fileNextResObj.total && fileNextResObj.total.percent === 100" style="margin-left: 10px;" size="small" type="success">{{ fileNextResObj.total ? fileNextResObj.total.percent === 100 ? '上传成功' :`上传中${parseInt(fileNextResObj.total.percent)}%` : '上传到服务器'}}</el-button>
+                <el-button v-else style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">{{fileNextResObj.total ? `上传中...(${parseInt(fileNextResObj.total.percent)}%)` : '2上传到服务器'}}</el-button>
+                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+              </el-upload>
+            </div>
+          </div>
         </div>
         <div slot="OI4">
           <div class="scoped-img-area">
@@ -85,6 +119,7 @@
 <script>
 import { arrToObj } from '@/utils'
 import handleMap from '@/components/Common/Map'
+import * as qiniu from 'qiniu-js'
 export default {
   components: { handleMap },
   mixins,
@@ -107,8 +142,17 @@ export default {
       roomAreaList: [],
       estate_id: '',
       diyFormObj: {},
+      fileList: [],
+      fileConfig: {},
+      fileNextResObj: {},
+      fileCompleteResObj: {},
     }
   },
+  created () {
+    this.$api.base.admuploadtoken().then(res => {
+      this.fileConfig = res || {}
+    })
+  },
   watch: {
     isShow: function(val) {
       if (val) {
@@ -133,7 +177,6 @@ export default {
               sRate1: sRate[0],
               sRate2: sRate[1],
             }
-            console.log(diyFormObj)
             this.diyFormObj = {...diyFormObj}
             this.loading = false
           })
@@ -146,6 +189,47 @@ export default {
     },
   },
   methods: {
+    submitUpload() {
+      const upload = this.$refs.upload || {}
+      const curFile = upload.uploadFiles[0] || {}
+
+      let config = {
+        useCdnDomain: true,
+        region: qiniu.region.z2,
+        debugLogLevel: 'INFO'
+      }
+      let putExtra = {
+        fname: "",
+        params: {},
+        mimeType: null
+      }
+
+      let next = (response) =>{
+        console.log(response)
+        this.fileNextResObj = response
+      }
+      let complete = (response) =>{
+        let cObj = this.cObj
+        cObj.video = `${this.fileConfig.domain}/${response.key}`
+        this.cObj = {...cObj}
+      }
+
+      let subscription;
+      // 调用sdk上传接口获得相应的observable，控制上传和暂停
+      let observable = qiniu.upload(curFile.raw, curFile.name, this.fileConfig.token, putExtra, config);
+      observable.subscribe(next, null, complete)
+
+      // this.$refs.upload.submit();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    fileChange (e) {
+      console.log(e)
+    },
     imgDel (index) {
       this.imagesArr.splice(index, 1)
     },
@@ -322,6 +406,7 @@ export default {
               this.$msg('请输入楼层')
               return
             }
+            if (this.cObj.video) newForm.video = this.cObj.video
             // newForm.longitude = this.cObj.longitude
             // newForm.latitude = this.cObj.latitude
             // if (!newForm.longitude) return this.$msgw('请选择经度！')
@@ -474,6 +559,14 @@ export default {
     .r {
       flex: 1;
     }
+    .tip {
+      color: #f00;
+      .b {
+        font-weight: bold;
+        display: inline-block;
+        font-size: 20px;
+      }
+    }
     .i {
       border: 0;
       border-bottom: 1px solid #dcdcdc;