admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(portal+login): 7 个 logo 占位符 '医' 换为 logo.png 图片

Browse Source 
- components/PortalShell.vue (navbar + footer, 共享给 3 个注册页)
- views/portal/Home.vue (navbar + footer)
- views/portal/ArticleView.vue (navbar + footer)
- views/portal/SpecialPlanDetail.vue (navbar + footer)
- views/portal/Publicity.vue (navbar + footer)
- views/portal/PublicityDetail.vue (navbar + footer)
- views/auth/Login.vue (登录页 logo)

每个 .logo-icon / .footer-logo-icon:
  HTML: <div class='logo-icon'>医</div> → 含 <img src='/logo.png'>
  CSS:  删 background/color/font-size/font-weight (字标样式)
       改 overflow:hidden + object-fit:contain (图片容器)

全站 '医' 字符占位符清零.
This commit is contained in:
郭庆泰
2026-08-22 20:54:45 +08:00
parent 5b54e84c4d
commit cec39554ee
7 changed files with 43 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-vue3/src/components/PortalShell.vue
+6 -6
View File
@@ -3,7 +3,7 @@
<!-- ========== 顶部导航 ========== --> <!-- ========== 顶部导航 ========== -->
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="goHome"> <a class="logo" title="返回首页" @click.prevent="goHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -48,7 +48,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -161,10 +161,10 @@ a { color: inherit; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 12px; } .logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { .logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff; color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; overflow: hidden; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; } .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; } .logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; }
.logo-subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; letter-spacing: 0.3px; } .logo-subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; letter-spacing: 0.3px; }
@@ -213,10 +213,10 @@ a { color: inherit; text-decoration: none; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff; color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; flex-shrink: 0; overflow: hidden; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; } .footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; }
.footer-brand-en { font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; margin-top: 2px; } .footer-brand-en { font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; margin-top: 2px; }
.footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); } .footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); }
ry-vue3/src/views/auth/Login.vue
+4 -5
View File
@@ -3,7 +3,7 @@
<!-- 顶部导航 --> <!-- 顶部导航 -->
<header class="header"> <header class="header">
<a class="logo" @click.prevent="$router.push('/portal/home')"> <a class="logo" @click.prevent="$router.push('/portal/home')">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -518,14 +518,13 @@ onUnmounted(() => {
.login-page .logo-icon{ .login-page .logo-icon{
width: 36px; width: 36px;
height: 36px; height: 36px;
background: var(--brand-primary); background: #fff;
color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600;
} }
.login-page .logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-page .logo-text{ .login-page .logo-text{
display: flex; display: flex;
ry-vue3/src/views/portal/ArticleView.vue
+6 -8
View File
@@ -2,7 +2,7 @@
<div class="detail-page"> <div class="detail-page">
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="goHome"> <a class="logo" title="返回首页" @click.prevent="goHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -51,7 +51,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -199,11 +199,10 @@ a { color: inherit; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 12px; } .logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { .logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; overflow: hidden; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; } .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; } .logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; }
.logo-subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; letter-spacing: 0.3px; } .logo-subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; letter-spacing: 0.3px; }
@@ -329,11 +328,10 @@ a { color: inherit; text-decoration: none; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; flex-shrink: 0; overflow: hidden; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; } .footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; }
.footer-brand-en { font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; margin-top: 2px; } .footer-brand-en { font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; margin-top: 2px; }
.footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); } .footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); }
ry-vue3/src/views/portal/Home.vue
+7 -10
View File
@@ -2,7 +2,7 @@
<div class="home-page"> <div class="home-page">
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="onHome"> <a class="logo" title="返回首页" @click.prevent="onHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -96,7 +96,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -309,14 +309,13 @@ a { color: inherit; text-decoration: none; }
.logo-icon { .logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { .logo-text {
display: flex; display: flex;
@@ -717,15 +716,13 @@ a { color: inherit; text-decoration: none; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600;
flex-shrink: 0; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { .footer-brand-name {
font-size: 16px; font-size: 16px;
ry-vue3/src/views/portal/Publicity.vue
+7 -10
View File
@@ -2,7 +2,7 @@
<div class="pub-page"> <div class="pub-page">
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="goHome"> <a class="logo" title="返回首页" @click.prevent="goHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -81,7 +81,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -309,14 +309,13 @@ a { color: inherit; text-decoration: none; }
.logo-icon { .logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { .logo-text {
display: flex; display: flex;
@@ -617,15 +616,13 @@ a { color: inherit; text-decoration: none; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600;
flex-shrink: 0; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { .footer-brand-name {
font-size: 16px; font-size: 16px;
ry-vue3/src/views/portal/PublicityDetail.vue
+7 -10
View File
@@ -2,7 +2,7 @@
<div class="detail-page"> <div class="detail-page">
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="goHome"> <a class="logo" title="返回首页" @click.prevent="goHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -118,7 +118,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -869,14 +869,13 @@ a { color: inherit; text-decoration: none; }
.logo-icon { .logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { .logo-text {
display: flex; display: flex;
@@ -1335,15 +1334,13 @@ a { color: inherit; text-decoration: none; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: #fff;
color: var(--brand-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; overflow: hidden;
font-weight: 600;
flex-shrink: 0; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { .footer-brand-name {
font-size: 16px; font-size: 16px;
ry-vue3/src/views/portal/SpecialPlanDetail.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div class="detail-page"> <div class="detail-page">
<header class="top-nav" :class="topNavClass"> <header class="top-nav" :class="topNavClass">
<a class="logo" title="返回首页" @click.prevent="goHome"> <a class="logo" title="返回首页" @click.prevent="goHome">
<div class="logo-icon">医</div> <div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">北京整合医学学会</span> <span class="logo-title">北京整合医学学会</span>
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span> <span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
@@ -72,7 +72,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<div class="brand-row"> <div class="brand-row">
<div class="footer-logo-icon">医</div> <div class="footer-logo-icon"><img src="/logo.png" alt="logo" /></div>
<div> <div>
<div class="footer-brand-name">北京整合医学学会</div> <div class="footer-brand-name">北京整合医学学会</div>
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div> <div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
@@ -227,10 +227,10 @@ a { color: inherit; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 12px; } .logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { .logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff; color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; overflow: hidden; flex-shrink: 0;
} }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; } .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; } .logo-title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; }
.logo-subtitle { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; letter-spacing: 0.3px; } .logo-subtitle { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; letter-spacing: 0.3px; }
@@ -301,10 +301,10 @@ a { color: inherit; text-decoration: none; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer-brand .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo-icon { .footer-logo-icon {
width: 36px; height: 36px; width: 36px; height: 36px;
background: #fff; color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; flex-shrink: 0; overflow: hidden; flex-shrink: 0;
} }
.footer-logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; } .footer-brand-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 1px; }
.footer-brand-en { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.5px; margin-top: 2px; } .footer-brand-en { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.5px; margin-top: 2px; }
.footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,0.55); } .footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,0.55); }