feat: 完善右上角登陆后状态+头部导航内容UI

assets/icons/trend.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18"
+    viewBox="0 0 18 18">
+    <defs>
+        <clipPath id="master_svg0_308_9231">
+            <rect x="0" y="0" width="18" height="18" rx="0" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#master_svg0_308_9231)">
+        <g>
+            <g>
+                <path
+                    d="M7.36376953125,10.221471291503907L8.51876953125,10.221471291503907L8.51876953125,12.278951291503907L9.743769531249999,12.278951291503907L9.743769531249999,10.221471291503907L10.88126953125,10.221471291503907L10.88126953125,8.941261291503906L7.36376953125,8.941261291503906L7.36376953125,10.221471291503907Z"
+                    fill-opacity="1" style="mix-blend-mode:passthrough" />
+            </g>
+            <g>
+                <path
+                    d="M14.9675,7.04768C15.5975,6.5356,16,5.7308900000000005,16,4.83475C16,3.2893499999999998,14.8013,2.0365774,13.3225,2.0365774C12.43,2.0365774,11.63375,2.493795,11.1525,3.1979100000000003C10.505,2.9693009999999997,9.813749999999999,2.832136,9.096250000000001,2.832136C8.32625,2.832136,7.6,2.978445,6.9175,3.23449C6.4275,2.493795,5.605,2,4.6775,2C3.19875,2,2,3.25278,2,4.79817C2,5.767469999999999,2.4725,6.6179,3.18125,7.12084C2.9275,7.8341,2.7875,8.61137,2.7875,9.416070000000001C2.7875,13.0555,5.605,16,9.0875,16C12.57,16,15.3875,13.0555,15.3875,9.416070000000001C15.3875,8.583929999999999,15.2388,7.78837,14.9675,7.04768ZM13.3225,3.31679C14.1275,3.31679,14.775,4.00261,14.775,4.83475C14.775,5.2279599999999995,14.6263,5.59373,14.39,5.86806C13.8562,5.00849,13.1388,4.27694,12.2988,3.75572C12.5613,3.4813799999999997,12.92,3.31679,13.3225,3.31679ZM14.705,6.44415Q14.705,6.43501,14.705,6.44415Q14.705,6.43501,14.705,6.44415ZM6.62,3.3625100000000003C6.61125,3.3625100000000003,6.61125,3.37165,6.6025,3.37165C6.61125,3.3625100000000003,6.61125,3.3625100000000003,6.62,3.3625100000000003ZM4.6775,3.2802100000000003C5.115,3.2802100000000003,5.5175,3.4905299999999997,5.779999999999999,3.81058C4.94875,4.350099999999999,4.24,5.08165,3.72375,5.95036C3.4175,5.66688,3.21625,5.25539,3.21625,4.79817C3.225,3.96603,3.88125,3.2802100000000003,4.6775,3.2802100000000003ZM3.30375,6.80993C3.30375,6.81907,3.295,6.81907,3.30375,6.80993C3.295,6.81907,3.30375,6.81907,3.30375,6.80993ZM9.0875,14.7289C6.2875,14.7289,4.0125,12.3514,4.0125,9.42521C4.0125,6.49902,6.2875,4.12149,9.0875,4.12149C11.8875,4.12149,14.1625,6.49902,14.1625,9.42521C14.1625,12.3514,11.8875,14.7289,9.0875,14.7289ZM14.8363,6.73677C14.845,6.73677,14.845,6.73677,14.8363,6.73677C14.845,6.73677,14.845,6.73677,14.8363,6.73677Z"
+                    fill-opacity="1" style="mix-blend-mode:passthrough" />
+            </g>
+        </g>
+    </g>
+</svg>

components/common/navigation/icon-group.vue

