Browse Source

fix: 添加禁用状态样式和逻辑,防止无效点击

master
peijunlei 3 weeks ago
parent
commit
41b2d50925
  1. 4
      public/themes/dist_static/static/css/product.css
  2. 1
      public/themes/dist_static/static/js/product.js
  3. 4
      public/themes/website/1/zh/demo/product.html

4
public/themes/dist_static/static/css/product.css

@ -139,6 +139,10 @@
background: var(--color-primary);
color: var(--color-white);
}
.p-subnav__cta.disabled {
opacity: 0.4;
cursor: not-allowed;
}
body.is-p-subnav .site-header {
transform: translateY(-100%);

1
public/themes/dist_static/static/js/product.js

@ -140,6 +140,7 @@ function selectionModalInit() {
};
document.querySelectorAll("[data-selection-trigger]").forEach((trigger) => {
trigger.addEventListener("click", (event) => {
if (trigger.classList.contains("disabled")) return;
event.preventDefault();
open();
});

4
public/themes/website/1/zh/demo/product.html

@ -147,7 +147,7 @@
<a class="p-subnav__link" href="#p-download" data-p-nav="p-download" role="listitem">资料下载</a>
<a class="p-subnav__link" href="#p-related" data-p-nav="p-related" role="listitem">相关产品</a>
</div>
<a class="p-subnav__cta" href="#p-spec" data-selection-trigger>查看选型表</a>
<a class="p-subnav__cta {if empty($content)}disabled{/if}" href="#p-spec" data-selection-trigger>查看选型表</a>
</div>
</nav>
@ -155,7 +155,7 @@
<section class="p-hero section__wrap">
<div class="p-hero__inner">
<h1 class="section__title">{$title}</h1>
<a class="s-btn s-btn--light s-btn--pill" href="#p-spec" data-selection-trigger>查看选型表</a>
<a class="s-btn s-btn--light s-btn--pill {if empty($content)}disabled{/if}" href="javascript:;" data-selection-trigger>查看选型表</a>
<div class="p-hero__media">
<div class="p-hero__mark" aria-hidden="true">{$sub_title}</div>
<img src="/{:deal_image_url($thumbnail_url)}" width="434" height="601" alt="RA3系列伺服驱动器" />

Loading…
Cancel
Save