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": ""
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				 };