update

src/components/TaskCard.vue

@@ -2,10 +2,11 @@
 import dy from "../static/images/抖音.png";
 import qrw from "../static/icons/qrw.png";
 import XCountdown from "./XCountdown.vue";
+import {toPage} from "../utils/uils.js";
 </script>
 
 <template>
-    <view class="rounded-[8rpx] bg-[#fff] !p-[24rpx] overflow-hidden task-card">
+    <view @click="toPage(`/pages/taskDetails/index?id=${1}`)" class="rounded-[8rpx] bg-[#fff] !p-[24rpx] overflow-hidden task-card">
         <view class="!pb-[20rpx] !flex justify-between" style="border-bottom: 1px solid #E5E6EB">
             <view style="font-size: 28rpx">
                 任务编号：DF1212

src/components/XCountdown.vue

@@ -5,7 +5,7 @@ import dayjs from "dayjs";
 const {time} = defineProps({
     time: {
         type: String,
-        default: '2025-03-28 10:10:00',
+        default: dayjs(new Date()).add(20, 'minutes'),
     }
 });
 
@@ -26,11 +26,11 @@ const timer = setInterval(() => {
     <view class="!flex items-center gap-[20rpx]">
         <slot></slot>
         <view class="!flex gap-[16rpx] items-center">
-            <view class="time-block" v-if="hours">{{ hours < 10 ? `0${hours}` : hours }}</view>
+            <view class="time-block" v-if="hours && hours>0">{{ hours < 10 ? `0${hours}` : hours }}</view>
             <view v-if="hours">:</view>
-            <view class="time-block" v-if="minutes">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
+            <view class="time-block" v-if="minutes && minutes>0">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
             <view v-if="minutes">:</view>
-            <view class="time-block" v-if="seconds">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
+            <view class="time-block" v-if="seconds && seconds>0">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
         </view>
     </view>
 </template>

src/components/XNoticeBar.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {ref, onMounted} from "vue";
+import warn from '../static/icons/warn.png';
+
+const XNoticeBox = ref();
+const Context = ref();
+const roll = ref(false);
+
+onMounted(() => {
+    if (
+        Context.value.$el.clientWidth
+        >
+        XNoticeBox.value.$el.clientWidth
+    ) {
+        roll.value = true;
+    }
+});
+</script>
+
+<template>
+    <view ref="XNoticeBox" class="x-notice-box">
+        <view ref="Context" :class="['context', roll ? 'roll' : '']">
+            <image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
+            <text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-notice-box {
+    padding: 18rpx 24rpx;
+    background-color: #FFF7E8;
+}
+
+.context {
+    color: rgb(255, 87, 34);
+    font-size: 24rpx;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 18rpx;
+}
+
+.roll {
+    animation: 10s Roll linear infinite forwards;
+}
+
+@keyframes Roll {
+    0% {
+        transform: translateX(100%);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+</style>