ytj

src/components/preview/preview.vue

       <div class="swiper-button-prev">
         <i class="iconfont icon-left"></i>
       </div>
-      <div class="swiper-pagination" v-show="mainIndex !== 1"></div>
-      <div class="swiper-cover" v-show="mainIndex === 1">封面</div>
+      <div class="swiper-pagination"></div>
     </div>
   </div>
 </template>

src/pages/user/calendar/making.vue

 <template>
-  <div>
+  <div style="background:#fff;">
     <div v-if="isLoading || windowLoad" class="loading">
       <img :src="loading" alt>
       <span>{{msg}}</span>
     <div class="cutBox" v-for="(item,index) in banner" :key="index">
       <div class="cutDom" v-if="index === mainIndex-1">
         <img :src="item.bgImg" class="cover">
-        <img
-          :style="item.styleCut"
-          v-if="!item.CustomerImg && item.defaultBg"
-          :src="item.defaultBg"
-        >
-        <img :style="item.styleCut" v-if="item.CustomerImg" :src="item.CustomerImg">
+        <div :style="item.styleCut" v-if="!item.CustomerImg && item.defaultBg" class="cla">
+          <img :src="item.defaultBg">
+        </div>
+        <div :style="item.styleCut" v-if="item.CustomerImg" class="cla">
+          <img :src="item.CustomerImg">
+        </div>
         <img class="text-h" v-if="item.ImgName === '10月'" :src="textH">
         <img class="text-l" v-if="item.ImgName === '4月' || item.ImgName === '7月'" :src="textL">
       </div>
                 v-if="!item.CustomerImg && item.defaultBg"
                 :src="item.defaultBg"
               >
-              <img :style="item.style" v-if="item.CustomerImg" :src="item.CustomerImg">
+              <img :src="item.CustomerImg" :style="item.style" v-if="item.CustomerImg">
               <img class="text-h" v-if="item.ImgName === '10月'" :src="textH">
               <img
                 class="text-l"
       <div class="swiper-button-prev">
         <i class="iconfont icon-left"></i>
       </div>
-      <div class="swiper-pagination" v-show="mainIndex !== 1"></div>
-      <div class="swiper-cover" v-show="mainIndex === 1">封面</div>
+      <div class="swiper-pagination"></div>
     </div>
     <div class="meassage" v-if="mainIndex !== 1">备注：为了美观效果请上传{{size}}尺寸照片，未按尺寸会默认裁剪</div>
     <div class="meassage" v-else>&nbsp;</div>
         on: {
           transitionStart: function () {
             self.mainIndex = this.activeIndex + 1
+            self.$nextTick(() => {
+              self.calSize()
+            })
           }
         }
       },
   methods: {
     ...mapMakingActions(['setBanner', 'calendar']),
     upload (url) {
-      this.banner[this.mainIndex - 1].CustomerImg = url + '?x-oss-process=style/calendar-thumb'
-      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) })
-      console.log(this.banner)
-      let cutDoms = document.getElementsByClassName('cutDom')[0]
-      this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
-        this.isLoading = false
-      }).catch(() => {
-        this.isLoading = false
+      this.banner[this.mainIndex - 1].CustomerImg = url
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) }).then(() => {
+        this.$nextTick(() => {
+          this.calSize().then(() => {
+            let cutDoms = document.getElementsByClassName('cutDom')[0]
+            let that = this
+            cutDoms.onload = function () {
+              that.convert2canvas(cutDoms, that.mainIndex - 1).then(() => {
+                that.isLoading = false
+              }).catch(() => {
+                that.isLoading = false
+              })
+            }
+          })
+        })
       })
     },
     onRead (file) {
     changeOld () {
       this.isLoading = true
       this.banner[this.mainIndex - 1].CustomerImg = ''
-      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) })
-      setTimeout(() => {
-        let cutDoms = document.getElementsByClassName('cutDom')[0]
-        this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
-          this.isLoading = false
-        }).catch(() => {
-          this.isLoading = false
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) }).then(() => {
+        this.$nextTick(() => {
+          this.calSize().then(() => {
+            let cutDoms = document.getElementsByClassName('cutDom')[0]
+            const that = this
+            cutDoms.onload = function () {
+              that.convert2canvas(cutDoms, that.mainIndex - 1).then(() => {
+                that.isLoading = false
+              }).catch(() => {
+                that.isLoading = false
+              })
+            }
+          })
         })
-      }, 100)
+      })
     },
     submit () {
       this.showPop = false
           context.webkitImageSmoothingEnabled = false;
           context.msImageSmoothingEnabled = false;
           context.imageSmoothingEnabled = false;
-          console.log(canvas.toDataURL('image/jpeg', 0.8))
           // 【重要】默认转化的格式为png,也可设置为其他格式
           // var img = canvas2image.convertToJPEG(canvas, canvas.width, canvas.height);
           // var blobs = that.urltoblob(img.src);
           //   content: img.src,
           //   file: that.blobToFile(blobs, namestr)
           // }
-          // console.log(file)
           // that.toolClass.upload(file).then((res) => {
           //   that.banner[i].CalendarImg = res.result.url
           //   that.setBanner({ type: that.$route.query.type, data: JSON.parse(JSON.stringify(that.banner)) })
       theBlob.lastModifiedDate = new Date();
       theBlob.name = fileName;
       return theBlob;
+    },
+    calSize () {
+      return new Promise((resolve) => {
+        let rotate = this.size
+        let dom = document.getElementsByClassName('cla')[0]
+        dom.children[0].onload = function () {
+          let imgW = dom.children[0].naturalWidth
+          let imgH = dom.children[0].naturalHeight
+          if (rotate === '横') {
+            if (imgW <= imgH) {
+              dom.children[0].style = 'width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);'
+              resolve()
+            } else {
+              dom.children[0].style = 'height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);'
+              resolve()
+            }
+          } else {
+            if (imgW >= imgH) {
+              dom.children[0].style = 'height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);'
+              resolve()
+            } else {
+              dom.children[0].style = 'width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);'
+              resolve()
+            }
+          }
+        }
+      })
     }
   }
 }
 
 
 <style lang="scss" scoped>
