han

hanfei / VueSharedPrinting

Browse code han master
1 parent 3a423d5 commit 6ae6e4fc13efee0b64b10818000bfe4b7953a392 hanfei authored on 26 Jan 2024

Patch

Showing 2 changed files

Ignore Space Show notes View src/views/complete.vue
<template> <!--打印完成--> <div class="complete"> <div class="box flex-center"> <div class="left"> <img src="../assets/complete.png" alt=""> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt=""><span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> </div> </template> <script> export default { name: "complete", mounted() { this.load(0) }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load(n) { if(n<10) { setTimeout(()=>{ this.load(n+1) },1000) }else{ // this.quit() this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } </style> <template> <!--打印完成--> <div class="complete"> <div class="box flex-center"> <div class="left"> <img src="../assets/complete.png" alt=""> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt=""><span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> </div> </template> <script> export default { name: "complete", mounted() { this.load(0) }, methods: { skip(href) { this.$router.push({ name: href }) }, load(n) { if(n<1000000) { setTimeout(()=>{ this.load(n+1) },1000) }else{ // this.quit() this.$router.push({ name: 'device' }) } }, } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } </style>

Ignore Space Show notes View

src/views/complete.vue

<template>

  <div class="complete">
    <div class="box flex-center">
      <div class="left">
        <img src="../assets/complete.png" alt="">
        <div>打印完成</div>
        <div>感谢您使用天章自助打印服务</div>
      </div>
      <div class="right">
        <div class="title flex-center">温馨提示</div>
        <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div>
        <div class="tip" v-show="false">
          <div>本次打印您将获得：</div>
          <div class="flex-center">
            <img src="../assets/points.png" alt=""><span>28积分</span>
          </div>
        </div>
        <div class="btn flex-center" @click="skip('device')">回到首页</div>
      </div>
    </div>
  </div>
</template>

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left"> <div v-if="advertisement==[]" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill"/> </div> </div> <div class="left swiper-container" v-if="false"> <div class="swiper-wrapper"> <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType=='image/png'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div v-else class="advertising flex-center"> <video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement==''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType=='image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png"/>联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png"/>价格查询 </div> </div> </div> <div class="right"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white"> </VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png"/>扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')" > <img src="../assets/demo2.png"/> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')" > <img src="../assets/demo3.png"/> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')" > <img src="../assets/demo4.png"/> <div>身份证打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '' }; }, methods: { skip(href, name) { let {facility} = this let {sta, name2} = '' facility.paperNumber.forEach(item => { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } if (this.cite.memberLoginVo == '') { this.cite.state = { name: '请扫码登录设备再操作！', sta: true } return } if (href == 'operationGuide') { this.cite.modeName = name } this.$router.push({ name: href, params: { name: name, }, }); }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT() { this.mySwiper = new this.Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: 3000, disableOnInteraction: false } }) }, }, mounted() { this.load() setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT() }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code console.log(this.appSrc) } }, 300) } }; </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } } .right { width: 22rem; } } .main { width: 100%; height: 8rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: .5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } </style> <template> <div class="device"> <div class="box flex-between"> <div class="left"> <div v-if="advertisement==[]" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill"/> </div> </div> <div class="left swiper-container" v-if="false"> <div class="swiper-wrapper"> <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType=='image/png'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div v-else class="advertising flex-center"> <video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement==''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType=='image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png"/>联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png"/>价格查询 </div> </div> </div> <div class="right"> <div class="main4 flex-center"> <div> <div class="flex-center ewm" v-if="memberLoginVo!=''"> <div class="zzc flex-center"></div> <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white"> </VueQr> </div> <div class="flex-center ewm" v-else> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white"> </VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png"/>扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')" > <img src="../assets/demo2.png"/> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')" > <img src="../assets/demo3.png"/> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')" > <img src="../assets/demo4.png"/> <div>身份证打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '' }; }, methods: { skip(href, name) { let {facility} = this let {sta, name2} = '' facility.paperNumber.forEach(item => { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } if (this.cite.memberLoginVo == '') { this.cite.state = { name: '请扫码登录设备再操作！', sta: true } return } if (href == 'operationGuide') { this.cite.modeName = name } this.$router.push({ name: href, params: { name: name, }, }); }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT() { this.mySwiper = new this.Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: 3000, disableOnInteraction: false } }) }, }, mounted() { this.load() setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT() }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code console.log(this.appSrc) } }, 300) } }; </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } } .right { width: 22rem; } } .main { width: 100%; height: 8rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: .5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        <div v-if="advertisement==[]" class="advertising icon1 flex-center">广告位招租</div>
        <div v-else class="advertising flex-center">
          <img :src="advertisement[0].previewPath" model="scaleToFill"/>
        </div>
      </div>
      <div class="left swiper-container" v-if="false">
        <div class="swiper-wrapper">
          <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide">
            
            <div v-if="item.fileType=='image/png'" class="advertising flex-center">
              <img :src="item.previewPath" model="scaleToFill"/>
            </div>
            
            <div v-else class="advertising flex-center">
              <video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div v-if="false" class="left">
        
        <div v-if="advertisement==''" class="advertising icon1 flex-center">广告位招租</div>
        
        <div v-else-if="advertisement.fileType=='image/png'" class="advertising icon1 flex-center">
          <img :src="advertisement.previewPath" model="scaleToFill"/>
        </div>
        
        <div v-else class="advertising icon1 flex-center">
          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>
        </div>

<div v-show="false" class="box2 flex-between">
          <div class="main2 flex-center" @click="skip('explain', '联系客服')">
            <img src="../assets/demo7.png"/>联系客服
          </div>
          <div class="main2 flex-center" @click="skip('explain', '价格查询')">
            <img src="../assets/demo5.png"/>价格查询
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4 flex-center">
          <div>







            <div class="flex-center ewm">
              <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                     :logoMargin="0"
                     :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white">
              </VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png"/>扫码打印手机文件
            </div>
          </div>
        </div>

<div class="feature">
          <div
              class="main icon2 flex-start"
              @click="skip('operationGuide', 'U盘打印')"
          >
            <img src="../assets/demo2.png"/>
            <div>U盘打印</div>
          </div>
          <div
              class="main icon3 flex-start"
              @click="skip('operationGuide', '扫描打印')"
          >
            <img src="../assets/demo3.png"/>
            <div>扫描打印</div>
          </div>
          <div
              class="main icon4 flex-start"
              @click="skip('operationGuide', '身份证打印')"
          >
            <img src="../assets/demo4.png"/>
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="dbTip flex-between">
        <div>机器编号：{{ cite.code }}</div>
        <div>客服电话：{{ facility.servicePhone }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      let {facility} = this
      let {sta, name2} = ''
      facility.paperNumber.forEach(item => {
        if (item.residue < 1) {
          name2 = '请联系管理员添加' + item.name
          sta = true
        }
      })
      if (sta == true) {
        this.cite.state = {
          name: name2,
          sta: true
        }
        return
      }
      if (this.cite.memberLoginVo == '') {
        this.cite.state = {
          name: '请扫码登录设备再操作！',
          sta: true
        }
        return
      }
      if (href == 'operationGuide') {
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    load() {
      if (this.src == '') {
        this.src = this.cite.url
        setTimeout(() => {
          this.load()
        }, 1000)
      }
    },
    GGT() {
      this.mySwiper = new this.Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      })
    },
  },
  mounted() {
    this.load()

setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT()
        }, 500)
      }
      if (this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }
      if (this.cite.memberLoginVo != this.memberLoginVo) {
        this.memberLoginVo = this.cite.memberLoginVo
      }

