|
|
@@ -34,36 +34,14 @@
|
|
|
<!-- 日期选择 (数字按钮形式) -->
|
|
|
<div class="birthday-section">
|
|
|
<div class="section-title">日期</div>
|
|
|
- <div class="date-buttons-container">
|
|
|
- <view class="date-buttons-wrapper">
|
|
|
- <!-- 顶部渐变遮罩 -->
|
|
|
- <div class="scroll-indicator top"></div>
|
|
|
-
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- class="date-buttons-scroll"
|
|
|
- enhanced="true"
|
|
|
- show-scrollbar="false"
|
|
|
- always-bounce-vertical="true"
|
|
|
- :style="{ height: '200upx' }"
|
|
|
- >
|
|
|
- <div class="date-buttons">
|
|
|
- <button
|
|
|
- v-for="(date, index) in dateArray"
|
|
|
- :key="date"
|
|
|
- class="date-button"
|
|
|
- :class="{ active: birthdayDate == date }"
|
|
|
- @click="birthdayDate = date"
|
|
|
- >{{ date }}</button>
|
|
|
- </div>
|
|
|
- </scroll-view>
|
|
|
-
|
|
|
- <!-- 底部渐变遮罩 -->
|
|
|
- <div class="scroll-indicator bottom"></div>
|
|
|
-
|
|
|
- <!-- 右侧滚动条指示 -->
|
|
|
- <div class="scroll-bar-indicator"></div>
|
|
|
- </view>
|
|
|
+ <div class="date-buttons">
|
|
|
+ <button
|
|
|
+ v-for="(date, index) in dateArray"
|
|
|
+ :key="date"
|
|
|
+ class="date-button"
|
|
|
+ :class="{ active: birthdayDate == date }"
|
|
|
+ @click="birthdayDate = date"
|
|
|
+ >{{ date }}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -152,7 +130,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
- font-size: 15upx;
|
|
|
+ font-size: 10upx;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 6upx;
|
|
|
color: #333;
|
|
|
@@ -218,66 +196,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.date-buttons-container {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
|
|
|
-.date-buttons-wrapper {
|
|
|
- height: 120upx;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- border: 1upx solid #e0e0e0;
|
|
|
- border-radius: 6upx;
|
|
|
- background-color: #f8f9fa;
|
|
|
-}
|
|
|
-
|
|
|
-.date-buttons-scroll {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- overflow: auto;
|
|
|
- padding: 5upx 0;
|
|
|
- -webkit-overflow-scrolling: touch; /* 平滑滚动 */
|
|
|
-}
|
|
|
-
|
|
|
-/* 滚动指示器 */
|
|
|
-.scroll-indicator {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 20upx;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 2;
|
|
|
-}
|
|
|
-
|
|
|
-.scroll-indicator.top {
|
|
|
- top: 0;
|
|
|
- background: linear-gradient(to bottom, rgba(248, 249, 250, 0.95), rgba(248, 249, 250, 0));
|
|
|
-}
|
|
|
-
|
|
|
-.scroll-indicator.bottom {
|
|
|
- bottom: 0;
|
|
|
- background: linear-gradient(to top, rgba(248, 249, 250, 0.95), rgba(248, 249, 250, 0));
|
|
|
-}
|
|
|
-
|
|
|
-/* 右侧滚动条指示 */
|
|
|
-.scroll-bar-indicator {
|
|
|
- position: absolute;
|
|
|
- top: 10upx;
|
|
|
- bottom: 10upx;
|
|
|
- right: 2upx;
|
|
|
- width: 3upx;
|
|
|
- border-radius: 3upx;
|
|
|
- background-color: rgba(0, 118, 255, 0.2);
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
|
|
|
.date-buttons {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
- padding: 5upx;
|
|
|
- /* 确保内容足够高,显示滚动效果 */
|
|
|
- min-height: 140upx;
|
|
|
+ gap: 3upx;
|
|
|
}
|
|
|
|
|
|
.date-button {
|