优化

hdPad/src/pages/home/components/birthdayEdit.vue

@@ -36,17 +36,20 @@
             <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="true"
+                        show-scrollbar="false"
                         always-bounce-vertical="true"
-                        :style="{ height: '120px' }"
+                        :style="{ height: '200px' }"
                     >
                         <div class="date-buttons">
                             <button 
-                                v-for="date in 31" 
+                                v-for="(date, index) in dateArray" 
                                 :key="'date-'+date" 
                                 class="date-button" 
                                 :class="{ active: birthdayDate == date }"
@@ -54,6 +57,12 @@
                             >{{ date }}</button>
                         </div>
                     </scroll-view>
+                    
+                    <!-- 底部渐变遮罩 -->
+                    <div class="scroll-indicator bottom"></div>
+                    
+                    <!-- 右侧滚动条指示 -->
+                    <div class="scroll-bar-indicator"></div>
                 </view>
             </div>
         </div>
@@ -271,20 +280,59 @@ export default {
 .date-buttons-wrapper {
     height: 120px;
     position: relative;
-    overflow: visible;
+    overflow: hidden;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    background-color: #f8f9fa;
 }
 
 .date-buttons-scroll {
     height: 100%;
     width: 100%;
     overflow: auto;
+    padding: 5px 0;
+    -webkit-overflow-scrolling: touch; /* 平滑滚动 */
+}
+
+/* 滚动指示器 */
+.scroll-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 20px;
+    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: 10px;
+    bottom: 10px;
+    right: 2px;
+    width: 3px;
+    border-radius: 3px;
+    background-color: rgba(0, 118, 255, 0.2);
+    pointer-events: none;
 }
 
 .date-buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 3px;
-    padding: 2px;
+    justify-content: center;
+    padding: 5px;
+    /* 确保内容足够高，显示滚动效果 */
+    min-height: 140px;
 }
 
 .date-button {
@@ -297,11 +345,19 @@ export default {
     align-items: center;
     justify-content: center;
     font-size: 12px;
+    margin: 2px;
+    transition: all 0.2s;
     
     &.active {
         background-color: #0076FF;
         color: white;
         border-color: #0076FF;
+        transform: scale(1.1);
+        box-shadow: 0 2px 4px rgba(0, 118, 255, 0.2);
+    }
+    
+    &:active {
+        background-color: #e8f5ff;
     }
 }