finish

xinxuan/package-lock.json

@@ -1038,6 +1038,22 @@
         "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz",
+      "integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        }
+      }
+    },
     "@babel/preset-env": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
@@ -1144,7 +1160,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -1673,6 +1688,57 @@
         "@types/node": "*"
       }
     },
+    "@videojs-player/vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/vue/-/vue-1.0.0.tgz",
+      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg=="
+    },
+    "@videojs/http-streaming": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.0.0.tgz",
+      "integrity": "sha512-AdKmY/W2dyeJP0uALgMRmhLa4pbHMvE4OMlg6yQvufnqsz6jDFo1DYnZRv2ENDYrmVdnPH58Ehgu59053+OIhQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^6.0.0",
+        "mpd-parser": "^1.0.1",
+        "mux.js": "6.2.0",
+        "video.js": "^7 || ^8"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.2.0.tgz",
+          "integrity": "sha512-SKuxIcbmK/aJoz78aQNuoXY8R/uEPm1gQMqWTXL6DNl7oF8UPjdt/AunXGkPQpBouGWKDgL/TzSl2VV5NuboRg==",
+          "requires": {
+            "@babel/runtime": "^7.11.2",
+            "global": "^4.4.0"
+          }
+        }
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
@@ -2339,6 +2405,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.7.tgz",
+      "integrity": "sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -2391,6 +2462,29 @@
       "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2548,6 +2642,12 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
     "autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -2628,6 +2728,28 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+        }
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -3271,6 +3393,18 @@
         }
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -3492,6 +3626,12 @@
         "ms": "2.1.2"
       }
     },
+    "decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3694,6 +3834,11 @@
         "entities": "^2.0.0"
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "dom7": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
@@ -4428,6 +4573,12 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4710,6 +4861,15 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -4760,6 +4920,23 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
+      "integrity": "sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
+          "integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA==",
+          "dev": true
+        }
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -5007,6 +5184,11 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5089,6 +5271,11 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5279,6 +5466,11 @@
         "universalify": "^2.0.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5320,6 +5512,11 @@
         "type-check": "~0.4.0"
       }
     },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
+      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
+    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -5579,6 +5776,28 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.0.0.tgz",
+      "integrity": "sha512-s3JfDtqhxTilZQf+P1m9dZc4ohL4O/aylP1VV6g9lhKuQNfAcVUzq7d2wgJ9nZR4ibjuXaP87QzGCV6vB0kV6g==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -5677,6 +5896,14 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "2.7.5",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
@@ -5780,6 +6007,29 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "mpd-parser": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.1.1.tgz",
+      "integrity": "sha512-uZ/db5wQdlQn1L+OD49YXBhPI9UGeK1SeQE4D5EoaJIhf0WM9X3HDj8d+9PjoG06CgCvGZw3YW/wsHku+CH3yA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -5802,6 +6052,15 @@
         "thunky": "^1.0.2"
       }
     },
+    "mux.js": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.3.0.tgz",
+      "integrity": "sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      }
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -5818,6 +6077,12 @@
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
+    "natives": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz",
+      "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==",
+      "dev": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -6258,6 +6523,14 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -6580,10 +6853,31 @@
       }
     },
     "postcss-pxtorem": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
-      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.27"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
     },
     "postcss-reduce-initial": {
       "version": "5.1.2",
@@ -6662,6 +6956,11 @@
         "renderkid": "^3.0.0"
       }
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -6730,6 +7029,146 @@
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "dev": true
     },
+    "px2rem": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/px2rem/-/px2rem-0.5.0.tgz",
+      "integrity": "sha512-R+LQj3Evbjbpmglo7D0PBVsnAbKP4WSvZEZUnF8RGIpWkIHFeAT+BlDOxxBxKVyMDecmfv9qdzNLTZLMq32osA==",
+      "dev": true,
+      "requires": {
+        "chalk": "~0.5.1",
+        "commander": "~2.6.0",
+        "css": "~2.2.0",
+        "extend": "~3.0.0",
+        "fs-extra": "~0.16.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
+          "integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
+          "integrity": "sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
+          "integrity": "sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "commander": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
+          "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "0.16.5",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.5.tgz",
+          "integrity": "sha512-yb7ti8kVH+qboUQWYxUuOPj/qcMUA6lO68ErZoPQOTP+7qroCIN/1gZ1lLk/rs2p0gPFzrvPYujKGnHTu+HHxA==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^3.0.5",
+            "jsonfile": "^2.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "graceful-fs": {
+          "version": "3.0.12",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.12.tgz",
+          "integrity": "sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==",
+          "dev": true,
+          "requires": {
+            "natives": "^1.1.3"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.11",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+              "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
+          "integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
+          "integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA==",
+          "dev": true
+        }
+      }
+    },
+    "px2rem-loader": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/px2rem-loader/-/px2rem-loader-0.1.9.tgz",
+      "integrity": "sha512-3Ew8At5W/HHIIUe/KZk+FBRRb20KtgP1N1c/BnMlXk6LNkqrFmUIUF35GF/evzNdj/Q63iWJpkmn/c5qSMplRg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "px2rem": "^0.5.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -6849,8 +7288,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -6957,6 +7395,12 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
+      "dev": true
+    },
     "restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -6997,12 +7441,28 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -7309,6 +7769,19 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
     "source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -7319,6 +7792,12 @@
         "source-map": "^0.6.0"
       }
     },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -7793,6 +8272,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
+      "dev": true
+    },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7839,6 +8329,48 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "video.js": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.0.4.tgz",
+      "integrity": "sha512-fvvWauPanrKDps1HQGGL+9CIAK8G0YVwlNme0hvY0k3moXQryaRcJSLHIlPKV2j9ZFTHl32VbN43jL3TaUllfg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.0.0",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^6.0.0",
+        "mpd-parser": "^1.0.1",
+        "mux.js": "^6.2.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "3.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "0.15.4"
+      }
+    },
+    "videojs-contrib-quality-levels": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-3.0.0.tgz",
+      "integrity": "sha512-sNx38EYUx+Q+gmup1gVTv9P9/sPs28rM7gZOx1sedaHoKxEdYB+ysOGfHj6MSELBMNGMj6ZspdrpSiWguGvGxA==",
+      "requires": {
+        "global": "^4.4.0"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
+      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vue": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
@@ -8063,6 +8595,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-6.0.0.tgz",
+      "integrity": "sha512-WP47OtefsjMEReRCIKIL3tRRgH/PyNm8ELjsbYgr/WWrYAj5Ih9Adzkzp+ylYOI/v57jJ4O7O4XkbXBCmsTqNw==",
+      "requires": {
+        "@videojs-player/vue": "1.x"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

xinxuan/package.json

@@ -8,14 +8,19 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
     "axios": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "lib-flexible": "^0.3.2",
     "smooth-scroll": "^16.1.3",
+    "video.js": "^8.0.4",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^3.1.3",
     "vue-axios": "^3.5.2",
-    "vue-router": "^3.6.5"
+    "vue-router": "^3.6.5",
+    "vue-video-player": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -25,7 +30,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "postcss-pxtorem": "^6.0.0",
+    "postcss-pxtorem": "^5.1.1",
+    "px2rem-loader": "^0.1.9",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

xinxuan/postcss.config.js

@@ -1,9 +1,15 @@
+const pxtorem = require("postcss-pxtorem");
 module.exports = {
-    plugins: {
-      autoprefixer: {},
-      "postcss-pxtorem": {
-        "rootValue": 16,
-        "propList": ["*"]
-      }
-    }
-  }
+  plugins: [
+    pxtorem({
+      rootValue: 192,//我这里配置的是我1920分辨率下的基准值，会在下面解释
+      unitPrecision: 5,
+      propList: ["*"],
+      selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],
+      //排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0
+    })
+  ]
+}

xinxuan/public/index.html

@@ -2,11 +2,21 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- <meta name="viewport" content="user-scalable=false" /> -->
+
+    <meta name="renderer" content="webkit"/>
+    <meta name="force-rendering" content="webkit"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 
+    <script src="http://www.bootcdn.cn/html5media"></script>
+    
+    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+    <!-- <meta name=”viewport” content="width=device-width, initial-scale=1" /> -->
     <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
     <link rel="icon" href="./logo.png">
     <title>绿巍人造草坪</title>
+    
   </head>
   <body>
     <noscript>

xinxuan/src/assets/css/common.css

