finish v1

2020-04-19 18:06:01 +08:00 · 2020-04-19 18:06:01 +08:00 · 57f527fb7f
commit 57f527fb7f
parent 77f67104d5
17 changed files with 688 additions and 116 deletions
--- a/package.json
+++ b/package.json
@ -8,9 +8,12 @@
  },
  "dependencies": {
    "core-js": "^3.6.4",
+    "hammerjs": "^2.0.8",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.1",
    "vue-router": "^3.1.6",
+    "vue-svg-icon": "^1.2.9",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,32 +1,124 @@
 <template>
  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
    <router-view/>
  </div>
 </template>

 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+	margin: 0;
+	padding: 0;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+body,
+button,
+input,
+select,
+textarea {
+	font: 12px/1.5tahoma, arial, \5b8b\4f53;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: 100%;
+}
+address,
+cite,
+dfn,
+em,
+var {
+	font-style: normal;
+}
+code,
+kbd,
+pre,
+samp {
+	font-family: couriernew, courier, monospace;
+}
+small {
+	font-size: 12px;
+}
+ul,
+ol {
+	list-style: none;
+}
+a {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+sup {
+	vertical-align: text-top;
+}
+sub {
+	vertical-align: text-bottom;
+}
+legend {
+	color: #000;
+}
+fieldset,
+img {
+	border: 0;
+}
+button,
+input,
+select,
+textarea {
+	font-size: 100%;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button {
+	margin: 0;
+	padding: 0;
+	background: none;
+	border: none;
+	outline: none;
+}
+#app {
+	font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	/* text-align: center; */
+	// color: #2c3e50;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
 }
 </style>
--- a/src/assets/canary.png
+++ b/src/assets/canary.png
--- a/src/assets/cherry.png
+++ b/src/assets/cherry.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/title.png
+++ b/src/assets/title.png
--- a/src/assets/tracer.png
+++ b/src/assets/tracer.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
@ -4,7 +4,27 @@ import './registerServiceWorker'
 import router from './router'
 import store from './store'

+// icon-loader
+import Icon from 'vue-svg-icon/Icon.vue'
+Vue.component('icon', Icon);
+
+// 手势控件
+import VueTouch from 'vue-touch'
+Vue.use(VueTouch, { name: 'v-touch' })
+
 Vue.config.productionTip = false
+//px2rem
+export function setHtmlFontSize() {
+  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
+  const htmlDom = document.getElementsByTagName('html')[0]
+  if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
+  else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
+}
+setHtmlFontSize()
+
+// VueClipboard
+import VueClipboard from "vue-clipboard2";
+Vue.use(VueClipboard);

 new Vue({
  router,
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,23 +1,33 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Canary from '../views/Canary.vue'
+import Cherry from '../views/Cherry.vue'
+import Tracer from '../views/Tracer.vue'

 Vue.use(VueRouter)

  const routes = [
  {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: '/canary',
+    name: 'Canary',
+    component: Canary
  },
  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    path: '/cherry',
+    name: 'Cherry',
+    component: Cherry
+  },
+  {
+    path: '/tracer',
+    name: 'Tracer',
+    component: Tracer
+  },
+	{
+		path: '*', // 页面不存在的情况下会跳到home
+		redirect: '/canary',
+		name: 'notFound',
+		hidden: true
+	}
 ]

 const router = new VueRouter({
--- a/src/svg/game.svg
+++ b/src/svg/game.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587281933120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M204.896 863.104a126.08 126.08 0 0 1-10.4-0.416C86.72 853.856 14.912 692.896 31.008 496.288 47.36 296.352 141.024 151.744 249.44 161.056c48.384 3.968 81.92 42.912 105.76 76.416A32 32 0 0 1 303.04 274.56c-23.456-32.96-41.6-48.288-58.816-49.728-59.008-4.256-135.584 107.584-149.408 276.672-13.824 169.056 44.192 292.384 104.928 297.344 52.96 4.96 105.024-61.152 132.192-166.848a31.968 31.968 0 0 1 30.976-24h299.904c14.432 0 27.072 9.664 30.88 23.552 29.152 106.688 81.216 172.352 135.328 166.848 29.408-2.976 57.28-33.632 76.448-84.096 22.208-58.592 30.016-135.04 21.888-215.232s-31.072-153.536-64.64-206.56c-28.928-45.696-62.016-70.592-91.744-67.2-18.336 1.888-39.616 19.2-59.808 48.736a31.968 31.968 0 0 1-26.432 13.952H448a32 32 0 0 1 0-64h220.48c29.28-37.92 61.568-58.848 96.064-62.336 107.328-10.944 206.592 134.592 226.496 331.008 9.088 89.888-0.032 176.672-25.76 244.384-28.512 75.072-74.592 119.456-129.824 125.056-81.76 8.352-156.128-63.968-196.544-190.08h-251.808c-36.48 119.52-104.512 191.072-182.208 191.072zM320 448H288v-32a32 32 0 0 0-64 0v32H192a32 32 0 0 0 0 64h32v32a32 32 0 1 0 64 0v-32h32a32 32 0 0 0 0-64z m416-64a64 64 0 1 1 128 0 64 64 0 1 1-128 0z m-128 128a64 64 0 1 1 128 0 64 64 0 1 1-128 0z" p-id="3423" fill="#ffffff"></path></svg>
--- a/src/svg/home.svg
+++ b/src/svg/home.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587281917680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2160" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M426.666667 938.666667a42.666667 42.666667 0 0 1-42.666667 42.666666H149.205333A106.538667 106.538667 0 0 1 42.666667 874.517333v-362.666666c0-47.744 27.328-106.816 63.786666-137.792L484.352 52.821333a42.666667 42.666667 0 0 1 55.253333 0L917.546667 374.058667c36.48 31.061333 63.786667 89.984 63.786666 137.813333v362.666667A106.624 106.624 0 0 1 874.645333 981.333333H640a42.666667 42.666667 0 0 1-42.666667-42.666666V682.666667h-170.666666v256z m447.978666-42.666667A21.290667 21.290667 0 0 0 896 874.517333v-362.666666c0-22.784-16.277333-57.941333-33.706667-72.768L512 141.333333 161.706667 439.082667C144.341333 453.845333 128 489.152 128 511.850667v362.666666A21.205333 21.205333 0 0 0 149.205333 896H341.333333V640a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 1 42.666667 42.666667v256h191.978666z" fill="#ffffff" p-id="2161"></path></svg>
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
--- a/src/views/Canary.vue
+++ b/src/views/Canary.vue
@ -0,0 +1,173 @@
+<template>
+  <v-touch @swipeleft="go('/cherry')" :swipe-options="{ direction: 'horizontal' }" class="canary">
+    <header>
+      <div @click="open('https://lacus.site')" class="icon-home-box">
+        <icon name="home" class="icon-home"></icon>
+      </div>
+      <nav>
+        <p>canary</p>
+        <p @click="go('/cherry')">cherry</p>
+        <p @click="go('/tracer')">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/canary.png" alt />
+      <p class="title">canary密码本</p>
+      <p
+        class="link"
+        v-clipboard:copy="'https://canary.lacus.site'"
+        v-clipboard:success="success"
+        v-clipboard:error="fail"
+      >https://canary.lacus.site(点击复制)</p>
+      <p class="sub-title">专注密码安全与管理</p>
+      <p class="content">支持生成随机密码、云同步、检索等功能</p>
+      <div class="btn android" @click="open('https://assets.lacus.site/canary/canary.apk')">立即下载(安卓)</div>
+      <div class="btn apple" @click="open('https://canary.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: "Canary",
+  components: {},
+  methods: {
+    go(url) {
+      this.$router.replace(url);
+    },
+    open(url) {
+      window.open(url);
+    },
+    success() {
+      window.alert('复制成功')
+    },
+    fail() {
+      window.alert('复制失败')
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.canary {
+  width: 100%;
+  min-height: 100%;
+  header {
+    height: 1.2rem;
+    border-bottom: 1px #eee solid;
+    background: #bbdefb;
+    .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: #ddf0ff;
+      }
+      p:last-of-type {
+        margin-right: 0;
+      }
+      p:first-of-type {
+        border-bottom: 2px #fff solid;
+        color: #fff;
+      }
+    }
+  }
+  .main {
+    text-align: center;
+    img {
+      height: 5rem;
+      width: 5rem;
+      display: block;
+      margin: 0 auto;
+    }
+    .link {
+      font-size: 0.3rem;
+      color: #bbdefb;
+    }
+    .title {
+      color: #bbdefb;
+      font-size: 0.7rem;
+    }
+    .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: #89c7fa;
+    }
+    .android {
+      margin-top: 0.5rem;
+      background: #ddf0ff;
+    }
+    .apple {
+      border: 1px #ddf0ff 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>
--- a/src/views/Cherry.vue
+++ b/src/views/Cherry.vue
@ -0,0 +1,178 @@
+<template>
+  <v-touch
+    @swipeleft="go('/tracer')"
+    @swiperight="go('/canary')"
+    :swipe-options="{ direction: 'horizontal' }"
+    class="cherry"
+  >
+    <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>cherry</p>
+        <p @click="go('/tracer')">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/cherry.png" alt />
+      <p class="title">cherry课表成绩查询</p>
+      <p
+        class="link"
+        v-clipboard:copy="'https://cherry.lacus.site'"
+        v-clipboard:success="success"
+        v-clipboard:error="fail"
+      >https://cherry.lacus.site(点击复制)</p>
+      <p class="sub-title">不保存任何账号以及密码</p>
+      <p class="content">一款小巧而精致的课表成绩查询系统</p>
+      <div class="btn android" @click="open('https://assets.lacus.site/cherry/cherry.apk')">立即下载(安卓)</div>
+      <div class="btn apple" @click="open('https://cherry.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: "Cherry",
+  components: {},
+  methods: {
+    go(url) {
+      this.$router.replace(url);
+    },
+    open(url) {
+      window.open(url);
+    },
+    success() {
+      window.alert('复制成功')
+    },
+    fail() {
+      window.alert('复制失败')
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.cherry {
+  width: 100%;
+  min-height: 100%;
+  header {
+    height: 1.2rem;
+    border-bottom: 1px #eee solid;
+    background: #ff6243;
+    .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: #ffd8d0;
+      }
+      p:last-of-type {
+        margin-right: 0;
+      }
+      p:nth-of-type(2) {
+        border-bottom: 2px #fff solid;
+        color: #fff;
+      }
+    }
+  }
+  .main {
+    text-align: center;
+    img {
+      height: 5rem;
+      width: 5rem;
+      display: block;
+      margin: 0 auto;
+    }
+    .title {
+      color: #ff6243;
+      font-size: 0.7rem;
+    }
+    .link {
+      font-size: 0.3rem;
+      color: #ff6243;
+    }
+    .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: #ff6243;
+    }
+    .android {
+      margin-top: 0.5rem;
+      background: #ffd8d0;
+    }
+    .apple {
+      border: 1px #ffd8d0 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>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>
--- a/src/views/Tracer.vue
+++ b/src/views/Tracer.vue
@ -0,0 +1,177 @@
+<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>
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587281933120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M204.896 863.104a126.08 126.08 0 0 1-10.4-0.416C86.72 853.856 14.912 692.896 31.008 496.288 47.36 296.352 141.024 151.744 249.44 161.056c48.384 3.968 81.92 42.912 105.76 76.416A32 32 0 0 1 303.04 274.56c-23.456-32.96-41.6-48.288-58.816-49.728-59.008-4.256-135.584 107.584-149.408 276.672-13.824 169.056 44.192 292.384 104.928 297.344 52.96 4.96 105.024-61.152 132.192-166.848a31.968 31.968 0 0 1 30.976-24h299.904c14.432 0 27.072 9.664 30.88 23.552 29.152 106.688 81.216 172.352 135.328 166.848 29.408-2.976 57.28-33.632 76.448-84.096 22.208-58.592 30.016-135.04 21.888-215.232s-31.072-153.536-64.64-206.56c-28.928-45.696-62.016-70.592-91.744-67.2-18.336 1.888-39.616 19.2-59.808 48.736a31.968 31.968 0 0 1-26.432 13.952H448a32 32 0 0 1 0-64h220.48c29.28-37.92 61.568-58.848 96.064-62.336 107.328-10.944 206.592 134.592 226.496 331.008 9.088 89.888-0.032 176.672-25.76 244.384-28.512 75.072-74.592 119.456-129.824 125.056-81.76 8.352-156.128-63.968-196.544-190.08h-251.808c-36.48 119.52-104.512 191.072-182.208 191.072zM320 448H288v-32a32 32 0 0 0-64 0v32H192a32 32 0 0 0 0 64h32v32a32 32 0 1 0 64 0v-32h32a32 32 0 0 0 0-64z m416-64a64 64 0 1 1 128 0 64 64 0 1 1-128 0z m-128 128a64 64 0 1 1 128 0 64 64 0 1 1-128 0z" p-id="3423" fill="#ffffff"></path></svg>