赵忠林
ea5419dfb5
- 设置touchAction样式支持水平垂直滑动 - 调整Swiper组件direction为horizontal -为Swiper.Item添加touchAction样式优化 - 更新CSS样式确保图片点击事件正常- 添加自定义Swiper类名及触摸控制样式 - 启用-webkit-overflow-scrolling提升滚动体验
76 lines
1.8 KiB
SCSS
76 lines
1.8 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; /* 允许垂直滑动 */
|
|
|
|
.nut-swiper-item {
|
|
touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
|
|
|
|
image {
|
|
pointer-events: auto; /* 确保图片点击事件正常 */
|
|
touch-action: manipulation; /* 优化触摸操作 */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 为Swiper容器添加特殊处理 */
|
|
.nut-swiper--horizontal {
|
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
|
}
|
|
}
|
|
|
|
/* 吸顶状态下的样式 */
|
|
.nutui-sticky--fixed {
|
|
.header-bg {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* 为Swiper添加更精确的触摸控制 */
|
|
.nut-swiper {
|
|
touch-action: pan-y !important;
|
|
|
|
.nut-swiper-inner {
|
|
touch-action: pan-x pan-y !important;
|
|
}
|
|
}
|
|
|
|
/* 自定义Swiper样式 */
|
|
.custom-swiper {
|
|
touch-action: pan-y !important;
|
|
|
|
.nut-swiper-item {
|
|
touch-action: pan-x pan-y !important;
|
|
}
|
|
}
|
|
|
|
/* 确保Swiper内部元素不会阻止页面滚动 */
|
|
.banner-swiper-container,
|
|
.custom-swiper,
|
|
.nut-swiper,
|
|
.nut-swiper-item {
|
|
-webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */
|
|
} |