richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI 页面优化

Browse Source
This commit is contained in:
richarjiang
2026-04-14 10:07:31 +08:00
parent 52cc3a2985
commit 7ce7cef77c
8 changed files with 958 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/app/src/components/SlotCard.vue
View File

@@ -160,6 +160,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
margin: 0 24rpx 20rpx;
min-height: 220rpx;
transition: all 0.2s ease;
filter: drop-shadow(0 16rpx 28rpx rgba(120, 91, 79, 0.08));
&:active {
transform: scale(0.98);
@@ -216,7 +217,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
.time-main {
font-size: 40rpx;
font-weight: 800;
color: #1a1a2e;
color: #3a2e2a;
line-height: 1;
letter-spacing: 1rpx;
}
@@ -224,7 +225,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
.time-label {
margin-top: 8rpx;
font-size: 22rpx;
color: #999;
color: #a18a82;
font-weight: 500;
}
@@ -248,7 +249,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #ccc;
background: #ccb7ae;
flex-shrink: 0;
}
@@ -257,8 +258,8 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
height: 2rpx;
background: repeating-linear-gradient(
to right,
#d0d0d0 0,
#d0d0d0 8rpx,
#dccbc2 0,
#dccbc2 8rpx,
transparent 8rpx,
transparent 16rpx
);
@@ -269,7 +270,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: rgba($primary-color, 0.1);
background: rgba(185, 143, 125, 0.12);
display: flex;
align-items: center;
justify-content: center;
@@ -283,7 +284,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
.duration-text {
margin-top: 6rpx;
font-size: 22rpx;
color: #999;
color: #a18a82;
font-weight: 500;
}
@@ -295,34 +296,34 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
font-size: 20rpx;
&.cap-open {
background: rgba(76, 175, 80, 0.08);
background: rgba(101, 163, 126, 0.12);
.capacity-text {
color: #4caf50;
color: #5d9472;
}
}
&.cap-almost {
background: rgba(245, 158, 11, 0.08);
background: rgba(214, 161, 92, 0.14);
.capacity-text {
color: #f59e0b;
color: #b98543;
}
}
&.cap-full {
background: rgba(239, 68, 68, 0.08);
background: rgba(216, 91, 87, 0.12);
.capacity-text {
color: #ef4444;
color: #c96763;
}
}
&.cap-closed {
background: rgba(0, 0, 0, 0.04);
background: rgba(111, 96, 91, 0.08);
.capacity-text {
color: #999;
color: #9d8f89;
}
}
}
@@ -360,7 +361,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
.course-name {
font-size: 30rpx;
font-weight: 700;
color: #1a1a2e;
color: #3a2e2a;
letter-spacing: 1rpx;
}
@@ -385,9 +386,9 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
}
.btn-book {
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
color: #fff;
box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
background: linear-gradient(135deg, #d5b9ab 0%, #b98f7d 100%);
color: #fffaf7;
box-shadow: 0 8rpx 18rpx rgba(143, 103, 89, 0.24);
min-width: 120rpx;
height: 60rpx;
transition: all 0.15s;
@@ -399,30 +400,30 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
}
.badge-booked {
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
color: $primary-dark;
background: linear-gradient(135deg, rgba(247, 240, 235, 0.96), rgba(236, 225, 217, 0.98));
color: #8f6759;
}
.badge-expired {
background: #f0f0f0;
color: #999;
background: rgba(111, 96, 91, 0.08);
color: #9d8f89;
}
.badge-full {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
background: rgba(216, 91, 87, 0.12);
color: #c96763;
}
.badge-closed {
background: #f0f0f0;
color: #bbb;
background: rgba(111, 96, 91, 0.08);
color: #b5a8a1;
}
.cancel-link {
font-size: 22rpx;
color: #ef4444;
color: #c96763;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(239, 68, 68, 0.3);
text-decoration-color: rgba(201, 103, 99, 0.28);
}
</style>