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
+20
-233
@@ -87,246 +87,33 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="seckill-page">
|
||||
<div class="min-h-screen bg-bg pb-14 font-sans text-text">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<section class="w1200 marketing-section">
|
||||
<header class="section-heading">
|
||||
<h1>{{ t("marketing.seckillTitle") }}</h1>
|
||||
</header>
|
||||
<div class="session-tabs" role="tablist">
|
||||
<button
|
||||
v-for="(session, index) in sessions"
|
||||
:key="session.id"
|
||||
type="button"
|
||||
class="session-tab"
|
||||
:class="{ active: index === activeSessionIndex }"
|
||||
role="tab"
|
||||
:aria-selected="index === activeSessionIndex"
|
||||
@click="activeSessionIndex = index; updateCountdown()"
|
||||
>
|
||||
<strong>{{ pick(session.label, locale) }}</strong>
|
||||
<span>{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
|
||||
<section class="mx-auto max-w-mall bg-surface px-4">
|
||||
<header class="border border-border border-b-0 bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.seckillTitle") }}</h1></header>
|
||||
<div class="grid grid-cols-2 border border-border border-b-0 sm:grid-cols-4" role="tablist">
|
||||
<button v-for="(session, index) in sessions" :key="session.id" type="button" class="flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r border-border bg-surface px-2 text-sm last:border-r-0" :class="index === activeSessionIndex ? 'bg-primary-soft text-primary' : ''" role="tab" :aria-selected="index === activeSessionIndex" @click="activeSessionIndex = index; updateCountdown()">
|
||||
<strong>{{ pick(session.label, locale) }}</strong><span class="text-xs text-muted">{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="activeSession" class="countdown" aria-live="polite">
|
||||
{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
|
||||
</p>
|
||||
<p v-if="error" class="seckill-error" role="alert">{{ error }}</p>
|
||||
|
||||
<div v-if="loading" class="muted">{{ t("common.loading") }}</div>
|
||||
<div v-else-if="activeSession && activeSession.items.length" class="seckill-grid">
|
||||
<article v-for="item in activeSession.items" :key="item.id" class="seckill-card hover-lift">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="product-image">
|
||||
<img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" loading="lazy" />
|
||||
</NuxtLink>
|
||||
<div class="product-body">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="product-name">{{ pick(item.product_name, locale) }}</NuxtLink>
|
||||
<p class="price-line">
|
||||
<span class="sale-price"><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span>
|
||||
<s class="original-price"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s>
|
||||
</p>
|
||||
<div class="progress-line">
|
||||
<div class="progress-track"><span :style="{ width: `${soldPct(item)}%` }"></span></div>
|
||||
<span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
|
||||
</div>
|
||||
<p class="stock-line">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="mbtn red grab-button"
|
||||
:disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id"
|
||||
@click="addToCart(item)"
|
||||
>
|
||||
{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}
|
||||
</button>
|
||||
<p v-if="activeSession" class="m-0 border border-border bg-bg px-4 py-3 text-center text-lg font-semibold text-primary" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>
|
||||
<p v-if="error" class="my-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger" role="alert">{{ error }}</p>
|
||||
<div v-if="loading" class="py-6 text-muted">{{ t("common.loading") }}</div>
|
||||
<div v-else-if="activeSession && activeSession.items.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
|
||||
<VCard v-for="item in activeSession.items" :key="item.id" :padded="false" class="min-w-0 overflow-hidden">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="flex h-52 items-center justify-center bg-bg"><img class="h-full w-full object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" loading="lazy" /></NuxtLink>
|
||||
<div class="p-3.5">
|
||||
<NuxtLink :to="`/goods/${item.product_slug}`" class="line-clamp-2 font-medium hover:text-primary">{{ pick(item.product_name, locale) }}</NuxtLink>
|
||||
<p class="my-2 flex items-center gap-2"><span class="text-lg font-semibold text-primary"><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span><s class="text-sm text-muted"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s></p>
|
||||
<div class="flex items-center gap-2 text-xs text-muted"><div class="h-2 flex-1 overflow-hidden rounded-full bg-bg"><span class="block h-full bg-primary" :style="{ width: `${soldPct(item)}%` }"></span></div><span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span></div>
|
||||
<p class="my-2 text-sm text-muted">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
|
||||
<VBtn class="w-full" variant="primary" type="button" :disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id" @click="addToCart(item)">{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}</VBtn>
|
||||
</div>
|
||||
</article>
|
||||
</VCard>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('marketing.noSeckillProducts')" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.seckill-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.marketing-section {
|
||||
background: #fff;
|
||||
}
|
||||
.section-heading {
|
||||
border: 1px solid var(--mall-line);
|
||||
border-bottom: 0;
|
||||
background: #fafafa;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
.section-heading h1 {
|
||||
margin: 0;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 10px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.session-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border: 1px solid var(--mall-line);
|
||||
border-bottom: 0;
|
||||
}
|
||||
.session-tab {
|
||||
display: flex;
|
||||
min-height: 70px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
color: var(--mall-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.session-tab:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.session-tab strong {
|
||||
color: var(--mall-ink);
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.session-tab span {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.session-tab.active {
|
||||
background: var(--mall-red);
|
||||
color: #fff;
|
||||
}
|
||||
.session-tab.active strong {
|
||||
color: #fff;
|
||||
}
|
||||
.session-tab.ended {
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.session-tab.ended strong {
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.seckill-error {
|
||||
margin: 12px 0 0;
|
||||
padding: 10px 14px;
|
||||
color: #b42318;
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffd6d2;
|
||||
}
|
||||
.stock-line {
|
||||
margin: 8px 0 10px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
.countdown {
|
||||
margin: 0;
|
||||
border: 1px solid var(--mall-line);
|
||||
border-top: 0;
|
||||
padding: 10px;
|
||||
color: var(--mall-red);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.seckill-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.seckill-card {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.product-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 205px;
|
||||
padding: 14px;
|
||||
}
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.product-body {
|
||||
padding: 0 14px 14px;
|
||||
}
|
||||
.product-name {
|
||||
display: block;
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
color: var(--mall-ink);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
text-decoration: none;
|
||||
}
|
||||
.product-name:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.price-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.sale-price {
|
||||
color: var(--mall-red);
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.original-price {
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
.progress-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
.progress-track {
|
||||
height: 7px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #f5d9db;
|
||||
}
|
||||
.progress-track span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--mall-red);
|
||||
}
|
||||
.grab-button {
|
||||
display: block;
|
||||
margin-top: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.w1200 {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
.seckill-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.session-tab {
|
||||
min-height: 62px;
|
||||
}
|
||||
.session-tab strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
.seckill-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user