feat(ui): adopt Tailwind v4 design system and archive change
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
This commit is contained in:
Chengdong Zhang
+30
-307
@@ -18,10 +18,16 @@ const slug = computed(() => {
|
||||
|
||||
// A rejected read (unknown or suspended slug) leaves this null, which renders
|
||||
// the "unknown store" branch rather than an invented profile.
|
||||
const { data: shop } = await useAsyncData("shop-profile", () => $api.getShop(slug.value), {
|
||||
watch: [slug],
|
||||
default: () => null,
|
||||
});
|
||||
const { data: shop } = await useAsyncData(
|
||||
// Keyed by slug: Nuxt remounts this page on param change, and a static key
|
||||
// would serve the previous store's cached entry without re-running the handler.
|
||||
`shop-profile-${slug.value}`,
|
||||
() => $api.getShop(slug.value),
|
||||
{
|
||||
watch: [slug],
|
||||
default: () => null,
|
||||
},
|
||||
);
|
||||
const store = computed(() => shop.value);
|
||||
|
||||
const favorite = ref(false);
|
||||
@@ -37,7 +43,7 @@ const perPage = 12;
|
||||
const emptyPage: Paged<Product> = { items: [], total: 0, page: 1, per_page: perPage };
|
||||
|
||||
const { data: productResult } = await useAsyncData(
|
||||
"shop-products",
|
||||
`shop-products-${slug.value}`,
|
||||
() => {
|
||||
const current = store.value;
|
||||
if (!current) return Promise.resolve(emptyPage);
|
||||
@@ -154,317 +160,34 @@ const toggleFavorite = async (): Promise<void> => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="store-page">
|
||||
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<template v-if="store">
|
||||
<div v-if="store.banner" class="w1200 store-banner">
|
||||
<img :src="store.banner" :alt="pick(store.name, locale)" />
|
||||
</div>
|
||||
<div class="w1200 store-layout">
|
||||
<aside class="store-rail">
|
||||
<section class="mpanel store-card">
|
||||
<div class="store-heading">
|
||||
<img v-if="store.logo" :src="store.logo" :alt="pick(store.name, locale)" />
|
||||
<span v-else class="store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
<div>
|
||||
<h1>{{ pick(store.name, locale) }}</h1>
|
||||
<p>{{ t("stores.positiveRate") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="rateRows.length" class="rate-list">
|
||||
<div v-for="row in rateRows" :key="row.label" class="rate-row">
|
||||
<span>{{ row.label }}</span>
|
||||
<UiRatingStars :value="row.value" :size="13" />
|
||||
<strong>{{ row.value.toFixed(1) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="store-info">
|
||||
<div v-if="store.company"><dt>{{ t("stores.company") }}</dt><dd>{{ store.company }}</dd></div>
|
||||
<div v-if="store.region"><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
|
||||
<div v-if="store.address"><dt>{{ t("stores.address") }}</dt><dd>{{ pick(store.address, locale) }}</dd></div>
|
||||
</dl>
|
||||
<button
|
||||
type="button"
|
||||
class="mbtn favorite-button"
|
||||
:class="{ selected: favorite }"
|
||||
:disabled="favoriteLoading || favoriteBusy"
|
||||
@click="toggleFavorite"
|
||||
>
|
||||
{{ favorite ? t("stores.favorited") : t("stores.favorite") }}
|
||||
</button>
|
||||
<p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="store.notice || store.after_sale" class="mpanel notice-card">
|
||||
<template v-if="store.notice">
|
||||
<h2 class="rail-title">{{ t("stores.notice") }}</h2>
|
||||
<p>{{ pick(store.notice, locale) }}</p>
|
||||
</template>
|
||||
<template v-if="store.after_sale">
|
||||
<h2 class="rail-title">{{ t("stores.afterSale") }}</h2>
|
||||
<p>{{ pick(store.after_sale, locale) }}</p>
|
||||
</template>
|
||||
</section>
|
||||
<div v-if="store.banner" class="mx-auto h-[350px] w-full max-w-mall overflow-hidden bg-bg px-4 max-sm:h-[220px]"><img class="h-full w-full object-cover" :src="store.banner" :alt="pick(store.name, locale)" /></div>
|
||||
<div class="mx-auto mt-5 grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[270px_minmax(0,1fr)] lg:items-start">
|
||||
<aside class="min-w-0 space-y-5">
|
||||
<VCard>
|
||||
<div class="flex items-center gap-3 border-b border-border pb-3"><img v-if="store.logo" class="h-[58px] w-[58px] border border-border object-contain" :src="store.logo" :alt="pick(store.name, locale)" /><span v-else class="flex h-[58px] w-[58px] items-center justify-center border border-border bg-bg text-lg text-muted">{{ pick(store.name, locale).slice(0, 1) }}</span><div><h1 class="m-0 text-[15px] leading-[1.45]">{{ pick(store.name, locale) }}</h1><p class="mt-1 text-xs text-primary">{{ t("stores.positiveRate") }}</p></div></div>
|
||||
<div v-if="rateRows.length" class="space-y-1 border-b border-border py-3"><div v-for="row in rateRows" :key="row.label" class="flex min-h-[25px] items-center gap-1 text-xs text-muted"><span class="w-16">{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" /><strong class="ml-auto font-medium text-primary">{{ row.value.toFixed(1) }}</strong></div></div>
|
||||
<dl class="my-3 text-xs text-muted"><div v-if="store.company" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.company") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.company }}</dd></div><div v-if="store.region" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.region") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.region }}</dd></div><div v-if="store.address" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.address") }}</dt><dd class="m-0 min-w-0 break-words">{{ pick(store.address, locale) }}</dd></div></dl>
|
||||
<VBtn class="w-full" :class="favorite ? 'border-primary text-primary' : ''" type="button" :disabled="favoriteLoading || favoriteBusy" @click="toggleFavorite">{{ favorite ? t("stores.favorited") : t("stores.favorite") }}</VBtn>
|
||||
<p v-if="favoriteError" class="mt-1.5 text-xs text-danger">{{ favoriteError }}</p>
|
||||
</VCard>
|
||||
<VCard v-if="store.notice || store.after_sale">
|
||||
<template v-if="store.notice"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.notice") }}</h2><p class="text-sm text-text">{{ pick(store.notice, locale) }}</p></template>
|
||||
<template v-if="store.after_sale"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.afterSale") }}</h2><p class="text-sm text-text">{{ pick(store.after_sale, locale) }}</p></template>
|
||||
</VCard>
|
||||
</aside>
|
||||
|
||||
<section class="store-products">
|
||||
<header class="product-toolbar">
|
||||
<h2>{{ t("stores.storeProducts") }}</h2>
|
||||
<div class="product-sorts" role="tablist">
|
||||
<button type="button" :class="{ active: sortMode === 'default' }" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button>
|
||||
<button type="button" :class="{ active: sortMode === 'price' }" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button>
|
||||
</div>
|
||||
</header>
|
||||
<div v-if="productResult.items.length" class="product-grid">
|
||||
<UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" />
|
||||
</div>
|
||||
<section class="min-w-0">
|
||||
<header class="flex items-center justify-between border border-border bg-bg px-4 py-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"><h2 class="m-0 border-l-[3px] border-primary pl-2 text-[15px] font-medium">{{ t("stores.storeProducts") }}</h2><div class="flex"><button type="button" class="border-0 border-r border-border bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'default' ? 'font-bold text-primary' : ''" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button><button type="button" class="border-0 bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'price' ? 'font-bold text-primary' : ''" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button></div></header>
|
||||
<div v-if="productResult.items.length" class="mt-4 grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]"><UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" /></div>
|
||||
<UiEmptyState v-else :text="t('stores.noProducts')" />
|
||||
<UiPagination :page="productResult.page" :total="productResult.total" :per-page="productResult.per_page" @change="page = $event" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="w1200 missing-store">
|
||||
<UiEmptyState :text="t('stores.unknownStore')" />
|
||||
<NuxtLink to="/stores" class="mbtn">{{ t("stores.backToStores") }}</NuxtLink>
|
||||
</div>
|
||||
<div v-else class="mx-auto min-h-[360px] w-full max-w-mall px-4 pt-[60px] text-center"><UiEmptyState :text="t('stores.unknownStore')" /><NuxtLink to="/stores" class="mt-4 inline-flex items-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text no-underline">{{ t("stores.backToStores") }}</NuxtLink></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.store-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.store-banner {
|
||||
height: 350px;
|
||||
overflow: hidden;
|
||||
background: var(--mall-bg);
|
||||
}
|
||||
.store-banner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.store-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 270px 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
.store-rail {
|
||||
min-width: 0;
|
||||
}
|
||||
.mpanel {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--mall-line);
|
||||
}
|
||||
.store-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.store-heading {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
}
|
||||
.store-heading img {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid var(--mall-line);
|
||||
object-fit: contain;
|
||||
}
|
||||
.store-heading h1 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.store-heading p {
|
||||
margin: 4px 0 0;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.rate-list {
|
||||
padding: 12px 0 4px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
}
|
||||
.rate-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 25px;
|
||||
gap: 5px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.rate-row > span:first-child {
|
||||
width: 64px;
|
||||
}
|
||||
.rate-row strong {
|
||||
margin-left: auto;
|
||||
color: var(--mall-red);
|
||||
font-weight: 500;
|
||||
}
|
||||
.store-info {
|
||||
margin: 12px 0;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.store-info > div {
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
gap: 7px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.store-info dt {
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.store-info dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.favorite-button {
|
||||
width: 100%;
|
||||
}
|
||||
.favorite-button.selected {
|
||||
border-color: var(--mall-red);
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.favorite-error {
|
||||
margin: 6px 0 0;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.rail-title {
|
||||
margin: 0 0 12px;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.rank-item {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 48px 1fr;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid var(--mall-line);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.rank-number {
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.rank-item img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.rank-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
.rank-name,
|
||||
.rank-sales {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rank-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.rank-sales {
|
||||
margin-top: 4px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
.rank-price {
|
||||
grid-column: 2 / 4;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.store-products {
|
||||
min-width: 0;
|
||||
}
|
||||
.product-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.product-toolbar h2 {
|
||||
margin: 0;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 9px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.product-sorts {
|
||||
display: flex;
|
||||
}
|
||||
.product-sorts button {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--mall-line-dark);
|
||||
background: transparent;
|
||||
padding: 2px 12px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.product-sorts button:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.product-sorts button.active {
|
||||
color: var(--mall-red);
|
||||
font-weight: 700;
|
||||
}
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.product-grid :deep(.card) {
|
||||
min-width: 0;
|
||||
}
|
||||
.missing-store {
|
||||
min-height: 360px;
|
||||
padding-top: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.w1200 {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
.store-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.store-banner {
|
||||
height: 220px;
|
||||
}
|
||||
.product-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.product-sorts button {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,191 +15,25 @@ const breadcrumb = computed(() => [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stores-page">
|
||||
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<section class="w1200 store-directory">
|
||||
<header class="sort-row">
|
||||
<h1>{{ t("stores.directory") }}</h1>
|
||||
</header>
|
||||
|
||||
<div v-if="stores.length" class="store-list">
|
||||
<article v-for="store in stores" :key="store.id" class="store-row hover-lift">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="store-logo-link">
|
||||
<img v-if="store.logo" class="store-logo" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
|
||||
<span v-else class="store-logo store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
</NuxtLink>
|
||||
<div class="store-main">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="store-name">{{ pick(store.name, locale) }}</NuxtLink>
|
||||
<p v-if="store.company" class="store-company">{{ store.company }}</p>
|
||||
<p v-if="store.region || store.address" class="store-location">
|
||||
<span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span>
|
||||
<span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="store-rating">{{ t("stores.positiveRate") }}</div>
|
||||
<div class="store-actions">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="mbtn red">{{ t("stores.visitStore") }}</NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('common.empty')" />
|
||||
<section class="mx-auto w-full max-w-mall px-4">
|
||||
<VCard :padded="false" class="overflow-hidden">
|
||||
<header class="flex items-center justify-between border-b border-border bg-bg px-[18px] py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-base font-medium">{{ t("stores.directory") }}</h1></header>
|
||||
<div v-if="stores.length" class="divide-y divide-border">
|
||||
<article v-for="store in stores" :key="store.id" class="flex min-h-[126px] items-center gap-0 bg-surface px-[22px] py-5 hover:bg-bg max-sm:flex-wrap max-sm:gap-3">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="flex h-20 w-20 shrink-0 items-center justify-center border border-border bg-surface">
|
||||
<img v-if="store.logo" class="h-[72px] w-[72px] object-contain" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
|
||||
<span v-else class="flex h-full w-full items-center justify-center bg-bg text-[28px] font-bold uppercase text-muted" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
</NuxtLink>
|
||||
<div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0"><NuxtLink :to="`/stores/${store.slug}`" class="block text-base font-bold text-text no-underline hover:text-primary">{{ pick(store.name, locale) }}</NuxtLink><p v-if="store.company" class="mt-2 text-[13px] text-muted">{{ store.company }}</p><p v-if="store.region || store.address" class="mt-2 flex gap-6 text-xs text-muted max-sm:flex-col max-sm:gap-1"><span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span><span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span></p></div>
|
||||
<div class="w-[130px] text-center text-[13px] text-primary max-sm:ml-[100px] max-sm:w-auto">{{ t("stores.positiveRate") }}</div>
|
||||
<div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto"><NuxtLink :to="`/stores/${store.slug}`" class="inline-flex items-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white no-underline hover:bg-primary-hover">{{ t("stores.visitStore") }}</NuxtLink></div>
|
||||
</article>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('common.empty')" />
|
||||
</VCard>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stores-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.store-directory {
|
||||
background: #fff;
|
||||
}
|
||||
.sort-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fafafa;
|
||||
padding: 13px 18px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sort-options {
|
||||
display: flex;
|
||||
}
|
||||
.sort-options button {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--mall-line-dark);
|
||||
background: transparent;
|
||||
color: var(--mall-muted);
|
||||
padding: 2px 15px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sort-options button:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.sort-options button.active {
|
||||
color: var(--mall-red);
|
||||
font-weight: 700;
|
||||
}
|
||||
.store-list {
|
||||
border: 1px solid var(--mall-line);
|
||||
border-top: 0;
|
||||
}
|
||||
.store-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 126px;
|
||||
padding: 20px 22px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.store-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.store-logo-link {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 80px;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.store-logo {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* A shop with no profile still needs a mark, without inventing a logo. */
|
||||
.store-logo-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--mall-line);
|
||||
color: var(--mall-muted);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.store-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 28px;
|
||||
}
|
||||
.store-name {
|
||||
display: block;
|
||||
color: var(--mall-ink);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.store-name:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.store-company,
|
||||
.store-location {
|
||||
margin: 8px 0 0;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.store-location {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
.store-rating {
|
||||
width: 130px;
|
||||
color: var(--mall-red);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.store-actions {
|
||||
display: flex;
|
||||
width: 145px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.distance {
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.w1200 {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.store-row {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.store-main {
|
||||
width: calc(100% - 100px);
|
||||
padding: 0;
|
||||
}
|
||||
.store-location {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.store-rating {
|
||||
width: auto;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.store-actions {
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user