翻译英文

docs-en/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/app"
+  ]
+}

docs-en/App.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="app">
+    <header>
+      <h1>v-track</h1>
+      <div class="command">yarn add v-track or npm add v-track --save</div>
+      <nav>
+        <a href="https://travis-ci.org/l-hammer/v-track"
+          ><img
+            alt="Travis (.org) branch"
+            src="https://img.shields.io/travis/l-hammer/v-track/master.svg?logoColor=%23666666&style=flat-square"
+        /></a>
+        <a href="https://unpkg.com/v-track/dist/v-track.min.js"
+          ><img
+            src="http://img.badgesize.io/https://unpkg.com/v-track/dist/v-track.min.js?compression=gzip&style=flat-square"
+            alt="Gzip Size"
+        /></a>
+        <a href="https://www.npmjs.com/package/v-track"
+          ><img
+            src="https://img.shields.io/npm/v/v-track.svg?colorB=brightgreen&style=flat-square"
+        /></a>
+        <a href="https://github.com/l-hammer/v-track/tree/master/tests/unit"
+          ><img
+            src="https://img.shields.io/badge/tested_with-jest-99424f.svg?style=flat-square"
+        /></a>
+        <a href="http://hits.dwyl.io/l-hammer/v-track" alt="hit count"
+          ><img src="http://hits.dwyl.io/l-hammer/v-track.svg"
+        /></a>
+        <a href="https://github.com/l-hammer/v-track"
+          ><img
+            src="https://img.shields.io/github/stars/l-hammer/v-track.svg?style=social&label=Star"
+        /></a>
+      </nav>
+      <div class="description">
+        🕹A tracking Plugin Based on Vue Instruction~~
+      </div>
+    </header>
+
+    <router-view />
+
+    <section class="footer">
+      <div class="section-content mini">
+        Copyright © 2019-present LHammer
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+@import "./assets/index.scss";
+</style>

docs-en/assets/app.scss

@@ -0,0 +1,188 @@
+body {
+  background: white;
+  margin: 0;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+header {
+  background: $primary-color;
+  padding: 32px;
+  padding-bottom: 8px;
+  nav,
+  .description {
+    text-align: center;
+  }
+  .description {
+    color: white;
+    margin-top: 15px;
+  }
+}
+section {
+  .section-content {
+    margin: 0 42px;
+    padding: 64px 0;
+    box-sizing: border-box;
+    &.small {
+      padding: 32px 0;
+    }
+    &.mini {
+      padding: 16px 0;
+    }
+    &.large {
+      padding: 152px 0;
+    }
+  }
+  &.nav {
+    text-align: center;
+    background: $primary-color;
+    padding: 24px;
+    padding-bottom: 35px;
+    @include h-box;
+    @include box-center;
+    a {
+      display: inline-block;
+      padding: 8px 16px;
+      color: white;
+      background: lighten($primary-color, 10%);
+      border-radius: 3px;
+      &:hover {
+        background: lighten($primary-color, 20%);
+      }
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.collapse {
+  .section-content {
+    padding: 12px 0 64px 0;
+  }
+}
+
+h1 {
+  color: white;
+  text-align: center;
+  margin: 0 0 32px;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    color: lighten($primary-color, 10%);
+  }
+}
+
+.command {
+  background: darken($primary-color, 10%);
+  color: white;
+  font-family: monospace;
+  max-width: 500px;
+  margin: 20px auto;
+  border-radius: 2px;
+  padding: 12px 24px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.plus {
+  text-align: center;
+  color: $primary-color;
+  font-size: 32px;
+  margin: 12px;
+}
+
+.demo,
+.snippets {
+  max-width: 1200px;
+  margin: auto;
+}
+
+.snippet + .snippet {
+  margin-top: 20px;
+}
+
+.snippet:last-child {
+  margin-bottom: 39px;
+}
+
+.snippets {
+  background: #f9f9f9;
+  border-radius: 0 0 3px 3px;
+}
+
+.demo {
+  background: #f9f9f9;
+  margin-top: 42px;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+  .section-content {
+    text-align: center;
+    max-width: 560px;
+    margin: auto;
+  }
+}
+
+.footer {
+  font-size: 14px;
+  text-align: center;
+  background: lighten($primary-color, 45%);
+}
+
+.track-button {
+  width: 229px;
+  height: 39px;
+  background: $primary-color;
+  border-radius: 5px;
+  color: white;
+  line-height: 39px;
+  margin: auto;
+  cursor: pointer;
+  user-select: none;
+  &:hover {
+    background: lighten($primary-color, 5%);
+  }
+  &:active {
+    background: darken($primary-color, 5%);
+  }
+}
+
+.v-track-table {
+  .header,
+  .row {
+    display: flex;
+    strong,
+    span {
+      flex: 1;
+      line-height: 29px;
+      border-bottom: 1px solid #ebeef5;
+    }
+  }
+  .row:hover {
+    background: #fafafa;
+    cursor: pointer;
+  }
+}
+
+.notification__large {
+  width: 399px;
+  .el-notification__group {
+    width: 100%;
+  }
+}
+
+.message-offset {
+  top: 88px;
+}
+
+.section-content.collapse-wrapper {
+  padding: 20px;
+  margin: 20px auto;
+  background: white;
+  max-width: 690px;
+  text-align: left;
+  box-shadow: 0 2px 4px rgba(232, 237, 250, 0.9);
+}

docs-en/assets/index.scss

@@ -0,0 +1,10 @@
+$primary-color: #40b883;
+$md-grey: #9e9e9e;
+$md-grey-100: #f5f5f5;
+$md-grey-200: #eeeeee;
+$md-grey-300: #e0e0e0;
+$md-grey-400: #bdbdbd;
+
+@import './normalize.scss';
+@import './mixins.scss';
+@import './app.scss';

docs-en/assets/mixins.scss

@@ -0,0 +1,64 @@
+@mixin ellipsis {
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin bounds($distance) {
+  top: $distance;
+  bottom: $distance;
+  right: $distance;
+  left: $distance;
+}
+
+@mixin overlay {
+  position: absolute;
+  @include bounds(0);
+}
+
+@mixin flex-box {
+  display: flex;
+
+  & > * {
+    flex: auto 0 0;
+  }
+}
+
+@mixin h-box {
+  @include flex-box;
+  flex-direction: row;
+}
+
+@mixin v-box {
+  @include flex-box;
+  flex-direction: column;
+}
+
+@mixin box-center {
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin space-between-x($margin) {
+  margin-right: $margin;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+@mixin space-between-y($margin) {
+  margin-bottom: $margin;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}