From 9e2fbe3f9abcac5e53eb61c299112fbc4c6e4299 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Wed, 5 Jan 2022 15:00:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4iPhone=E4=B8=8A=E5=90=84?=
 =?UTF-8?q?=E5=88=86=E8=BE=A8=E7=8E=87=E4=B8=8B=E7=9A=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       | 282 +++++++++++++++++++++++-
 package.json                            |   8 +-
 public/index.html                       |  19 ++
 src/assets/main/p3/icon_right.png       | Bin 0 -> 6258 bytes
 src/components/main/Card.vue            |  18 +-
 src/components/main/CardScroller.vue    |  56 +++--
 src/components/main/GamePlaySection.vue |  39 +++-
 src/components/main/HomeSection.vue     |  40 +++-
 src/components/main/MainHeader.vue      |   4 +
 src/components/main/VideoSection.vue    |  44 +++-
 src/main.ts                             |   1 +
 src/router/index.ts                     |   5 +
 tsconfig.json                           |   3 +-
 vue.config.js                           |  30 +++
 14 files changed, 505 insertions(+), 44 deletions(-)
 create mode 100755 src/assets/main/p3/icon_right.png
 create mode 100644 vue.config.js

diff --git a/package-lock.json b/package-lock.json
index 8497ba1..329823e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1547,6 +1547,12 @@
         }
       }
     },
+    "@types/video.js": {
+      "version": "7.3.29",
+      "resolved": "https://registry.npmmirror.com/@types/video.js/download/@types/video.js-7.3.29.tgz",
+      "integrity": "sha512-7xP5O3tQC6dm5xljwwvDvMKTumlu/cag4k5FwezMUazoCAbni0t3NB5ToavQlNAH5OKLLP3/ZEJbPqP6ShocIA==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.32",
       "resolved": "https://registry.npmmirror.com/@types/webpack/download/@types/webpack-4.41.32.tgz?cache=0&sync_timestamp=1637271141447&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fwebpack%2Fdownload%2F%40types%2Fwebpack-4.41.32.tgz",
@@ -2572,6 +2578,14 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/aes-decrypter/download/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "requires": {
+        "pkcs7": "^0.2.3"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/download/ajv-6.12.6.tgz",
@@ -3045,6 +3059,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/download/core-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz",
@@ -5149,6 +5184,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/dom-walk/download/dom-walk-0.1.2.tgz",
+      "integrity": "sha1-DFSL7wSPTR8qlySQAiNgYNqj/YQ="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -5423,6 +5463,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmmirror.com/es5-shim/download/es5-shim-4.6.4.tgz",
+      "integrity": "sha512-Z0f7OUYZ8JfqT12d3Tgh2ErxIH5Shaz97GE8qyDG9quxb2Hmh2vvFHlOFjx6lzyD0CRgvJfnNYcisjdbRp7MPw=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.nlark.com/escalade/download/escalade-3.1.1.tgz",
@@ -6938,6 +6983,11 @@
         "rimraf": "2"
       }
     },
+    "fullpage.js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/fullpage.js/download/fullpage.js-3.1.2.tgz",
+      "integrity": "sha1-7mKJ9S7bKp+cJdCcQCIEO3AdPMA="
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
@@ -7104,6 +7154,15 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/global/download/global-4.4.0.tgz",
+      "integrity": "sha1-PnsQUXkAajI+1xqvyj6cV6XMZAY=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmmirror.com/globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1635390798667&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz",
@@ -7798,6 +7857,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/individual/download/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz",
@@ -8181,6 +8245,11 @@
       "integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-function/download/is-function-1.0.2.tgz",
