update @样式兼容 模版+H5/PC

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
+// 模版打包 PC兼容 固定667px盒子
-$bodyWidth: 30vw;
+.comWrapperPC {
-$leftInit: 35vw;
+  min-height: 667px !important;
-$rightInit: 35vw;
+  // 说明弹窗-fixed
-
-@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;
-    }
-  }
-  // 活动/商品 说明弹窗
   .popWrapper {
-    max-width: $bodyWidth;
+    position: absolute;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
   }
-
+}
-  // 温馨提示 弹窗
-  .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;
-  }
-}

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

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'
 

src/router/index.ts

@@ -20,7 +20,7 @@ const routePublic = [
 ];
 
 // 模版路由 命名：cmsXXX
-// 需要：类组件开发、样式外部 index.scss 文件引入（禁用 vh，fixed 窗口相关样式）
+// 需要：类组件开发、样式外部 index.scss 文件引入（不推荐 vh，fixed 窗口相关样式）
 const routeTemplate = [
   {
     // 商品列表模版

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;