update

src/components/XButton.vue

@@ -0,0 +1,27 @@
+<script setup>
+
+</script>
+
+<template>
+    <view class="x-button">
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-button {
+    color: #fff;
+    background-color: var(--primary-color);
+    padding: 22rpx 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgb(255, 255, 255);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+    border-radius: 8rpx;
+}
+</style>

src/components/XImage.vue

@@ -1,24 +1,85 @@
 <script setup>
-const {src} = defineProps({
+import {ref} from 'vue';
+
+const {src, list} = defineProps({
     src: {
         type: String,
         default: "",
+    },
+    list: {
+        type: Array,
+        default: () => [],
+    },
+    cur: {
+        type: Number,
+        default: 0,
     }
 });
 
+const show = ref(false);
 const preview = () => {
-    uni.previewImage({
+    show.value = true;
-        current: 0,
-        urls: [src],
-        indicator: true,
-    }).then();
 }
 </script>
 
 <template>
-    <image @click="preview" v-bind="$attrs" :src="src"></image>
+
+    <image @click="preview" v-bind="$attrs" :src="src" mode="aspectFill"></image>
+
+    <view
+        v-if="show"
+        @click="show=false"
+        class="x-image-preview">
+        <view class="x-image-docker">
+            <template v-if="list.length>1">
+                <swiper class="!size-full" :current="cur" @change="({detail:{current}})=>cur=current">
+                    <swiper-item v-for="src in list">
+                        <image class="!size-full" :src="src" mode="aspectFit"></image>
+                    </swiper-item>
+                </swiper>
+
+                <view class="bg-[rgba(255,255,255,.3)] text-[#fff] test-28r rounded-full px-[20rpx] py-[6rpx] fixed left-1/2 -translate-x-1/2">
+                    {{cur+1}} / {{list.length}}
+                </view>
+            </template>
+            <template v-else>
+                <image class="!size-full" :src="src" mode="aspectFit"></image>
+            </template>
+
+
+            <image
+                v-if="list.length>1"
+                @click="show=false"
+                class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-130rpx]"
+                src="/static/icons/close.png">
+            </image>
+            <image
+                v-else
+                @click="show=false"
+                class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-60rpx]"
+                src="/static/icons/close.png">
+            </image>
+        </view>
+    </view>
 </template>
 
 <style scoped lang="scss">
+.x-image-preview {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, .6);
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
+    .x-image-docker {
+        width: 620rpx;
+        height: 1060rpx;
+        position: relative;
+    }
+}
 </style>

src/components/XLink.vue

@@ -1,13 +1,24 @@
 <script setup>
-
+const {showDescription} = defineProps({
+    showDescription: {
+        type: Boolean,
+        default: false,
+    }
+});
 </script>
 
 <template>
-    <view class="text-[var(--primary-color)]">
+    <view :class="['x-link', showDescription?'x-description':'']">
         <slot></slot>
     </view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.x-link {
+    color: var(--primary-color);
+}
 
+.x-description {
+    text-decoration: underline;
+}
 </style>

src/components/XNoticeBar.vue

@@ -1,6 +1,29 @@
 <script setup>
 import {ref, onMounted} from "vue";
 import warn from '../static/icons/warn.png';
+import success from '../static/icons/info.png';
+
+const STATUS = {
+    error: {
+        bg: 'x-notice-box-error',
+        context: 'context-error'
+    },
+    success: {
+        bg: 'x-notice-box-success',
+        context: 'context-success'
+    },
+};
+
+const {text, status} = defineProps({
+    text: {
+        type: String,
+        default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
+    },
+    status: {
+        type: String,
+        default: 'error'
+    }
+});
 
 const XNoticeBox = ref();
 const Context = ref();