+      "integrity": "sha1-Twl/MKv2762smDOxfKXcA/gUTgg="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/download/is-glob-4.0.3.tgz?cache=0&sync_timestamp=1632934573225&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fis-glob%2Fdownload%2Fis-glob-4.0.3.tgz",
@@ -8772,6 +8841,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/m3u8-parser/download/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz?cache=0&sync_timestamp=1587567407163&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmake-dir%2Fdownload%2Fmake-dir-3.1.0.tgz",
@@ -8976,6 +9050,14 @@
       "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/min-document/download/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz?cache=0&sync_timestamp=1637170563108&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmini-css-extract-plugin%2Fdownload%2Fmini-css-extract-plugin-0.9.0.tgz",
@@ -9147,6 +9229,11 @@
       "integrity": "sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=",
       "dev": true
     },
+    "mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/mux.js/download/mux.js-4.3.2.tgz",
+      "integrity": "sha1-V21TffA33F7DXsExa5SNgV01whA="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "http://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
@@ -9503,8 +9590,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -9849,6 +9935,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/parse-headers/download/parse-headers-2.0.4.tgz",
+      "integrity": "sha1-nq8tAr7S0e/0lDMc498215JHYL8="
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/parse-json/download/parse-json-5.2.0.tgz?cache=0&sync_timestamp=1637475636838&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fparse-json%2Fdownload%2Fparse-json-5.2.0.tgz",
@@ -10013,6 +10104,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmmirror.com/pkcs7/download/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1633498133295&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
@@ -10708,8 +10804,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "http://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -11409,6 +11504,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/rust-result/download/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.npmmirror.com/rxjs/download/rxjs-6.6.7.tgz?cache=0&sync_timestamp=1633554235070&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Frxjs%2Fdownload%2Frxjs-6.6.7.tgz",
@@ -11424,6 +11527,14 @@
       "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-json-parse/download/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
@@ -13003,6 +13114,11 @@
         }
       }
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tsml/download/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npm.taobao.org/tsutils/download/tsutils-2.29.0.tgz",
@@ -13301,6 +13417,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/url-toolkit/download/url-toolkit-2.2.3.tgz",
+      "integrity": "sha1-ePqQEhWrusNBggZpMiICebgEUis="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "http://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -13399,6 +13520,104 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmmirror.com/video.js/download/video.js-6.13.0.tgz",
+      "integrity": "sha1-+Uh9RjJzQPpI7NUTcqKYHbts3kw=",
+      "requires": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmmirror.com/global/download/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmmirror.com/process/download/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmmirror.com/videojs-contrib-hls/download/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha1-/klXNn5daLfSP3jtMuN6ndiSoKg=",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmmirror.com/videojs-contrib-media-sources/download/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha1-Ct+SkQfVt0zyyKuygkyCF35DhY4=",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/videojs-flash/download/videojs-flash-2.2.1.tgz",
+      "integrity": "sha1-GiJduxztIArpu/FeAf5KYQhtkPE=",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      }
+    },
+    "videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/videojs-font/download/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "videojs-hotkeys": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmmirror.com/videojs-hotkeys/download/videojs-hotkeys-0.2.27.tgz",
+      "integrity": "sha1-Dfl5Urnf8ObMHPikOf7X6snHPwE="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/videojs-ie8/download/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/videojs-swf/download/videojs-swf-5.4.2.tgz",
+      "integrity": "sha1-aWSpv/kDtzLz5GUxSuR4oCoX6Ks="
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/download/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha1-4HhgC9qJnqpvnDMHE0zQyBGUe44=",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
@@ -13448,6 +13667,14 @@
         }
       }
     },
