From f4c755c42e7bc8f02adc130f1d9c21387449bad0 Mon Sep 17 00:00:00 2001
From: huangzhen <huangzhen@rd3.ngsoft.com>
Date: Tue, 5 Nov 2024 16:04:04 +0800
Subject: [PATCH] =?UTF-8?q?update=20@=E6=A0=B7=E5=BC=8F=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=20=E6=A8=A1=E7=89=88+H5/PC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/global.scss                      | 64 +++-------------------------
 src/globalH5.scss                    | 58 +++++++++++++++++++++++++
 src/main.ts                          |  1 +
 src/router/index.ts                  |  2 +-
 src/views/pages/comProduct/index.vue |  3 +-
 5 files changed, 68 insertions(+), 60 deletions(-)
 create mode 100644 src/globalH5.scss

diff --git a/src/global.scss b/src/global.scss
index edaefab..f93d6b7 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -144,11 +144,6 @@ html {
   }
 }
 
-// PC 模版展示 固定667px盒子
-.comWrapperPC {
-  min-height: 667px !important;
-}
-
 // input 自动填入 背景去除
 input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important;}
 
@@ -158,58 +153,11 @@ input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important;}
   top: 0;
 }
 
-// 兼容 PC
-$bodyWidth: 30vw;
-$leftInit: 35vw;
-$rightInit: 35vw;
-
-@media screen and (min-width: 900px) {
-  html,body,#app {
-    width: $bodyWidth;
-    min-height: 100vh;
-    margin: 0 auto;
-  }
-  html,body {
-    background: rgba(204, 204, 204, 0.3);
-  }
-  #app {
-    background: #FFFFFF;
-  }
-  // 组合商品
-  .comProductBody {
-    .floatImg {
-      right: $rightInit - 0.7vw !important;
-    }
-  }
-  // 订单详情
-  .orderDetailBody {
-    .backIcon {
-      left: $leftInit + 1vw !important;
-    }
-  }
-  // 活动/商品 说明弹窗
+// 模版打包 PC兼容 固定667px盒子
+.comWrapperPC {
+  min-height: 667px !important;
+  // 说明弹窗-fixed
   .popWrapper {
-    max-width: $bodyWidth;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
+    position: absolute;
   }
-
-  // 温馨提示 弹窗
-  .van-overlay {
-    max-width: $bodyWidth !important;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
-  }
-  // 底部弹出输入框
-  .van-popup {
-    max-width: $bodyWidth !important;
-  }
-  .van-popup--bottom {
-    left: 50% !important;
-    transform: translateX(-50%) !important;
-  }
-  // 悬浮气泡
-  .van-floating-bubble {
-    transform: translate3d($bodyWidth + 6vw, 80vh, 0px) !important;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/globalH5.scss b/src/globalH5.scss
new file mode 100644
index 0000000..8e00c85
--- /dev/null
+++ b/src/globalH5.scss
@@ -0,0 +1,58 @@
+// H5 兼容 PC（模版打包不需要）
+$bodyWidth: 30vw;
+$leftInit: 35vw; // 等同 left: 0
+$rightInit: 35vw; // 等同 right: 0
+
+@media screen and (min-width: 900px) {
+  html,body,#app {
+    width: $bodyWidth;
+    min-height: 100vh;
+    margin: 0 auto;
+  }
+  html,body {
+    background: rgba(204, 204, 204, 0.3);
+  }
+  #app {
+    background: #FFFFFF;
+  }
+
+  // vant 组件 - start
+  // 温馨提示 弹窗
+  .van-overlay {
+    max-width: $bodyWidth !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+  // 底部弹出输入框
+  .van-popup {
+    max-width: $bodyWidth !important;
+  }
+  .van-popup--bottom {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+  // 悬浮气泡
+  .van-floating-bubble {
+    transform: translate3d($bodyWidth + 6vw, 80vh, 0px) !important;
+  }
+  // vant 组件 - end
+
+  // 组合商品-fixed
+  .comProductBody {
+    .floatImg {
+      right: $rightInit - 0.7vw !important;
+    }
+  }
+  // 活动/商品 说明弹窗-fixed
+  .popWrapper {
+    max-width: $bodyWidth;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+  // 订单详情-fixed
+  .orderDetailBody {
+    .backIcon {
+      left: $leftInit + 1vw !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index bb2b006..2fff7b2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import './scripts/flexible.js'
 import './global.scss' // 添加全局样式
+import './globalH5.scss' // H5 兼容 PC 样式
 import App from './App.vue'
 import router from './router'
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 67ade08..78d5bd2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,7 +20,7 @@ const routePublic = [
 ];
 
 // 模版路由 命名：cmsXXX
-// 需要：类组件开发、样式外部 index.scss 文件引入（禁用 vh，fixed 窗口相关样式）
+// 需要：类组件开发、样式外部 index.scss 文件引入（不推荐 vh，fixed 窗口相关样式）
 const routeTemplate = [
   {
     // 商品列表模版
diff --git a/src/views/pages/comProduct/index.vue b/src/views/pages/comProduct/index.vue
index 54b807c..8c05b9a 100644
--- a/src/views/pages/comProduct/index.vue
+++ b/src/views/pages/comProduct/index.vue
@@ -719,6 +719,7 @@ export default {
   width: 375px;
   min-height: 100vh;
   background-color: #ffffff;
+  position: relative;
   .floatImg {
     position: fixed;
     display: block;
@@ -735,7 +736,7 @@ export default {
     bottom: 0;
     left: 0;
     background: #fff;
-    z-index: 999;
+    z-index: 9999;
     .backImg {
       display: block;
       position: absolute;