assessment-front/pages_order/service/popupQrCode.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0"
    mode="center"
    bgColor="none"
  >
    <view class="popup__view">
      <image class="bg" src="@/pages_order/static/service/bg-popup-qr.png" mode="widthFix"></image>
      <view class="flex flex-column content">
        <text class="title">扫码添加微信</text>
        <image class="img" :src="configList.customer_service_qrcode" :show-menu-by-longpress="true"></image>
        <button class="btn" @click="close">已截图</button>
      </view>
    </view>
  </uv-popup>
</template>

<script>
  import { mapState } from 'vuex'

	export default {
		data() {
			return {
      }
    },
    computed : {
      ...mapState(['configList'])
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
    },
  }
</script>

<style scoped lang="scss">
  .popup__view {
    position: relative;
    width: 684rpx;
    min-height: 826rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
  }

  .bg {
    width: 100%;
    height: auto;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 71rpx 0 23rpx 0;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
  }

  .img {
    margin: 156rpx 0 73rpx 0;
    width: 360rpx;
    height: auto;
    min-height: 360rpx;
  }

  .btn {
    padding: 29rpx 202rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    background: #014FA2;
    border-radius: 50rpx;
  }
</style>