3 years ago · 500b72f477
--- a/dist/css/app.a5f97891.css
+++ b/dist/css/app.a5f97891.css
--- a/dist/css/guide.47ea104e.css
+++ b/dist/css/guide.47ea104e.css
@@ -0,0 +1 @@
 
															+.guide{width:100%;padding:2.66667vw;font-family:PingFang·SC;box-sizing:border-box}.guide p{font-size:3.73333vw;color:#666;line-height:5.33333vw}.guide .mt12{margin-top:3.2vw}.guide .mt20{margin-top:5.33333vw}.guide .pd12{padding:3.2vw}.guide__block__tt:before{content:"";display:block;width:1.6vw;height:1.6vw;border-radius:1.6vw;border-color:#ffc400;border-width:.53333vw;border-style:solid}.guide__block__tt h3{margin-left:1.6vw}.guide__block__step{width:100%;background-color:#f1f1f1;border-radius:2.66667vw;box-sizing:border-box}.guide__block__step .body{padding:5.33333vw}.guide__block__step .step{width:10.66667vw;height:10.66667vw}.guide__block__step .foot-homing{width:26.66667vw;height:26.66667vw}.guide__block__step .foot-draw-close,.guide__block__step .foot-left-top{width:48vw;height:48vw}.guide__block__step .foot-left-bottom{width:47.46667vw;height:48vw}.guide__block__step .foot-right-top{width:47.46667vw;height:47.73333vw}.guide__block__step .foot-right-bottom{width:47.46667vw;height:48vw}.guide__block__step .next{width:6.93333vw;height:7.46667vw}.guide__block__step .order{width:80vw;height:12.26667vw}
														
--- a/dist/img/foot-draw-close.7992c9bd.png
+++ b/dist/img/foot-draw-close.7992c9bd.png
--- a/dist/img/foot-homing.764135bb.png
+++ b/dist/img/foot-homing.764135bb.png
--- a/dist/img/foot-left-bottom.cf7418b7.png
+++ b/dist/img/foot-left-bottom.cf7418b7.png
--- a/dist/img/foot-left-top.bde170dc.png
+++ b/dist/img/foot-left-top.bde170dc.png
--- a/dist/img/foot-right-bottom.abd0d790.png
+++ b/dist/img/foot-right-bottom.abd0d790.png
--- a/dist/img/foot-right-top.c478dd4f.png
+++ b/dist/img/foot-right-top.c478dd4f.png
--- a/dist/img/order-left-bottom.ce3207b1.png
+++ b/dist/img/order-left-bottom.ce3207b1.png
--- a/dist/img/order-left-top.dfaa90c3.png
+++ b/dist/img/order-left-top.dfaa90c3.png
--- a/dist/img/order-middle.26880c9e.png
+++ b/dist/img/order-middle.26880c9e.png
--- a/dist/img/order-right-bottom.8e9c42a8.png
+++ b/dist/img/order-right-bottom.8e9c42a8.png
--- a/dist/img/order-right-top.2b72d744.png
+++ b/dist/img/order-right-top.2b72d744.png
--- a/dist/index.html
+++ b/dist/index.html
@@ -1 +1 @@
 
															-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>sport-web</title><link href="css/about.5b4840af.css" rel="prefetch"><link href="js/about.2f3b3bed.js" rel="prefetch"><link href="css/app.ecaf10b2.css" rel="preload" as="style"><link href="js/app.07b135f9.js" rel="preload" as="script"><link href="js/chunk-vendors.318333dc.js" rel="preload" as="script"><link href="css/app.ecaf10b2.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sport-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.318333dc.js"></script><script src="js/app.07b135f9.js"></script></body></html>
														
 
															+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>sport-web</title><link href="/css/about.5b4840af.css" rel="prefetch"><link href="/css/guide.47ea104e.css" rel="prefetch"><link href="/js/about.919282cd.js" rel="prefetch"><link href="/js/guide.9a81100f.js" rel="prefetch"><link href="/css/app.a5f97891.css" rel="preload" as="style"><link href="/js/app.8fcd462a.js" rel="preload" as="script"><link href="/js/chunk-vendors.592a2fed.js" rel="preload" as="script"><link href="/css/app.a5f97891.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sport-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.592a2fed.js"></script><script src="/js/app.8fcd462a.js"></script></body></html>
														
--- a/dist/js/about.919282cd.js
+++ b/dist/js/about.919282cd.js
--- a/dist/js/app.07b135f9.js
+++ b/dist/js/app.07b135f9.js
--- a/dist/js/app.8fcd462a.js
+++ b/dist/js/app.8fcd462a.js
--- a/dist/js/chunk-vendors.318333dc.js
+++ b/dist/js/chunk-vendors.318333dc.js
--- a/dist/js/chunk-vendors.592a2fed.js
+++ b/dist/js/chunk-vendors.592a2fed.js
--- a/dist/js/guide.9a81100f.js
+++ b/dist/js/guide.9a81100f.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,13 +2,14 @@
 
															   <layout />
														
 
															 </template>
														
 
															 <script>
														
 
															-import layout from "@/views/layout.vue";
														
 
															+import layout from '@/views/layout.vue'
														
 
															 export default {
														
 
															   components: {
														
 
															     layout
														
 
															   }
														
 
															-};
														
 
															+}
														
 
															 </script>
														
 
															 <style lang="scss">
														
 
															-@import "~@/styles/reset.css";
														
 
															+@import '~@/styles/reset.css';
														
 
															+@import '~@/styles/common.scss';
														
 
															 </style>
														
