终极大招：网页、ios用视频，安卓用动图。

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "latest",
+        "ismobilejs": "1.1.1",
         "kdoffical": "file:",
         "path": "latest",
         "sass": "latest",
@@ -1259,6 +1260,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==",
+      "license": "MIT"
+    },
     "node_modules/kdoffical": {
       "resolved": "",
       "link": true
@@ -2240,6 +2247,11 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "optional": true
     },
+    "ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
+    },
     "kdoffical": {
       "version": "file:",
       "requires": {
@@ -2247,6 +2259,7 @@
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "latest",
+        "ismobilejs": "1.1.1",
         "kdoffical": "file:",
         "path": "latest",
         "sass": "latest",
@@ -2925,6 +2938,11 @@
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
           "optional": true
         },
+        "ismobilejs": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+          "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
+        },
         "magic-string": {
           "version": "0.30.17",
           "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

package.json

@@ -15,7 +15,8 @@
     "path": "latest",
     "sass": "latest",
     "vue": "^3.2.45",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "ismobilejs": "1.1.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/components/Toolbar.vue

@@ -210,6 +210,9 @@ export default {
   width: 100%;
   align-items: center;
   justify-content: center;
+  transform: translateZ(3px); // 添加这行
+  -webkit-transform: translateZ(3px); // 添加这行
+  will-change: transform; // 添加这行，促使创建新的渲染层
   @include media-breakpoint-between(xs, md) {
     height:70px;
   }

src/components/Tools/MobileToolbar.vue

@@ -83,6 +83,9 @@ export default {
 #mobilebarroot{
   position: fixed;
   z-index: 100;
+  transform: translateZ(3px); // 添加这行
+  -webkit-transform: translateZ(3px); // 添加这行
+  will-change: transform; // 添加这行
   @include media-breakpoint-between(xs, md) {
     background-color: black;
     display: flex;

src/main.js

@@ -12,4 +12,18 @@ const app = createApp(App)
 axios.defaults.baseURL = 'https://cms.yangprivate.site'
 // 全局挂载 axios，所有组件都可以 this.$axios 访问
 app.config.globalProperties.$axios = axios
+
+// 安全地获取 User Agent 并进行检测
+let mobileDetectResult;
+if (typeof navigator !== 'undefined') {
+    // isMobile() 函数需要一个 user-agent 字符串作为参数
+    mobileDetectResult = isMobile(navigator.userAgent);
+} else {
+    // 为服务器端渲染 (SSR) 或其他非浏览器环境提供回退
+    // isMobile('') 会返回一个所有检测标志都为 false 的对象
+    mobileDetectResult = isMobile('');
+}
+
+app.config.globalProperties.$isMobile = mobileDetectResult;
+
 app.use(router).mount('#app')

src/publicstyle.scss

@@ -38,12 +38,33 @@
   width: 100%;
   height: auto;
   background-color: black;
-  position: relative
+  position: relative;
+  z-index: 0; // 明确设置父容器z-index
+  overflow: hidden; // 帮助创建新的堆叠上下文
 }
 
 .bannervideos{
   width: 100%;
   z-index: 0;
+  position: relative; // 确保创建堆叠上下文
+  transform: translateZ(0); // 创建新的渲染层
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden; // 帮助创建硬件加速层
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d; // 增强Android WebView渲染
+  // Android特定视频处理
+  -webkit-mask-image: -webkit-radial-gradient(white, black); // 帮助Android处理视频层
+}
+
+.videoimg{
+  width: 100%;
+  z-index: 0;
+  position: relative; // 确保创建堆叠上下文
+  transform: translateZ(0); // 创建新的渲染层
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden; // 帮助创建硬件加速层
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d; // 增强Android WebView渲染
 }
 
 .bannerovervideo{
@@ -59,6 +80,8 @@
   align-items: center;
   justify-content: flex-start;
   z-index: 2;
+  transform: translateZ(1px); // 强制高于视频层
+  -webkit-transform: translateZ(1px);
   pointer-events: none;
 }