93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
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]">
|
|||
|
|
<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>
|