proginn-frontend/pages/otherpage/kaifain/createInWeb.vue

<template>
  <div class="createInWeb">
    <div class="img">
      <img src="@/assets/img/other/kaifain/compute@2x.png" alt="">
    </div>
    <div class="tips">请前往web端入驻解决方案</div>
    <div class="urls" @click="copyToclipeFn">{{link}}</div>
    <div class="copyWord" @click="copyToclipeFn">复制</div>
    <div class="btn" @click="back()">
      <p>我知道了</p>
    </div>
  </div>
</template>

<script>
  /**
   * 到web创建解决方案提示
   */
  export default {
    name: 'CreateInWeb',
    asyncData({ store }) {
      return {
        link: store.state.domainConfig.siteUrl + "/otherpage/companyComplete"
      }
    },
    data() {

    },
    async created() {

    },
    async mounted() {

    },
    methods: {
      copyToclipeFn() {
        const { link = '' } = this
        const input = document.createElement('input')
        input.readOnly = 'readonly'
        input.value = link
        document.body.appendChild(input)
        input.select()
        input.setSelectionRange(0, input.value.length)
        document.execCommand('Copy')
        document.body.removeChild(input)
        this.$toast('复制成功！')
      },
      back() {
        history.back()
      }
    },

  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/scssCommon";

  .createInWeb {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(244, 245, 249, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .img {
      width: pxtovw(123);
      height: pxtovw(123);
      font-size: 0;
      img {
        width: pxtovw(123);
        height: pxtovw(123);
      }
    }
    .tips {
      margin-top: pxtovw(22);
      height: pxtovw(22);
      font-size: pxtovw(16);
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: pxtovw(22);
    }
    .urls {
      margin-top: pxtovw(6);
      min-height: pxtovw(20);
      font-size: pxtovw(14);
      font-weight: 400;
      color: rgba(146, 154, 164, 1);
      line-height: pxtovw(20);
      text-align: center;
      word-break: break-all;
      white-space: pre-wrap;
      max-width: pxtovw(270);
      text-decoration: underline;
    }
    .copyWord {
      margin-top: pxtovw(6);
      height: pxtovw(21);
      font-size: pxtovw(15);
      font-weight: 400;
      color: rgba(48, 142, 255, 1);
      line-height: pxtovw(21);
    }
    .btn {
      margin-top: pxtovw(29);
      width: pxtovw(149);
      height: pxtovw(42);
      background: rgba(48, 142, 255, 1);
      box-shadow: 0px pxtovw(2) pxtovw(6) 0px rgba(48, 142, 255, 0.3);
      border-radius: pxtovw(2);
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        height: pxtovw(20);
        font-size: pxtovw(14);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: pxtovw(20);
      }
    }
  }

</style>