style: 样式调整

components/daySelect/index.vue

@@ -50,6 +50,9 @@ export default {
     const firstDay = this.dayList[0];
     this.currentYear = firstDay.year;
     this.currentMonth = firstDay.month; // 假设 dayList 中的月份已处理补零
+
+    // 初始化时发送今天的日期信息
+    this.emitDateInfo(0);
   },
   methods: {
     // 日期选择
@@ -63,6 +66,23 @@ export default {
         this.dayList[index].day;
       date = common.GetNowTime(new Date(date));
       this.xzTime = date;
+
+      // 发送选中的日期信息给父组件
+      this.emitDateInfo(index);
+    },
+
+    // 发送日期信息给父组件的方法
+    emitDateInfo(index) {
+      const selectedDay = this.dayList[index];
+      const isToday = index === 0; // 因为第一项永远是今天
+
+      this.$emit("dateChange", {
+        date: this.xzTime, // 完整日期
+        year: selectedDay.year,
+        month: selectedDay.month,
+        day: selectedDay.day,
+        isToday: isToday,
+      });
     },
   },
 };

pages/index/index.vue

@@ -1,22 +1,23 @@
 <template>
   <view class="content">
-    <daySelect />
+    <daySelect @dateChange="onDateChange" />
-    <view class="task-info">
+    <view v-show="isToday" class="task-info">
       <view class="title">今日任务</view>
+      <!-- 当日计划 点击跳转 -->
       <view class="task-list">
         <view class="task-item">
           <view class="name-state">
             <view class="name">足球场休息室</view>
             <u-tag text="已完成" type="success" border-color="transparent" />
           </view>
-          
+
           <view class="time">
             <u-tag text="9:00~12:00" type="info" border-color="transparent" />
           </view>
         </view>
       </view>
     </view>
-    <view class="area-schedule">
+    <view v-show="isToday" class="area-schedule">
       <view class="finish">
         <view class="point"></view>
         <view class="title">已保洁区域</view>
@@ -42,11 +43,21 @@
         ></u-line-progress>
       </view>
     </view>
-    <view class="cleaning-plan">
+    <!-- 非当日计划 仅展示 -->
-      <view class="title">今日保洁计划名称</view>
+    <view v-show="!isToday" class="cleaning-plan-box">
-      <view class="time">
+      <view class="cleaning-plan">
-        <view class="top">00:00:00</view>
+        <view class="title">今日保洁计划名称</view>
-        <view class="bottom">23:59:00</view>
+        <view class="time">
+          <view class="top">00:00:00</view>
+          <view class="bottom">23:59:00</view>
+        </view>
+      </view>
+      <view class="cleaning-plan">
+        <view class="title">今日保洁计划名称</view>
+        <view class="time">
+          <view class="top">00:00:00</view>
+          <view class="bottom">23:59:00</view>
+        </view>
       </view>
     </view>
   </view>
@@ -57,6 +68,20 @@ export default {
   components: {
     daySelect,
   },
+
+  data() {
+    return {
+      isToday: true,
+      currentDate: "",
+    };
+  },
+
+  methods: {
+    onDateChange({ date, isToday }) {
+      this.isToday = isToday;
+      this.currentDate = date;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -151,24 +176,26 @@ export default {
   }
 }
 
-.cleaning-plan {
+.cleaning-plan-box {
-  margin: 0 32rpx;
+  .cleaning-plan {
-  margin-top: 36rpx;
+    margin: 0 32rpx;
-  padding: 42rpx 52rpx;
+    margin-bottom: 36rpx;
-  display: flex;
+    padding: 42rpx 52rpx;
-  justify-content: space-between;
+    display: flex;
-  align-items: center;
+    justify-content: space-between;
-  background: url("@/static/images/plan-bg.png") no-repeat 100% 100%;
+    align-items: center;
-  background-size: 100% 100%;
+    background: url("@/static/images/plan-bg.png") no-repeat 100% 100%;
-  .title {
+    background-size: 100% 100%;
-    font-weight: 500;
+    .title {
-    font-size: 36rpx;
+      font-weight: 500;
-    color: #334a65;
+      font-size: 36rpx;
-  }
+      color: #334a65;
-  .time{
+    }
-    font-weight: 500;
+    .time {
-font-size: 36rpx;
+      font-weight: 500;
-color: #334A65;
+      font-size: 36rpx;
+      color: #334a65;
+    }
   }
 }
 </style>