|
|
@@ -18,8 +18,16 @@
|
|
|
<!-- 如果需要分页器 -->
|
|
|
<div class="swiper-pagination"></div>
|
|
|
<!-- 如果需要导航按钮 -->
|
|
|
- <div class="swiper-button-prev"></div>
|
|
|
- <div class="swiper-button-next"></div>
|
|
|
+ <div class="swiper-button-prev">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
|
+ <polyline points="15 18 9 12 15 6"></polyline>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-next">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
|
+ <polyline points="9 18 15 12 9 6"></polyline>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -437,7 +445,6 @@ export default {
|
|
|
/* 导航按钮样式 */
|
|
|
#swiper .banner-swiper .swiper-button-next,
|
|
|
#swiper .banner-swiper .swiper-button-prev {
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
@@ -445,15 +452,38 @@ export default {
|
|
|
backdrop-filter: blur(10px);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
#swiper .banner-swiper .swiper-button-next:hover,
|
|
|
#swiper .banner-swiper .swiper-button-prev:hover {
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- color: #fff;
|
|
|
+ background: rgba(255, 255, 255, 0.25);
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
+/* 箭头图标样式 */
|
|
|
+#swiper .banner-swiper .swiper-button-next svg,
|
|
|
+#swiper .banner-swiper .swiper-button-prev svg {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ stroke: #fff;
|
|
|
+ fill: none;
|
|
|
+}
|
|
|
+
|
|
|
+#swiper .banner-swiper .swiper-button-next:hover svg,
|
|
|
+#swiper .banner-swiper .swiper-button-prev:hover svg {
|
|
|
+ stroke: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 隐藏 Swiper 默认的 ::after 箭头 */
|
|
|
+#swiper .banner-swiper .swiper-button-next::after,
|
|
|
+#swiper .banner-swiper .swiper-button-prev::after {
|
|
|
+ content: '';
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
/* ===== 解决方案列表索引 ===== */
|
|
|
#solutionsIndex {
|
|
|
background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
|
