homepage/src/views/Tracer.vue

<template>
  <v-touch @swiperight="go('/cherry')" :swipe-options="{ direction: 'horizontal' }" class="tracer">
    <header>
      <div @click="open('https://lacus.site')" class="icon-home-box">
        <icon name="home" class="icon-home"></icon>
      </div>
      <nav>
        <p @click="go('/canary')">canary</p>
        <p @click="go('/cherry')">cherry</p>
        <p>tracer</p>
      </nav>
      <div @click="open('https://lacus.site/2048')" class="icon-game-box">
        <icon name="game" class="icon-game"></icon>
      </div>
    </header>
    <div class="main">
      <img src="../assets/tracer.png" alt />
      <p class="title">tracer曳光失物招领</p>
      <p
        class="link"
        v-clipboard:copy="'https://tracer.lacus.site'"
        v-clipboard:success="success"
        v-clipboard:error="fail"
      >https://tracer.lacus.site(点击复制)</p>
      <p class="sub-title">强大而可靠的失物招领平台</p>
      <p class="content">严格的审核系统杜绝垃圾消息</p>
      <div
        class="btn android"
        @click="open('https://assets.lacus.site/tracer/user/tracer.apk')"
      >立即下载(安卓)</div>
      <div class="btn apple" @click="open('https://tracer.lacus.site')">打开网页(苹果)</div>
    </div>
    <div class="copyRight">
      <p>QQ:&nbsp;1144131090</p>
      <p>
        Design&nbsp;By &nbsp;
        <span>Rain&nbsp;Sun</span>
      </p>
      <p>&copy;2020 All Rights Reserved.</p>
      <p @click="open('http://beian.miit.gov.cn')">吉ICP备18005655号</p>
    </div>
  </v-touch>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Tracer",
  components: {},
  methods: {
    go(url) {
      this.$router.replace(url);
    },
    open(url) {
      window.open(url);
    },
    success() {
      window.alert('复制成功')
    },
    fail() {
      window.alert('复制失败')
    }
  }
};
</script>
<style lang="scss" scoped>
.tracer {
  width: 100%;
  min-height: 100%;
  header {
    height: 1.2rem;
    border-bottom: 1px #eee solid;
    background: #e6a23c;
    .icon-home-box {
      position: absolute;
      height: 0.6rem;
      width: 0.6rem;
      top: 0.3rem;
      left: 0.3rem;
      .icon-home {
        position: absolute;
        height: 0.6rem;
        width: 0.6rem;
      }
    }
    .icon-game-box {
      position: absolute;
      height: 0.7rem;
      width: 0.7rem;
      top: 0.3rem;
      right: 0.3rem;
      .icon-game {
        position: absolute;
        height: 0.7rem;
        width: 0.7rem;
      }
    }

    nav {
      margin: 0 auto;
      display: flex;
      font-size: 0.5rem;
      align-items: center;
      justify-content: center;
      p {
        margin-top: 0.1rem;
        margin-right: 0.5rem;
        line-height: 0.8rem;
        color: rgb(255, 232, 198);
      }
      p:last-of-type {
        margin-right: 0;
      }
      p:nth-of-type(3) {
        border-bottom: 2px #fff solid;
        color: #fff;
      }
    }
  }
  .main {
    text-align: center;
    img {
      height: 5rem;
      width: 5rem;
      display: block;
      margin: 0 auto;
    }
    .title {
      color: #e6a23c;
      font-size: 0.7rem;
    }
    .link {
      font-size: 0.3rem;
      color: #e6a23c;
    }
    .sub-title {
      margin-top: 0.3rem;
      color: #999;
      font-size: 0.35rem;
    }
    .content {
      color: #999;
      font-size: 0.35rem;
    }
    .btn {
      height: 1rem;
      line-height: 1rem;
      width: 4rem;
      font-size: 0.35rem;
      display: block;
      margin: 0.3rem auto;
      border-radius: 0.1rem;
      color: #e6a23c;
    }
    .android {
      margin-top: 0.5rem;
      background: rgb(255, 232, 198);
    }
    .apple {
      border: 1px rgb(255, 232, 198) solid;
    }
  }
  .copyRight {
    position: fixed;
    bottom: 0.3rem;
    left: 0;
    width: 100%;
    p {
      font-size: 0.25rem;
      text-align: center;
      margin: 0 auto;
      color: #999;
    }
  }
}
</style>