修改发布日历

src/components/TimePicker/index.module.scss

@@ -0,0 +1,187 @@
+/* 时间选择器弹出层样式 */
+.time-picker-popup {
+  .common-popup-content {
+    padding: 0;
+  }
+}
+
+.popup-handle {
+  width: 32px;
+  height: 4px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  margin: 12px auto;
+}
+
+.picker-container {
+  padding: 26px 16px 0 16px;
+  background: #fff;
+}
+
+.picker-wrapper {
+  position: relative;
+}
+
+.custom-picker {
+  position: relative;
+  width: 100%;
+  height: 216px;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 确保只显示一个选项 */
+  perspective: 1000px;
+  /* 水平布局 */
+  flex-direction: row;
+  /* 确保列之间有适当间距 */
+  gap: 0;
+}
+
+/* 选中项指示器 */
+.picker-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: rgba(22, 24, 35, 0.05);
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(22, 24, 35, 0.1);
+  /* 确保指示器完美覆盖选中项 */
+  margin: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.picker-column {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 水平居中布局 */
+  min-width: 0;
+  /* 确保列之间有适当间距 */
+  padding: 0 8px;
+  
+  &:first-child {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  /* 确保滚动容器正确显示 */
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 84px;
+    pointer-events: none;
+    z-index: 2;
+  }
+  
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+  }
+  
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+  }
+}
+
+.picker-scroll {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
+  /* 确保滚动行为 */
+  scroll-snap-type: y mandatory;
+  /* 优化滚动性能 */
+  overscroll-behavior: contain;
+}
+
+.picker-padding {
+  height: 84px; /* (216 - 48) / 2 = 84px，用于居中对齐 */
+  /* 确保padding区域不可见 */
+  opacity: 0;
+  pointer-events: none;
+}
+
+.picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  width: 100%;
+  font-size: 16px;
+  color: #161823;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  will-change: transform, color;
+  /* 确保每个选项都能正确对齐 */
+  scroll-snap-align: center;
+  /* 水平居中 */
+  text-align: center;
+  
+  &.picker-item-active {
+    color: #161823;
+    font-weight: 600;
+    transform: scale(1.02);
+    
+    .picker-item-text {
+      color: #161823;
+      font-weight: 600;
+    }
+  }
+  
+  &:not(.picker-item-active) {
+    color: rgba(22, 24, 35, 0.6);
+    
+    .picker-item-text {
+      color: rgba(22, 24, 35, 0.6);
+    }
+  }
+}
+
+.picker-item-text {
+  font-size: 16px;
+  color: inherit;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  user-select: none;
+  width: 100%;
+  line-height: 48px;
+  white-space: nowrap;
+  /* 确保文字完美居中 */
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 强制居中对齐 */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 滚动条隐藏 */
+.picker-scroll {
+  ::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+}
+
+/* 移除重复的渐变遮罩代码，已在.picker-column中定义 */