xl-mobile/src/pages/myTask/index.vue

<script setup>
import filer from '../../static/icons/filer.png';
import XNav from "../../components/XNav.vue";
import {ref} from "vue";
import TaskCard from "../../components/TaskCard.vue";

const tabs = [
    {
        name: '发布问题',
        value: 0,
    },
    {
        name: '抖音问题',
        value: 1,
    },
    {
        name: '结算问题',
        value: 2,
    },
    {
        name: '提现问题',
        value: 3,
    },
];
const current = ref(0);
</script>

<template>
    <!--我的任务-->
    <XNav :show-back="false"></XNav>

    <view class="relative">
        <view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
        </view>

        <view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
            <view class="!w-full text-center !flex justify-center items-center">全部任务</view>
            <view class="!w-full text-center !flex justify-center items-center">全部平台</view>
            <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
            <view class="!w-full text-center !flex justify-center items-center">
                <view
                    class="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
                    <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
                    筛选
                </view>
            </view>
        </view>

        <view class="!p-[20rpx] relative z-10">
            <view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
                <view class="!flex items-center justify-between">
                    <view class="stic-title">| 数据概览</view>
                    <view class="stic-date">2024.08.07-2024.09.07</view>
                </view>

                <view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
                    <view
                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                        <view class="block-title">接受任务数</view>
                        <view class="block-value">10</view>
                    </view>
                    <view
                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                        <view class="block-title">预估收益(元)</view>
                        <view class="block-value">45.00</view>
                    </view>
                    <view
                        class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                        <view class="block-title">完成任务数</view>
                        <view class="block-value">4</view>
                    </view>
                    <view
                        class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                        <view class="block-title">到账收益(元)</view>
                        <view class="block-value">5.60</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx]">
            <view
                v-for="item in tabs"
                @click="current=item.value"
                :class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
                {{ item.name }}
            </view>
        </view>

        <view class="!flex flex-col gap-[20rpx] !px-[20rpx] !mt-[20rpx]">
            <TaskCard v-for="i in 100"></TaskCard>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.current {
    background-color: #165DFF;
    color: #fff;
}

.block-value {
    color: rgb(22, 93, 255);
    font-size: 40rpx;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0;
    text-align: left;
}

.block-title {
    color: rgb(29, 33, 41);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.bor-b-r {
    border-bottom-left-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
}

.stic-title {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.stic-date {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}
</style>