Explorar o código

feat: 实现日历样式

Jack Zhou hai 1 mes
pai
achega
4bbf9ea6e9
Modificáronse 1 ficheiros con 15 adicións e 10 borrados
  1. 15 10
      src/views/DestinationDelivery/src/components/CalendarView.vue

+ 15 - 10
src/views/DestinationDelivery/src/components/CalendarView.vue

@@ -95,20 +95,19 @@ const getMonthData = (current: Date) => {
 :deep(.ant-picker-calendar-body) {
   background-color: #1a1a1a;
 }
+:deep(.ant-picker-cell) {
+  background-color: var(--color-calendar-cell-bg) !important;
+  border: 1px solid var(--color-border) !important;
+}
 
 /* 修复日期格子布局 —— 关键! */
 :deep(.ant-picker-calendar-date) {
-  /* width: calc(100% / 7) !important; */
   height: 100px !important;
   display: block !important;
-  /* float: left !important; */
-  /* box-sizing: border-box !important; */
-  /* padding: 8px !important; */
-  /* text-align: center !important; */
-  /* border: 1px solid #333 !important; */
-  background-color: var(--color-calendar-cell-bg) !important;
-  /* cursor: pointer; */
-  /* position: relative; */
+  border-top: 0px !important;
+  margin: 0 !important;
+  overflow: hidden;
+  transition: none !important;
 }
 .ant-picker-calendar .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view),
 .ant-picker-dropdown .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) {
@@ -117,7 +116,12 @@ const getMonthData = (current: Date) => {
 :deep(.ant-picker-calendar-date:hover) {
   background-color: #2a2a2a !important;
 }
-
+:deep(.ant-picker-content th) {
+  height: 24px !important;
+  padding: 0 !important;
+  text-align: center;
+  background-color: var(--color-calendar-cell-bg) !important;
+}
 /* 日期数字 */
 :deep(.ant-picker-calendar-date-value) {
   display: block;
@@ -125,6 +129,7 @@ const getMonthData = (current: Date) => {
   line-height: 1.2;
   color: #e0e0e0;
   margin-bottom: 4px;
+  text-align: left;
 }
 
 /* 选中状态 */