sl-sfy-safety/src/layout/components/Header/QRcodePopover.vue

<template>
  <el-popover
    popper-style="    
    border: none;
    padding: 0px;
    width: 228px;
    height: 308px;
    background: linear-gradient(rgb(238, 246, 250), rgb(125, 194, 255));
    "
    placement="bottom"
    trigger="hover"
  >
    <template #reference>
      <div class="QR-btn">
        <!-- <el-icon :size="18"><Download /></el-icon> -->
        <el-button style="background-color: rgb(24, 144, 255); border: none" type="primary"
          >下载APP</el-button
        >
      </div>
    </template>
    <div class="QR-body">
      <div class="QR-text">安全管控平台</div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <img src="@/assets/images/Android.png" style="width: 16px; height: 19px" />
        <div class="QR-text" style="font-size: 14px; padding-left: 5px">Android客户端</div>
      </div>
      <!-- <img src="@/assets/images/QRcodeExample.png" style="width: 140px" /> -->
      <QrCode :value="qrCodeUrl" :width="140" />
      <!-- <el-button
        style="width: 102px; background-color: rgb(24, 144, 255); border: none"
        type="primary"
        >保存到相册
      </el-button> -->
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
  // import { Download } from '@element-plus/icons-vue';
  import { QrCode } from '@/components/Qrcode/index';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';
  import { computed, ref } from 'vue';
  const globSetting = useGlobSetting();
  const qrCodeUrl = computed(() => {
    const url = globSetting.appDownloadUrl || '';
    if (url?.startsWith('http') || url?.startsWith('//')) {
      return url;
    }
    return urlJoin(window.location.origin, url);
  });
</script>

<style scoped lang="scss">
  .QR-btn {
    display: flex;
    align-items: center;
  }

  .QR-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding: 20px;

    .QR-text {
      font-weight: 600;
      font-size: 20px;
      color: #1890ff;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }
  }
</style>