+.cla {
+  overflow: hidden;
+  position: relative;
+  z-index: 10;
+}
 .loading {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.2rem 0.2rem 0.3rem;
+  padding: 0.15rem 0.2rem 0.3rem;
   > div {
     flex: 1;
     text-align: center;
   padding: 0 0.25rem;
   box-sizing: border-box;
   span {
-    width: 0.6rem;
+    width: 0.5rem;
   }
 }
 .btn {

src/store/making/index.js

         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b1.jpg',
         ImgName: '1月',
         Sort: 2,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit:cover;',
         styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.95cm;left: .9cm;`
       },
       {
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b2.jpg',
         ImgName: '2月',
         Sort: 3,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;`
       },
       {
         bgImg: b3bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b3.jpg',
         ImgName: '3月',
         Sort: 4,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;`
       },
       {
         bgImg: b4bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b4.jpg',
         ImgName: '4月',
         Sort: 5,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit: cover;',
-        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit:cover;',
+        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;`
       },
       {
         bgImg: b5bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b5.jpg',
         ImgName: '5月',
         Sort: 6,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;`
       },
       {
         bgImg: b6bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b6.jpg',
         ImgName: '6月',
         Sort: 7,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;`
       },
       {
         bgImg: b7bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b7.jpg',
         ImgName: '7月',
         Sort: 8,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
-        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit:cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;`
       },
       {
         bgImg: b8bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b8.jpg',
         ImgName: '8月',
         Sort: 9,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;`
       },
       {
         bgImg: b9bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b9.jpg',
         ImgName: '9月',
         Sort: 10,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.58cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.58cm;right: 1.15cm;`
       },
       {
         bgImg: b10bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b10.jpg',
         ImgName: '10月',
         Sort: 11,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
-        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit:cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;`
       },
       {
         bgImg: b11bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b11.jpg',
         ImgName: '11月',
         Sort: 12,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;`
       },
       {
         bgImg: b12bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b12.jpg',
         ImgName: '12月',
         Sort: 13,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;`
       }
     ],
     bannerRed: [
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b1.jpg',
         ImgName: '1月',
         Sort: 2,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit: cover;',
-        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.95cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit:cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.95cm;left: .9cm;`
       },
       {
         bgImg: r2bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b2.jpg',
         ImgName: '2月',
         Sort: 3,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;`
       },
       {
         bgImg: r3bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b3.jpg',
         ImgName: '3月',
         Sort: 4,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;`
       },
       {
         bgImg: r4bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b4.jpg',
         ImgName: '4月',
         Sort: 5,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit: cover;',
-        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit:cover;',
+        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;`
       },
       {
         bgImg: r5bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b5.jpg',
         ImgName: '5月',
         Sort: 6,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;`
       },
       {
         bgImg: r6bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b6.jpg',
         ImgName: '6月',
         Sort: 7,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;`
       },
       {
         bgImg: r7bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b7.jpg',
         ImgName: '7月',
         Sort: 8,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
-        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit:cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;`
       },
       {
         bgImg: r8bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b8.jpg',
         ImgName: '8月',
         Sort: 9,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;`
       },
       {
         bgImg: r9bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b9.jpg',
         ImgName: '9月',
         Sort: 10,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.6cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.6cm;right: 1.15cm;`
       },
       {
         bgImg: r10bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b10.jpg',
         ImgName: '10月',
         Sort: 11,
-        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
-        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit:cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;`
       },
       {
         bgImg: r11bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b11.jpg',
         ImgName: '11月',
         Sort: 12,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;`
       },
       {
         bgImg: r12bg,
         defaultNoUser: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/calendar/b12.jpg',
         ImgName: '12月',
         Sort: 13,
-        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
-        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;object-fit: cover;`
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit:cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;`
       }
     ]
   },
   },
   actions: {
     setBanner (context, { type, data }) {
-      context.commit('upDateBanner', { type, data })
+      return new Promise((resolve) => {
+        context.commit('upDateBanner', { type, data })
+        resolve()
+      })
     },
     calendar (context, data) {
       return new Promise((resolve, reject) => {