@@ -1634,8 +1634,10 @@ body.typesquare_option {
 }
 
 .inner {
-    padding-right: 7.2rem;
-    padding-left: 7.2rem
+    padding-right: 0 !important;
+    padding: 0 100px !important;
+    box-sizing: border-box;
+    width: 100%;
 }
 
 .font--num.hidden {
@@ -6682,7 +6684,7 @@ strong.ff__en {
 
 #header .frame {
     padding-top: 100px !important;
-    padding-right: 9rem
+    /* padding-right: 9rem */
 }
 
 #header .frame .logo svg {
@@ -6773,16 +6775,16 @@ strong.ff__en {
 
 #header>.inner .btn.menu {
     z-index: 1100;
-    top: 4.2rem;
-    right: 7.2rem;
-    width: 6rem;
-    height: 6rem;
-    transform: translate(0, -1.6rem)
+    top: 103px;
+    right: 110px;
+    width: 80px;
+    height: 64px;
+    transform: translate(0, -50px)
 }
 
 #header>.inner .btn.menu button ul {
     top: 50%;
-    left: 50%
+    left: 50%;
 }
 
 #header>.inner .btn.menu button ul li {
@@ -6795,16 +6797,16 @@ strong.ff__en {
 }
 
 #header>.inner .btn.menu button ul li:nth-child(1) {
-    top: calc(50% - 1.2rem)
+    top: calc(50% - 20px)
 }
 
 #header>.inner .btn.menu button ul li:nth-child(2) {
-    top: calc(50% - .1rem);
-    /* opacity: .2 */
+    top: calc(50% + 2px);
+    /* opacity: 0 */
 }
 
 #header>.inner .btn.menu button ul li:nth-child(3) {
-    top: calc(50% + 1.2rem)
+    top: calc(50% + 20px)
 }
 
 #header>.inner .btn.menu.close {
@@ -6813,7 +6815,7 @@ strong.ff__en {
 
 #header>.inner .btn.menu.close button ul li:nth-child(1),
 #header>.inner .btn.menu.close button ul li:nth-child(3) {
-    width: 6.54rem
+    width: 60px
 }
 
 #header #floating_menu {
@@ -9940,10 +9942,10 @@ body:not(.home)   .js_snap_section {
     }
 
     #header>.inner .btn.menu {
-        top: 5.6rem;
-        right: 4.4rem;
-        width: 6.8rem;
-        height: 6.8rem;
+        top: 103px;
+        right: 110px;
+        width: 80px;
+        height: 64px;
         transform: translate(0, -50%)
     }
 

xinxuan/src/assets/css/index.css

@@ -4,6 +4,7 @@
     width: 100%;
     height: 100vh;
     position: relative;
+    font-size: 0;
 }
 .point {
     cursor: pointer;
@@ -49,7 +50,9 @@
     width: 100%;
     height: 100%;
 }
+
 .absolute1 {
+
     translate: none;
     rotate: none;
     scale: none;
@@ -178,27 +181,40 @@
 }
 .shua {
     position: fixed;
-    top: 0;
+    top: 100%;
     left: 0;
     width: 100%;
-    height: 100vh;
+    height: 600vh;
     background: #fff;
     z-index: 9;
+    -webkit-mask-image: url('@/assets/images/common/gradation-01.png');
+    /* -webkit-mask-position: 0 250%; */
+    -webkit-mask-size: 100% 100%;
 }
+
 .shua_js {
-    top: -100%;
-    animation: white_ani 0.5s;
+    /* -webkit-mask-position: 0 300%; */
+
+    /* top: -600%;  */
+    animation: white_ani 2.2s;
 }
-.two .shua_js {
-    top: -100%;
-    animation: white_ani 1.5s !important;
+.two,.three .shua_js {
+    /* top: -600%;  */
+    animation: white_ani 2.2s !important;
 }
+
 @keyframes white_ani {
     0% {
-        top: 0;
+        top: 20%;
+    }
+    25% {
+        top: -250%;
+    }
+    50% {
+        top: -250%
     }
     100% {
-        top: -100%;
+        top: -600%;
     }
 }
 .is_show {
@@ -221,7 +237,7 @@
     font-size: 150px;
     font-weight: 500;
     color: #666666;
-    line-height: 90px;
+    line-height: 150px;
     margin-bottom: 89px;
     /* text-align: center; */
 }
@@ -231,7 +247,7 @@
     left: 0; */
     box-sizing: border-box;
     padding: 194px 101px 0;
-    height: 70vh;
+    height: 65vh;
     animation:js_subtitle 1s ease-out 2s backwards;
 }
 @keyframes js_subtitle {
@@ -250,7 +266,7 @@
     }
         
 }
