wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
@@ -39,38 +39,52 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
|
||||
|
||||
<template>
|
||||
<header class="bg-surface">
|
||||
<div class="mx-auto flex max-w-mall items-center gap-10 px-4 py-6">
|
||||
<NuxtLink to="/" class="text-[34px] font-extrabold leading-none tracking-[1px] text-primary no-underline">VMall</NuxtLink>
|
||||
<div class="max-w-mall mx-auto flex items-center gap-10 px-4 py-6">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="text-primary text-[34px] leading-none font-extrabold tracking-[1px] no-underline"
|
||||
>VMall</NuxtLink
|
||||
>
|
||||
|
||||
<div class="flex min-w-0 flex-1 items-center">
|
||||
<div class="flex min-w-0 flex-1 items-center">
|
||||
<input
|
||||
v-model="keywords"
|
||||
class="h-[38px] min-w-0 flex-1 border border-border border-r-0 bg-surface px-3 text-[12px] text-text outline-none focus:border-primary"
|
||||
class="border-border bg-surface text-text focus:border-primary h-[38px] min-w-0 flex-1 border border-r-0 px-3 text-[12px] outline-none"
|
||||
type="text"
|
||||
:placeholder="t('shell.searchPlaceholder')"
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
<button
|
||||
class="flex h-[38px] w-[38px] items-center justify-center border border-border bg-surface text-muted transition-colors hover:bg-primary hover:text-white"
|
||||
class="border-border bg-surface text-muted hover:bg-primary flex h-[38px] w-[38px] items-center justify-center border transition-colors hover:text-white"
|
||||
type="button"
|
||||
:aria-label="t('common.search')"
|
||||
@click="search"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
|
||||
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ml-7 flex h-[38px] items-center gap-5 border border-border px-5 text-[12px]">
|
||||
<NuxtLink to="/user" class="relative text-muted no-underline transition-colors hover:text-primary">{{ t("shell.myMall") }}</NuxtLink>
|
||||
<NuxtLink to="/cart" class="relative text-muted no-underline transition-colors hover:text-primary">
|
||||
<div class="border-border ml-7 flex h-[38px] items-center gap-5 border px-5 text-[12px]">
|
||||
<NuxtLink
|
||||
to="/user"
|
||||
class="text-muted hover:text-primary relative no-underline transition-colors"
|
||||
>{{ t("shell.myMall") }}</NuxtLink
|
||||
>
|
||||
<NuxtLink
|
||||
to="/cart"
|
||||
class="text-muted hover:text-primary relative no-underline transition-colors"
|
||||
>
|
||||
{{ t("shell.myCart") }}
|
||||
<span
|
||||
v-if="cart.count > 0"
|
||||
class="absolute -right-3 -top-3 rounded-sm bg-primary px-1 text-[11px] leading-4 text-white"
|
||||
>{{ cart.count }}</span>
|
||||
class="bg-primary absolute -top-3 -right-3 rounded-sm px-1 text-[11px] leading-4 text-white"
|
||||
>{{ cart.count }}</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,7 +93,7 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
|
||||
<select
|
||||
:value="currency"
|
||||
:aria-label="t('common.currency')"
|
||||
class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 h-[30px] min-w-[76px] rounded-md border px-2 text-[12px] focus:outline-2"
|
||||
@change="currency = ($event.target as HTMLSelectElement).value"
|
||||
>
|
||||
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
|
||||
@@ -87,7 +101,7 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
|
||||
<select
|
||||
:value="locale"
|
||||
:aria-label="t('common.language')"
|
||||
class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 h-[30px] min-w-[76px] rounded-md border px-2 text-[12px] focus:outline-2"
|
||||
@change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
|
||||
>
|
||||
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
|
||||
@@ -96,9 +110,9 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
|
||||
</div>
|
||||
|
||||
<nav class="h-10 bg-[#2d2d2d] text-sm leading-10 text-white">
|
||||
<div class="mx-auto flex max-w-mall px-4">
|
||||
<div class="max-w-mall mx-auto flex px-4">
|
||||
<div
|
||||
class="relative w-[240px] cursor-pointer bg-primary pl-[15px] font-medium"
|
||||
class="bg-primary relative w-[240px] cursor-pointer pl-[15px] font-medium"
|
||||
@mouseenter="menuOpen = true"
|
||||
@mouseleave="menuOpen = false"
|
||||
>
|
||||
@@ -106,12 +120,48 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
|
||||
<ShellCategoryMenu v-show="showMenu" />
|
||||
</div>
|
||||
<ul class="flex pl-5">
|
||||
<li><NuxtLink to="/" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.home") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/stores" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.stores") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/seckill" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.seckill") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/collective" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.collective") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/integral" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.integral") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/user" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.help") }}</NuxtLink></li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.home") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/stores"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.stores") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/seckill"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.seckill") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/collective"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.collective") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/integral"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.integral") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/user"
|
||||
class="block px-[30px] text-white no-underline transition-colors hover:bg-black"
|
||||
>{{ t("shell.nav.help") }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user