--- a/src/assets/guide/foot-draw-close.png
+++ b/src/assets/guide/foot-draw-close.png
--- a/src/assets/guide/foot-homing.png
+++ b/src/assets/guide/foot-homing.png
--- a/src/assets/guide/foot-left-bottom.png
+++ b/src/assets/guide/foot-left-bottom.png
--- a/src/assets/guide/foot-left-top.png
+++ b/src/assets/guide/foot-left-top.png
--- a/src/assets/guide/foot-right-bottom.png
+++ b/src/assets/guide/foot-right-bottom.png
--- a/src/assets/guide/foot-right-top.png
+++ b/src/assets/guide/foot-right-top.png
--- a/src/assets/guide/next.png
+++ b/src/assets/guide/next.png
--- a/src/assets/guide/order-left-bottom.png
+++ b/src/assets/guide/order-left-bottom.png
--- a/src/assets/guide/order-left-top.png
+++ b/src/assets/guide/order-left-top.png
--- a/src/assets/guide/order-middle.png
+++ b/src/assets/guide/order-middle.png
--- a/src/assets/guide/order-right-bottom.png
+++ b/src/assets/guide/order-right-bottom.png
--- a/src/assets/guide/order-right-top.png
+++ b/src/assets/guide/order-right-top.png
--- a/src/assets/guide/stee-five.png
+++ b/src/assets/guide/stee-five.png
--- a/src/assets/guide/step-four.png
+++ b/src/assets/guide/step-four.png
--- a/src/assets/guide/step-one.png
+++ b/src/assets/guide/step-one.png
--- a/src/assets/guide/step-three.png
+++ b/src/assets/guide/step-three.png
--- a/src/assets/guide/step-two.png
+++ b/src/assets/guide/step-two.png
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,12 @@
 
															-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
														
 
															-import layout from "@/views/layout.vue";
														
 
															+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
														
 
															+import emptyPage from "@/views/404.vue";
														
 
															 const routes: Array<RouteRecordRaw> = [
														
 
															   {
														
 
															     path: "/",
														
 
															-    name: "Layout",
														
 
															-    component: layout
														
 
															+    name: "404",
														
 
															+    meta: { title: "404" },
														
 
															+    component: emptyPage
														
 
															   },
														
 
															   {
														
 
															     path: "/test-share",
														
@@ -18,11 +19,18 @@ const routes: Array<RouteRecordRaw> = [
 
															     name: "Share",
														
 
															     component: () =>
														
 
															       import(/* webpackChunkName: "about" */ "../views/sport-share-link.vue")
														
 
															+  },
														
 
															+  {
														
 
															+    path: "/game_guide",
														
 
															+    name: "Guide",
														
 
															+    meta: { title: "操作指引" },
														
 
															+    component: () =>
														
 
															+      import(/* webpackChunkName: "guide" */ "../views/guide.vue")
														
 
															   }
														
 
															 ];
														
 
															 const router = createRouter({
														
 
															-  history: createWebHistory(process.env.BASE_URL),
														
 
															+  history: createWebHashHistory(process.env.BASE_URL),
														
 
															   routes
														
 
															 });
														
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -0,0 +1,89 @@
 
															+// 显示
														
 
															+.dn {
														
 
															+  display: none;
														
 
															+}
														
 
															+
														
 
															+.di {
														
 
															+  display: inline;
														
 
															+}
														
 
															+
														
 
															+.db {
														
 
															+  display: block;
														
 
															+}
														
 
															+
														
 
															+.dib {
														
 
															+  display: inline-block;
														
 
															+}
														
 
															+
														
 
															+.dt {
														
 
															+  display: table;
														
 
															+}
														
 
															+
														
 
															+.df {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.fdc {
														
 
															+  flex-direction: column;
														
 
															+}
														
 
															+.ai-c {
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.ai-end {
														
 
															+  align-items: flex-end;
														
 
															+}
														
 
															+.jc-e {
														
 
															+  justify-content: flex-end;
														
 
															+}
														
 
															+.jc-c {
														
 
															+  justify-content: center;
														
 
															+}
														
 
															+.jc-sb {
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.jc-sa {
														
 
															+  justify-content: space-around;
														
 
															+}
														
 
															+.fww {
														
 
															+  flex-wrap: wrap;
														
 
															+}
														
 
															+.flex-1 {
														
 
															+  flex: 1;
														
 
															+}
														
 
															+.flex-2 {
														
 
															+  flex: 2;
														
 
															+}
														
 
															+.flex-3 {
														
 
															+  flex: 3;
														
 
															+}
														
 
															+
														
 
															+.vm {
														
 
															+  vertical-align: middle;
														
 
															+}
														
 
															+
														
 
															+.vib {
														
 
															+  display: inline-block;
														
 
															+  vertical-align: middle;
														
 
															+}
														
 
															+
														
 
															+// 定位
														
 
															+.pr {
														
 
															+  position: relative;
														
 
															+}
														
 
															+
														
 
															+.pa {
														
 
															+  position: absolute;
														
 
															+}
														
 
															+
														
 
															+.pf {
														
 
															+  position: fixed;
														
 
															+}
														
 
															+
														
 
															+.ellipsis {
														
 
															+  overflow: hidden;
														
 
															+  text-overflow: ellipsis;
														
 
															+  white-space: nowrap;
														
 
															+}
														
 
															+
														
 
															+.fw {
														
 
															+  font-weight: bold;
														
 
															+}
														
--- a/src/views/404.vue
+++ b/src/views/404.vue
--- a/src/views/guide.vue
+++ b/src/views/guide.vue
@@ -0,0 +1,197 @@
 
															+<template>
														
 
															+  <div class="guide">
														
 
															+    <div class="guide__block">
														
 
															+      <div class="guide__block__tt df ai-c">
														
 
															+        <h3 class="fw">跳舞游戏规则</h3>
														
 
															+      </div>
														
 
															+      <div class="guide__block__ct">
														
 
															+        <p class="mt12">
														
 
															+          游戏开始后，游戏界面会从上至下掉落不同指令下来，当不同指令经过对应的判定区时，玩家需要根据不同指令做出对应的脚步动作。
														
 
															+        </p>
														
 
															+        <p class="mt12">
														
 
															+          指令分为单踩与长踩，单踩仅需要在指令经过判定框时做出相应的脚步动作即可，长踩则需要在指令期间内保持住正确的脚步动作不动。
														
 
															+        </p>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div class="guide__block guide__block-last mt12">
														
 
															+      <div class="guide__block__tt df ai-c">
														
 
															+        <h3 class="fw">游戏指令对应脚步动作</h3>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 df ai-c pd12">
														
 
															+        <img class="foot-homing" src="../assets/guide/foot-homing.png" />
														
 
															+        <div class="df fdc jc-c">
														
 
															+          <h3 class="fw">归位</h3>
														
 
															+          <p class="mt12">
														
 
															+            每次双脚靠近并拢，将重新规划坐标原点与坐标轴，划分出5个指令的对应区域
														
 
															+          </p>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 pr">
														
 
															+        <img src="../assets/guide/step-one.png" class="pa step" />
														
 
															+        <div class="body df fdc ai-c">
														
 
															+          <img
														
 
															+            class="foot-draw-close"
														
 
															+            src="../assets/guide/foot-draw-close.png"
														
 
															+          />
														
 
															+          <p class=" mt12">
														
 
															+            双脚平行并靠拢,在位于如图所示的圆圈范围内,单脚原地踩踏一步
														
 
															+          </p>
														
 
															+          <img class="next mt12" src="../assets/guide/next.png" />
														
 
															+          <p class="mt12 fw">对应游戏指令</p>
														
 
															+          <img class="order mt12" src="../assets/guide/order-middle.png" />
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 pr">
														
 
															+        <img src="../assets/guide/step-two.png" class="pa step" />
														
 
															+        <div class="body df fdc ai-c">
														
 
															+          <img class="foot-left-top" src="../assets/guide/foot-left-top.png" />
														
 
															+          <p class=" mt12">左脚朝左上方，即如图所示坐标区域踩踏一步步</p>
														
 
															+          <img class="next mt12" src="../assets/guide/next.png" />
														
 
															+          <p class=" mt12 fw">对应游戏指令</p>
														
 
															+          <img class="order mt12" src="../assets/guide/order-left-top.png" />
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 pr">
														
 
															+        <img src="../assets/guide/step-three.png" class="pa step" />
														
 
															+        <div class="body df fdc ai-c">
														
 
															+          <img
														
 
															+            class="foot-left-bottom"
														
 
															+            src="../assets/guide/foot-left-bottom.png"
														
 
															+          />
														
 
															+          <p class=" mt12">左脚朝左下方，即如图所示坐标区域踩踏一步</p>
														
 
															+          <img class="next mt12" src="../assets/guide/next.png" />
														
 
															+          <p class=" mt12 fw">对应游戏指令</p>
														
 
															+          <img class="order mt12" src="../assets/guide/order-left-bottom.png" />
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 pr">
														
 
															+        <img src="../assets/guide/step-four.png" class="pa step" />
														
 
															+        <div class="body df fdc ai-c">
														
 
															+          <img
														
 
															+            class="foot-right-top"
														
 
															+            src="../assets/guide/foot-right-top.png"
														
 
															+          />
														
 
															+          <p class=" mt12">右脚朝右上方，即如图所示坐标区域踩踏一步</p>
														
 
															+          <img class="next mt12" src="../assets/guide/next.png" />
														
 
															+          <p class=" mt12 fw">对应游戏指令</p>
														
 
															+          <img class="order mt12" src="../assets/guide/order-right-top.png" />
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="guide__block__step mt12 pr">
														
 
															+        <img src="../assets/guide/stee-five.png" class="pa step" />
														
 
															+        <div class="body df fdc ai-c">
														
 
															+          <img
														
 
															+            class="foot-right-bottom"
														
 
															+            src="../assets/guide/foot-right-bottom.png"
														
 
															+          />
														
 
															+          <p class=" mt12">右脚朝右下方，即如图所示坐标区域踩踏一步</p>
														
 
															+          <img class="next mt12" src="../assets/guide/next.png" />
														
 
															+          <p class=" mt12 fw">对应游戏指令</p>
														
 
															+          <img
														
 
															+            class="order mt12"
														
 
															+            src="../assets/guide/order-right-bottom.png"
														
 
															+          />
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  components: {},
														
 
															+  name: 'Guide',
														
 
															+  data() {
														
 
															+    return {
														
 
															+      data: {},
														
 
															+      status: null
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<style lang="scss">
														
 
															+.guide {
														
 
															+  width: 100%;
														
 
															+  padding: 10px;
														
 
															+  font-family: 'PingFang·SC';
														
 
															+  box-sizing: border-box;
														
 
															+  p {
														
 
															+    font-size: 14px;
														
 
															+    color: #666;
														
 
															+    line-height: 20px;
														
 
															+  }
														
 
															+  .mt12 {
														
 
															+    margin-top: 12px;
														
 
															+  }
														
 
															+  .mt20 {
														
 
															+    margin-top: 20px;
														
 
															+  }
														
 
															+  .pd12 {
														
 
															+    padding: 12px;
														
 
															+  }
														
 
															+  &__block {
														
 
															+    &__tt {
														
 
															+      &::before {
														
 
															+        content: '';
														
 
															+        display: block;
														
 
															+        width: 6px;
														
 
															+        height: 6px;
														
 
															+        border-radius: 6px;
														
 
															+        border-color: #ffc400;
														
 
															+        border-width: 2px;
														
 
															+        border-style: solid;
														
 
															+      }
														
 
															+      h3 {
														
 
															+        margin-left: 6px;
														
 
															+      }
														
 
															+    }
														
 
															+
														
 
															+    &__step {
														
 
															+      width: 100%;
														
 
															+      background-color: #f1f1f1;
														
 
															+      border-radius: 10px;
														
 
															+      box-sizing: border-box;
														
 
															+
														
 
															+      .body {
														
 
															+        padding: 20px;
														
 
															+      }
														
 
															+      .step {
														
 
															+        width: 40px;
														
 
															+        height: 40px;
														
 
															+      }
														
 
															+      .foot-homing {
														
 
															+        width: 100px;
														
 
															+        height: 100px;
														
 
															+      }
														
 
															+      .foot-draw-close {
														
 
															+        width: 180px;
														
 
															+        height: 180px;
														
 
															+      }
														
 
															+      .foot-left-top {
														
 
															+        width: 180px;
														
 
															+        height: 180px;
														
 
															+      }
														
 
															+      .foot-left-bottom {
														
 
															+        width: 178px;
														
 
															+        height: 180px;
														
 
															+      }
														
 
															+      .foot-right-top {
														
 
															+        width: 178px;
														
 
															+        height: 179px;
														
 
															+      }
														
 
															+      .foot-right-bottom {
														
 
															+        width: 178px;
														
 
															+        height: 180px;
														
 
															+      }
														
 
															+      .next {
														
 
															+        width: 26px;
														
 
															+        height: 28px;
														
 
															+      }
														
 
															+      .order {
														
 
															+        width: 300px;
														
 
															+        height: 46px;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/vue.config.js
+++ b/vue.config.js
@@ -6,7 +6,7 @@ function resolve(dir) {
 
															 /** @type {import('webpack').Configuration} */
														
 
															 module.exports = {
														
 
															-  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
														
 
															+  publicPath: process.env.NODE_ENV === "production" ? "/" : "./",
														
 
															   // 将构建好的文件输出到哪里，本司要求
														
 
															   // outputDir: "dist",
														
@@ -41,11 +41,11 @@ module.exports = {
 
															     //   },
														
 
															     // },
														
 
															     // 启用 CSS modules for all css / pre-processor files.
														
 
															-    modules: false,
														
 
															+    modules: false
														
 
															   },
														
 
															   // 是一个函数，允许对内部的 webpack 配置进行更细粒度的修改。
														
 
															-  chainWebpack: (config) => {
														
 
															+  chainWebpack: config => {
														
 
															     // 配置别名
														
 
															     config.resolve.alias
														
 
															       .set("@", resolve("src"))
														
@@ -53,7 +53,7 @@ module.exports = {
 
															       .set("@components", resolve("src/components"))
														
 
															       .set("@views", resolve("src/views"));
														
 
															-    config.optimization.minimizer("terser").tap((args) => {
														
 
															+    config.optimization.minimizer("terser").tap(args => {
														
 
															       // 去除生产环境console
														
 
															       args[0].terserOptions.compress.drop_console = true;
														
 
															       return args;
														
@@ -62,9 +62,9 @@ module.exports = {
 
															   // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
														
 
															   parallel: require("os").cpus().length > 1,
														
 
															-  
														
 
															+
														
 
															   pwa: {
														
 
															-    iconPaths: {},
														
 
															+    iconPaths: {}
														
 
															   },
														
 
															   devServer: {
														
 
															     host: "0.0.0.0",
														
@@ -77,9 +77,9 @@ module.exports = {
 
															         ws: true, // 代理的WebSockets
														
 
															         changeOrigin: true, // 允许websockets跨域
														
 
															         pathRewrite: {
														
 
															-          "^/api": "",
														
 
															-        },
														
 
															-      },
														
 
															-    },
														
 
															-  },
														
 
															+          "^/api": ""
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															 };