|
|
@@ -2,7 +2,9 @@
|
|
|
<header
|
|
|
class="fixed w-full top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
|
|
|
>
|
|
|
- <div class="w-full mx-auto flex items-center justify-between py-3 px-10">
|
|
|
+ <div
|
|
|
+ class="w-full mx-auto flex items-center justify-between px-10 pr-0 h-18"
|
|
|
+ >
|
|
|
<div class="flex items-center gap-2 cursor-pointer" @click="goHome">
|
|
|
<img :src="logo" alt="logo" class="w-20 h-9" />
|
|
|
<span class="text-[#02409b] text-[20px] font-bold border-l-2 pl-1"
|
|
|
@@ -10,7 +12,7 @@
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
- <nav class="hidden lg:flex flex-1 mx-4">
|
|
|
+ <nav class="hidden lg:flex flex-1 mx-4 ml-10 text-sm">
|
|
|
<ul class="flex items-center gap-6 text-[#303133]">
|
|
|
<li><a class="hover:text-[#409EFF] cursor-pointer">产品</a></li>
|
|
|
<li><a class="hover:text-[#409EFF] cursor-pointer">解决方案</a></li>
|
|
|
@@ -21,136 +23,141 @@
|
|
|
</ul>
|
|
|
</nav>
|
|
|
|
|
|
- <div class="hidden lg:flex items-center gap-3">
|
|
|
- <div class="flex items-center gap-3">
|
|
|
- <a class="text-[#606266] cursor-pointer">控制台</a>
|
|
|
- <template v-if="isLoggedIn">
|
|
|
- <el-dropdown @command="onUserCommand" trigger="click">
|
|
|
- <span class="flex items-center gap-2 cursor-pointer">
|
|
|
- <div class="avatar-wrapper">
|
|
|
- <img
|
|
|
- :src="userAvatar || person"
|
|
|
- alt="avatar"
|
|
|
- class="w-8 h-8 rounded-full avatar-image"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <span class="text-sm text-[#303133]">{{ userName }}</span>
|
|
|
- </span>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item command="profile"
|
|
|
- ><svg
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- width="18"
|
|
|
- height="18"
|
|
|
- viewBox="0 0 16 16"
|
|
|
- >
|
|
|
- <g fill="none">
|
|
|
- <path
|
|
|
- fill="url(#SVG3BqCJdyi)"
|
|
|
- d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
|
|
|
- />
|
|
|
- <path
|
|
|
- fill="url(#SVGfKhxtenh)"
|
|
|
- d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
|
|
|
- />
|
|
|
- <path
|
|
|
- fill="url(#SVGJYCMTblH)"
|
|
|
- d="M8 1.5A2.75 2.75 0 1 1 8 7a2.75 2.75 0 0 1 0-5.5"
|
|
|
- />
|
|
|
- <defs>
|
|
|
- <linearGradient
|
|
|
- id="SVG3BqCJdyi"
|
|
|
- x1="5.378"
|
|
|
- x2="7.616"
|
|
|
- y1="8.798"
|
|
|
- y2="14.754"
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
- >
|
|
|
- <stop offset=".125" stop-color="#9c6cfe" />
|
|
|
- <stop offset="1" stop-color="#7a41dc" />
|
|
|
- </linearGradient>
|
|
|
- <linearGradient
|
|
|
- id="SVGfKhxtenh"
|
|
|
- x1="8"
|
|
|
- x2="11.164"
|
|
|
- y1="7.286"
|
|
|
- y2="17.139"
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
- >
|
|
|
- <stop stop-color="#885edb" stop-opacity="0" />
|
|
|
- <stop offset="1" stop-color="#e362f8" />
|
|
|
- </linearGradient>
|
|
|
- <linearGradient
|
|
|
- id="SVGJYCMTblH"
|
|
|
- x1="6.558"
|
|
|
- x2="9.361"
|
|
|
- y1="2.231"
|
|
|
- y2="6.707"
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
- >
|
|
|
- <stop offset=".125" stop-color="#9c6cfe" />
|
|
|
- <stop offset="1" stop-color="#7a41dc" />
|
|
|
- </linearGradient>
|
|
|
- </defs>
|
|
|
- </g>
|
|
|
- </svg>
|
|
|
- <span class="pl-2">个人中心</span>
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item command="logout"
|
|
|
- ><svg
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- width="18"
|
|
|
- height="18"
|
|
|
- viewBox="0 0 24 24"
|
|
|
- >
|
|
|
- <g fill="none">
|
|
|
- <path
|
|
|
- fill="url(#SVG0pAmxd9w)"
|
|
|
- d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
|
|
|
- />
|
|
|
- <path
|
|
|
- fill="url(#SVGFnXqmeDt)"
|
|
|
- d="m15.53 8.47l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47l-.084-.072a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47l-.072.084a.75.75 0 0 0-.007.882l.08.094l.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47l.084.072a.75.75 0 0 0 .882.007l.094-.08l.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47l.072-.084a.75.75 0 0 0 .007-.882z"
|
|
|
- />
|
|
|
- <defs>
|
|
|
- <linearGradient
|
|
|
- id="SVG0pAmxd9w"
|
|
|
- x1="5.125"
|
|
|
- x2="18.25"
|
|
|
- y1="3.25"
|
|
|
- y2="22.625"
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
- >
|
|
|
- <stop stop-color="#f83f54" />
|
|
|
- <stop offset="1" stop-color="#ca2134" />
|
|
|
- </linearGradient>
|
|
|
- <linearGradient
|
|
|
- id="SVGFnXqmeDt"
|
|
|
- x1="8.685"
|
|
|
- x2="12.591"
|
|
|
- y1="12.332"
|
|
|
- y2="16.392"
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
- >
|
|
|
- <stop stop-color="#fdfdfd" />
|
|
|
- <stop offset="1" stop-color="#fecbe6" />
|
|
|
- </linearGradient>
|
|
|
- </defs>
|
|
|
- </g>
|
|
|
- </svg>
|
|
|
- <span class="pl-2">退出登录</span></el-dropdown-item
|
|
|
- >
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <el-button type="primary" class="bg-[#0050b3]!" @click="login"
|
|
|
- >登录</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
+ <div class="hidden lg:flex items-center gap-3 h-full">
|
|
|
+ <div class="flex items-center gap-2 cursor-pointer">
|
|
|
+ <Icon icon="mdi:server" class="w-4 h-4" />
|
|
|
+ <span class="text-sm">控制台</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ <template v-if="isLoggedIn">
|
|
|
+ <el-dropdown @command="onUserCommand" trigger="click">
|
|
|
+ <span class="flex items-center gap-2 cursor-pointer pr-2">
|
|
|
+ <div class="avatar-wrapper">
|
|
|
+ <img
|
|
|
+ :src="userAvatar || person"
|
|
|
+ alt="avatar"
|
|
|
+ class="w-8 h-8 rounded-full avatar-image"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span class="text-sm text-[#303133]">{{ userName }}</span>
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item command="profile">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="18"
|
|
|
+ height="18"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ >
|
|
|
+ <g fill="none">
|
|
|
+ <path
|
|
|
+ fill="url(#SVG3BqCJdyi)"
|
|
|
+ d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill="url(#SVGfKhxtenh)"
|
|
|
+ d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill="url(#SVGJYCMTblH)"
|
|
|
+ d="M8 1.5A2.75 2.75 0 1 1 8 7a2.75 2.75 0 0 1 0-5.5"
|
|
|
+ />
|
|
|
+ <defs>
|
|
|
+ <linearGradient
|
|
|
+ id="SVG3BqCJdyi"
|
|
|
+ x1="5.378"
|
|
|
+ x2="7.616"
|
|
|
+ y1="8.798"
|
|
|
+ y2="14.754"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop offset=".125" stop-color="#9c6cfe" />
|
|
|
+ <stop offset="1" stop-color="#7a41dc" />
|
|
|
+ </linearGradient>
|
|
|
+ <linearGradient
|
|
|
+ id="SVGfKhxtenh"
|
|
|
+ x1="8"
|
|
|
+ x2="11.164"
|
|
|
+ y1="7.286"
|
|
|
+ y2="17.139"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop stop-color="#885edb" stop-opacity="0" />
|
|
|
+ <stop offset="1" stop-color="#e362f8" />
|
|
|
+ </linearGradient>
|
|
|
+ <linearGradient
|
|
|
+ id="SVGJYCMTblH"
|
|
|
+ x1="6.558"
|
|
|
+ x2="9.361"
|
|
|
+ y1="2.231"
|
|
|
+ y2="6.707"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop offset=".125" stop-color="#9c6cfe" />
|
|
|
+ <stop offset="1" stop-color="#7a41dc" />
|
|
|
+ </linearGradient>
|
|
|
+ </defs>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <span class="pl-2">个人中心</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item command="logout">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="18"
|
|
|
+ height="18"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ >
|
|
|
+ <g fill="none">
|
|
|
+ <path
|
|
|
+ fill="url(#SVG0pAmxd9w)"
|
|
|
+ d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill="url(#SVGFnXqmeDt)"
|
|
|
+ d="m15.53 8.47l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47l-.084-.072a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47l-.072.084a.75.75 0 0 0-.007.882l.08.094l.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47l.084.072a.75.75 0 0 0 .882.007l.094-.08l.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47l.072-.084a.75.75 0 0 0 .007-.882z"
|
|
|
+ />
|
|
|
+ <defs>
|
|
|
+ <linearGradient
|
|
|
+ id="SVG0pAmxd9w"
|
|
|
+ x1="5.125"
|
|
|
+ x2="18.25"
|
|
|
+ y1="3.25"
|
|
|
+ y2="22.625"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop stop-color="#f83f54" />
|
|
|
+ <stop offset="1" stop-color="#ca2134" />
|
|
|
+ </linearGradient>
|
|
|
+ <linearGradient
|
|
|
+ id="SVGFnXqmeDt"
|
|
|
+ x1="8.685"
|
|
|
+ x2="12.591"
|
|
|
+ y1="12.332"
|
|
|
+ y2="16.392"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop stop-color="#fdfdfd" />
|
|
|
+ <stop offset="1" stop-color="#fecbe6" />
|
|
|
+ </linearGradient>
|
|
|
+ </defs>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <span class="pl-2">退出登录</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="bg-[#0050b3] hover:bg-[#0050b3]/90 text-white text-sm flex items-center justify-center cursor-pointer h-full px-10 py-4"
|
|
|
+ @click="login"
|
|
|
+ >
|
|
|
+ 登录
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
|
|
|
<div class="lg:hidden">
|
|
|
@@ -177,8 +184,8 @@
|
|
|
<li><a class="block py-2">开源社区</a></li>
|
|
|
</ul>
|
|
|
<div class="flex items-center gap-3 mt-3">
|
|
|
- <el-button type="primary" class="flex-1 bg-[#0050b3]!"
|
|
|
- >登录 / 注册</el-button
|
|
|
+ <el-button type="primary" class="flex-1 bg-[#0050b3]!" @click="login"
|
|
|
+ >登录</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -196,7 +203,7 @@ import { useUserStoreWithOut } from "@/stores/useUserStore";
|
|
|
const userStore = useUserStoreWithOut();
|
|
|
|
|
|
const isLoggedIn = computed(
|
|
|
- () => !!userStore.isSetUser || !!userStore.user?.id
|
|
|
+ () => !!userStore.isSetUser || !!userStore.user?.id,
|
|
|
);
|
|
|
const userAvatar = computed(() => userStore.user?.avatar || "");
|
|
|
const userName = computed(() => userStore.user?.nickname || "");
|