fix(pay): 方法行还原 Zibll 原样(不换行),项目收缩成芯片一行排满
上一轮给方法行加的 hh(flex-wrap:wrap)方向错误:行级换行使项目保持 「图标左+文字右」的宽形态直接断行(3+2 布局),永远不会收缩成参考 主题的芯片形态。Zibll 的真实机制是行不换行、项目经 flex 收缩后由项 内 hh 将文字折到图标下方,形成「图标上/文字下」窄芯片一行排满。 - 三处方法行还原为 flex mb10(与参考主题逐字一致):充值/积分模板 与会员 pay-vip.js - 图标不变形由既有防护保障(flex:none + width:auto + max-width:none 抵消 bootstrap 全局 img 钳制) - 无头 Chrome 实测(bootstrap+main 真实加载组合,400px 弹窗):5 渠 道一行 5 个芯片(62-73px、图标 35px),6 渠道一行 6 个(53-62px、 stripe 宽形 84px),与 Zibll 同 fixture 形态一致 - 契约测试同步:行标记锁定无 hh、img 四属性防变形断言保留(322 项 全部通过)
This commit is contained in:
1 parent
be07db3409
commit
89801236eb
4 files changed
+14
-12
No files matched your search
@@ -135,7 +135,7 @@
|
|||||||
// 与余额充值/购买积分弹窗完全一致的组件)。
|
// 与余额充值/购买积分弹窗完全一致的组件)。
|
||||||
if (methods.length > 1) {
|
if (methods.length > 1) {
|
||||||
append(parent, node("div", "muted-2-color em09 mb6", "请选择支付方式"));
|
append(parent, node("div", "muted-2-color em09 mb6", "请选择支付方式"));
|
||||||
var row = node("div", "flex hh mb10");
|
var row = node("div", "flex mb10");
|
||||||
methods.forEach(function (method, index) {
|
methods.forEach(function (method, index) {
|
||||||
var id = text(method.id || "balance");
|
var id = text(method.id || "balance");
|
||||||
var item = node("div", "flex jc hh payment-method-radio hollow-radio flex-auto pointer" + (index === 0 ? " active" : ""));
|
var item = node("div", "flex jc hh payment-method-radio hollow-radio flex-auto pointer" + (index === 0 ? " active" : ""));
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ $currency = (string) ($currency_name ?? __('积分', 'aksrt'));
|
|||||||
<div class="dependency-box">
|
<div class="dependency-box">
|
||||||
<?php if (count($points_methods) > 1) : ?>
|
<?php if (count($points_methods) > 1) : ?>
|
||||||
<div class="muted-2-color em09 mb6"><?php esc_html_e('请选择支付方式', 'aksrt'); ?></div>
|
<div class="muted-2-color em09 mb6"><?php esc_html_e('请选择支付方式', 'aksrt'); ?></div>
|
||||||
<div class="flex hh mb10">
|
<div class="flex mb10">
|
||||||
<?php foreach ($points_methods as $pmi => $pm) :
|
<?php foreach ($points_methods as $pmi => $pm) :
|
||||||
$pm_id = (string) ($pm['id'] ?? '');
|
$pm_id = (string) ($pm['id'] ?? '');
|
||||||
$pm_logo = 'card_pass' === $pm_id ? 'pay-card-pass-logo.svg' : 'pay-balance-logo.svg';
|
$pm_logo = 'card_pass' === $pm_id ? 'pay-card-pass-logo.svg' : 'pay-balance-logo.svg';
|
||||||
|
|||||||
@@ -180,7 +180,7 @@ $charge_custom_block = static function () use ($mark, $charge_mark_html, $charge
|
|||||||
<div class="dependency-box">
|
<div class="dependency-box">
|
||||||
<?php if (count($methods) > 1) : ?>
|
<?php if (count($methods) > 1) : ?>
|
||||||
<div class="muted-2-color em09 mb6"><?php esc_html_e('请选择支付方式', 'aksrt'); ?></div>
|
<div class="muted-2-color em09 mb6"><?php esc_html_e('请选择支付方式', 'aksrt'); ?></div>
|
||||||
<div class="flex hh mb10">
|
<div class="flex mb10">
|
||||||
<?php foreach ($methods as $mi => $m) :
|
<?php foreach ($methods as $mi => $m) :
|
||||||
$method_id = (string) ($m['id'] ?? '');
|
$method_id = (string) ($m['id'] ?? '');
|
||||||
$method_logo = $charge_method_logos[$method_id] ?? '';
|
$method_logo = $charge_method_logos[$method_id] ?? '';
|
||||||
|
|||||||
@@ -202,19 +202,21 @@ test('核销订单契约:金额恒为 0,订单名称按 note 生成', () =>
|
|||||||
assert.match(userOrders, /永久/);
|
assert.match(userOrders, /永久/);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('多渠道防挤压:图标 flex:none + 方法行 hh 换行(三弹窗一致)', () => {
|
test('多渠道防挤压:图标 flex:none + 行不换行项目收缩成芯片(对齐 Zibll)', () => {
|
||||||
// 图标禁用 flex 压缩(参考主题同场景存在变形缺陷,实测 6 渠道 360px
|
// 图标禁用 flex 压缩并抵消 AKSRT bootstrap 全局 img{max-width:100%}
|
||||||
// 容器图标被压至 31px、宽形 stripe 被压成 35px 方形);并抵消 AKSRT
|
// (flex 压缩时把图标钳制到被压窄的项宽,实测 5 渠道 400px 弹窗图标
|
||||||
// bootstrap 全局 img{max-width:100%}(flex 压缩时把图标钳制到被压窄
|
// 被压成 16px 细条)。行保持 Zibll 原样不换行:空间不足时项目收缩为
|
||||||
// 的项宽,实测 5 渠道 400px 弹窗图标被压成 16px 细条)。
|
// 「图标上/文字下」芯片(实测 5 渠道一行 5 个、6 渠道一行 6 个,图标
|
||||||
|
// 恒为固有比例),绝不允许整行提前断行。
|
||||||
const rule = mainCss.match(/\.payment-method-radio img \{[\s\S]*?\n\}/);
|
const rule = mainCss.match(/\.payment-method-radio img \{[\s\S]*?\n\}/);
|
||||||
assert.ok(rule, 'main.css 应存在 .payment-method-radio img 规则块');
|
assert.ok(rule, 'main.css 应存在 .payment-method-radio img 规则块');
|
||||||
assert.match(rule[0], /height:\s*35px;/);
|
assert.match(rule[0], /height:\s*35px;/);
|
||||||
assert.match(rule[0], /width:\s*auto;/);
|
assert.match(rule[0], /width:\s*auto;/);
|
||||||
assert.match(rule[0], /max-width:\s*none;/);
|
assert.match(rule[0], /max-width:\s*none;/);
|
||||||
assert.match(rule[0], /flex:\s*none;/);
|
assert.match(rule[0], /flex:\s*none;/);
|
||||||
// 方法行启用 hh 换行(.flex.hh{flex-wrap:wrap}),放不下时整行换行。
|
// 方法行标记与参考主题逐字一致(.flex.mb10,无 hh)。
|
||||||
assert.match(wallet, /class="flex hh mb10"/);
|
assert.match(wallet, /class="flex mb10">/);
|
||||||
assert.match(creditsRenderer, /class="flex hh mb10"/);
|
assert.match(creditsRenderer, /class="flex mb10">/);
|
||||||
assert.match(payVipJs, /node\("div", "flex hh mb10"\)/);
|
assert.match(payVipJs, /node\("div", "flex mb10"\)/);
|
||||||
|
assert.doesNotMatch(payVipJs, /"flex hh mb10"/);
|
||||||
});
|
});
|
||||||
Reference in new issue
Block a user