Merge branch 'dev/1.0' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into temp221
This commit is contained in:
@@ -1169,7 +1169,88 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
/* 与后端 D:\projects\shop-projects\backend\src\app\component\view\form\css\design.css 对齐:
|
||||
在 .form-wrap 上通过内联 style 写入 --form-* / --label-* 等 CSS 变量,
|
||||
子元素统一读取。 */
|
||||
子元素统一读取。
|
||||
⚠️ 小程序环境修复(2026-09-04):scoped + CSS变量 + inline style 三者结合时,
|
||||
小程序 WXSS 对 inline style 的自定义属性(--*)作用域识别与浏览器 CSSOM 不一致,
|
||||
会出现「H5 正常 / 小程序端 CSS 变量值被吞」的两端表现不一致现象。
|
||||
根因:小程序自定义组件 scoped 把 .form-wrap 编译为 .form-wrap[data-v-xxx],
|
||||
而 inline style 由 Vue 渲染在 .form-wrap 上,无 data-v 标识,WXSS 把整段 inline CSS变量忽略。
|
||||
对策:
|
||||
1) 在这里同时给 :root (H5) / page (小程序) 定义同一组变量兜底,不依赖 inline 通道
|
||||
2) 子元素 var() 加双重 fallback:先 var(--x, <rpx>),再补一个 page/root 兜底
|
||||
3) formWrapStyle 同步输出 inline CSS变量(H5 路径仍生效,scoped 小程序也无副作用)
|
||||
*/
|
||||
:root {
|
||||
/* H5 :root 兜底(scoped 下 :root 不会被 vue 编译进 data-v 选择器) */
|
||||
--form-padding-x: 28rpx;
|
||||
--banner-padding-x: 0rpx;
|
||||
--tip-padding-x: 28rpx;
|
||||
--tip-font-size: 32rpx;
|
||||
--tip-color: #666666;
|
||||
--tip-bg-color: #ffffff;
|
||||
--row-padding-y: 24rpx;
|
||||
--row-min-height: 60rpx;
|
||||
--label-gap: 20rpx;
|
||||
--form-bg-color: #ffffff;
|
||||
--row-divider-color: #f0f0f0;
|
||||
--input-height: 84rpx;
|
||||
--input-radius: 16rpx;
|
||||
--label-fixed-width: 180rpx;
|
||||
--label-font-size: 32rpx;
|
||||
--label-color: #1f2937;
|
||||
--required-color: #ef4444;
|
||||
--checked-color: #3b82f6;
|
||||
--submit-color: #ffffff;
|
||||
--submit-bg-color: #3b82f6;
|
||||
--placeholder-color: #9ca3af;
|
||||
--placeholder-font-size: 28rpx;
|
||||
--textarea-rows: 4;
|
||||
--textarea-line-height: 48rpx;
|
||||
--input-border-color: #e5e7eb;
|
||||
--input-bg-color: #ffffff;
|
||||
--input-focus-border-color: #3b82f6;
|
||||
--input-focus-bg-color: #ffffff;
|
||||
--label-font-weight: 700;
|
||||
--show-row-divider: 0;
|
||||
}
|
||||
/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-WEIXIN-X ||
|
||||
MP-KUAISHOU || MP-LARKDINGTALK || MP-JD || MP-XHS || MP-HARMONY */
|
||||
/* 小程序/鸿蒙:用 view 作为变量载体(与后端 design.css 的 view--form-* 等价) */
|
||||
view {
|
||||
--form-padding-x: 28rpx;
|
||||
--banner-padding-x: 0rpx;
|
||||
--tip-padding-x: 28rpx;
|
||||
--tip-font-size: 32rpx;
|
||||
--tip-color: #666666;
|
||||
--tip-bg-color: #ffffff;
|
||||
--row-padding-y: 24rpx;
|
||||
--row-min-height: 60rpx;
|
||||
--label-gap: 20rpx;
|
||||
--form-bg-color: #ffffff;
|
||||
--row-divider-color: #f0f0f0;
|
||||
--input-height: 84rpx;
|
||||
--input-radius: 16rpx;
|
||||
--label-fixed-width: 180rpx;
|
||||
--label-font-size: 32rpx;
|
||||
--label-color: #1f2937;
|
||||
--required-color: #ef4444;
|
||||
--checked-color: #3b82f6;
|
||||
--submit-color: #ffffff;
|
||||
--submit-bg-color: #3b82f6;
|
||||
--placeholder-color: #9ca3af;
|
||||
--placeholder-font-size: 28rpx;
|
||||
--textarea-rows: 4;
|
||||
--textarea-line-height: 48rpx;
|
||||
--input-border-color: #e5e7eb;
|
||||
--input-bg-color: #ffffff;
|
||||
--input-focus-border-color: #3b82f6;
|
||||
--input-focus-bg-color: #ffffff;
|
||||
--label-font-weight: 700;
|
||||
--show-row-divider: 0;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* 原有 scoped .form-wrap 兜底保留(H5 走这里,小程序走上面的 view 选择器,两端互不干扰) */
|
||||
.form-wrap {
|
||||
background: #fff;
|
||||
/* 默认值兜底:与 ns-newform.config 默认值一致 */
|
||||
|
||||
Reference in New Issue
Block a user