yangshi_cloudExbition/src/pages/scene/components/qrcode.vue

<template>
  <div class="qrcode">
    <img
      class="qrcodebg"
      :src="require(`@/assets/images/project/kuangti/qrcode_${theme}.png`)"
      alt=""
    />
    <div class="brightness"></div>

    <div class="qrcodecon">
      <h3>扫描二维码，手机观展</h3>
      <div class="ul">
        <div class="li">
          <p v-html="currentPano.name || ''"></p>
          <!-- <div class="xiala" v-else>
            <span @click="isShowUl=!isShowUl">
              {{currentPano.name}}
              <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
            </span>
            <ul class="brightness" v-if="isShowUl">
              <li @click="isShowUl=false,currentPano.name='四川省返乡创业'" v-for="(item,i) in 2" :key="i">
                四川省返乡创业
              </li>
            </ul>
          </div> -->

          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
          <div @click="download" class="download">下载二维码</div>
        </div>

        <div class="li">
          <p v-html="currentItem.name"></p>
          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
          <div @click="download" class="download">下载二维码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["currentPano", "currentItem"],
  data() {
    return {
      isShowUl:false
    };
  },
  methods:{
    download(){
      let elink = document.createElement("a");
      elink.href = require(`@/assets/images/project/qrcode.jpg`);
      elink.download = `qecode.png`;
      elink.click();
      document.body.removeChild(elink);
    }
  }
};
</script>

<style lang="less" scoped>
@w: 900px;
@fixw: 8px;
.qrcode {
  width: @w;
  position: relative;
  .qrcodebg {
    width: @w + @fixw * 2;
    position: relative;
    transform: translateX(-@fixw);
  }
  .brightness {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    clip-path: polygon(0 11%, 10% 2%, 100% 2%, 100% 90%, 92% 98%, 0 98%);
  }

  .qrcodecon {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 80px 0 0;
    > h3 {
      font-weight: normal;
      font-size: 26px;
      position: absolute;
      top: 14px;
      left: 8%;
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
    }
    .ul {
      display: flex;
      justify-content: center;
      width: 100%;
      padding-top: 18px;
      .li {
        text-align: center;
        width: 220px;
        &:first-of-type {
          margin-right: 15%;
        }
        > p, .xiala {
          font-size: 18px;
          line-height: 1.5;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .xiala{
          position: relative;
          >span{
            border: 1px solid #fff;
            display: inline-block;
            border-radius: 4px;
            width: 100%;
            padding: 10px 30px 10px 10px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            >img{
              position: absolute;
              right: 12px;
              transform: rotate(90deg);
              top: 33%;
              width: 8px;
            }
          }
          >ul{
            position: absolute;
            top: 90%;
            padding: 0 10px;
            width: 100%;
            z-index: 99;
            clip-path:none!important;
            border-radius: 4px;
            overflow: hidden;
            height: auto;
            >li{
              text-align: left;
              line-height: 1.5;
              border-bottom: dashed 1px #fff;
              padding: 10px 0;
              cursor: pointer;
              font-size: 16px;
              &:last-of-type{
                border-bottom: none;
              }
            }
          }
        }
        > img {
          width: 100%;
          margin: 10px 0 40px;
        }
        .download {
          border: 1px solid #fff;
          background-color: rgba(255, 255, 255, 0.29);
          line-height: 60px;
          height: 60px;
          width: 100%;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>