update

src/components/TaskCard.vue

@@ -0,0 +1,92 @@
+<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]">
+        <view class="!flex gap-[26rpx]">
+            <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">
+                <view class="price">
+                    <text class="unit">¥</text>
+                    8.56
+                </view>
+                <view class="price-info">剩余3个名额</view>
+            </view>
+        </view>
+
+        <view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
+            截止时间：08月23日 14:00
+            <view class="absolute top-1/2 -translate-y-1/2 right-0">
+                <image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.qrw {
+
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 140%;
+    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>