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>

src/pages.json

@@ -65,6 +65,13 @@
                 "navigationStyle": "custom"
             }
         },
+        {
+            "path": "pages/taskDetails/index",
+            "style": {
+                "navigationBarTitleText": "任务详情",
+                "navigationStyle": "custom"
+            }
+        },
         {
             "path": "pages/comingSoon/index",
             "style": {

src/pages/taskDetails/components/CollectMaterials.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+    <!--领取素材-->
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/taskDetails/components/MyBackfill.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+    <!--我的回填-->
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/taskDetails/components/ReviewCommunication.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+    <!--审核沟通-->
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/taskDetails/components/TaskDetails.vue

@@ -0,0 +1,64 @@
+<script setup>
+import fmt from "../../../static/images/fmt.png";
+import linkIcon from '../../../static/icons/link.png';
+</script>
+
+<template>
+    <!--任务详情-->
+    <view class="w-full">
+        <view class="title">
+            案例概览
+        </view>
+        <view class="block">
+            <view class="block-title">任务案例:</view>
+            <view class="block-info w-full overflow-hidden">
+                <view class="text-[#165DFF] !flex items-center gap-[10rpx]">
+                    <image class="!size-[24rpx] flex-shrink-0" :src="linkIcon"></image>
+                    <text class="ellipsis-1 flex-grow">
+                        https://www.baidu.com/s?wd=%E7%8C%8E%E8%81%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1
+                    </text>
+                    <view class="nowrap flex-shrink !py-[7rpx] !px-[32rpx] rounded-full bg-[#E8F3FF]" style="font-size: 24rpx">
+                        复制
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="block">
+            <view class="block-title">评论区案例:</view>
+            <view class="block-info !grid grid-cols-3 gap-[20rpx]">
+                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
+                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
+                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+    margin-bottom: 32rpx;
+}
+
+.block {
+    display: flex;
+    gap: 20rpx;
+    margin-bottom: 20rpx;
+
+    .block-title {
+        flex-shrink: 0;
+        color: rgb(134, 144, 156);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 140%;
+        letter-spacing: 0;
+        text-align: left;
+        width: 130rpx;
+    }
+}
+</style>

src/pages/taskDetails/index.vue

@@ -1,11 +1,172 @@
 <script setup>
+import goodsIcon from '../../static/icons/goodsIcon.png';
+import XNav from "../../components/XNav.vue";
+import {ref, onMounted, defineAsyncComponent} from 'vue';
+import {onLoad} from "@dcloudio/uni-app";
+import XLink from "../../components/XLink.vue";
+import XNoticeBar from "../../components/XNoticeBar.vue";
 
+const details = ref(null);
+const mainDetailsRef = ref();
+const currentTabs = ref(0);
+const tabs = [
+    {
+        name: "任务详情",
+        component: defineAsyncComponent(() => import('./components/TaskDetails.vue')),
+    },
+    {
+        name: "领取素材",
+        component: defineAsyncComponent(() => import('./components/CollectMaterials.vue')),
+    },
+    {
+        name: "我的回填",
+        component: defineAsyncComponent(() => import('./components/MyBackfill.vue')),
+    },
+    {
+        name: "审核沟通",
+        component: defineAsyncComponent(() => import('./components/ReviewCommunication.vue')),
+    },
+];
+
+onLoad((options) => {
+    const {id} = options;
+});
+
+onMounted(() => {
+})
 </script>
 
 <template>
-    <!--邀请好友-->
+    <!--任务详情-->
+    <XNav></XNav>
+    <x-notice-bar></x-notice-bar>
+
+    <view class="!p-[20rpx] !flex flex-col gap-[20rpx] box-border">
+        <view class="rounded-[16rpx] !p-[24rpx] bg-[#fff] !flex flex-col gap-[20rpx]">
+            <view class="!flex gap-[30rpx]">
+                <image class="!size-[84rpx]" :src="goodsIcon"></image>
+                <view class="flex-grow">
+                    <view class="goods-title !w-full !flex items-center justify-between">
+                        洗面奶洗面奶
+                        <view :class="['goods-state']">进行中</view>
+                    </view>
+                    <view class="goods-bh">
+                        任务编号：DF1515
+                        <x-link>复制</x-link>
+                    </view>
+                </view>
+            </view>
+
+            <view class="bg-[#F7F8FA] px-[28rpx] py-[16rpx] rounded-[8rpx] !flex justify-around"
+                  style="font-size: 24rpx">
+                <view>发布账号</view>
+                <view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
+                <view>昵称: 我是大冤种</view>
+                <view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
+                <view>账号: 56378899</view>
+            </view>
+
+            <view class="!grid grid-cols-3 gap-[20rpx]">
+                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
+                    <view class="goods-st">今日头条</view>
+                    <view class="goods-st-info">发布平台</view>
+                </view>
+                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
+                    <view class="goods-st">今日头条</view>
+                    <view class="goods-st-info">发布平台</view>
+                </view>
+                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
+                    <view class="goods-st">今日头条</view>
+                    <view class="goods-st-info">发布平台</view>
+                </view>
+            </view>
+        </view>
+
+        <view ref="mainDetailsRef" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
+            <tui-tabs
+                v-if="mainDetailsRef?.$el?.clientWidth"
+                :tabs="tabs"
+                :currentTab="currentTabs"
+                :width="mainDetailsRef?.$el?.clientWidth"
+                @change="({index})=>currentTabs=index">
+            </tui-tabs>
+
+            <view class="!p-[24rpx]">
+                <Suspense>
+                    <template #default>
+                        <div class="h-full flex flex-col items-start">
+                            <component :is="tabs[currentTabs].component"></component>
+                        </div>
                     </template>
 
-<style scoped>
+                    <template #fallback>
+                        加载中...
+                    </template>
+                </Suspense>
+            </view>
+        </view>
+    </view>
+</template>
 
+<style lang="scss" scoped>
+page {
+    background-color: #6AA1FF;
+}
+
+.main-details {
+    :deep(.tui-tabs-view) {
+        width: 100% !important;
+    }
+}
+
+.goods-title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+    margin-bottom: 8rpx;
+}
+
+.goods-bh {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+    display: flex;
+    gap: 24rpx;
+}
+
+.goods-state {
+    background-color: #E8FFEA;
+    color: rgb(0, 180, 42);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+    padding: 4rpx 8rpx;
+}
+
+.goods-st {
+    color: rgb(29, 33, 41);
+    font-size: 26rpx;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.goods-st-info {
+    color: rgb(78, 89, 105);
+    font-size: 22rpx;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+    margin-top: 12rpx;
+}
 </style>

src/scss/global.scss

@@ -28,11 +28,12 @@ $primary-color: #2D5CF6;
 }
 
 .ellipsis-1 {
-    display: -webkit-box; /* 创建一个伸缩容器 */
+    display: inline-block; /* 创建一个伸缩容器 */
     -webkit-box-orient: vertical; /* 设置伸缩容器的方向为垂直 */
     -webkit-line-clamp: 1; /* 限制显示的行数为2行 */
     overflow: hidden; /* 超出内容隐藏 */
     text-overflow: ellipsis; /* 超出部分显示省略号 */
+    white-space: nowrap;
 }
 
 .ellipsis-2 {
@@ -42,3 +43,7 @@ $primary-color: #2D5CF6;
     overflow: hidden; /* 超出内容隐藏 */
     text-overflow: ellipsis; /* 超出部分显示省略号 */
 }
+
+.nowrap {
+    white-space: nowrap;
+}