+    "vue-fullpage.js": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/vue-fullpage.js/download/vue-fullpage.js-0.1.7.tgz",
+      "integrity": "sha1-YrxTlI8iF/sU6lVQIbE/uZe04UE=",
+      "requires": {
+        "fullpage.js": "^3.1.0"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
@@ -13600,6 +13827,18 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-video-player/download/vue-video-player-5.0.2.tgz",
+      "integrity": "sha1-NKQiOf8wTvx2mNogpBZQUddmweY=",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/download/vuex-3.6.2.tgz",
@@ -14276,6 +14515,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmmirror.com/webwackify/download/webwackify-0.1.6.tgz",
+      "integrity": "sha1-HUKhKsYYI9fjRaveCE6qpipKles="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",
@@ -14389,11 +14633,37 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/xhr/download/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmmirror.com/global/download/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmmirror.com/process/download/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxtend%2Fdownload%2Fxtend-4.0.2.tgz",
-      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=",
-      "dev": true
+      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q="
     },
     "y18n": {
       "version": "4.0.3",
diff --git a/package.json b/package.json
index 1ee3ec7..72309d7 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,20 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "js-cookie": "^2.2.1",
+    "videojs-contrib-hls": "^5.15.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-fullpage.js": "^0.1.7",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
+    "vue-video-player": "^5.0.2",
     "vuex": "^3.4.0",
-    "vuex-module-decorators": "^2.0.0",
-    "js-cookie": "^2.2.1"
+    "vuex-module-decorators": "^2.0.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^2.2.6",
+    "@types/video.js": "^7.3.29",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/public/index.html b/public/index.html
index 45ca655..20a4f29 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,25 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="assets/libs/spine-webgl.js"></script>
+    <style>
+        .video-js .vjs-big-play-button {
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+        }
+        .vjs-control-bar{
+            display: none!important;
+        }
+
+        ::-webkit-scrollbar {
+            width: 0 !important;
+        }
+        ::-webkit-scrollbar {
+            width: 0 !important;height: 0;
+        }
+    </style>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/main/p3/icon_right.png b/src/assets/main/p3/icon_right.png
new file mode 100755
index 0000000000000000000000000000000000000000..146101be450adce77d8be8b7ddce140678f0863a
GIT binary patch
literal 6258
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

literal 0
HcmV?d00001

diff --git a/src/components/main/Card.vue b/src/components/main/Card.vue
index d5ccbc6..7784740 100644
--- a/src/components/main/Card.vue
+++ b/src/components/main/Card.vue
@@ -96,7 +96,7 @@ export default class extends Vue {
   }
   .class-div{
     position: absolute;
-    top: 90px/$scale;
+    top: 80px/$scale;
     right: 0;
     width: 42px/$scale;
     height: 42px/$scale;
@@ -153,12 +153,24 @@ export default class extends Vue {
 }
 @media (max-width: 415px) {
   @include resize($scale: 2.0);
-
   .corner {
     display: none;
   }
 }
-
+@media (max-width: 376px) {
+  @include resize($scale: 2.2);
+  .class-div{
+    top:37px;
+    right: 4px;
+  }
+}
+@media (max-width: 321px) {
+  @include resize($scale: 2.4);
+  .class-div{
+    top:30px;
+    right: 10px;
+  }
+}
 .card{
   position: relative;
 }
diff --git a/src/components/main/CardScroller.vue b/src/components/main/CardScroller.vue
index 6558688..50e406f 100644
--- a/src/components/main/CardScroller.vue
+++ b/src/components/main/CardScroller.vue
@@ -19,7 +19,7 @@
              @click="toPage(index)"
              :key="index" :class="index===currentPage? 'selected': ''"></div>
       </div>
-      <img class="right-btn" src="@/assets/main/p3/icon_left.png" @click="toRight">
+      <img class="right-btn" src="@/assets/main/p3/icon_right.png" @click="toRight">
     </div>
   </div>
 </template>
@@ -140,6 +140,10 @@ export default class extends Vue {
     }
   ];
 
+  $refs!: {
+    listContainer: HTMLFormElement
+  }
+
   private cardDatas: ISpineData[][] = [];
   private currentPage = 0;
   private totalPage = 1;
@@ -168,7 +172,7 @@ export default class extends Vue {
     const self = this
     Vue.nextTick(function() {
       self.scrollWidth = self.$refs.listContainer?.offsetWidth
-      console.log('scrollWidth:', self.scrollWidth)
+      // console.log('scrollWidth:', self.scrollWidth)
     })
   }
 
@@ -187,7 +191,7 @@ export default class extends Vue {
       const self = this
       const target = -(this.currentPage * this.scrollWidth)
       this.changePos(target, 20, function() {
-        console.log('toLeft end:', self.scrollLeft)
+        // console.log('toLeft end:', self.scrollLeft)
         self.scrolling = false
       })
     }
@@ -200,7 +204,7 @@ export default class extends Vue {
       this.scrolling = true
       const target = -(this.currentPage * this.scrollWidth)
       this.changePos(target, -20, function() {
-        console.log('toRight end:', self.scrollLeft)
+        // console.log('toRight end:', self.scrollLeft)
         self.scrolling = false
       })
     }
@@ -216,7 +220,7 @@ export default class extends Vue {
     const step = index > this.currentPage ? -20 : 20
     this.currentPage = index
     this.changePos(target, step, function() {
-      console.log('toPage end:', self.scrollLeft)
+      // console.log('toPage end:', self.scrollLeft)
       self.scrolling = false
     })
   }
@@ -261,7 +265,7 @@ export default class extends Vue {
   .card-container {
     display: flex;
     width: 80vw;
-    justify-content: flex-start;
+    justify-content: space-between;
   }
 
   .card {
@@ -279,10 +283,6 @@ export default class extends Vue {
     bottom: 0;
   }
 
-  .right-btn {
-    transform: rotateY(180deg);
-  }
-
   .page-ctrl {
     display: flex;
     align-items: center;
@@ -303,7 +303,7 @@ export default class extends Vue {
 @media (min-width: 768px) {
   @include resize($scale: 1)
 }
-@media (max-width: 767px) {
+@media (min-width: 416px) and (max-width: 767px) {
   @include resize($scale: 1.4);
   .card-container {
     flex-wrap: wrap;
@@ -328,8 +328,8 @@ export default class extends Vue {
   }
 
 }
-@media (max-width: 415px) {
-  @include resize($scale: 2.0);
+@media (min-width: 376px) and (max-width: 415px) {
+  @include resize($scale: 2.1);
   .card-container {
     flex-wrap: wrap;
   }
@@ -355,8 +355,8 @@ export default class extends Vue {
   }
 }
 
-@media (max-width: 376px) {
-  @include resize($scale: 2.2);
+@media (min-width: 321px) and (max-width: 375px) {
+  @include resize($scale: 2.3);
   .card-container {
     flex-wrap: wrap;
   }
@@ -381,5 +381,31 @@ export default class extends Vue {
     display: none;
   }
 }
+@media (max-width: 321px) {
+  @include resize($scale: 2.6);
+  .card-container {
+    flex-wrap: wrap;
+  }
+  .scroll-content {
+    bottom: 0;
+  }
+  .action-bar {
+    bottom: 30vh;
+  }
+  .list-container {
+    height: 100%;
+  }
+  .right-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .left-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .page-ctrl {
+    display: none;
+  }
+}
 
 </style>
diff --git a/src/components/main/GamePlaySection.vue b/src/components/main/GamePlaySection.vue
index 13511bf..7942b54 100644
--- a/src/components/main/GamePlaySection.vue
+++ b/src/components/main/GamePlaySection.vue
@@ -14,15 +14,18 @@
     </div>
     <spine-view class="hero-anim"  :data="hero" :key="hero.id"></spine-view>
     <div class="bottom-cover"></div>
-    <div class="video-bg" v-if="videoShow" @click="hideVideo"></div>
-    <div class="video-div" v-if="videoShow" >
+    <div class="video-bg" v-show="videoShow" @click="hideVideo"></div>
+    <div class="video-div" v-show="videoShow" >
       <video
+        id="video2"
+        class="video-js"
         loop
         playsinline
         crossorigin="anonymous"
         autoplay
+        preload
       >
-        <source :src="videoUrl">
+        <source src="https://cdn.cebg.games/video/v1.m3u8" type="application/x-mpegURL">
       </video>
     </div>
   </section>
@@ -32,6 +35,8 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ISpineData } from '@/utils/SpineRender'
 import SpineView from '@/components/main/SpineView.vue'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
 
 @Component({
   name: 'GamePlaySection',
@@ -43,14 +48,31 @@ import SpineView from '@/components/main/SpineView.vue'
 export default class extends Vue {
   private hero: ISpineData = { id: 'hero10', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.2 }
   private videoShow = false
-  private videoUrl = 'https://cdn.cebg.games/video/v2.mp4'
+  private videoPlayer:videojs.Player
+
   showVideo() {
     this.videoShow = true
+    this.getVideo()
   }
 
   hideVideo() {
     this.videoShow = false
-    console.log('hide video')
+  }
+
+  getVideo() {
+    const self = this
+    if (!this.videoPlayer) {
+      this.videoPlayer = videojs('video2', {
+        autoplay: true,
+        bigPlayButton: true,
+        controls: true,
+        loop: true,
+        preload: 'auto'
+      }, function() {
+        // this.play()
+        self.videoPlayer!.play()
+      })
+    }
   }
 }
 </script>
@@ -159,7 +181,7 @@ export default class extends Vue {
   margin: auto;
   z-index: 15;
 }
-.video-div video {
+.video-div .video-js {
   width: 100%;
   height: 100%;
 }
@@ -180,7 +202,7 @@ export default class extends Vue {
     height: 50vh;
     bottom: 8vh;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
   }
   .color-content {
     width: 50%;
@@ -225,6 +247,9 @@ export default class extends Vue {
     margin: auto;
     z-index: 15;
   }
+  .video-js {
+    background-color: white;
+  }
 }
 @media (max-width: 415px) {
   .hero-anim{
diff --git a/src/components/main/HomeSection.vue b/src/components/main/HomeSection.vue
index 1e7624b..c5af130 100644
--- a/src/components/main/HomeSection.vue
+++ b/src/components/main/HomeSection.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="home_right_panel">
-      <div class="spine-list">
+      <div class="spine-list" :style="'transform:scale('+mainScale+')'">
         <home-hero class="hero-von" v-for="hero in heros" :data="hero" :key="hero.id"></home-hero>
       </div>
     </div>
@@ -29,16 +29,42 @@ import HomeHero from '@/components/main/HomeHero.vue'
   components: {
     HomeHero,
     SpineView
-
   }
 })
 export default class extends Vue {
+  private mainScale = 1
+  private widthDesign = 1920
+  private widthSmall = 767
   private heros: ISpineData[] = [
     { id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.1 },
     { id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.1 },
     { id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.1 },
     { id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true, scale: 1.1 }
   ]
+
+  pageResize() {
+    const self = this
+    this.$nextTick(() => {
+      const width = document.getElementById('fullpage')!.getBoundingClientRect().width
+      if (width >= this.widthSmall && width <= this.widthDesign) {
+        self.mainScale = (width / this.widthDesign) * 0.9
+      } else {
+        self.mainScale = 1
+      }
+    })
+  }
+
+  mounted() {
+    const self = this
+    window.onresize = () => {
+      self.pageResize()
+    }
+    self.pageResize()
+  }
+
+  destroyed() {
+    window.onresize = null
+  }
 }
 </script>
 
@@ -53,7 +79,7 @@ export default class extends Vue {
   /* position: absolute;
   left: 20px;
   top: 60px;*/
-  width: 686px;
+  width: 30%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -73,18 +99,19 @@ export default class extends Vue {
   padding-right: 30px;
 }
 .home_right_panel {
-  width: 60%;
+  width: 70%;
   position: relative;
   display: flex;
   flex-direction: column-reverse;
-  overflow: hidden;
+  align-items: center;
 }
 .spine-list{
   display: flex;
   justify-content: space-between;
+  box-sizing: border-box;
 }
 .hero-von:not(:first-child){
-  margin-left: -120px;
+  margin-left: -150px;
 }
 
 @media (max-width: 767px) {
@@ -102,6 +129,7 @@ export default class extends Vue {
     height: 50vh;
   }
   .spine-list{
+    width: 100vw;
   }
 
   .home_left_panel .one_row:first-child{
diff --git a/src/components/main/MainHeader.vue b/src/components/main/MainHeader.vue
index e05da46..4f0e7ff 100644
--- a/src/components/main/MainHeader.vue
+++ b/src/components/main/MainHeader.vue
@@ -218,5 +218,9 @@ export default class extends Vue {
     width: 32px;
     height: 32px;
   }
+  .menu-icon img {
+    width: 32px;
+    height: 32px;
+  }
 }
 </style>
diff --git a/src/components/main/VideoSection.vue b/src/components/main/VideoSection.vue
index 36272c3..300db77 100644
--- a/src/components/main/VideoSection.vue
+++ b/src/components/main/VideoSection.vue
@@ -1,20 +1,23 @@
 <template>
   <section id="video_section" data-anchor="video">
     <video
-      width="100%"
-      height="100%"
+      id="video"
+      class="video-js"
       loop
       playsinline
       crossorigin="anonymous"
       autoplay
+      preload
     >
-      <source :src="videoUrl">
+      <source src="https://cdn.cebg.games/video/v1.m3u8" type="application/x-mpegURL">
     </video>
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
 
 @Component({
   name: 'VideoSection',
@@ -23,7 +26,28 @@ import { Component, Vue } from 'vue-property-decorator'
   }
 })
 export default class extends Vue {
-  private videoUrl = 'https://cdn.cebg.games/video/v2.mp4'
+  private videoPlayer:videojs.Player
+  mounted() {
+    this.$nextTick(() => {
+      this.getVideo()
+    })
+  }
+
+  getVideo() {
+    const self = this
+    if (!this.videoPlayer) {
+      this.videoPlayer = videojs('video', {
+        autoplay: true,
+        bigPlayButton: true,
+        controls: true,
+        loop: true,
+        preload: 'auto'
+      }, function() {
+        // this.play()
+        self.videoPlayer!.play()
+      })
+    }
+  }
 }
 </script>
 
@@ -32,6 +56,18 @@ export default class extends Vue {
   background-image: url('~@/assets/main/p2/bg_p2.png');
   background-repeat: no-repeat;
   background-size: cover;
+  position: relative;
+}
+.video-js {
+  width: 100vw;
+  height: 56vw;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: transparent;
 }
 
 </style>
diff --git a/src/main.ts b/src/main.ts
index a89fa82..88a2035 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import 'video.js/dist/video-js.css'
 
 Vue.config.productionTip = false
 
diff --git a/src/router/index.ts b/src/router/index.ts
index d6e898a..e467d75 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,11 @@ const routes: Array<RouteConfig> = [
     name: 'Main',
     component: Main
   },
+  {
+    path: '/index.html',
+    name: 'Main',
+    component: Main
+  },
   {
     path: '/market',
     name: 'Market',
diff --git a/tsconfig.json b/tsconfig.json
index 7ddbe48..7b5d6f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,8 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
+    "strictPropertyInitialization": false,
+    "sourceMap": false,
     "baseUrl": ".",
     "allowJs": true,
     "types": [
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..e08a7ff
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,30 @@
+const path = require('path')
+const name = 'Blissful Elites'
+
+module.exports = {
+  // TODO: Remember to change publicPath to fit your need
+  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  pwa: {
+    name: name
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: [
+        path.resolve(__dirname, 'src/styles/_variables.scss'),
+        path.resolve(__dirname, 'src/styles/_mixins.scss')
+      ]
+    }
+  },
+  chainWebpack(config) {
+    // provide the app's title in html-webpack-plugin's options list so that
+    // it can be accessed in index.html to inject the correct title.
+    // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
+    config.plugin('html').tap(args => {
+      args[0].title = name
+      return args
+    })
+  }
+}