proginn-frontend/pages/user/new_article.vue

<template>
  <div class="box">
    <img src="~@/assets/quan/icon/tip.png" alt />
    <div class="tip">请前往web端新建文章</div>
    <div class="link">
      https://www.proginn.com/topics/create
      <span
        data-clipboard-text="https://www.proginn.com/topics/create"
        @click="copy"
        style="cursor:pointer"
      >复制</span>
    </div>
    <div class="btn" @click="back()">我知道了</div>
  </div>
</template>
<script>
import WxMixin from "@/mixins/wx";
import Clipboard from "clipboard";

export default {
  layout: "opacity_header",

  head() {
    return {
      title: "提示",
      script: [
        {
          src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
        },
        {
          src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
        }
      ]
    };
  },
  data() {
    return {};
  },
  created() {
    this.needLogin();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        console.log("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>
<style>
body {
  background-color: white;
}
</style>
<style lang='less' scoped>
.box {
  margin-top: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn {
  width: 2.8rem;
  height: 0.8rem;
  background: rgba(48, 142, 255, 1);
  box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(48, 142, 255, 0.3);
  border-radius: 0.04rem;
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.64rem;
}

.link > span {
  font-size: 0.24rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(48, 142, 255, 1);
}

.link {
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(146, 154, 164, 1);
  line-height: 0.36rem;
}

.tip {
  font-size: 0.3rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(44, 52, 62, 1);
  line-height: 0.51rem;
  margin-top: 0.36rem;
  margin-bottom: 0.07rem;
}

img {
  width: 3.28rem;
  height: 2.7rem;
}
</style>