-.one .subTitle h2 {
+.one .subTitle div {
     position: sticky;
     top: 194px;
     font-size: 60px;
@@ -390,7 +406,7 @@
 .two_once {
     width: 100%;
     min-height: 100vh;
-    z-index: 99999;
+    z-index: 9;
     /* padding-bottom: 100vh; */
 }
 .two {
@@ -405,7 +421,7 @@
     bottom: 243px;
     height: 120px;
     width: 40px;
-    z-index: 9999999;
+    z-index: 99;
 }
 .icon_down .icon-down-1 {
     width: 34px;
@@ -458,7 +474,7 @@
 .two .video_bg .content .name,.wenan{
     font-size: 60px;
     font-weight: 600;
-    color: #666;
+    color: #fff;
     line-height: 80px;
     z-index: 999;
 }
@@ -471,7 +487,7 @@
 .two .video_bg .content .content_right .right_index {
     padding-top: 54px;
     font-weight: 500;
-    color: #666;
+    color: #fff;
     line-height: 140px;
     font-size: 36px;
 }
@@ -554,9 +570,10 @@
     color: #fff;
     line-height: 90px;
     text-align: center;
+    z-index: 99;
 }
 
-@media screen and (max-width: 750px) {
+/* @media screen and (max-width: 750px) {
 
     .two .video_bg .content .content_right .right_index {
         position: absolute;
@@ -567,8 +584,466 @@
         padding: 70vh 0 0;
     }
     
-}
+} */
 
 /deep/ .footer {
     margin-top: 100vh;
+}
+
+@media screen and (max-width: 750px) {
+    
+    .video {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        object-fit: unset;
+        height: unset;
+        z-index: -99;
+    }
+    .videoContainer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: -100;
+      }
+      .videoContainer:before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        /* background: rgba(25, 29, 34, 0.65); */
+      }
+      .fillWidth {
+        width: 100%;
+      }
+   
+    .absolute_1 {
+        width: 83px !important;
+        -webkit-transform: translate(-50%,100%) translate(-10%,0px) rotate(23.4deg); 
+        transform: translate(-50%,100%) translate(-10%,0px) rotate(23.4deg); 
+        top: -0.1vw !important;
+    }
+    .absolute_2 {
+        translate: none;
+        rotate: none;
+        scale: none;
+        transform-origin: 50% 50%;
+        transform: translate(-50%,0%) translate(-10%,0px);
+        opacity: 0 !important;
+    }
+    .absolute_3 {
+        width: 83px !important;
+    
+        
+        transform: translate(-50%,-50%) translate(-10%,0px) rotate(-23.4deg);
+        top: -0.1vw !important;
+    }
+    .absolute_11 {
+        translate: none;
+        rotate: none;
+        scale: none;
+        transform-origin: 50% 50%;
+        /* top: -0.1vw !important; */
+        animation:myfirst11 0.3s;
+    
+    }
+    .absolute_33 {
+        translate: none;
+        rotate: none;
+        scale: none;
+        transform-origin: 50% 50%;
+        animation:myfirst33 0.3s;
+    
+    }
+    @keyframes myfirst11 {
+        /* 0% {
+            transform: translate(-50%,0%) translate(-0.3333px,0px) rotate(23.4deg) ;
+        } */
+        0% {
+            transform: translate(-50%,100%) translate3d(-10%,0px,0px) rotate(-23.4deg) ;
+        }
+        100% {
+            transform: translate(-50%,100%) translate(-10%,0px) rotate(23.4deg) ;
+        }   
+       
+    }
+    @keyframes myfirst33 {
+        /* 0% {
+            transform: translate(-50%,0%) translate(-0.3333px,0px) rotate(-23.4deg) ;
+        } */
+        0% {
+            transform: translate(-50%,-50%) translate3d(-10%,0px,0px) rotate(23.4deg) ;
+        }
+        100% {
+            transform: translate(-50%,-50%) translate(-10%,0px) rotate(-23.4deg) ;
+        }   
+       
+    }
+    
+    .is_show {
+        display: block !important;
+    }
+    .one {
+        height: 1920px;
+        position: relative;
+        margin-bottom: 0;
+        /* display: none; */
+    }
+    .one .title {
+        width: 100%;
+        white-space: nowrap;
+        /* position: absolute; */
+        /* top: 70vh; */
+        box-sizing: border-box;
+        padding: 308px 100px 50px;
+    }
+    .one .title h1 {
+        font-size: 150px;
+        font-weight: 500;
+        color: #666666;
+        line-height: 150px;
+        margin-bottom: 89px;
+        white-space: nowrap;
+        /* text-align: center; */
+    }
+    .one .subTitle {
+        /* position: relative;
+        top: 0;
+        left: 0; */
+        box-sizing: border-box;
+        padding: 194px 101px 0;
+        height: unset;
+        animation:js_subtitle 1s ease-out 2s backwards;
+    }
+    @keyframes js_subtitle {
+        0% {
+    
+            transform:translate(-60px);
+            opacity:0;
+        }
+        50% {
+            transform:translate(-30px);
+            opacity:.5;
+        }
+        100% {
+            transform:translate(0);
+            opacity:1;
+        }
+            
+    }
+    .one .subTitle div {
+        position: sticky;
+        top: 194px;
+        font-size: 60px;
+        font-weight: 600;
+        color: #fff;
+        line-height: 60px;
+    }
+    .one .title .line {
+        width: 100%;
+        height: 4px;
+        background: #666;
+        margin-bottom: 40px;
+        position: relative;
+    }
+    .one .title .line:after {
+        display: block;
+        position: absolute;
+        /* top: 180px; */
+        /* left: 100px; */
+        width: 100%;
+        height: 4px;
+        transform: scale(0, 1);
+        background-color: #fff;
+        content: "";
+        animation: js_scrollAttention_line 2s infinite cubic-bezier(.77, 0, .175, 1)
+    }
+    @keyframes js_scrollAttention_line {
+        0% {
+            transform: scale(0, 1);
+            transform-origin: left top
+        }
+    
+        40% {
+            transform: scale(1, 1);
+            transform-origin: left top
+        }
+    
+        41% {
+            transform: scale(1, 1);
+            transform-origin: right top
+        }
+    
+        100% {
+            transform: scale(0, 1);
+            transform-origin: right top
+        }
+    }
+    
+    .text {
+        max-width: 600px;
+        font-size: 50px;
+        font-weight: 600;
+        color: #fff;
+        line-height: 45px;
+    }
+    .text:hover {
+        color: #666666;
+    }
+    .down {
+        width: 50px;
+        height: 50px;
+        margin: 0 20px;
+        animation: js_scrollAttention_arw 1.2s infinite cubic-bezier(.77, 0, .175, 1) 1.5s
+    }
+    
+    @keyframes js_scrollAttention_arw {
+        0% {
+            transform: translate(0, 0);
+            opacity: 1
+        }
+    
+        20% {
+            transform: translate(0, 100%);
+            opacity: 0
+        }
+    
+        21% {
+            transform: translate(0, -100%);
+            opacity: 0
+        }
+    
+        100%,
+        40% {
+            transform: translate(0, 0);
+            opacity: 1
+        }
+    }
+    .inner .frame .title1 {
+        font-size: 32px;
+        font-weight: 500;
+        color: #FEFEFE;
+        line-height: 40px;
+    }
+    .inner .frame .line {
+        width: 260px;
+        height: 4px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        margin: 30px 0 49px; 
+    }
+    .inner .frame .text_box {
+        margin-bottom: 37px;
+    }
+    .inner .frame .text_box:hover {
+        opacity: 0.6;
+    }
+    .inner .frame .text_box .text1 {
+        font-size: 32px;
+        font-weight: 500;
+        color: #FEFEFE;
+        /* line-height: 32px; */
+        margin-bottom: 9px;
+    }
+    
+    .inner .frame .text_box .text2 {
+        font-size: 24px;
+        font-weight: 500;
+        color: #FEFEFE;
+        /* line-height: 40px; */
+    }
+    .one .content {
+        padding: unset;
+        font-size: 60px;
+        font-weight: 500;
+        color: #fff;
+        line-height: 90px;
+        display: none;
+    }
+    .fullPage {
+        height: 100vh;
+        overflow: hidden;
+    }
+    .fullpageContainer {
+        width: 100vw;
+        height: 1080px;
+        transition: all linear 0.5s;
+    }
+    .two_once {
+        width: 100%;
+        min-height: 1080px;
+        z-index: 9;
+        /* padding-bottom: 100vh; */
+    }
+    .two {
+        /* margin-top: 100vh; */
+        width: 100%;
+        height: 1080px;
+        position: relative;
+    }
+    .icon_down {
+        position: fixed;
+        right: 243px;
+        bottom: 243px;
+        height: 120px;
+        width: 40px;
+        z-index: 99;
+    }
+    .icon_down .icon-down-1 {
+        width: 34px;
+        height: 60px;
+    }
+    .icon_down .icon-down-2 {
+        width: 34px;
+        height: 40px;
+    }
+    .two .video_bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1080px;
+    }
+    .two .video_bg::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: block;
+        /* z-index: 1; */
+        top: 0;
+        left: 0;
+        /* background: rgba(25, 29, 34, 0.65); */
+    }
+    .two .video_bg video {
+        width: 100%;
+        height: 1080px;
+        object-fit: cover;
+        z-index: -999;
+    }
+    .two .video_bg .img {
+        width: 100%;
+        height: 1080px;
+        object-fit: cover;
+        z-index: -99;
+    }
+    .two .video_bg .content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 0 101px;
+        z-index: 999;
+    }
+    .two .video_bg .content .name,.wenan{
+        font-size: 60px;
+        font-weight: 600;
+        color: #fff;
+        line-height: 80px;
+        z-index: 999;
+    }
+    .two .video_bg .content .name{
+        padding: 399px 0 75px;
+    }
+    .two .video_bg .content .content_right {
+        padding: 400px 0 200px;
+    }
+    .two .video_bg .content .content_right .right_index {
+        padding-top: 54px;
+        font-weight: 500;
+        color: #fff;
+        line-height: 140px;
+        font-size: 36px;
+    }
+    .two .video_bg .content .content_right .right_index .indexs {
+        font-size: 140px;
+    }
+    .two .video_bg .content .content_right .circle {
+        width: 12px;
+        height: 12px;
+        border: 2px solid #fff;
+        border-radius: 50%;
+        margin-bottom: 21px;
+    }
+    .two .video_bg .content .content_right .circle_active {
+        background: #fff;
+    }
+    .two .video_bg .content .content_right .icon_down2 {
+        /* position: absolute;
+        right: 243px;
+        bottom: 243px; */
+        height: 120px;
+        width: 40px;
+        z-index: 9;
+    }
+    .icon_down .icon-down-1 {
+        width: 34px;
+        height: 60px;
+    }
+    .icon_down .icon-down-2 {
+        width: 34px;
+        height: 40px;
+    
+    }
+    .three {
+        /* margin-top: 100vh; */
+        width: 100%;
+        height: 1080px;
+        position: relative;
+        min-height: 1080px;
+    }
+    .three .video_bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1080px;
+    }
+    .three .video_bg::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        background: rgba(25, 29, 34, 0);
+    }
+    .three .video_bg video {
+        width: 100%;
+        height: 1080px;
+        object-fit: cover;
+        z-index: -999;
+    }
+    .three .video_bg .videos_img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        z-index: -99;
+    }
+    .three .three_text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 400px 0 0;
+        font-size: 60px;
+        font-weight: 500;
+        color: #fff;
+        line-height: 90px;
+        text-align: center;
+        z-index: 99;
+    }
 }

xinxuan/src/assets/css/top.css

