xl-mobile/src/components/TaskCard.vue

<script setup>
import dy from "../static/images/抖音.png";
import qrw from "../static/icons/qrw.png";
</script>

<template>
    <view 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
            </view>
            <view style="font-size: 24rpx">
                <Text class="text-[#165DFF]">08-13-09:54</Text>后可开始回填
            </view>
        </view>

        <view class="!flex gap-[26rpx] !pt-[20rpx]">
            <image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
            <view class="!h-[88rpx] !flex flex-col justify-between">
                <view class="title">美白祛斑洗面奶</view>
                <view class="!flex gap-[8rpx]">
                    <view class="tag">抖音</view>
                    <view class="tag">三连发</view>
                </view>
            </view>
            <view class="!h-[88rpx] !ml-auto !flex items-center gap-[6rpx]">
                <view class="price-info">待确认</view>
                <view class="price">
                    <text class="unit">¥</text>
                    8.56
                </view>
            </view>
        </view>

        <view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
            <view class="!flex gap-[8rpx] justify-between">
                <view>领取账号:</view>
                <view>酷酷猛吃</view>
            </view>
            <view class="!flex gap-[8rpx] justify-between">
                <view>领取时间:</view>
                <view>2024-08-06 14:10</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.task-card {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}

.info {
    color: #000;
    font-size: 24rpx;
    font-weight: 300;
    letter-spacing: 0;
    text-align: left;
}

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

.price-info {
    /* 12/Regular */
    color: rgb(255, 87, 34);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: right;
}

.price {
    color: rgb(29, 33, 41);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    text-align: right;

    .unit {
        font-size: 22rpx;
    }
}

.tag {
    color: rgb(22, 93, 255);
    font-size: 10px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    border-radius: 4rpx;
    background: rgb(232, 243, 255);
    padding: 3rpx 8rpx;
}
</style>