赵忠林
aa879f0062
- 添加Sticky组件实现Header吸顶功能 - 优化轮播图触摸事件，防止与页面滚动冲突 - 调整轮播图容器样式，确保手势操作流畅 - 更新Header组件结构以支持粘性布局 - 修复Banner组件中图片列表的key属性问题 - 移除不必要的状态传递和冗余代码
46 lines
1.2 KiB
SCSS
46 lines
1.2 KiB
SCSS
page {
|
||
//background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
|
||
//background-size: 100%;
|
||
background: linear-gradient(to bottom, #e9fff2, #ffffff);
|
||
}
|
||
|
||
.buy-btn{
|
||
height: 70px;
|
||
background: linear-gradient(to bottom, #1cd98a, #24ca94);
|
||
border-radius: 100px;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.cart-icon{
|
||
background: linear-gradient(to bottom, #bbe094, #4ee265);
|
||
border-radius: 100px 0 0 100px;
|
||
height: 70px;
|
||
}
|
||
}
|
||
|
||
/* 轮播图容器样式，确保不阻止页面滚动 */
|
||
.banner-swiper-container {
|
||
touch-action: pan-y !important;
|
||
|
||
.nut-swiper {
|
||
touch-action: pan-y !important;
|
||
pointer-events: none; // 关键修改：禁用Swiper的指针事件
|
||
|
||
.nut-swiper-item {
|
||
touch-action: pan-y !important;
|
||
pointer-events: none; // 关键修改：禁用Swiper Item的指针事件
|
||
|
||
image {
|
||
pointer-events: auto; // 重新启用图片的指针事件，以便点击功能正常
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 吸顶状态下的样式 */
|
||
.nutui-sticky--fixed {
|
||
.header-bg {
|
||
height: 100%;
|
||
}
|
||
} |