@@ -18,22 +41,39 @@ onMounted(() => {
 </script>
 
 <template>
-    <view ref="XNoticeBox" class="x-notice-box">
+    <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
-        <view ref="Context" :class="['context', roll ? 'roll' : '']">
+        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]">
-            <image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
+            <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
-            <text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
+            <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
+            <text class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
         </view>
     </view>
 </template>
 
 <style scoped lang="scss">
-.x-notice-box {
+.x-notice-box-error {
-    padding: 18rpx 24rpx;
     background-color: #FFF7E8;
 }
 
-.context {
+.x-notice-box-success {
+    background-color: #E8F3FF;
+}
+
+.context-error {
     color: rgb(255, 87, 34);
+}
+
+.context-success {
+    color: rgb(29, 33, 41);
+}
+
+.x-notice-box {
+    padding: 18rpx 24rpx;
+    width: 100%;
+    overflow: hidden;
+}
+
+.context {
     font-size: 24rpx;
     font-weight: 400;
     line-height: 22px;

src/components/XSquareCarouselImage.vue

@@ -0,0 +1,24 @@
+<script setup>
+import testIcon from '../static/images/test.png';
+
+const {list} = defineProps({
+    list: {
+        type: Array,
+        default: [
+            testIcon, testIcon, testIcon, testIcon
+        ],
+    },
+});
+</script>
+
+<template>
+    <swiper class="!w-[160rpx] !h-[160rpx] !aspect-square" indicator-dots>
+        <swiper-item v-for="v in list">
+            <image class="!w-full !h-full" mode="aspectFill" :src="v"></image>
+        </swiper-item>
+    </swiper>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages.json

@@ -72,6 +72,13 @@
                 "navigationStyle": "custom"
             }
         },
+        {
+            "path": "pages/downloadMaterials/index",
+            "style": {
+                "navigationBarTitleText": "领取素材",
+                "navigationStyle": "custom"
+            }
+        },
         {
             "path": "pages/comingSoon/index",
             "style": {

src/pages/downloadMaterials/index.vue

@@ -0,0 +1,168 @@
+<script setup>
+import {ref} from "vue";
+import XNav from "../../components/XNav.vue";
+import {copy, download} from "../../utils/uils.js";
+import XLink from "../../components/XLink.vue";
+import XImage from "../../components/XImage.vue";
+import testIcon from "../../static/images/test.png";
+
+const mock = [
+    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
+    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
+    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
+    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
+    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
+];
+const current = ref(0);
+const tabs = ref([
+    {
+        id: 1,
+        name: '素材1',
+    },
+    {
+        id: 2,
+        name: '素材2',
+    },
+    {
+        id: 3,
+        name: '素材3',
+    },
+]);
+</script>
+
+<template>
+    <!--下载素材-->
+    <x-nav></x-nav>
+
+    <tui-tabs :tabs="tabs" :currentTab="current" @change="({index})=>current=index"></tui-tabs>
+
+    <view class="block">
+        <view class="title">标题</view>
+        <view class="info">
+            我是标题我是标题我是标题我是标题我是标题
+
+            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="title">
+            话题
+            <x-link class="!ml-auto" show-description>查看引导</x-link>
+        </view>
+        <view class="info">
+            我是标题我是标题我是标题我是标题我是标题
+            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="title">正文</view>
+        <view class="info">
+            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
+
+            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="title">素材（请按顺序下载&发布）</view>
+        <view class="info">
+            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+            </view>
+
+            <view class="copy-button" @click="download(mock)">批量保存</view>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="title">评论1</view>
+        <view class="info">
+            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
+
+            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+            </view>
+
+            <view class="!flex gap-[24rpx] justify-center">
+                <view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
+                <view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
+            </view>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="title">评论2<x-link class="!ml-auto" show-description>查看引导</x-link></view>
+        <view class="info">
+            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
+
+            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
+            </view>
+
+            <view class="!flex gap-[24rpx] justify-center">
+                <view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
+                <view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.block {
+    background-color: #fff;
+    padding: 20rpx;
+
+    .copy-button {
+        padding: 7rpx 24rpx;
+        background: rgb(22, 93, 255);
+        color: #fff;
+        border-radius: 4rpx;
+        width: fit-content;
+        margin-top: 24rpx;
+        margin-left: auto;
+        margin-right: auto;
+        color: rgb(255, 255, 255);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 140%;
+        letter-spacing: 0;
+        font-weight: 300;
+    }
+
+    .info {
+        color: rgb(29, 33, 41);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0;
+        text-align: left;
+        padding: 24rpx;
+        background-color: #F7F8FA;
+        border: 1px solid #E5E6EB;
+        border-radius: 8rpx;
+        position: relative;
+    }
+
+    .title {
+        color: rgb(78, 89, 105);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: 0;
+        padding-bottom: 14rpx;
+        display: flex;
+    }
+}
+</style>

src/pages/taskDetails/components/CollectMaterials.vue

@@ -1,11 +1,130 @@
 <script setup>
+import {ref, reactive} from "vue";
+import XSquareCarouselImage from "../../../components/XSquareCarouselImage.vue";
+import {toPage} from "../../../utils/uils.js";
 
+const current = ref(0);
+const list = reactive([
+    {
+        id: 0,
+        name: '素材1',
+    },
+    {
+        id: 1,
+        name: '素材2',
+    },
+    {
+        id: 2,
+        name: '素材3',
+    },
+]);
 </script>
 
 <template>
     <!--领取素材-->
+    <view class="!flex gap-[24rpx] !mb-[28rpx]">
+        <view
+            v-for="(item,index) in list"
+            @click="current=index"
+            :class="['tab-item', index===current?'cur':'']">
+            素材1
+        </view>
+    </view>
+
+    <template v-if="true">
+        <view class="block">
+            <view class="block-title">
+                标题:
+            </view>
+            <view class="block-info">
+                标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容
+            </view>
+        </view>
+        <view class="block">
+            <view class="block-title">
+                话题:
+            </view>
+            <view class="block-info">
+                #话题1 #话题2 #话题3 #话题4 #话题5
+            </view>
+        </view>
+        <view class="block">
+            <view class="block-title">
+                正文:
+            </view>
+            <view class="block-info">
+                简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内...
+            </view>
+        </view>
+        <view class="block">
+            <view class="block-title">
+                素材:
+            </view>
+            <view class="block-info">
+                <x-square-carousel-image></x-square-carousel-image>
+            </view>
+        </view>
+        <view class="block">
+            <view class="block-title">
+                评论区案例:
+            </view>
+            <view class="block-info">
+                <view>
+                    <view>评论1：我用的也是这款，早tb可以购买噢~我用的也是这款，早tb可以购买噢~</view>
+                    <view class="!flex gap-[20rpx] flex-wrap">
+                        <image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
+                        <image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
+                        <image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
+                        <image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <tui-button size="28" @click="toPage('/pages/downloadMaterials/index')">
+            <tui-icon size="20" color="#fff" name="bottom"></tui-icon>
+            <view class="!ml-[20rpx]">一键下载</view>
+        </tui-button>
+    </template>
 </template>
 
 <style scoped lang="scss">
+.tab-item {
+    padding: 12rpx 32rpx;
+    border-radius: 9999rpx;
+    background-color: #F7F8FA;
+    font-size: 24rpx;
+    color: #4E5969;
+    transition: 500ms;
+}
 
+.cur {
+    background-color: #E8F3FF;
+    color: #165DFF;
+}
+
+.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: 160rpx;
+    }
+
+    .block-info {
+        color: rgb(78, 89, 105);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 140%;
+        letter-spacing: 0;
+    }
+}
 </style>

src/pages/taskDetails/components/MyBackfill.vue

@@ -4,6 +4,7 @@
 
 <template>
     <!--我的回填-->
+
 </template>
 
 <style scoped lang="scss">

src/pages/taskDetails/components/ReviewCommunication.vue

@@ -1,11 +1,142 @@
 <script setup>
-
+import ysq from "../../../static/icons/ysq.png";
+import avatar from "../../../static/images/Avatar.png";
+import XNoticeBar from "../../../components/XNoticeBar.vue";
+import XButton from "../../../components/XButton.vue";
+import rback from "../../../static/icons/rout-back.png";
 </script>
 
 <template>
     <!--审核沟通-->
+    <view class="context">
+        <x-notice-bar status="success"></x-notice-bar>
+
+        <view class="chat-box">
+            <view class="!flex gap-[12rpx]">
+                <image class="!size-[80rpx]" mode="aspectFill" :src="avatar"></image>
+                <view class="flex-grow">
+                    <view class="time">07月21日 13:42</view>
+                    <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]">
+                        123
+                    </view>
+                    <view :class="['status', 'read']">
+                        未读
+                    </view>
+                </view>
+            </view>
+
+            <view
+                class="bg-[#fff] !w-[460rpx] p-[24rpx] rounded-[8rpx] !mx-auto !mt-[24rpx] !flex flex-col gap-[16rpx]">
+                <view class="prompt">
+                    <image class="!w-[26rpx]" :src="ysq" mode="widthFix"></image>
+                    提示：点击下方按钮，快速回复
+                </view>
+                <view class="prompt-button">
+                    我已重新回填
+                </view>
+                <view class="prompt-button">
+                    拒绝修改并放弃任务
+                    <view class="!mt-[16rpx] text-[#86909C] test-22r">
+                        商家将根据约定扣钱或不结算
+                    </view>
+                </view>
+                <view class="prompt-button">
+                    发起申诉
+                </view>
+            </view>
+        </view>
+
+        <view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
+            <x-button class="!w-[220rpx]">
+                发起申述
+            </x-button>
+            <x-button class="flex-grow !flex gap-[16rpx]">
+                <image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
+                发起申述
+            </x-button>
+        </view>
+    </view>
 </template>
 
 <style scoped lang="scss">
+.prompt-button {
+    color: var(--primary-color);
+    font-size: 28rpx;
+    font-weight: 400;
+    letter-spacing: 0;
+    text-align: left;
+    background-color: #E8F3FF;
+    padding: 15rpx 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4rpx;
+}
 
+.prompt {
+    padding: 18rpx 30rpx;
+    background-color: #F2F3F5;
+    color: rgb(134, 144, 156);
+    font-size: 22rpx;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    gap: 18rpx;
+}
+
+.status {
+    margin-top: 8rpx;
+    color: rgb(29, 33, 41);
+    font-size: 20rpx;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+
+    &::before {
+        content: '';
+        border-radius: 50%;
+        display: block;
+        width: 24rpx;
+        height: 24rpx;
+
+    }
+}
+
+.read {
+    &::before {
+        background-color: var(--primary-color);
+    }
+}
+
+.unread {
+    &::before {
+        background-color: var(--warning-color);
+    }
+}
+
+.context {
+    background-color: #F2F3F5;
+    width: 100%;
+}
+
+.time {
+    color: rgb(134, 144, 156);
+    font-size: 20rpx;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0;
+    margin-bottom: 8rpx;
+}
+
+.chat-box {
+    box-sizing: border-box;
+    padding: 24rpx;
+}
 </style>

src/pages/taskDetails/components/TaskDetails.vue

@@ -28,9 +28,9 @@ import XImage from "../../../components/XImage.vue";
         <view class="block">
             <view class="block-title">素材案例:</view>
             <view class="block-info !grid grid-cols-3 gap-[20rpx]">
-                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                <x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="0" mode="aspectFill" :draggable="false"></x-image>
-                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                <x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="1" mode="aspectFill" :draggable="false"></x-image>
-                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                <x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="2" mode="aspectFill" :draggable="false"></x-image>
             </view>
         </view>
         <view class="block">

src/pages/taskDetails/index.vue

@@ -93,7 +93,7 @@ onMounted(() => {
                 @change="({index})=>currentTabs=index">
             </tui-tabs>
 
-            <view class="!p-[24rpx]">
+            <view :style="{padding: currentTabs===3?'0':'24rpx'}">
                 <Suspense>
                     <template #default>
                         <div class="h-full flex flex-col items-start">
@@ -108,6 +108,7 @@ onMounted(() => {
             </view>
         </view>
 
+        <template v-if="currentTabs === 0">
             <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                 <view class="w-full">
                     <view class="title">
@@ -136,7 +137,8 @@ onMounted(() => {
                         <view class="block-info gap-[20rpx]">
                             <view>请使用抖音扫码下图，收藏音乐，发布时使用</view>
                             <view class="!grid grid-cols-3 !mt-[12rpx]">
-                            <x-image class="!size-[96rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                                <x-image class="!size-[96rpx]" :src="fmt" mode="aspectFill"
+                                         :draggable="false"></x-image>
                             </view>
                         </view>
                     </view>
@@ -150,24 +152,127 @@ onMounted(() => {
                     </view>
                     <view class="block flex-col">
                         <view class="block-title">第1次回填:</view>
-                    <view class="block-info">
+                        <view class="block-info !flex w-full">
-                        10分钟
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-[60%] whitespace-nowrap">
+                                0813-09:54 至 0813-17:14之间
+                            </view>
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
+                                3个作品评论区截图
+                            </view>
                         </view>
                     </view>
                     <view class="block flex-col">
                         <view class="block-title">第2次回填:</view>
-                    <view class="block-info">
+                        <view class="block-info !flex w-full">
-                        10分钟
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-[60%] whitespace-nowrap">
+                                0813-09:54 至 0813-17:14之间
+                            </view>
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
+                                3个作品链接
+                            </view>
                         </view>
                     </view>
                     <view class="block flex-col">
                         <view class="block-title">第3次回填:</view>
+                        <view class="block-info !flex w-full">
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-[60%] whitespace-nowrap">
+                                0814-10:00 至 0814-11:30之间
+                            </view>
+                            <view
+                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
+                                每一个作品的播放量截图
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
+                <view class="w-full">
+                    <view class="title">
+                        时间要求
+                    </view>
+                    <view class="block items-center">
+                        <view class="block-title">作品保留时间:</view>
                         <view class="block-info">
-                        10分钟
+                            3天
+                        </view>
+                    </view>
+                    <view class="block-extend">
+                        *若未到保留时间，提前删除。有对应惩罚
+                    </view>
+                    <view class="block items-center">
+                        <view class="block-title !w-[300rpx]">每次回填将在该时间内审核:</view>
+                        <view class="block-info">
+                            4小时内
+                        </view>
+                    </view>
+                    <view class="block-extend">
+                        *若您的回填，未在上述时间内审核，可在沟通中，发起申诉
                     </view>
                 </view>
             </view>
+
+            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
+                <view class="w-full">
+                    <view class="title">
+                        扣款说明
                     </view>
+                    <view class="block !flex !gap-0">
+                        <view class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">1.
+                        </view>
+                        <view
+                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
+                            未按约定评论
+                        </view>
+                        <view
+                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] !w-[210rpx]">
+                            扣除20%收益
+                        </view>
+                    </view>
+                    <view class="block !flex !gap-0">
+                        <view class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">2.
+                        </view>
+                        <view
+                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
+                            当天发布其他广告
+                        </view>
+                        <view
+                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] !w-[210rpx]">
+                            扣除100%收益
+                        </view>
+                    </view>
+                    <view class="block-extend">
+                        *请认真阅读该说明，商家将按照提前约定的事由扣款
+                    </view>
+                </view>
+            </view>
+
+            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
+                <view class="w-full">
+                    <view class="title">
+                        其他说明
+                    </view>
+                    <view class="block">
+                        <view class="test-24r">
+                            未到约定期限，达人提前删除视频处罚扣除1点达人信用分
+                        </view>
+                    </view>
+                    <view class="py-[7rpx] px-[32rpx] rounded-full text-[var(--primary-color)] bg-[#E8F3FF] w-fit">
+                        查看信用分管理方法
+                    </view>
+                </view>
+            </view>
+
+            <view class="bg-[#94BFFF] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
+                已接受
+            </view>
+        </template>
     </view>
 </template>
 
@@ -176,6 +281,16 @@ page {
     background-color: #6AA1FF;
 }
 
+.block-extend {
+    color: rgb(255, 125, 0);
+    font-size: 20rpx;
+    font-weight: 400;
+    letter-spacing: 0;
+    text-align: left;
+    margin-top: -8rpx;
+    margin-bottom: 24rpx;
+}
+
 .block {
     display: flex;
     gap: 20rpx;

src/scss/global.scss

@@ -6,7 +6,7 @@ $primary-color: #2D5CF6;
 }
 
 .tui-btn {
-    border-radius: 12rpx !important;
+    border-radius: 10rpx !important;
 }
 
 .tui-primary-outline {
@@ -47,3 +47,15 @@ $primary-color: #2D5CF6;
 .nowrap {
     white-space: nowrap;
 }
+
+.test-22r {
+    font-size: 22rpx;
+}
+
+.test-24r {
+    font-size: 24rpx;
+}
+
+.test-28r {
+    font-size: 28rpx;
+}

src/scss/index.scss

@@ -1,7 +1,6 @@
-Page {
-    --primary-color: #2D5CF6;
-}
 page {
     background-color: #F2F3F5;
     font-family: PingFang SC;
+    --primary-color: #165DFF;
+    --warning-color: #FF7900;
 }

src/scss/thorui.config.js

@@ -6,7 +6,7 @@
 
 //组件内主色配置
 const color = {
-    primary: '#2D5CF6',
+    primary: '#165DFF',
     success: '#07c160',
     warning: '#ff7900',
     danger: '#EB0909',

src/utils/uils.js

@@ -23,3 +23,32 @@ export const toPage = (url) => {
 export const backPage = () => {
     window.history.back();
 }
+
+export const copy = (context) => {
+    try {
+        navigator.clipboard.writeText(context)
+            .then(() => {
+                showToast('已复制');
+            })
+            .catch(() => {
+                showToast('复制失败');
+            });
+    } catch (e) {
+        showToast('复制失败');
+    }
+}
+
+export const download = (urls) => {
+    const promises = urls.map((url, index) => new Promise((resolve, reject) => {
+        const iframe = document.createElement('iframe');
+        iframe.src = url;
+        iframe.style.display = 'none';
+        document.body.appendChild(iframe);
+        resolve(true);
+    }));
+    Promise.all(promises).then(res => {
+        console.log(res);
+    }).catch(err => {
+        console.log(err);
+    });
+}