采美百科上测试

src/main/resources/static/css/encyclopedia/index.css

@@ -13,6 +13,7 @@
 .flex-between-center,.floor .article .section .content .footer,.floor .emtyp,.category .name,.category{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .banner{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}
 .banner img{width:1920px;height:510px}
+.banner .mobile-banner{display: none;}
 .category{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:1200px;height:56px;background:#fff;padding:0 24px;margin-top:32px;line-height:56px;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
 .category .name{width:120px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
 .category .name em{display:block;width:1px;height:24px;background:#e3e6eb;margin-right:30px;margin-top:16px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
@@ -60,6 +61,7 @@
 .flex-start-center,.floor .article .section .content .tag-list{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .banner{width:100vw;height:51vw;overflow:hidden}
 .banner img{display:block;height:51vw}
+.banner .pc-banner{display: none;}
 .navigate{display:none !important}
 .category{height:10.8vw}
 .category .name,.category .collapse{display:none}

src/main/resources/templates/encyclopedia/instrument.html

@@ -15,8 +15,11 @@
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
-<div class="banner">
-    <a th:href="${banner.link}"><img th:src="${banner.image}" th:alt="${banner.link}"/></a>
+<div class="banner" th:if="${banner ne null}">
+    <a th:href="${banner.link}">
+        <img th:src="${banner.pcBanner}" th:alt="${banner.link}" class="pc-banner"/>
+        <img th:src="${banner.appBanner}" th:alt="${banner.link}" class="mobile-banner"/>
+    </a>
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">

src/main/resources/templates/encyclopedia/product.html

@@ -15,8 +15,11 @@
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
-<div class="banner">
-    <a th:href="${banner.link}"><img th:src="${banner.image}" th:alt="${banner.link}"/></a>
+<div class="banner" th:if="${banner ne null}">
+    <a th:href="${banner.link}">
+        <img th:src="${banner.pcBanner}" th:alt="${banner.link}" class="pc-banner"/>
+        <img th:src="${banner.appBanner}" th:alt="${banner.link}" class="mobile-banner"/>
+    </a>
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">