diff --git a/src/components/ImageSwiper/styles/index.scss b/src/components/ImageSwiper/styles/index.scss index 66e0eb9..ecf2fc1 100644 --- a/src/components/ImageSwiper/styles/index.scss +++ b/src/components/ImageSwiper/styles/index.scss @@ -25,6 +25,9 @@ display: flex; align-items: flex-end; flex-direction: row; + flex-wrap: nowrap; + max-width: 100%; + box-sizing: border-box; } .custom-indicator { @@ -32,6 +35,11 @@ background: rgba(0, 0, 0, 0.5); border-radius: $uni-border-radius-50px; padding: 0 6px 4px 8px; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + flex-shrink: 0; + white-space: nowrap; } .custom-indicator-text { @@ -43,7 +51,9 @@ } .thumbnail-scroll { - flex: 1; + flex: 1 1 auto; + min-width: 0; // 允许在flex容器中收缩以适配剩余空间 + overflow: auto; // 防止超出thumbnail-box的宽度 height: 100%; white-space: nowrap; } @@ -71,7 +81,7 @@ height: 36px; border-radius: 8px; box-sizing: border-box; - border: 2px solid transparent; + border: 1px solid #171717; transition: all 0.3s ease; display: block; }