zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页的样式的调整

Browse Source
This commit is contained in:
zoujing
2026-07-30 22:00:37 +08:00
parent 76abf4a9f0
commit 0bb34f8aa7
3 changed files with 82 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages-service/tickets/components/TicketHome.vue
View File

@@ -45,7 +45,7 @@
<view class="relative z-10 -mt-[28px] min-h-0 flex-1 overflow-hidden rounded-t-[28px] bg-[#f4f6f8] shadow-[0_-8px_24px_rgba(6,17,31,0.12)]">
<view class="flex h-full min-h-0">
<scroll-view
class="h-full w-[96px] shrink-0 bg-white"
class="h-full w-[80px] shrink-0 bg-white"
scroll-y
:scroll-into-view="leftScrollIntoViewId"
scroll-with-animation
@@ -83,18 +83,23 @@
<view v-for="product in productsForGroup(group)" :key="product.id" class="flex rounded-[14px] bg-white p-[10px]">
<image class="h-[100px] w-[100px] shrink-0 rounded-[10px] bg-[#e8edf0]" :src="product.images && product.images[0]" mode="aspectFill" @click="emit('open-detail', product.id)" />
<view class="ml-[10px] flex min-w-0 flex-1 flex-col">
<text class="line-clamp-2 text-[14px] font-semibold leading-[20px] text-[#242b36]" @click="emit('open-detail', product.id)">{{ product.shortTitle || product.name }}</text>
<view class="flex min-w-0 items-start" @click="emit('open-detail', product.id)">
<text class="line-clamp-2 min-w-0 text-[14px] font-semibold leading-[20px] text-[#242b36]">{{ product.shortTitle || product.name }}</text>
<view class="flex h-[20px] shrink-0 items-center">
<uni-icons type="right" size="14" color="#242b36" />
</view>
</view>
<view class="mt-[5px] flex flex-wrap gap-[4px]">
<text v-if="product.ageRule" class="rounded-[4px] bg-[#e8f2ff] px-[5px] py-[2px] text-[10px] text-[#3474c7]">{{ ageRuleText(product.ageRule) }}</text>
<text v-for="highlight in product.highlights || []" :key="highlight" class="rounded-[4px] bg-[#f2ebff] px-[5px] py-[2px] text-[10px] text-[#7a52b3]">{{ highlight }}</text>
<text v-if="product.ageRule" class="rounded-[4px] bg-[#f2ebff] px-[5px] py-[2px] text-[10px] text-[#7a52b3]">{{ ageRuleText(product.ageRule) }}</text>
<text v-for="highlight in product.highlights || []" :key="highlight" class="rounded-[4px] bg-[#e8f2ff] px-[5px] py-[2px] text-[10px] text-[#3474c7]">{{ highlight }}</text>
</view>
<view class="mt-auto flex items-end justify-between pt-[6px]">
<view>
<text class="block text-[10px] text-[#9aa2ad]">已售 {{ product.sold || 0 }}</text>
<text class="text-[12px] font-medium text-[#f26b32]">¥<text class="text-[20px] font-bold">{{ product.salePrice }}</text>起</text>
<text class="text-[12px] font-medium text-[#f26b32]">¥<text class="text-[20px] font-bold">{{ product.salePrice }}</text></text>
</view>
<view class="rounded-full bg-[#f26b32] px-[13px] py-[6px]" @click="emit('buy', product.id)">
<text class="text-[12px] font-medium text-white">选购</text>
<view class="flex h-[28px] items-center justify-center rounded-full bg-[#f26b32] px-[13px]" @click="emit('buy', product.id)">
<text class="text-[12px] font-medium leading-none text-white">选购</text>
</view>
</view>
</view>
@@ -132,9 +137,13 @@ const productsById = computed(() => new Map(props.products.map((product) => [pro
const productsForGroup = (group) => (group.productIds || [])
.map((productId) => productsById.value.get(productId))
.filter(Boolean)
.filter((product) => product?.status === 'on_sale' && product.clientVisible !== false)
const ageRuleText = (rule) => `${rule.min}—${rule.max}周岁`
const ageRuleText = (rule) => {
if (rule.min > 0 && rule.max >= 999) return `${rule.min}周岁及以上`
if (rule.min <= 0 && rule.max < 999) return `${rule.max}周岁及以下`
return `${rule.min}—${rule.max}周岁`
}
const selectGroup = (groupId) => {
activeGroupId.value = groupId