feat(appointment): 预约创建页重写 — 宫格科室+周视图日历+时段卡片

apps/miniprogram/src/pages/appointment/create/index.scss

@@ -6,95 +6,85 @@
   padding-bottom: 140px;
 }
 
-/* 步骤指示器 */
-.step-bar {
-  display: flex;
-  justify-content: space-around;
-  padding: 32px 24px 0;
-}
-
-.step-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-}
-
-.step-item.step-active {
-  opacity: 1;
-}
-
-.step-item.step-done {
-  opacity: 0.8;
-}
-
-.step-dot {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: $bd;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.3s;
-}
-
-.step-active .step-dot {
-  background: $pri;
-}
-
-.step-done .step-dot {
-  background: $acc;
-}
-
-.step-num {
-  font-size: 28px;
-  color: white;
-  font-weight: bold;
-}
-
-.step-check {
-  font-size: 28px;
-  color: white;
-  font-weight: bold;
-}
-
-.step-label {
-  font-size: 22px;
-  color: $tx2;
-}
-
-.step-active .step-label {
-  color: $pri;
-  font-weight: 500;
-}
-
-/* 步骤连接线 */
-.step-line-wrapper {
-  padding: 12px 80px 0;
-}
-
-.step-line {
-  height: 4px;
-  background: $bd;
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.step-line-fill {
-  height: 100%;
-  background: linear-gradient(90deg, $acc, $pri);
-  border-radius: 2px;
-  transition: width 0.3s ease;
-}
-
 /* 步骤内容 */
 .step-content {
   padding: 32px 24px;
 }
 
+/* 科室宫格 */
+.dept-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.dept-card {
+  background: $card;
+  border-radius: $r;
+  padding: 24px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border: 2px solid transparent;
+  transition: border-color 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.dept-card.dept-selected {
+  border-color: $pri;
+  background: $pri-surface;
+}
+
+.dept-icon {
+  font-size: 40px;
+}
+
+.dept-label {
+  font-size: 26px;
+  color: $tx;
+}
+
+/* 时段卡片 */
+.slot-section {
+  margin-top: 24px;
+}
+
+.slot-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.slot-card {
+  background: $card;
+  border-radius: $r-sm;
+  padding: 16px 20px;
+  border: 2px solid transparent;
+  transition: all 0.2s;
+
+  &.slot-few { border-color: $wrn; }
+  &.slot-full { opacity: 0.5; background: $bd-l; }
+  &.slot-selected { border-color: $pri; background: $pri-surface; }
+}
+
+.slot-time {
+  font-size: 28px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+}
+
+.slot-count {
+  font-size: 22px;
+  color: $tx3;
+  display: block;
+  margin-top: 4px;
+}
+
+.slot-few .slot-count { color: $wrn; }
+.slot-full .slot-count { color: $dan; }
+
 .step-title {
   font-size: 32px;
   font-weight: bold;