883 lines
20 KiB
Plaintext
883 lines
20 KiB
Plaintext
<template>
|
|
<view class="hmall-content">
|
|
<view v-if="currentCategory != 'recommend' && secondaryCategoryPages.length > 0" class="hmall-secondary-shell">
|
|
<scroll-view
|
|
class="hmall-secondary-scroll"
|
|
direction="horizontal"
|
|
:scroll-x="true"
|
|
:show-scrollbar="false"
|
|
:scroll-with-animation="true"
|
|
>
|
|
<view class="hmall-secondary-pages">
|
|
<view
|
|
v-for="(page, pageIndex) in secondaryCategoryPages"
|
|
:key="page.id + '-' + pageIndex"
|
|
class="hmall-secondary-page"
|
|
>
|
|
<view
|
|
v-for="(item, itemIndex) in page.items"
|
|
:key="item.id + '-' + itemIndex"
|
|
:class="['hmall-secondary-item', selectedSubCategoryId == item.id ? 'hmall-secondary-item-active' : '']"
|
|
@click="emit('secondary-category-click', item)"
|
|
>
|
|
<view class="hmall-secondary-icon-wrap">
|
|
<image v-if="item.icon != null && isImageIcon(item.icon)" class="hmall-secondary-image" :src="item.icon" mode="aspectFit" />
|
|
<text v-else class="hmall-secondary-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
|
|
</view>
|
|
<text class="hmall-secondary-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view v-if="currentCategory == 'recommend' && marketingChannels.length > 0" class="hmall-recommend-section">
|
|
<view
|
|
v-for="(channel, index) in marketingChannels"
|
|
:key="channel.id + '-' + index"
|
|
class="hmall-recommend-card"
|
|
:style="{ backgroundColor: channel.bgColor }"
|
|
@click="emit('select-channel', channel)"
|
|
>
|
|
<view class="hmall-recommend-header">
|
|
<view class="hmall-recommend-title-row">
|
|
<text class="hmall-recommend-title">{{ channel.title }}</text>
|
|
<text class="hmall-recommend-badge" :style="{ color: channel.themeColor, borderColor: channel.themeColor }">{{ channel.badge }}</text>
|
|
</view>
|
|
<text class="hmall-recommend-subtitle">{{ channel.subtitle }}</text>
|
|
</view>
|
|
<view class="hmall-recommend-products">
|
|
<view
|
|
v-for="(product, pIndex) in channel.products"
|
|
:key="product.id + '-' + pIndex"
|
|
class="hmall-recommend-product"
|
|
>
|
|
<image class="hmall-recommend-product-image" :src="getChannelProductImage(product)" mode="aspectFill" />
|
|
<text class="hmall-recommend-product-name">{{ product.shortName }}</text>
|
|
<view class="hmall-recommend-price-row">
|
|
<text class="hmall-recommend-product-tag" :style="{ color: channel.themeColor }">{{ product.tag }}</text>
|
|
<text class="hmall-recommend-product-price" :style="{ color: channel.themeColor }">¥{{ formatChannelPrice(product.price) }}</text>
|
|
</view>
|
|
<text v-if="product.marketPrice > product.price" class="hmall-recommend-market-price">¥{{ formatChannelPrice(product.marketPrice) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="currentCategory != 'recommend' && categorySimpleChannels.length > 0" class="hmall-simple-section">
|
|
<view
|
|
v-for="(channel, index) in categorySimpleChannels"
|
|
:key="channel.id + '-' + index"
|
|
:class="['hmall-simple-card', index == 0 ? 'hmall-simple-card-with-divider' : '']"
|
|
@click="emit('select-simple-channel', channel)"
|
|
>
|
|
<view class="hmall-simple-left">
|
|
<view class="hmall-simple-title-row">
|
|
<text class="hmall-simple-icon">{{ channel.icon }}</text>
|
|
<text class="hmall-simple-title">{{ channel.title }}</text>
|
|
</view>
|
|
<text class="hmall-simple-subtitle">{{ channel.subtitle }}</text>
|
|
</view>
|
|
<view class="hmall-simple-cover-wrap">
|
|
<view v-for="(cover, coverIndex) in channel.coverImages" :key="channel.id + '-cover-' + coverIndex" class="hmall-simple-cover-slot">
|
|
<image v-if="isImageIcon(cover)" class="hmall-simple-cover-image" :src="cover" mode="aspectFill" />
|
|
<view v-else class="hmall-simple-cover-fallback">
|
|
<text class="hmall-simple-cover-text">{{ cover }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hmall-products-section">
|
|
<view class="hmall-feed-divider"></view>
|
|
|
|
<view v-if="hotProducts.length > 0" class="hmall-products-grid hmall-products-grid-dense">
|
|
<view
|
|
v-for="(product, index) in hotProducts"
|
|
:key="product.id + '-' + index"
|
|
class="hmall-product-card hmall-product-card-skeleton"
|
|
@click="emit('select-product', product)"
|
|
>
|
|
<view class="hmall-product-image-wrapper hmall-product-image-wrapper-fixed">
|
|
<image
|
|
class="hmall-product-image"
|
|
:src="getProductCover(product)"
|
|
@error="() => handleProductImageError(product.id)"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
<view class="hmall-product-body">
|
|
<view v-if="getProductCardTags(product).length > 0" class="hmall-product-card-tags">
|
|
<text
|
|
v-for="(tag, tagIndex) in getProductCardTags(product)"
|
|
:key="product.id + '-card-tag-' + tagIndex"
|
|
class="hmall-product-card-tag"
|
|
>
|
|
{{ tag }}
|
|
</text>
|
|
</view>
|
|
<text class="hmall-product-title">{{ getProductTitle(product) }}</text>
|
|
<text v-if="getProductHighlight(product) != ''" class="hmall-product-highlight">{{ getProductHighlight(product) }}</text>
|
|
<view v-if="getProductServiceTags(product).length > 0" class="hmall-product-service-tags">
|
|
<text
|
|
v-for="(tag, tagIndex) in getProductServiceTags(product)"
|
|
:key="product.id + '-service-tag-' + tagIndex"
|
|
class="hmall-product-service-tag"
|
|
>
|
|
{{ tag }}
|
|
</text>
|
|
</view>
|
|
<view class="hmall-product-price-row">
|
|
<text class="hmall-product-price-value">¥{{ formatProductPrice(product) }}</text>
|
|
<text v-if="showMarketPrice(product)" class="hmall-product-market-price">¥{{ formatMarketPrice(product) }}</text>
|
|
</view>
|
|
<text v-if="getProductSalesText(product) != ''" class="hmall-product-sales">{{ getProductSalesText(product) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="loading" class="hmall-loading-state">
|
|
<text class="hmall-loading-text">正在加载商品...</text>
|
|
</view>
|
|
|
|
<view v-else class="hmall-empty-wrap">
|
|
<view v-if="emptyStateDescription != ''" class="hmall-empty-state-extended">
|
|
<EmptyState :text="emptyStateTitle"></EmptyState>
|
|
<text class="hmall-empty-desc">{{ emptyStateDescription }}</text>
|
|
</view>
|
|
<EmptyState v-else :text="emptyStateTitle"></EmptyState>
|
|
</view>
|
|
|
|
<view v-if="loading || showLoadMore" class="hmall-load-more-status">
|
|
<text class="hmall-loading-text">正在加载更多商品...</text>
|
|
</view>
|
|
|
|
<view v-if="!hasMore && hotProducts.length > 0" class="hmall-feed-end-state">
|
|
<text class="hmall-feed-end-text">已经到底了</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, computed } from 'vue'
|
|
import EmptyState from '@/components/consumer/EmptyState.uvue'
|
|
import type { Category, Product } from '@/utils/supabaseService.uts'
|
|
import type { MarketingChannel, ChannelProduct, SimpleCategoryChannel } from '@/utils/mockChannelData.uts'
|
|
|
|
const failedProductImageIds = ref<string[]>([])
|
|
|
|
type SecondaryCategoryPage = {
|
|
id: string
|
|
items: Array<Category>
|
|
}
|
|
|
|
const props = defineProps({
|
|
currentCategory: {
|
|
type: String,
|
|
default: 'recommend'
|
|
},
|
|
selectedSubCategoryId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
secondaryCategoryDisplay: {
|
|
type: Array<Category>,
|
|
default: [] as Array<Category>
|
|
},
|
|
marketingChannels: {
|
|
type: Array<MarketingChannel>,
|
|
default: [] as Array<MarketingChannel>
|
|
},
|
|
categorySimpleChannels: {
|
|
type: Array<SimpleCategoryChannel>,
|
|
default: [] as Array<SimpleCategoryChannel>
|
|
},
|
|
hotProducts: {
|
|
type: Array<Product>,
|
|
default: [] as Array<Product>
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasMore: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showLoadMore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
emptyStateTitle: {
|
|
type: String,
|
|
default: '当前分类暂无商品'
|
|
},
|
|
emptyStateDescription: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'secondary-category-click', category: Category): void
|
|
(e: 'select-channel', channel: MarketingChannel): void
|
|
(e: 'select-simple-channel', channel: SimpleCategoryChannel): void
|
|
(e: 'select-product', product: Product): void
|
|
}>()
|
|
|
|
const secondaryCategoryPages = computed((): Array<SecondaryCategoryPage> => {
|
|
const pages: Array<SecondaryCategoryPage> = []
|
|
const source = props.secondaryCategoryDisplay
|
|
const pageSize = 10
|
|
let pageIndex = 0
|
|
|
|
while (pageIndex * pageSize < source.length) {
|
|
const startIndex = pageIndex * pageSize
|
|
const pageItems: Array<Category> = []
|
|
for (let i = startIndex; i < source.length && i < startIndex + pageSize; i++) {
|
|
pageItems.push(source[i])
|
|
}
|
|
pages.push({
|
|
id: 'secondary-page-' + pageIndex.toString(),
|
|
items: pageItems
|
|
} as SecondaryCategoryPage)
|
|
pageIndex = pageIndex + 1
|
|
}
|
|
|
|
return pages
|
|
})
|
|
|
|
function isImageIcon(icon: string): boolean {
|
|
if (icon == '') {
|
|
return false
|
|
}
|
|
return icon.indexOf('http') == 0 || icon.indexOf('/') == 0
|
|
}
|
|
|
|
function getCategoryDisplayIcon(category: Category): string {
|
|
const icon = category.icon ?? ''
|
|
if (icon != '' && !isImageIcon(icon)) {
|
|
return icon
|
|
}
|
|
const name = category.name ?? ''
|
|
return name != '' ? name.substring(0, 1) : '品'
|
|
}
|
|
|
|
function getChannelProductImage(product: ChannelProduct): string {
|
|
return product.image != '' ? product.image : '/static/images/default.png'
|
|
}
|
|
|
|
function formatChannelPrice(price: number): string {
|
|
const rounded = Math.round(price)
|
|
if (Math.abs(price - rounded) < 0.001) {
|
|
return rounded.toString()
|
|
}
|
|
return price.toFixed(1)
|
|
}
|
|
|
|
function getProductCover(product: Product): string {
|
|
if (failedProductImageIds.value.indexOf(product.id) != -1) {
|
|
return '/static/images/default.png'
|
|
}
|
|
if (product.main_image_url != null && product.main_image_url != '') {
|
|
return product.main_image_url
|
|
}
|
|
if (product.images != null && product.images.length > 0 && product.images[0] != '') {
|
|
return product.images[0]
|
|
}
|
|
if (product.image_url != null && product.image_url != '') {
|
|
return product.image_url
|
|
}
|
|
return '/static/images/default.png'
|
|
}
|
|
|
|
function handleProductImageError(productId: string): void {
|
|
if (productId == '') {
|
|
return
|
|
}
|
|
if (failedProductImageIds.value.indexOf(productId) == -1) {
|
|
failedProductImageIds.value.push(productId)
|
|
}
|
|
}
|
|
|
|
function getProductTitle(product: Product): string {
|
|
if (product.short_title != null && product.short_title != '') {
|
|
return product.short_title
|
|
}
|
|
if (product.name != null && product.name != '') {
|
|
return product.name
|
|
}
|
|
return product.id
|
|
}
|
|
|
|
function getProductCardTags(product: Product): string[] {
|
|
if (product.card_tags != null && product.card_tags.length > 0) {
|
|
return product.card_tags.slice(0, 2)
|
|
}
|
|
const fallback: string[] = []
|
|
if (product.is_hot == true) fallback.push('热卖')
|
|
if (product.is_new == true && fallback.length < 2) fallback.push('新品')
|
|
if (product.is_featured == true && fallback.length < 2) fallback.push('精选')
|
|
return fallback
|
|
}
|
|
|
|
function getProductServiceTags(product: Product): string[] {
|
|
if (product.service_tags != null && product.service_tags.length > 0) {
|
|
return product.service_tags.slice(0, 3)
|
|
}
|
|
return [] as string[]
|
|
}
|
|
|
|
function getProductHighlight(product: Product): string {
|
|
if (product.selling_points != null && product.selling_points.length > 0 && product.selling_points[0] != '') {
|
|
return product.selling_points[0]
|
|
}
|
|
if (product.subtitle != null && product.subtitle != '') {
|
|
return product.subtitle
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function formatSaleCountText(saleCount: number): string {
|
|
if (saleCount >= 100000) return '已售10万+'
|
|
if (saleCount >= 10000) return '已售' + (saleCount / 10000).toFixed(1) + '万件'
|
|
if (saleCount > 0) return '已售' + saleCount.toString() + '件'
|
|
return ''
|
|
}
|
|
|
|
function getProductSalesText(product: Product): string {
|
|
if (product.display_sales_text != null && product.display_sales_text != '') {
|
|
return product.display_sales_text
|
|
}
|
|
const saleCount = product.sale_count ?? 0
|
|
return formatSaleCountText(saleCount)
|
|
}
|
|
|
|
function formatProductPrice(product: Product): string {
|
|
const price = product.base_price ?? product.price ?? 0
|
|
return parseFloat(price.toString()).toFixed(2)
|
|
}
|
|
|
|
function formatMarketPrice(product: Product): string {
|
|
const price = product.market_price ?? product.original_price ?? 0
|
|
return parseFloat(price.toString()).toFixed(2)
|
|
}
|
|
|
|
function showMarketPrice(product: Product): boolean {
|
|
const marketPrice = product.market_price ?? product.original_price ?? 0
|
|
const salePrice = product.base_price ?? product.price ?? 0
|
|
return marketPrice > 0 && marketPrice > salePrice
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hmall-content {
|
|
padding: 0 16rpx 0;
|
|
box-sizing: border-box;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
|
|
.hmall-secondary-shell {
|
|
margin-top: 16rpx;
|
|
margin-bottom: 14rpx;
|
|
background: #ffffff;
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.hmall-secondary-scroll {
|
|
width: 100%;
|
|
height: 176rpx;
|
|
}
|
|
|
|
.hmall-secondary-pages {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 176rpx;
|
|
}
|
|
|
|
.hmall-secondary-page {
|
|
width: 718rpx;
|
|
height: 176rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
padding-left: 12rpx;
|
|
padding-right: 12rpx;
|
|
padding-top: 12rpx;
|
|
padding-bottom: 8rpx;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hmall-secondary-item {
|
|
width: 20%;
|
|
height: 78rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hmall-secondary-item-active {
|
|
|
|
}
|
|
|
|
.hmall-secondary-icon-wrap {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 16rpx;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 6rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hmall-secondary-image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.hmall-secondary-icon-text {
|
|
font-size: 26rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.hmall-secondary-name {
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hmall-secondary-item-active .hmall-secondary-name {
|
|
color: #e1251b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hmall-recommend-section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 8rpx 0 18rpx;
|
|
}
|
|
|
|
.hmall-recommend-card {
|
|
width: 49%;
|
|
border-radius: 22rpx;
|
|
padding: 16rpx;
|
|
min-height: 236rpx;
|
|
margin-bottom: 14rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.hmall-recommend-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hmall-recommend-title-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.hmall-recommend-title {
|
|
font-size: 30rpx;
|
|
color: #202020;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.hmall-recommend-badge {
|
|
font-size: 18rpx;
|
|
border-width: 1rpx;
|
|
border-style: solid;
|
|
border-radius: 6rpx;
|
|
padding: 2rpx 6rpx;
|
|
line-height: 1.2;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.hmall-recommend-subtitle {
|
|
font-size: 22rpx;
|
|
color: #777777;
|
|
margin-top: 6rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hmall-recommend-products {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.hmall-recommend-product {
|
|
width: 48%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.hmall-recommend-product-image {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.hmall-recommend-product-name {
|
|
margin-top: 6rpx;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hmall-recommend-price-row {
|
|
margin-top: 4rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hmall-recommend-product-tag {
|
|
font-size: 18rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.hmall-recommend-product-price {
|
|
font-size: 23rpx;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hmall-recommend-market-price {
|
|
margin-top: 4rpx;
|
|
font-size: 18rpx;
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.hmall-simple-section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
padding: 0;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.hmall-simple-card {
|
|
width: 49%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 22rpx 18rpx;
|
|
min-height: 148rpx;
|
|
background: #ffffff;
|
|
border-radius: 22rpx;
|
|
box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.hmall-simple-card-with-divider {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.hmall-simple-left {
|
|
flex: 1;
|
|
padding-right: 12rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hmall-simple-title-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.hmall-simple-icon {
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
color: #202020;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.hmall-simple-title {
|
|
font-size: 30rpx;
|
|
line-height: 1.2;
|
|
color: #202020;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hmall-simple-subtitle {
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
color: #a0a0a0;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.hmall-simple-cover-wrap {
|
|
width: 116rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hmall-simple-cover-slot {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
border-radius: 14rpx;
|
|
overflow: hidden;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.hmall-simple-cover-image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.hmall-simple-cover-fallback {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
border-radius: 14rpx;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hmall-simple-cover-text {
|
|
font-size: 22rpx;
|
|
line-height: 1;
|
|
color: #555555;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hmall-feed-divider {
|
|
height: 20rpx;
|
|
background: #f3f4f6;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.hmall-products-section {
|
|
background: #f5f5f5;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.hmall-products-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
background: #f5f5f5;
|
|
margin-top: 0;
|
|
min-height: 0;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.hmall-product-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
width: 49%;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.hmall-products-grid-dense .hmall-product-card {
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.hmall-product-image-wrapper {
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
position: relative;
|
|
border-radius: 18rpx 18rpx 0 0;
|
|
overflow: hidden;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.hmall-product-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 18rpx 18rpx 0 0;
|
|
}
|
|
|
|
.hmall-product-image-wrapper-fixed {
|
|
padding-bottom: 100%;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.hmall-product-card-skeleton {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.hmall-product-body {
|
|
padding: 14rpx 14rpx 16rpx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.hmall-product-card-tags {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.hmall-product-card-tag {
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
padding: 0 8rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 18rpx;
|
|
font-weight: 700;
|
|
color: #fff7d1;
|
|
background: #e1251b;
|
|
margin-right: 6rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.hmall-product-title {
|
|
font-size: 24rpx;
|
|
color: #232323;
|
|
line-height: 1.35;
|
|
height: 64rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hmall-product-highlight {
|
|
font-size: 20rpx;
|
|
line-height: 28rpx;
|
|
color: #7a7a7a;
|
|
margin-top: 6rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hmall-product-service-tags {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.hmall-product-service-tag {
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
padding: 0 8rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 18rpx;
|
|
font-weight: 600;
|
|
color: #12b76a;
|
|
background: #ecfdf3;
|
|
margin-right: 6rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.hmall-product-price-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.hmall-product-price-value {
|
|
font-size: 34rpx;
|
|
line-height: 1;
|
|
color: #ff1030;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hmall-product-market-price {
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
color: #9a9a9a;
|
|
text-decoration: line-through;
|
|
margin-left: 8rpx;
|
|
margin-bottom: 2rpx;
|
|
}
|
|
|
|
.hmall-product-sales {
|
|
margin-top: 8rpx;
|
|
font-size: 20rpx;
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
.hmall-loading-state,
|
|
.hmall-load-more-status,
|
|
.hmall-feed-end-state {
|
|
padding: 28rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hmall-empty-wrap {
|
|
background: #ffffff;
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hmall-empty-state-extended {
|
|
padding-bottom: 32rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.hmall-empty-desc {
|
|
margin-top: -8rpx;
|
|
padding: 0 40rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: #9a9a9a;
|
|
text-align: center;
|
|
}
|
|
|
|
.hmall-loading-text,
|
|
.hmall-feed-end-text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
</style> |