|
|
@@ -14,6 +14,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 我的任务入口 -->
|
|
|
+ <div class="my-task-entry" @click="goMyTask">
|
|
|
+ <div class="entry-left">
|
|
|
+ <span class="entry-icon">📋</span>
|
|
|
+ <span class="entry-text">{{ $t('home.taskCenter') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="entry-right">
|
|
|
+ <span class="entry-hint">{{ $t('hall.viewMyTasks') }}</span>
|
|
|
+ <van-icon name="arrow" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 任务列表 -->
|
|
|
<div class="task-section">
|
|
|
<div class="section-title">{{ $t('home.taskList') }}</div>
|
|
|
@@ -26,13 +38,21 @@
|
|
|
@click="goTaskDetail(task.id)"
|
|
|
>
|
|
|
<div class="task-header">
|
|
|
- <div class="category-tag">{{ task.categoryName || 'TikTok' }}</div>
|
|
|
+ <div class="category-tag">
|
|
|
+ <img v-if="task.categoryIcon" :src="task.categoryIcon" class="category-icon" alt="" />
|
|
|
+ <span>{{ task.categoryName || 'TikTok' }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="task-body">
|
|
|
- <div class="task-title">{{ task.title }}</div>
|
|
|
- <div class="task-footer">
|
|
|
- <span class="price">+{{ formatReward(task.rewardAmount ?? task.price) }}</span>
|
|
|
- <span class="remaining">{{ $t('task.remaining') }}: {{ task.remainCount ?? (task.maxNum - task.applyNum) }}</span>
|
|
|
+ <div class="task-content">
|
|
|
+ <div class="task-cover" v-if="task.cover">
|
|
|
+ <img :src="task.cover" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="task-body">
|
|
|
+ <div class="task-title">{{ task.title }}</div>
|
|
|
+ <div class="task-footer">
|
|
|
+ <span class="price">+{{ formatReward(task.rewardAmount ?? task.price) }}</span>
|
|
|
+ <span class="remaining">{{ $t('task.remaining') }}: {{ task.remainCount ?? (task.maxNum - task.applyNum) }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -144,6 +164,11 @@ const goTaskDetail = (id: number) => {
|
|
|
router.push(`/task/detail/${id}`);
|
|
|
};
|
|
|
|
|
|
+// 跳转我的任务
|
|
|
+const goMyTask = () => {
|
|
|
+ router.push('/my-task');
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getPlatformStats();
|
|
|
getTaskList(true);
|
|
|
@@ -158,6 +183,49 @@ onMounted(() => {
|
|
|
padding-bottom: min(21.333vw, 102.4px);
|
|
|
}
|
|
|
|
|
|
+.my-task-entry {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%);
|
|
|
+ border: 1px solid rgba(33, 150, 243, 0.3);
|
|
|
+ border-radius: min(2.667vw, 12px);
|
|
|
+ padding: min(3.2vw, 14px) min(4vw, 18px);
|
|
|
+ margin-bottom: min(4vw, 18px);
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .entry-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: min(2.133vw, 10px);
|
|
|
+
|
|
|
+ .entry-icon {
|
|
|
+ font-size: min(5.333vw, 24px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .entry-text {
|
|
|
+ font-size: min(3.733vw, 16px);
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .entry-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: min(1.333vw, 6px);
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+
|
|
|
+ .entry-hint {
|
|
|
+ font-size: min(3.2vw, 14px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ font-size: min(3.2vw, 14px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.stats-section {
|
|
|
display: flex;
|
|
|
gap: min(3.2vw, 15.36px);
|
|
|
@@ -211,37 +279,69 @@ onMounted(() => {
|
|
|
margin-bottom: min(1.6vw, 8px);
|
|
|
|
|
|
.category-tag {
|
|
|
- display: inline-block;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: min(1.067vw, 5px);
|
|
|
background: rgba(255, 195, 0, 0.2);
|
|
|
color: #ffc300;
|
|
|
padding: min(0.8vw, 4px) min(2.133vw, 10px);
|
|
|
border-radius: min(0.8vw, 4px);
|
|
|
font-size: min(2.933vw, 14px);
|
|
|
+
|
|
|
+ .category-icon {
|
|
|
+ width: min(3.733vw, 18px);
|
|
|
+ height: min(3.733vw, 18px);
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .task-body {
|
|
|
- .task-title {
|
|
|
- font-size: min(3.467vw, 16px);
|
|
|
- color: #fff;
|
|
|
- margin-bottom: min(1.6vw, 8px);
|
|
|
- line-height: 1.3;
|
|
|
+ .task-content {
|
|
|
+ display: flex;
|
|
|
+ gap: min(2.667vw, 12px);
|
|
|
+
|
|
|
+ .task-cover {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: min(16vw, 70px);
|
|
|
+ height: min(16vw, 70px);
|
|
|
+ border-radius: min(1.6vw, 8px);
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .task-footer {
|
|
|
+ .task-body {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .price {
|
|
|
- font-size: min(4.267vw, 20px);
|
|
|
- font-weight: bold;
|
|
|
- color: #ffc300;
|
|
|
+ .task-title {
|
|
|
+ font-size: min(3.467vw, 16px);
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1.3;
|
|
|
}
|
|
|
|
|
|
- .remaining {
|
|
|
- font-size: min(2.933vw, 14px);
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
+ .task-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: min(4.267vw, 20px);
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffc300;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remaining {
|
|
|
+ font-size: min(2.933vw, 14px);
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|