@@ -0,0 +1,24 @@
+<script lang='ts' setup>
+defineProps({
+  icon: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="">
+    <svgo-trend v-if="icon === 'trend'" class="!w-20px !h-20px" />
+    <svgo-tech v-if="icon === 'tech'" class="!w-20px !h-20px" />
+    <svgo-lifeStyle v-if="icon === 'lifeStyle'" class="!w-20px !h-20px" />
+    <svgo-stationery v-if="icon === 'stationery'" class="!w-20px !h-20px" />
+    <svgo-fashion v-if="icon === 'fashion'" class="!w-20px !h-20px" />
+    <svgo-gifts v-if="icon === 'gifts'" class="!w-20px !h-20px" />
+    <svgo-creative v-if="icon === 'creative'" class="!w-20px !h-20px" />
+    <svgo-beauty v-if="icon === 'beauty'" class="!w-20px !h-20px" />
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

components/common/navigation/index.vue

@@ -2,16 +2,72 @@
 
 <script lang="ts" setup>
 import { ArrowDown } from '@element-plus/icons-vue'
+import IconGroup from './icon-group.vue'
 import { useCommonStore } from '@/stores/modules/common'
 
 const router = useRouter()
 const commonStore = useCommonStore()
-const { navigateTextColor } = storeToRefs(commonStore)
+const { navigateTextColor, navigateBgColor } = storeToRefs(commonStore)
 
 const catalogsVisible = ref<boolean>(false)
 const resourceVisible = ref<boolean>(false)
 const aboutVisible = ref<boolean>(false)
 
+const list = ref<any>([
+  {
+    key: 'trend',
+    name: 'Trend Toys',
+  },
+  {
+    key: 'tech',
+    name: 'Tech Gadgets',
+  },
+  {
+    key: 'lifeStyle',
+    name: 'Lifestyle & Wellness',
+  },
+  {
+    key: 'stationery',
+    name: 'Stationery & Office',
+  },
+  {
+    key: 'fashion',
+    name: 'Fashion Accessories',
+  },
+  {
+    key: 'gifts',
+    name: 'Gifts & Seasonal',
+  },
+  {
+    key: 'creative',
+    name: 'Creative Home Products',
+  },
+  {
+    key: 'beauty',
+    name: 'Beauty & Persoanl Care',
+  },
+])
+const TrendList = [
+  {
+    image: 'https://picsum.photos/220/136',
+    name: 'Trend Toys',
+    slug: 'trend-toys',
+    id: 'trend-toys',
+  },
+  {
+    image: 'https://picsum.photos/220/136',
+    name: 'Trend Toys',
+    slug: 'trend-toys',
+    id: 'trend-toys',
+  },
+  {
+    image: 'https://picsum.photos/220/136',
+    name: 'Trend Toys',
+    slug: 'trend-toys',
+    id: 'trend-toys',
+  },
+]
+
 function toCategories() {
   router.push('/categories')
 }
@@ -29,7 +85,7 @@ function toCategories() {
       Solutions
     </NuxtLink>
     <el-dropdown
-      popper-class="custom-navigate-dropdown no-dropdown"
+      popper-class="custom-navigate-dropdown2"
       @visible-change="(visible) => (catalogsVisible = visible)"
     >
       <span
@@ -48,9 +104,54 @@ function toCategories() {
           <ArrowDown class="text-14px" />
         </el-icon>
       </span>
+      <template #dropdown>
+        <div class="w-1200px p-30px flex items-center justify-center">
+          <div class="pr-10px  b-r-1px b-r-solid b-r-#E0E4EA">
+            <div class="mb-20px text-16px fw-800 text-#333">
+              By Category
+            </div>
+            <div class="grid grid-cols-2 grid-gap-x-15px grid-gap-y-10px">
+              <div v-for="(item, index) in list" :key="item.id" class="a-link-out hover:text-#9B6CFF hover:bg-#F3F4FB py-8px pl-10px b-rd-6px flex items-center cursor-pointer text-#999">
+                <IconGroup :icon="item.key" />
+                <NuxtLink
+                  :to="`/categories/${item.id}`"
+                  class="text-#333 ml-10px text-14px"
+                >
+                  {{ item.name }}
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+          <div class="pl-30px">
+            <div class="mb-20px text-16px fw-800 text-#333">
+              By Category
+            </div>
+            <div class="grid grid-cols-3 grid-gap-x-20px">
+              <div
+                v-for="(item, index) in TrendList"
+                :key="index"
+                class="cursor-pointer"
+              >
+                <NuxtLink
+                  :to="`/categories/${item.slug}`"
+                >
+                  <img
+                    :src="item.image"
+                    alt=""
+                    class="w-220px h-136px mb-10px b-rd-4px"
+                  >
+                  <div class="text-14px fw-800 custom-title-font text-#333 line-clamp-1">
+                    {{ item.name }}
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
     </el-dropdown>
     <el-dropdown
-      popper-class="custom-navigate-dropdown "
+      popper-class="custom-navigate-dropdown"
       @visible-change="(visible) => (resourceVisible = visible)"
     >
       <span
@@ -130,10 +231,30 @@ function toCategories() {
 .custom-arrow-down {
   transform: rotate(0deg);
 }
+.a-link-out:hover a{
+  color: #9B6CFF;
+}
 </style>
 
-<style>
+<style lang="less">
 .custom-navigate-color {
   color: #fff;
 }
+.custom-navigate-dropdown2{
+  border-radius: 0px!important;
+  margin-top: 14px;
+  padding:0px!important;
+  border-width: 0px!important;
+  background-color: #fff;
+  opacity: 0.9;
+  border-radius: 6px!important;
+  left: 50%!important;
+  transition: all 0.3s ease-in-out;
+  transform: translateX(-50%);
+   backdrop-filter: blur(5px)!important;
+   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1)!important;
+  .el-popper__arrow {
+        display: none;
+  }
+}
 </style>