Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(diy-card): 修复两处 WXSS 不兼容 calc() + MP 兼容契约测试

Browse Source 
微信小程序 WXSS 不支持 calc(), 两处布局在小程序上会失效:

- mini.vue corner 档: max-width: calc(100% - 170rpx) →
  .mini-head { padding-right: 180rpx }(固定值, 浮层宽 120+偏移 20+呼吸 20)
- list.vue 网格: itemStyle width calc(50% - gap/2) →
  布局盒 50% 宽 + 左右各 half-gap padding, 视觉移入内层 .item-card
  (border/圆角/padding 随之下移, 布局盒透明只算 gutter)
- 新增 tests/diy-card-mp-compat.test.js 20 项: 全组件禁 calc()/var(--)
  (先剥注释再断言) + template 标签配平(栈式匹配, 兼容插槽嵌套 template)
  + 反例自测

注: 渐变角度 linear-gradient(deg,...) 有生产先例(detail/enterprise/
forward 均在生产小程序运行), 不在禁项; 真机渲染需 HBuilderX 构建验证。
验证: 46/46(三个名片测试文件) + npm test 仅剩两个存量失败
This commit is contained in:
ZF Sun
2026-10-21 11:58:35 +08:00
parent a841af8f5b
commit 8bdd9f1291
3 changed files with 137 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components-diy/diy-card-list.vue
View File

@@ -37,18 +37,22 @@
<view v-else-if="list.length" :class="['wall-grid', layout === 'list' ? 'is-list' : 'is-grid']">
<view v-for="(item, index) in list" :key="'g' + index" class="wall-item fade-up"
:style="[itemStyle, { animationDelay: (index * 60) + 'ms' }]" hover-class="btn-press" @tap="goDetail(item)">
<view class="item-avatar" :style="avatarStyle(item)">
<image v-if="item.avatar" class="avatar-img" :src="$util.img(item.avatar)" mode="aspectFill" />
<text v-else class="avatar-initial">{{ initialOf(item.name) }}</text>
</view>
<view class="item-info">
<view class="name-row">
<text class="item-name" :style="nameStyle">{{ item.name || '未命名名片' }}</text>
<text v-if="isEnterprise(item)" class="item-badge" :style="badgeStyle(item)">企业</text>
<!-- 内层卡片: 布局盒(wall-item)只负责 50% 宽+左右 gutter, 视觉在此层
(WXSS 不支持 calc(), 不能用 calc(50% - gap/2)) -->
<view class="item-card">
<view class="item-avatar" :style="avatarStyle(item)">
<image v-if="item.avatar" class="avatar-img" :src="$util.img(item.avatar)" mode="aspectFill" />
<text v-else class="avatar-initial">{{ initialOf(item.name) }}</text>
</view>
<text v-if="infoLine(item)" class="item-meta" :style="infoStyle">{{ infoLine(item) }}</text>
<view class="item-info">
<view class="name-row">
<text class="item-name" :style="nameStyle">{{ item.name || '未命名名片' }}</text>
<text v-if="isEnterprise(item)" class="item-badge" :style="badgeStyle(item)">企业</text>
</view>
<text v-if="infoLine(item)" class="item-meta" :style="infoStyle">{{ infoLine(item) }}</text>
</view>
<text v-if="showArrow" class="item-arrow" :style="infoStyle">›</text>
</view>
<text v-if="showArrow" class="item-arrow" :style="infoStyle">›</text>
</view>
</view>
@@ -144,11 +148,17 @@ export default {
},
itemStyle() {
const gap = num(this.v.gap, 10);
const width = this.layout === 'list' || this.columns === 1 ? '100%' : 'calc(50% - ' + px2rpx(gap / 2) + 'rpx)';
return this.$util.objToStyle({
width: width,
marginBottom: px2rpx(gap) + 'rpx',
});
const isGrid = this.layout !== 'list' && this.columns !== 1;
const style = { marginBottom: px2rpx(gap) + 'rpx' };
if (isGrid) {
// WXSS 不支持 calc(): 50% 宽 + 左右各 half-gap 作 gutter(视觉在内层 item-card)
style.width = '50%';
style.paddingLeft = px2rpx(gap / 2) + 'rpx';
style.paddingRight = px2rpx(gap / 2) + 'rpx';
} else {
style.width = '100%';
}
return this.$util.objToStyle(style);
},
scrollItemStyle() {
return this.$util.objToStyle({
@@ -272,11 +282,18 @@ export default {
.wall-item {
box-sizing: border-box;
display: flex;
align-items: center;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
padding: 20rpx;
overflow: hidden;
/* 视觉卡片层: 布局盒只算宽度与 gutter, 不画外观 */
.item-card {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
padding: 20rpx;
overflow: hidden;
}
.item-avatar {
flex-shrink: 0;

6
components-diy/diy-card-mini.vue
View File

@@ -548,8 +548,10 @@ export default {
margin-top: 108rpx;
}
.mini-head-info {
max-width: calc(100% - 170rpx);
/* 头部右侧留出浮层宽度: WXSS 不支持 calc(), 用固定 padding-right
(浮层 120rpx + 右偏移 20rpx + 呼吸 20rpx ≈ 160, 取 180 富余) */
.mini-head {
padding-right: 180rpx;
}
}