nanhuashi_applet/pages/home/roam.vue

<template>
  <view class="content">
    <view class="home-img">
      <!-- <web-view class="relative z-0" :src="weburl" ></web-view> -->
    </view>
    <u-popup :show="show" mode="center" round="10" @close="close" @open="open">
        <view class="mySharepopup">
          <div class="close" @click="close">
            <u--image width="42px" height="42px" src="/static/img/icon_cancel@2x.png"></u--image>
          </div>
          <view class="text">
              <u--image width="295px" height="450px" src="/static/img/img_cover@2x.jpg"></u--image>
            <div class="flex justify-between shareImg">
              <div class="code">
                <u--image width="66px" height="66px" src="/static/img/icon_scan_active@2x.png"></u--image>
              </div>
              <div class="zz">
                <u--image width="122px" height="113px" src="/static/img/insignia@2x.png"></u--image>
              </div>
            </div>
          </view>
          <view class="bottom">
            <view class="text" style="width: 100%">              
                <view mt-10>第<text >5462</text>位游客完成打卡</view>
            </view>
          </view>
          <view class="butList flex justify-around my-10">
            <!-- <div class="share">
              <u-button :customStyle="{opacity: 0,width: '50px', height: '50px',}" type="primary" icon="share" plain text=" " open-type="share"></u-button>
              <u-icon name="share" color="#2979ff" size="28"></u-icon>
            </div> -->
            <u-icon name="download" color="#2979ff" size="28"></u-icon>
          </view>
        </view>
		</u-popup>
  </view>
</template>

<script>
// import uButton from "uview-ui/components/u-button/u-button.vue";
export default {
  components: {
    // uButton
  },
  data() {
    return {
      title: "Hello",
      show: true,
      weburl: "https://test.4dkankan.com/spg.html?m=KK-t-fs8TbMny2Zb&lang=zh"
    };
  },
  onLoad() {},
  methods: {
    handleHome() {
      console.log("开启云上观灯", uni);
      uni.$u.route("/pages/home/home");
    },
    close() {
      this.show = false
      // console.log('close');
    },
    open() {

    },
    handleShare() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneTimeline",
        type: 1,
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    }
  },
};
</script>

<style lang="scss">
.mySharepopup{
  // width: 330px;
  // height: 537px;
  padding: 19px 17px 0px 17px;
  .close{
    position: absolute;
    right: -20px;
    top: -20px;
    width: 42px;
    height: 42px;
  }
  .butList{
    position: absolute;
    bottom: -80px;
    left: calc(50% - 14px);
    .share{
      position: relative;
      .u-icon{
        position: absolute;
        left: calc(50% - 14px);
        top: calc(50% - 14px);
      }
    }
  }
  .text{
    position: relative;
    .shareImg{
      width: 100%;
      position: absolute;
      bottom: -30px;
    }
  }
  .bottom{
    font-weight: 400;
    height: 50px;
    font-size: 16px;
    color: #000000;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    position: relative;
    bottom: -30px;
    text {
      font-size: 20px;
      color: #B1967B;
    }
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  .urlContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .right{
    position: fixed;
    left: 20px;
    top: 20px;
  }
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  padding-bottom: 50%;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.home-img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .share{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    border: 1px solid #2979ff;

  }
}
.u-popup__content__close{
  right: calc(50% - 4.5px) !important;
  bottom: -40px !important;
  z-index: 10;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 5px;
  color: #fff;
  .u-icon__icon {
     color: #fff !important;
  }
}
</style>