@@ -227,8 +227,8 @@ a.p_top_bottomNewsItemLink:hover .p_top_bottomNewsItemTitle {
 
 @media screen and (max-width:767px) {
     body.home #header .inner .btn.menu {
-        top: 28px !important;
-        right: 22px !important
+        top: 103px !important;
+        right: 110px !important
     }
 
     body.home .h_pc {

xinxuan/src/assets/js/rem.js

@@ -9,9 +9,21 @@ function setRem() {
   const scale = document.documentElement.clientWidth / 1920
 
   // 设置页面根节点字体大小
+  let fontSize = baseSize * Math.min(scale,2)
 
-  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
+  document.documentElement.style.fontSize = fontSize + 'px'
+  
+  // var ua = navigator.userAgent.toLowerCase();
+  // if(ua.indexOf('MQQBrowser') > 0) {
+  //   alert('QQ')
+  //   document.documentElement.style.fontSize = 37.5 + 'px'
+  // }
 
+
+
+  // let computedFontSize = window.getComputedStyle(document.getElementsByTagName("html")[0])['font-size'].replace(/px/gi)
+  // let multiple = fontSize / computedFontSize
+  // document.documentElement.style.fontSize = (fontSize * multiple) + 'px'
 }
 
 // 初始化
@@ -20,8 +32,11 @@ setRem()
 
 // 改变窗口大小时重新设置 rem
 
-window.onresize = function () {
 
-  setRem()
+export default {
+  setRem
+}
+// window.onresize = function () {
+//   )
 
-}
+// }

xinxuan/src/components/footer.vue

@@ -73,12 +73,12 @@
     
 </script>
 <style scoped>
-@media screen and (max-width: 750px) {
+/* @media screen and (max-width: 750px) {
     .footer .footer_bottom {
         flex-direction: column !important;
         align-items: start;
     }
-}
+} */
 .footer {
     width: 100%;
     /* height: 400px; */

xinxuan/src/components/header.vue

@@ -169,6 +169,6 @@
 }
 .absolutes {
     position: absolute;
-    top: -20px !important;
+    top: 20px !important;
 }
 </style>

xinxuan/src/components/videoTocv.js

@@ -0,0 +1,78 @@
+/*
+ * video视频转成canvas（兼容至IE8+）
+ * Author: Zijor   Created On: 2017-06-25
+ * 
+ *  使用方法：
+ *      var videoCanvas = new VideoToCanvas(videoDom);
+ *
+ *  对象的属性：
+ *      暂无。
+ *
+ *  对象的方法：
+ *      play       播放视频
+ *      pause      暂停视频
+ *      playPause  播放或暂停视频
+ *      change(src) 切换视频。参数src为切换的视频地址
+ */
+var VideoToCanvas = (function(window, document) {
+  function VideoToCanvas(videoElement) {
+    if(!videoElement) {return;}
+
+    var canvas = document.createElement('canvas');
+    canvas.width = videoElement.offsetWidth;
+    canvas.height = videoElement.offsetHeight;
+    ctx = canvas.getContext('2d');
+
+    var newVideo = videoElement.cloneNode(false);
+
+    var timer = null;
+
+    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+    function drawCanvas() {
+      ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
+      timer = requestAnimationFrame(drawCanvas);
+    }
+
+    function stopDrawing() {
+      cancelAnimationFrame(timer);
+    }
+
+    newVideo.addEventListener('play', function() {
+      drawCanvas();
+    },false);
+    newVideo.addEventListener('pause', stopDrawing, false);
+    newVideo.addEventListener('ended', stopDrawing, false);
+
+    videoElement.parentNode.replaceChild(canvas, video);
+
+    this.play = function() {
+      newVideo.play();
+    };
+
+    this.pause = function() {
+      newVideo.pause();
+    };
+
+    this.playPause = function() {
+      if(newVideo.paused) {
+        this.play();
+      } else {
+        this.pause();
+      }
+    };
+
+    this.change = function(src) {
+      if(!src) {return;}
+      newVideo.src = src;
+    };
+
+    this.drawFrame = drawCanvas;
+  }
+
+  return VideoToCanvas;
+
+})(window, document);

xinxuan/src/main.js

@@ -2,11 +2,22 @@ import Vue from 'vue'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue'
-import '@/assets/js/rem.js'
+import rem from '@/assets/js/rem.js'
 import './utils/api'
+// import 'babel-polyfill'
+import 'lib-flexible/flexible'
 
 import router from './route/index'
 
+import VideoPlayer from 'vue-video-player'
+require('video.js/dist/video-js.css')
+// require('vue-video-player/src/custom-theme.css')
+Vue.use(VideoPlayer)
+
+// window.addEventListener('resize',function() {
+//   rem.setRem()
+
+// });
 Vue.use(ElementUI);
 Vue.config.productionTip = false
 

xinxuan/src/utils/config.js

@@ -9,6 +9,7 @@ function getRequestKey(config) {
         method,
         url,
         params,
+        responseType='blob',
         data
     } = config;
     // axios中取消请求及阻止重复请求的方法

xinxuan/src/view/about.vue

@@ -3,13 +3,13 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
                 </video> -->
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anoymous" v-if="pageData.type=='video'">
                     <source :src="pageData.g_pic" type="video/mp4" />
                 </video>
-                <el-image :lazy="true" :src="pageData.g_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
+                <el-image  :src="pageData.g_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="title">关于我们</div>  
             <div class="title">About us</div>  
@@ -47,17 +47,28 @@ export default {
             pageData: {},
             pageList: [],
             div_width: 0,
-            footer: {}
+            footer: {},
+            autoplay: true,
+            flag: true
         }
     },
     created() {
         that = this
+        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+        that.flag = flag
         that.getConfig()
+        that.isBrow()
     },
     mounted() {
         that.getList()
     },
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
+                that.autoplay = false
+            }
+        },
         // 获取移动列表宽度
         getWidth() {
             var data = document.getElementById("scroll").offsetWidth;
@@ -133,7 +144,7 @@ export default {
 }
 .center {
     width: 100%;
-    min-height: 100vh;
+    min-height: 1297px;
     box-sizing: border-box;
     padding: 200px 100px 159px;
     background: #fff;
@@ -141,15 +152,7 @@ export default {
     position: relative;
 
 }
-@media screen and (max-width: 750px) {
-    .top {
-        padding-top: 60vh;
 
-    }
-    .center {
-        min-height: 1370px;
-    }
-}
 @media screen and (min-width: 2015px) {
     
     .center {
@@ -198,4 +201,16 @@ export default {
     line-height: 52px;
     max-width: 395px;
 }
+@media screen and (max-width: 750px) {
+    
+.top {
+    box-sizing: border-box;
+    padding: 269px 100px 0;
+    min-height: 1080px;
+}
+   >>> .footer {
+    position: absolute;
+   }
+
+}
 </style>

xinxuan/src/view/contact.vue

@@ -3,13 +3,13 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
                 </video> -->
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anoymous" v-if="pageData.type=='video'">
                     <source :src="pageData.l_pic" type="video/mp4" />
                 </video>
-                <el-image :lazy="true" :src="pageData.l_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
+                <el-image  :src="pageData.l_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="subTitle" v-html="pageData.l_content"></div>  
             <div class="text">电话：{{ pageData.l_phone }}</div>
@@ -34,16 +34,26 @@ export default {
     data() {
         return {
             pageData: { },
-            footer: {}
+            footer: {},
+            autoplay: true,
+
         }
     },
     created() {
         that = this
         that.getConfig()
+        that.isBrow()
+
     },
     mounted() {
     },
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
+                that.autoplay = false
+            }
+        },
          // 获取基础配置信息
          getConfig() {
             that.$http.getConfig().then((res) => {
@@ -72,7 +82,9 @@ export default {
 <style scoped> 
 @media (max-width: 750px) {
     .top {
-        padding: 60vh 151px 200px !important;
+        box-sizing: border-box;
+        min-height: 1080px !important;
+        padding: 269px 151px 0 !important;
     }
 }
 .top {

xinxuan/src/view/detail.vue

@@ -4,7 +4,7 @@
         <div class="content">
             <div class="title">{{ pageData.title }}</div>
             <div class="date">发布时间：{{ pageData.create_time }}</div>
-            <div v-html="pageData.content"></div>
+            <div class="cont" v-html="pageData.content"></div>
             <div class="list" v-if="newsList.length > 0">
                 <div class="title">返回列表</div>
                 <div class="item" v-for="(item,indexs) in newsList" :key="indexs">
@@ -186,6 +186,13 @@ export default {
     width: 53px;
     height: 57px;
 }
+.cont>>> img {
+    width: 100%;
+}
+.cont >>> video {
+    width: 100%;
+
+}
 /deep/ #header .inner .header_home {
     color: #333 !important;
 }

xinxuan/src/view/index.vue

@@ -18,7 +18,6 @@
                         </button>
                     </div>
                 </div>
-                <!-- 点击弹出的黑框 -->
                 <div id="floating_menu" ref="floating_menu">
                     <div class="inner">
                         <div class="frame">
@@ -49,28 +48,26 @@
                     </div>
                 </div>
             </header>
-           
-            
         </div>
-        <div class="shua" :class="show_white?'shua_js':''"></div>
-        
-        <section class="one">
+        <div class="shua shua_js" v-if="!show_white && !flag"></div>
+        <div class="one">
             <div class="videoContainer">
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type1=='video'">
-                    <source :src="pageData.url1" type="video/mp4" />
+                <video id="back_video" :poster="pageData.url1_img" class="video fillWidth"  :src="pageData.url1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  crossorigin="anoymous" v-if="pageData.type1=='video'">
+                    <!-- <source type="video/mp4" /> -->
                 </video>
+                <canvas id="cvback_video" style="display:none;"></canvas>
                 <el-image :src="pageData.url1" class="video fillWidth" fit="cover" v-if="pageData.type1=='image'"></el-image>
             </div>
             <div class="subTitle">
-                <h2 v-html="pageData.subtitle1"></h2>
+                <div v-html="pageData.subtitle1"></div>
             </div>
             <div class="title">
                 <div v-show="scroll_top == 0">
-                    <h1 :style="show_white?'color: #fff':''">{{pageData.title}}</h1>
-                    <div class="line" :style="show_white?'background: rgba(255,255,255,.5)':''"></div>
+                    <h1 style="color: #fff;">{{pageData.title}}</h1>
+                    <div class="line" style="background: rgba(255,255,255,.5)"></div>
                     <div class="hflex jbetween" v-show="show_white">
                         <div class="text point">{{pageData.home_time}}</div>
-                        <div class="hflex point" @click="scorll_down(800)">
+                        <div class="hflex point" @click="scorll_down()">
                             <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
                             <div class="text">向下滑动</div>
                         </div>
@@ -78,20 +75,23 @@
                 </div>
                 <div class="content" v-html="pageData.subtitle2"></div>
             </div>
-            <div class="icon_down vflex acenter jbetween point" v-show="scroll_top > 200 && scroll_top < 1500" @click="scorll_down2(-1)">
+            <div class="icon_down vflex acenter jbetween point" v-show="scroll_top > 200 && scroll_top < 1500 && !flag" @click="scorll_down2(-1)">
                 <img src="@/assets/images/common/icon-down-1.png" alt="" />
                 <img src="@/assets/images/common/icon-down-2.png" alt="" />
             </div>
-        </section>
+        </div>
         <!-- <div class="fullPage"> -->
-            <div class="two_once" ref="scrollview" @mousewheel="scrollChange"></div>
-
+            <div class="two_once" id="scroll_once" ref="scrollview" @mousewheel="scrollChange" @DOMMouseScroll="scrollChange" v-if="!flag">
+                <div class="shua shua_js" v-if="fullpage.current == 1 && !flag"></div>
+            </div>
             <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
                 <div v-for="(item,index) in pageList" :key="index" class="two">
                     <div class="video_bg" :id="'video' + index">
-                        <div class="shua" :class="fullpage.isScrolling?'shua_js':''" v-if="fullpage.isScrolling"></div>
-                        <video :src="item.url" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="item.type2=='video'"></video>
                         <el-image :src="item.url" fit="cover" class="img" v-if="item.type2=='image'"></el-image>
+
+                        <div class="shua shua_js" v-if="fullpage.current - 2 == index && !flag"></div>
+                        
+                        <video :src="item.url" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="item.type2=='video'"></video>
                         <div class="content hflex jbetween">
                             <div class="content_left">
                                 <div class="name" :style="!fullpage.isScrolling?'color: #fff':''">{{ item.title }}</div>
@@ -117,16 +117,17 @@
                 </div>
             </div>
         <!-- </div> -->
-        <div class="three">
+        <div class="three"  @mousewheel="scrollChange2" @DOMMouseScroll="scrollChange2" ref="videos">
             <div class="video_bg">
-                <video id="videos" :src="pageData.url2" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="pageData.type2 == 'video'"></video>
+                <div class="shua shua_js" v-if="fullpage.current - 2 == pageList.length && !flag"></div>
+                <video id="videos" :src="pageData.url2" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="pageData.type2 == 'video'"></video>
                 <el-image id="videos" class="videos_img" :src="pageData.url2" fit="cover" v-if="pageData.type2 == 'image'"></el-image>
             </div>
-            <div class="three_text" v-html="pageData.subtitle3"></div>
+            <div class="three_text" :style="!fullpage.isScrolling?'color: #fff':''" v-html="pageData.subtitle3"></div>
         </div>
-        <div class="three" style="margin-top: 0;">
+        <div class="three">
             <div class="video_bg">
-                <video id="videos2" :src="pageData.url3" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="pageData.type3 == 'video'"></video>
+                <video id="videos2" :src="pageData.url3" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="pageData.type3 == 'video'"></video>
                 <el-image class="videos_img" :src="pageData.url3" fit="cover" v-if="pageData.type3 == 'image'"></el-image>
             </div>
         </div>
@@ -135,6 +136,7 @@
 </template>
 <script>
 import Footer from '@/components/footer.vue'
+
 //页面引入swiper
 var that = ''
 export default {
@@ -161,37 +163,76 @@ export default {
                 current: 1,     //当前页面编号
                 isScrolling: false,     //是否在滚动，
                 deltaY: 0,      //判断往上还是往下
-            }
+            },
+            flag: true,
+            dialogVisible: false,
+            autoplay: true,
+            a: ''
         }
     },
     created() {
         that = this
+        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+        that.flag = flag
+        // this.getVideoStyle()
+        // document.addEventListener("WeixinJSBridgeReady", function () {
+        //     document.getElementById("back_video").play();
+        // }, false);
+        that.isBrow()
+        this.getConfig()
+        this.getList()
         // that.getData()
+        this.a = document.documentElement.style.fontSize
     },
     mounted() {
-        this.getVideoStyle()
-        this.getConfig()
-        this.getList()
-        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
-        window.addEventListener("beforeunload", () => {
-            document.body.scrollTop = 0
-            // firefox
-            document.documentElement.scrollTop = 0
-            window.scrollTo(0,0);
-            console.log('页面刷新',document.documentElement.scrollTop);
+        
+        if(that.flag) {
+            console.log('手机端');
+        } else {
+            window.addEventListener("beforeunload", () => {
+                document.body.scrollTop = 0
+                // firefox
+                document.documentElement.scrollTop = 0
+                window.scrollTo(0,0);
+                console.log('页面刷新',document.documentElement.scrollTop);
 
-            that.scroll_top = 0
-        });
-          const scrollview = this.$refs['fullPageContainer']
-          scrollview.addEventListener('scroll', this.mouseWheelHandle, true)
+                that.scroll_top = 0
+            });
+            const scrollview = this.$refs['fullPageContainer']
+            scrollview.addEventListener('scroll', this.scrollChange, true)
+            const scrollview2 = this.$refs['scrollview']
+            scrollview2.addEventListener('scroll', this.mouseWheelHandle, true)
+            const scrollview3 = this.$refs['videos']
+            scrollview3.addEventListener('scroll', this.scrollChange2, true)
+        }
+        
+        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
     },
     
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.indexOf('MQQBrowser') > 0 || ua.indexOf('baidu') > 0 || ua.indexOf('UCBrowser') > 0 ) {
+                that.autoplay = false
+            }
+        },
+        init(id) {
+            var canvas = document.createElement('canvas');
+			const video = document.getElementById(id);
+			// video.setAttribute('crossOrigin', 'anonymous');
+			video.currentTime = 1; //currentTime 属性设置或返回视频播放的当前位置（以秒计）   重要！不设置会导致第一帧图片不显示
+			canvas.width = video.clientWidth;
+			canvas.height = video.clientHeight;
+			video.onloadeddata = (() => {
+				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+				var dataURL = canvas.toDataURL('image/png');
+				video.setAttribute("poster", dataURL); // 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。	
+			})
+        },
         //获取首页接口信息
         getConfig() {
             that = this
             this.$http.getConfig().then((res) => {
-                // console.log('基础配置',res)
                 if (res.data.code == 1) {
                     that.pageData = res.data.data
                     var temp = that.pageData.url1.substr(that.pageData.url1.length - 3,3)
@@ -202,12 +243,18 @@ export default {
                         type = 'video'
                     }
                     that.$set(that.pageData,'type1',type)
+                    if(that.pageData.type1 == 'video') {
+                        that.init('back_video')
+                    }
                     var temp2 = that.pageData.url2.substr(that.pageData.url2.length - 3,3)
                     var type2 = ''
                     if(temp2 == 'jpg' || temp2 == 'png' || temp2 == 'gif') {
                         type2 = 'image'
                     } else if(temp2 == 'mp4' || temp2 == 'avi') {
                         type2 = 'video'
+                        // that.init(that.pageData.url2).then((result) => {
+                        //     that.pageData.url2 = result
+                        // })
                     }
                     that.$set(that.pageData,'type2',type2)
                     var temp3 = that.pageData.url3.substr(that.pageData.url3.length - 3,3)
@@ -216,6 +263,9 @@ export default {
                         type3 = 'image'
                     } else if(temp3 == 'mp4' || temp3 == 'avi') {
                         type3 = 'video'
+                        // that.init(that.pageData.url3).then((result) => {
+                        //     that.pageData.url3 = result
+                        // })
                     }
                     that.$set(that.pageData,'type3',type3)
                     that.footer = {
@@ -225,7 +275,6 @@ export default {
                     }
                 }
             })
-            that.background = that.pageData.background
             setTimeout(() => {
                 this.show_white = true
                 this.isactive = false
@@ -235,7 +284,7 @@ export default {
         // 获取首页列表接口
         getList() {
             that.$http.getIndexList().then((res) => {
-                // console.log('首页列表',res);
+                console.log('首页列表',res);
                 if(res.data.code == 1) {
                     that.pageList = res.data.data.list
                     for(var i=0;i<that.pageList.length;i++) {
@@ -254,32 +303,35 @@ export default {
         //监听屏幕大小实时给播放器设置宽高
         getVideoStyle() {
             window.onresize = () => {
-            that.windowWidth = document.body.clientWidth
-            that.windowHeight = document.body.clientHeight
-            const windowAspectRatio = that.windowHeight / that.windowWidth
-            // console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
-            let videoWidth
-            let videoHeight
-            if (windowAspectRatio < 0.5625) {
-                videoWidth = that.windowWidth
-                videoHeight = videoWidth * 0.5625
-                this.fixStyle = {
-                    height: that.windowWidth * 0.5625 + 'px',
-                    width: that.windowWidth + 'px',
-                    'margin-bottom': (that.windowHeight - videoHeight) / 2 + 'px',
-                    'margin-left': 'initial'
+                that.windowWidth = document.body.clientWidth
+                that.windowHeight = document.body.clientHeight
+                const windowAspectRatio = that.windowHeight / that.windowWidth
+                // console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
+                let videoWidth
+                let videoHeight
+                if (windowAspectRatio < 0.5625) {
+                    videoWidth = that.windowWidth
+                    videoHeight = videoWidth * 0.5625
+                    this.fixStyle = {
+                        height: that.windowWidth * 0.5625 + 'px',
+                        width: that.windowWidth + 'px',
+                        'margin-bottom': (that.windowHeight - videoHeight) / 2 + 'px',
+                        'margin-left': 'initial'
+                    }
+                } else {
+                    videoHeight = that.windowHeight
+                    videoWidth = videoHeight / 0.5625
+                    this.fixStyle = {
+                        height: that.windowHeight + 'px',
+                        width: that.windowHeight / 0.5625 + 'px',
+                        'margin-left': (that.windowWidth - videoWidth) / 2 + 'px',
+                        'margin-bottom': 'initial'
+                    }
                 }
-            } else {
-                videoHeight = that.windowHeight
-                videoWidth = videoHeight / 0.5625
-                this.fixStyle = {
-                    height: that.windowHeight + 'px',
-                    width: that.windowHeight / 0.5625 + 'px',
-                    'margin-left': (that.windowWidth - videoWidth) / 2 + 'px',
-                    'margin-bottom': 'initial'
+                if(that.windowWidth <= 750) {
+                    that.flag = true
                 }
             }
-            }
             window.onresize()
         },
         // 显示/隐藏菜单
@@ -319,17 +371,8 @@ export default {
         async handleScroll() {
             that = this
             this.scroll_top = document.documentElement.scrollTop
-            // await that.jump(1)
-            // const clientHeight = document.documentElement.clientHeight;
-            // if(this.scroll_top > 1300) {
-            //     setTimeout(() => {
-            //         this.scroll_top = document.documentElement.scrollTop + clientHeight
-            //         document.documentElement.scrollTop = this.scroll_top
-            //     }, 20); 
-                
-            // }
-            // console.log(this.scroll_top);
-           
+            that.clientHeight = document.documentElement.clientHeight;
+            
         },
         // 向下切换
         next() {
@@ -342,7 +385,7 @@ export default {
         // 往上切换
         pre() {
             
-            if(that.fullpage.current - 1 >= 0) {
+            if(that.fullpage.current >= 0) {
                 that.fullpage.current -= 1
                 that.move(that.fullpage.current)
             }
@@ -353,32 +396,44 @@ export default {
             setTimeout(() => {
                 this.fullpage.isScrolling = false
 
-            }, 1010);
+            }, 1000);
         },
         directToMove(index) {
-            let height = document.documentElement.clientHeight;
-            let scrollPage = this.$refs["fullPageContainer"]
-            let scrollHeight 
-            scrollHeight = -(index - 1) * height + 'px'
+            console.log('index:',index);
+            if(index == 1 || index == -1) {
+                setTimeout(() => {
+                    document.querySelector('#scroll_once').scrollIntoView({
+                        block: 'start',
+                        behavior: 'smooth'
+                    })
+                }, 500);
+                return
+            }
+            if(index == that.pageList.length + 2) {
+                setTimeout(() => {
+                    document.querySelector('#videos').scrollIntoView({
+                        block: 'start',
+                        behavior: 'smooth'
+                    })
+                }, 500);
+                return
+            }
+            if(index == 0) {
+                index = 2
+            }
+            
             // scrollPage.style.transform = `translateY(${scrollHeight})`
-            document.documentElement.scrollTop = index * height
             setTimeout(() => {
-                document.documentElement.scrollTop = index * height
-                this.scroll_top = document.documentElement.scrollTop
-            }, 1000);
-            this.fullpage.current  = index
-            setTimeout(() => {
-                that.show_white = true
-                
-            }, 1000);
-            setTimeout(() => {
-                that.isactive = false
-                
-            }, 3000);
+                document.querySelector('#video' + (index - 2)).scrollIntoView({
+                    block: 'start',
+                    behavior: 'smooth'
+                })
+            }, 500);
+           
         },
         mouseWheelHandle(event) {
             // that.show_white = false
-            // that.isactive = true
+            that.isactive = true
             let evt = event || window.event
             if(evt.stopPropageation) {
                 evt.stopPropageation()
@@ -398,6 +453,7 @@ export default {
         },
        
         scrollChange(event) {
+            console.log('鼠标滑动');
             let evt = event || window.event
             if(evt.stopPropageation) {
                 evt.stopPropageation()
@@ -409,76 +465,81 @@ export default {
             }
             let e = event.originalEvent || event
             this.fullpage.deltaY = e.deltaY || e.toDetail
+            const content = document.getElementById('video0');
+            const {top, bottom}=content.getBoundingClientRect();
+            
             if(this.fullpage.deltaY > 0) {
-                this.next()
+                if(bottom > 0 && top < that.clientHeight + 50) {
+                    this.next()
+                } else {
+                    document.documentElement.scrollTop += 50    
+                }
             } else if(this.fullpage.deltaY < 0) {
                 // this.pre()
-                document.documentElement.scrollTop -= 10
+                document.documentElement.scrollTop -= 50
+            }
+        },
+        scrollChange2(event) {
+            let evt = event || window.event
+            if(evt.stopPropageation) {
+                evt.stopPropageation()
+            } else {
+                evt.returnValue = false
+            }
+            if(this.fullpage.isScrolling) {
+                return false
+            }
+            let e = event.originalEvent || event
+            this.fullpage.deltaY = e.deltaY || e.toDetail
+            var test = this.scroll_top
+            const content = document.getElementById('video' + (that.pageList.length - 1));
+            const {top, bottom}=content.getBoundingClientRect();
+            // var test = this.scroll_top
+            // console.log(test);
+            if(this.fullpage.deltaY > 0) {
+                // this.next()
+                document.documentElement.scrollTop += 50
+            } else if(this.fullpage.deltaY < 0) {
+                if(-top < that.clientHeight + 50 && bottom >= 0) {
+                    this.pre()
+                } else {
+                    document.documentElement.scrollTop -= 50
+                }
             }
         },
         // 点击向下滑动
-        scorll_down(value) {
+        scorll_down() {
             // console.log(value)
-            document.documentElement.scrollTop = this.scroll_top + value
+            if(that.flag) {
+                document.documentElement.scrollTop = this.scroll_top + that.clientHeight / 8
+            } else {
+                document.documentElement.scrollTop = this.scroll_top + that.clientHeight / 2
+            }
             this.scroll_top = document.documentElement.scrollTop
         },
         // 点击向下切换屏幕
         scorll_down2(index) {
-            // console.log(that.index)
-            // that.show_white = false
-            // that.isactive = true
-            this.next()
-            // that.index = index
-            // if(that.index == 5) {
-            //     document.querySelector('#videos').scrollIntoView({
-            //         block: 'start',
-            //         behavior: 'smooth'
-            //     })
-            //     setTimeout(() => {
-            //     that.show_white = true
-                
-            //     }, 1000);
-            //     setTimeout(() => {
-            //         that.isactive = false
-                    
-            //     }, 3000);
-            //     return
-            // }
-            // if(that.index == -1) {
-            //     that.index = 0
-            // }
-            // document.querySelector('#video' + that.index).scrollIntoView({
-            //     block: 'start',
-            //     behavior: 'smooth'
-            // })
-            // setTimeout(() => {
-            //     that.show_white = true
-                
-            // }, 1000);
-            // setTimeout(() => {
-            //     that.isactive = false
-                
-            // }, 3000);
+            if(!that.flag) {
+                this.next()
+            } else {
+                document.querySelector('#video' + index ).scrollIntoView({
+                    block: 'start',
+                    behavior: 'smooth'
+                })
+            }
+            
         },
         // 点击直接跳转相应屏幕
         jump(index) {
-            this.move(index + 2)
-            // // that.show_white = false
-            // // that.isactive = true
-            // that.index = index
-            // document.querySelector('#video' + that.index).scrollIntoView({
-            //     block: 'start',
-            //     behavior: 'smooth'
-            // })
-            // this.fullpage.current  = index
-            // setTimeout(() => {
-            //     that.show_white = true
-                
-            // }, 1000);
-            // setTimeout(() => {
-            //     that.isactive = false
-                
-            // }, 3000);
+            console.log(index);
+            that.isactive = true
+            this.fullpage.current = index + 2
+            if(this.fullpage.isScrolling) {
+                return false
+            }
+            
+            this.move(this.fullpage.current)
+           
         },
         
     }

xinxuan/src/view/news.vue

@@ -3,13 +3,13 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                     <source :src="pageData.x_url" type="video/mp4" />
                 </video> -->
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anoymous" v-if="pageData.type=='video'">
                     <source :src="pageData.x_url" type="video/mp4" />
                 </video>
-                <el-image :lazy="true" :src="pageData.x_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
+                <el-image :src="pageData.x_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="title">{{ pageData.x_title }}</div>  
             <div class="subTitle" v-html="pageData.x_subtitle"></div>  
@@ -20,14 +20,16 @@
                 <div class="title" v-html="pageData.x_content"></div>
             </div>
             <div class="item" v-for="(item,index) in newsList" :key="index" @click="toNews(index)">
-                <div class="hflex acenter jbetween point" style="width: 100%">
+                <div class="hflex jbetween point" style="width: 100%">
                     <div class="title">{{ item.title }}</div>
-                    <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
-                </div>
-                <div class="hflex aend jbetween point" style="padding: 29px 0;width: 100%;">
-                    <div class="text2" v-html="item.content"></div>
-                    <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
+                    <div class="vflex jbetween">
+                        <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
+                        <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
+                    </div>
                 </div>
+                <!-- <div class="hflex aend jbetween point" style="padding: 29px 0;width: 100%;">
+                    <div class="text2"></div>
+                </div> -->
                 <div class="item_img" :style="{'background-image':'url(' + item.url + ')'}"></div>
             </div>
         </div>
@@ -58,19 +60,29 @@ export default {
             page: 1,
             pageSize: 10,
             load: true,
-            fullscreenLoading: false
+            fullscreenLoading: false,
+            autoplay: true,
+
         }
     },
     created() {
         that = this
         that.getConfig()
         that.getList()
+        that.isBrow()
+
     },
     mounted() {
         window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
 
     },
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
+                that.autoplay = false
+            }
+        },
         // 获取基本配置信息
         getConfig() {
             that.$http.getConfig().then((res) => {
@@ -155,8 +167,21 @@ export default {
 </script>
 <style scoped> 
 @media (max-width: 750px) {
-    .top .title {
-        padding: 60vh 151px 200px;
+    
+    .top {
+        box-sizing: border-box;
+        padding: 491px 100px 100px;
+        height: 1080px !important;
+    }
+    .videoContainer {
+        height: 1080px !important;
+    }
+    .center {
+        min-height: 1080px;
+        background: #FFFFFF;
+        box-sizing: border-box;
+        margin: 150px 0 0;
+        padding: 150px 100px 0;
     }
     
 }
@@ -169,7 +194,7 @@ export default {
     font-size: 60px;
     font-weight: 500;
     color: #fff;
-    padding-bottom: 200px;
+    padding-bottom: 71px;
     padding-left: 151px;
 }
 .top .subTitle {
@@ -186,11 +211,11 @@ export default {
     margin: 58px 0;
 }
 .center {
-    min-height: 100vh;
+    min-height: 1080px;
     background: #FFFFFF;
     box-sizing: border-box;
     margin: 150px 0 0;
-    padding: 150px 100px 0;
+    padding: 150px 100px 400px;
 }
 .center .first {
     width: 700px;
@@ -236,6 +261,15 @@ export default {
 .center .item .title {
     font-size: 38px;
     font-weight: 500;
+    overflow:hidden; 
+    text-overflow:ellipsis;
+    display:-webkit-box; 
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2; 
+    line-clamp:2; 
+    box-orient:vertical;
+    line-height: 70px;
+    height: 140px;
     /* color: #333333; */
 }
 .center .item .text2 {

xinxuan/src/view/product.vue

@@ -3,13 +3,13 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
                 </video> -->
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anoymous" v-if="pageData.type=='video'">
                     <source :src="pageData.p_url" type="video/mp4" />
                 </video>
-                <el-image :lazy="true" :src="pageData.p_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
+                <el-image  :src="pageData.p_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="title">{{ pageData.p_title }}</div>  
             <div class="subTitle" v-html="pageData.p_subtitle"></div>  
@@ -23,7 +23,7 @@
                         <!-- <div v-html="pageData.info.subTitle"></div> -->
                     </div>
                     <div class="info-img">
-                        <el-image :lazy="true" fit="cover" :src="pageData.p_pic" alt=""  v-if="pageData.p_pic !== undefind">
+                        <el-image  fit="cover" :src="pageData.p_pic" alt=""  v-if="pageData.p_pic != undefind">
                         </el-image>
                         <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                     </div>
@@ -47,8 +47,8 @@
             </div>
         </div>
         <div class="bottom">
-            <!-- <video muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" :src="pageData.video"></video> -->
-            <el-image :lazy="true" fit="cover" :src="pageData.z_pic" alt="" class="img"  v-if="pageData.z_pic !== undefind" />
+            <!-- <video muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous" :src="pageData.video"></video> -->
+            <el-image  fit="cover" :src="pageData.z_pic" alt="" class="img"  v-if="pageData.z_pic != undefind" />
             <div class="bottom_content">
                 <div class="title">总结：</div>  
                 <div class="subTitle" v-html="pageData.zongjie"></div>  
@@ -77,19 +77,29 @@ export default {
             pageList: [],
             num: 0,
             footer: {},
-            scroll_top: 0
+            scroll_top: 0,
+            autoplay: true,
+
         }
     },
     created() {
         that = this
         that.getConfig()
         that.getData()
+        that.isBrow()
+
     },
     mounted() {
         window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
 
     },
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
+                that.autoplay = false
+            }
+        },
         // 获取基本配置
         getConfig() {
             that.$http.getConfig().then((res) => {
@@ -145,11 +155,6 @@ export default {
     min-height: 100vh;
 }
 
-@media (max-width: 750px) {
-    .top .title {
-        padding: 60vh 151px 200px;
-    }
-}
 .top .title {
     font-size: 60px;
     font-weight: 500;
@@ -262,19 +267,14 @@ export default {
     background-image: linear-gradient(to right , #fb3569 45%, #333 55%);
     background-position: 100%, 50%;
     background-size: 220% 100%;
-    transition: 0.5s ease-out;
+    transition: 1s ease-out;
+    -webkit-background-clip: text;
+
     background-clip: text;
     background-repeat: no-repeat;
 }
 
-/* .list .item_right a {
-    background-image: radial-gradient(closest-side, #fb3569 50%,transparent 100%),linear-gradient(to bottom, #333,#333);
-    background-size: 0% 0%,100% 100%;
-    background-position: 50%, 50%, center;
-    transition: 0.5s ease-out;
-    background-clip: text;
-    background-repeat: no-repeat;
-} */
+
 .list .item_right:hover .item_right_text {
     /* color: #666; */
     background-position: 0% 50%;
@@ -286,16 +286,210 @@ export default {
 
 }
 
-@media (max-width: 750px) {
-    .list .item_right .item_right_text2 {
-        overflow:hidden; 
-        text-overflow:ellipsis;
-        white-space: nowrap;
-        /* display:-webkit-box;  */
-        /* -webkit-box-orient:vertical; */
-        /* -webkit-line-clamp:2;  */
+.list .item_right .icon_right {
+    width: 129px;
+    height: 106px;
+}
+.list .item_right:hover .icon_right {
+    animation: tran 0.2s linear;
+    animation-iteration-count: 1
+}
+@keyframes tran {
+    0% {
+        transform: translate3d(-50px, 0 ,0);
+        opacity: 0;
     }
+    
+    100% {
+        transform: translate(0 ,0);
+        opacity: 1;
+    }
+ }
+.bottom {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 82px 200px;
+}
+.bottom .img {
+    width: 100%;
+    height: 100%;
+    /* object-fit: cover; */
 }
+.bottom .bottom_content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 180px 301px;
+}
+.bottom .bottom_content .title,.subTitle {
+    font-size: 60px;
+    font-weight: 600;
+    color: #fff;
+    line-height: 60px;
+}
+.bottom .bottom_content .title {
+    padding-bottom: 44px;
+}
+.topping {
+    position: fixed;
+    bottom: 100px;
+    right: 45px;
+    z-index: 999;
+    width: 100px;
+    height: 100px;
+    background: #000000;
+    opacity: 0.3;
+    border-radius: 10px;
+}
+.topping img {
+    width: 53px;
+    height: 57px;
+}
+
+@media (max-width: 750px) {
+    .top {
+    box-sizing: border-box;
+    padding: 464px 100px 0;
+    min-height: 1080px;
+}
+
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 200px;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
+.center {
+    background: #fff;
+    box-sizing: border-box;
+    padding: 0 202px;
+    min-height: 1080px;
+}
+.info {
+    width: 100%;
+    padding: 150px 0 75px;
+    /* padding: 129px 0 0; */
+}
+.info-h {
+    padding: 129px 0 0;
+    border-top: 4px solid #ccc;
+}
+.info-h .info-text {
+    font-size: 80px;
+    font-weight: 500;
+    color: #333333;
+    margin-right: 38px;
+}
+.info-h .info-img {
+    width: 1058px;
+    height: 722px;
+    position: relative;
+}
+/deep/ .info-h .info-img .el-image {
+    width: 100%;
+    height: 100%;
+}
+.info-h .info-img .img_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.list {
+    padding: 150px 0 34px;
+    width: 100%;
+}
+.list .item_left {
+    width: 450px;
+    height: 296px;
+    /* padding: 60px 0; */
+    border-top: 2px solid #191818;
+    /* border-bottom: 2px solid #191818; */
+}
+.list div:nth-last-child(1) .item_left {
+    border-bottom: 2px solid #191818;
+}
+.list .item_left .item_left_top {
+    font-size: 42px;
+    font-weight: 400;
+    color: #666666;
+}
+.list .item_left .item_left_index {
+    font-size: 140px;
+    font-weight: bold;
+    color: #333333;
+    /* padding-top: 40px; */
+}
+.list .item_right {
+    width: 992px;
+    height: 296px;
+
+    padding: 60px 0;
+    border-top: 2px solid #191818;
+}
+.list div:nth-last-child(1) .item_right {
+    border-bottom: 2px solid #191818;
+}
+.list .item_right .item_right_text,.item_right_text2 {
+    font-size: 36px;
+    font-weight: 500;
+    color: transparent;
+    max-width: 779px;
+    overflow:hidden; 
+    text-overflow:ellipsis;
+    display:-webkit-box; 
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2; 
+    line-clamp:2; 
+    box-orient:vertical;
+    padding: 10px 0 0;
+   
+    /* line-height: 48px; */
+}
+.list .item_right a {
+    background-image: linear-gradient(to right , #fb3569 45%, #333 55%);
+    background-position: 100%, 50%;
+    background-size: 220% 100%;
+    transition: 1s ease-out;
+    -webkit-background-clip: text;
+    width: 100%;
+    background-clip: text;
+    background-repeat: no-repeat;
+}
+
+
+.list .item_right:hover .item_right_text {
+    /* color: #666; */
+    background-position: 0% 50%;
+}
+
+.list .item_right:hover .item_right_text2 {
+    /* color: #666; */
+    background-position: 0% 50%;
+
+}
+
 .list .item_right .icon_right {
     width: 129px;
     height: 106px;
@@ -317,7 +511,7 @@ export default {
  }
 .bottom {
     width: 100%;
-    height: 100vh;
+    height: 1080px;
     position: relative;
     background: #fff;
     box-sizing: border-box;
@@ -362,4 +556,6 @@ export default {
     height: 57px;
 }
 
+}
+
 </style>

xinxuan/src/view/trade.vue

@@ -3,13 +3,13 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
                 </video> -->
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anoymous" v-if="pageData.type=='video'">
                     <source :src="pageData.k_url" type="video/mp4" />
                 </video>
-                <el-image :lazy="true" :src="pageData.k_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
+                <el-image  :src="pageData.k_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="title">{{ pageData.k_title }}</div>  
             <div class="subTitle" v-html="pageData.x_subtitle"></div>  
@@ -23,7 +23,7 @@
                         <!-- <div v-html="pageData.info.subTitle"></div> -->
                     </div>
                     <div class="info-img">
-                        <el-image :lazy="true" fit="cover" :src="pageData.k_pic" alt=""  v-if="pageData.k_pic !== undefind">
+                        <el-image  fit="cover" :src="pageData.k_pic" alt=""  v-if="pageData.k_pic !== undefind">
                         </el-image>
                         <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                     </div>
@@ -34,7 +34,7 @@
                 <div class="line"></div>
                 <div  class="hflex acenter fwrap imgs">
                     <div v-for="(item,index) in pageList" :key="index" class="list_item">
-                        <el-image :lazy="true" fit="cover" :src="item.url" alt="" class="img"  v-if="item.url !== undefind"/>
+                        <el-image  fit="cover" :src="item.url" alt="" class="img"  v-if="item.url !== undefind"/>
                         <div class="text">{{ item.title }}</div>
                     </div> 
                 </div>
@@ -63,19 +63,29 @@ export default {
             pageData: {},
             pageList: [],
             footer: {},
-            scroll_top: 0
+            scroll_top: 0,
+            autoplay: true,
+
         }
     },
     created() {
         that = this
         that.getConfig()
         that.getList()
+        that.isBrow()
+
     },
     mounted() {
         window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
 
     },
     methods: {
+        isBrow() {
+            var ua = navigator.userAgent.toLowerCase();
+            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
+                that.autoplay = false
+            }
+        },
         // 获取基础配置信息
         getConfig() {
             that.$http.getConfig().then((res) => {
@@ -126,17 +136,7 @@ export default {
     min-height: 100vh;
 }
 
-@media (max-width: 750px) {
-    .center {
-        min-height: 1370px !important;
-    }
-    .top .title {
-        padding: 60vh 151px 200px;
-    }
-    .center .list .list_item .text {
-        opacity: 1 !important;
-    }
-}
+
 .top .title {
     font-size: 60px;
     font-weight: 500;
@@ -258,4 +258,21 @@ export default {
     width: 53px;
     height: 57px;
 }
+@media (max-width: 750px) {
+    .top {
+        box-sizing: border-box;
+        padding: 464px 100px 0;
+        min-height: 1080px !important;
+    }
+
+    .center {
+        min-height: 1080px !important;
+    }
+    .top .title {
+        padding: 0 151px 200px;
+    }
+    .center .list .list_item .text {
+        opacity: 1 !important;
+    }
+}
 </style>

xinxuan/vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
   assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
   publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏）
   devServer: {
-    host: 'localhost',
+    host: '192.168.2.97',
     port: 8080,
     // 跨域
     proxy: {
@@ -28,6 +28,7 @@ module.exports = {
   //   打包后禁止在控制台输出console.log
   configureWebpack: (config) => {
     if (process.env.NODE_ENV === 'production') {
+      
       config.plugins.push(
         new TerserPlugin({
           terserOptions: {