if (this.appSrc == '' && this.cite.code != '') {
        this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code
        console.log(this.appSrc)
      }
    }, 300)
  }
};
</script>

.box {
    align-items: flex-start;

.left {
      width: 92.5rem;
      margin: 0;
      position: relative;
      z-index: 1;

.advertising {
        width: 100%;
        height: 52rem;
        border-radius: 1.63rem;
        //margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 8rem;

img {
          width: 100%;
          height: 100%;
        }
      }
    }

.right {
      width: 22rem;
    }
  }

.main {
    width: 100%;
    height: 8rem;
    border-radius: 1.63rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8rem;
    margin-top: 1rem;

img {
      width: 8rem;
      margin-top: -1rem;
    }
  }

.icon1 {
    background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45);
  }

.icon2 {
    background: linear-gradient(180deg, #f2c952 0%, #db572b 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57);
  }

.icon3 {
    background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3);
  }

.icon4 {
    background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42);
  }

.css1 {
    background: #ffffff;
    box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    cursor: pointer;
  }

.main2 {
    width: 100%;
    height: 6.44rem;
    .css1();
    font-size: 1.88rem;
    font-weight: bold;
    color: #323232;
    line-height: 2.63rem;

img {
      width: 3.75rem;
      margin-right: 0.38rem;
    }
  }

.main3 {
    width: 100%;
    height: 9.94rem;
    .css1();
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

img {
      width: 4.25rem;
      margin-right: 0.88rem;
    }
  }

.main4 {
    width: 100%;
    height: 25rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;

.ewm {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      position: relative;
      img {
        width: 100%;
        margin: 0;
      }
    }

.tip {
      margin-top: 1rem;
    }

img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
    .zzc {
      position: absolute;
      background: #333;
      opacity: .5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

.dbTip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #323232;
    height: 3rem;
    padding: 0 3rem;
  }
}
</style>

<div v-show="false" class="box2 flex-between">
          <div class="main2 flex-center" @click="skip('explain', '联系客服')">
            <img src="../assets/demo7.png"/>联系客服
          </div>
          <div class="main2 flex-center" @click="skip('explain', '价格查询')">
            <img src="../assets/demo5.png"/>价格查询
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4 flex-center">
          <div>
            <div class="flex-center ewm" v-if="memberLoginVo!=''">
              <div class="zzc flex-center"></div>
              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                     :logoMargin="0"
                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">
              </VueQr>
            </div>
            <div class="flex-center ewm" v-else>
              <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                     :logoMargin="0"
                     :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white">
              </VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png"/>扫码打印手机文件
            </div>
          </div>
        </div>