feat: 样式调整

This commit is contained in:
2026-08-06 11:36:17 +08:00
parent 937dfe3042
commit b36a47b314

View File

@@ -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)"
>
购买