hookehuyr

style(teacher/checkinPage): 优化日期选择器样式,使用更现代的UI设计

1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-13 21:19:36 4 + * @LastEditTime: 2025-12-14 01:28:56
5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue 5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -18,9 +18,15 @@ ...@@ -18,9 +18,15 @@
18 <CourseGroupCascader @change="on_cascade_change" /> 18 <CourseGroupCascader @change="on_cascade_change" />
19 19
20 <!-- 日期选择触发区域 --> 20 <!-- 日期选择触发区域 -->
21 - <div class="date-trigger" @click="showCalendar = true"> 21 + <div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100 cursor-pointer" @click="showCalendar = true">
22 - <div class="current-date">{{ formattedSelectedDate }}</div> 22 + <div class="flex items-center gap-2">
23 - <div class="date-hint">点击切换日期</div> 23 + <van-icon name="calendar-o" class="text-primary text-xl" />
24 + <span class="text-base font-bold text-gray-800">{{ formattedSelectedDate }}</span>
25 + </div>
26 + <div class="flex items-center text-gray-400 text-sm">
27 + <span>切换日期</span>
28 + <van-icon name="arrow-down" class="ml-1" />
29 + </div>
24 </div> 30 </div>
25 </van-sticky> 31 </van-sticky>
26 32
...@@ -720,30 +726,7 @@ const handleAdd = (type) => { ...@@ -720,30 +726,7 @@ const handleAdd = (type) => {
720 background-color: #4caf50; 726 background-color: #4caf50;
721 } 727 }
722 728
723 -.date-trigger {
724 - background-color: #fff;
725 - padding: 0.5rem;
726 - text-align: center;
727 - cursor: pointer;
728 - border-bottom: 1px solid #eee;
729 - display: flex;
730 - align-items: center;
731 - justify-content: center;
732 - // gap: 0.5rem;
733 - flex-direction: column;
734 -
735 - .current-date {
736 - font-size: 1rem;
737 - font-weight: bold;
738 - color: #333;
739 - margin-bottom: 0;
740 - }
741 729
742 - .date-hint {
743 - font-size: 0.8rem;
744 - color: #999;
745 - }
746 -}
747 730
748 /* 下拉菜单选项文字单行显示 */ 731 /* 下拉菜单选项文字单行显示 */
749 .van-dropdown-item { 732 .van-dropdown-item {
......