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

<template>
  <div class="qrcode">
    <img class="qrcodebg" :src="require(`@/assets/images/mobile/kuangti/fenxiang.png`)" alt="">
    <div class="brightness"></div>

    <div class="qrcodecon">
      <h3>分享</h3>
      <div class="ctitle">
        <span>邀请好友一起观展吧！</span>
        <span>请长按下方图片下载二维码分享给好友</span>
      </div>
      <div class="ul">
        <div class="li">
          <p v-if="!currentPano.name" 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>

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

<script>

export default {
  props:['currentPano','currentItem'],
  data(){
    return {
      isShowUl:false
    }
  }
}
</script>

<style lang="less" scoped>
@w:100%;
@fixw:8px;
.qrcode{
  width: @w;
  height: 100%;
  position: relative;
  .qrcodebg{
    width: @w;
    position: absolute;
    z-index: 999;
    pointer-events: none;
    bottom: 0;
    left: 0;
  }
  .qrcodecon{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px 0 0;
    position: relative;
    >h3{
      font-weight: normal;
      font-size: 16px;
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .ctitle{
        margin-top: 40px;
        text-align: center;
        >span{
          display: block;
          &:first-of-type{
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 2px;
          }
          &:last-of-type{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    >.ul{
      width: 100%;
      height: calc(100% - 100px);
      overflow-y: auto;
      padding: 10px;
      >.li{
        text-align: center;
        width: 100%;
        margin-top: 10px;
        >p,.xiala{
          font-size: 14px;
          line-height: 1.5;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .xiala{
          width: 50%;
          margin: 0 auto 10px;
          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: 110%;
            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{
          max-width: 150px;
          width: 50%;
          margin: 10px 0 ;
        }
      }
    }
  }
}
</style>