feat: 样式调整
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="box-border w-full px-[16px]">
|
||||
<view class="box-border w-full px-[12px]">
|
||||
<scroll-view
|
||||
class="w-full"
|
||||
:scroll-x="hasMultipleGoods"
|
||||
@@ -10,33 +10,35 @@
|
||||
<view
|
||||
v-for="goods in goodsList"
|
||||
:key="goods.commodityId"
|
||||
class="box-border flex h-[118px] overflow-hidden rounded-[16px] bg-white p-[10px] shadow-[0_4px_18px_rgba(31,110,74,0.08)]"
|
||||
class="flex h-[88px]"
|
||||
:class="{
|
||||
'w-full': !hasMultipleGoods,
|
||||
'w-4/5 shrink-0': hasMultipleGoods,
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="h-[98px] w-[98px] shrink-0 rounded-[12px] bg-[#eef8f2]"
|
||||
:src="goods.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view
|
||||
class="h-[88px] w-[88px] shrink-0 overflow-hidden rounded-[16px] bg-[#eef8f2] shadow-[0_4px_18px_rgba(31,110,74,0.08)]"
|
||||
>
|
||||
<image class="h-full w-full" :src="goods.image" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<view class="ml-[12px] flex min-w-0 flex-1 flex-col py-[2px]">
|
||||
<text class="block truncate text-[16px] font-semibold leading-[22px] text-[#1f2937]">
|
||||
<view
|
||||
class="box-border flex h-full min-w-0 flex-1 flex-col rounded-[16px] bg-white px-[12px] py-[8px] shadow-[0_4px_18px_rgba(31,110,74,0.08)]"
|
||||
>
|
||||
<text class="block truncate text-[14px] font-semibold leading-[22px] text-[#1f2937]">
|
||||
{{ goods.title }}
|
||||
</text>
|
||||
<text class="mt-[2px] block truncate text-[13px] leading-[18px] text-[#9ca3af]">
|
||||
<text class="mt-[2px] block truncate text-[11px] leading-[18px] text-[#9ca3af]">
|
||||
{{ goods.description }}
|
||||
</text>
|
||||
|
||||
<view class="mt-auto flex items-end justify-between gap-[8px]">
|
||||
<view class="min-w-0 flex-1 truncate font-bold text-[#111827]">
|
||||
<text class="text-[18px]">¥</text>
|
||||
<text class="text-[24px] leading-[28px]">{{ goods.price }}</text>
|
||||
<text class="text-[14px]">¥</text>
|
||||
<text class="text-[20px] leading-[28px]">{{ goods.price }}</text>
|
||||
</view>
|
||||
<button
|
||||
class="m-0 flex h-[36px] shrink-0 items-center justify-center rounded-full bg-[#20cf6d] px-[18px] text-[14px] leading-none text-white after:border-0"
|
||||
class="m-0 flex h-[26px] shrink-0 items-center justify-center rounded-full bg-[#20cf6d] px-[12px] text-[14px] leading-none text-white after:border-0"
|
||||
@click.stop="handleBuy(goods)"
|
||||
>
|
||||
购买
|
||||
|
||||
Reference in New Issue
Block a user