新增：网站LOGO
This commit is contained in:
parent
8eb2c3204b
commit
970d688dd4
@ -2,7 +2,8 @@
|
|||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||||
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Alpha Market</title>
|
<title>Alpha Market</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
36
public/brand-logo.svg
Normal file
36
public/brand-logo.svg
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Alpha Market logo">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="am-blue" x1="13" y1="42" x2="52" y2="12" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stop-color="#3F6FB9" />
|
||||||
|
<stop offset="100%" stop-color="#2D5FAF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="am-gray" x1="14" y1="47" x2="46" y2="28" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stop-color="#B8BEC8" />
|
||||||
|
<stop offset="100%" stop-color="#7A8494" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
d="M12 45.5c5.4-1.2 10.4-4.6 15.1-10.1 3.8 1.5 7 3.9 9.6 7.2 2.7-4.7 6.6-8.4 11.8-11.2"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#am-gray)"
|
||||||
|
stroke-width="4.8"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12.5 40.8 25 24.5 35.1 34.3 49 15.2"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#am-blue)"
|
||||||
|
stroke-width="6"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M40.8 14.8h16v16"
|
||||||
|
fill="none"
|
||||||
|
stroke="#2D5FAF"
|
||||||
|
stroke-width="5.8"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.6 KiB |
38
public/favicon.svg
Normal file
38
public/favicon.svg
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Alpha Market favicon">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="am-blue" x1="15" y1="42" x2="52" y2="13" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stop-color="#3F6FB9" />
|
||||||
|
<stop offset="100%" stop-color="#2D5FAF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="am-gray" x1="14" y1="48" x2="45" y2="29" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stop-color="#B9C0CA" />
|
||||||
|
<stop offset="100%" stop-color="#818B9A" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="4" y="4" width="56" height="56" rx="14" fill="#FFFFFF" />
|
||||||
|
<rect x="4.5" y="4.5" width="55" height="55" rx="13.5" fill="none" stroke="#E7EBF0" />
|
||||||
|
<path
|
||||||
|
d="M14 45c5-1.1 9.7-4.2 14-9.3 3.5 1.4 6.5 3.6 8.9 6.6 2.5-4.3 6.1-7.7 10.9-10.2"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#am-gray)"
|
||||||
|
stroke-width="4.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14.5 40.6 26 25.6 35.4 34.7 48.5 16.8"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#am-blue)"
|
||||||
|
stroke-width="5.6"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M41.4 16.4H55v13.6"
|
||||||
|
fill="none"
|
||||||
|
stroke="#2D5FAF"
|
||||||
|
stroke-width="5.4"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
102
src/App.vue
102
src/App.vue
@ -87,7 +87,17 @@ watch(
|
|||||||
>
|
>
|
||||||
<v-icon>mdi-arrow-left</v-icon>
|
<v-icon>mdi-arrow-left</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-app-bar-title v-if="currentRoute === '/'">Alpha Market</v-app-bar-title>
|
<v-app-bar-title v-if="currentRoute === '/'" class="brand-title">
|
||||||
|
<div class="brand-lockup">
|
||||||
|
<div class="brand-mark-wrap">
|
||||||
|
<img src="/brand-logo.svg?v=2" alt="Alpha Market logo" class="brand-logo" />
|
||||||
|
</div>
|
||||||
|
<div class="brand-copy">
|
||||||
|
<span class="brand-kicker">Prediction Markets</span>
|
||||||
|
<span class="brand-name">Alpha Market</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-app-bar-title>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<template v-if="!userStore.isLoggedIn">
|
<template v-if="!userStore.isLoggedIn">
|
||||||
<v-menu
|
<v-menu
|
||||||
@ -203,6 +213,67 @@ watch(
|
|||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.brand-title {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-lockup {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark-wrap {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
|
||||||
|
border: 1px solid rgba(45, 95, 175, 0.12);
|
||||||
|
box-shadow: 0 8px 18px rgba(45, 95, 175, 0.08);
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-kicker {
|
||||||
|
font-size: 0.64rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #6f7f98;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
font-size: 1.04rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: #24498a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.app-main {
|
.app-main {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@ -245,6 +316,35 @@ watch(
|
|||||||
color: rgba(0, 0, 0, 0.87);
|
color: rgba(0, 0, 0, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.app-bar-inner {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-lockup {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark-wrap {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-kicker {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
font-size: 0.96rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 底部导航：整条栏上方淡投影；z-index 确保覆盖滚动条，显示在滚动条上层 */
|
/* 底部导航：整条栏上方淡投影；z-index 确保覆盖滚动条，显示在滚动条上层 */
|
||||||
:deep(.v-bottom-navigation) {
|
:deep(.v-bottom-navigation) {
|
||||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user