Skip to content

Commit 550eb4d

Browse files
maliya19871225maliya19871225
committed
[frontend] modify font style and qrcode.
1 parent e441906 commit 550eb4d

File tree

3 files changed

+89
-96
lines changed

3 files changed

+89
-96
lines changed

‎frontend/src/assets/images/二维码.png‎

1.5 MB
Loading

‎frontend/src/pages/welcome/index.less‎

Lines changed: 56 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -95,29 +95,6 @@
9595
}
9696
}
9797

98-
.navbar-links {
99-
display: flex;
100-
gap: 32px;
101-
font-size: 14px;
102-
font-weight: 500;
103-
color: #d1d5db;
104-
margin-left: 24px;
105-
106-
a {
107-
color: inherit;
108-
text-decoration: none;
109-
transition: color 0.2s;
110-
111-
&:hover {
112-
color: #fff;
113-
}
114-
}
115-
116-
@media (max-width: 768px) {
117-
display: none;
118-
}
119-
}
120-
12198
.navbar-actions {
12299
display: flex;
123100
align-items: center;
@@ -178,6 +155,19 @@
178155
}
179156
}
180157

158+
.navbar-link-doc {
159+
font-size: 14px;
160+
font-weight: 500;
161+
color: #bfc5d2;
162+
text-decoration: none;
163+
padding: 8px 0;
164+
transition: color 0.2s ease;
165+
166+
&:hover {
167+
color: #fff;
168+
}
169+
}
170+
181171
.navbar-mobile-toggle {
182172
margin-left: auto;
183173
display: none;
@@ -1564,7 +1554,7 @@
15641554
.quickstart-terminal-body {
15651555
margin: 0;
15661556
padding: 24px;
1567-
font-family: 'Space Mono', monospace;
1557+
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
15681558
font-size: 14px;
15691559
line-height: 1.8;
15701560
color: #d2d6ff;
@@ -2547,74 +2537,64 @@
25472537
margin-bottom: 16px;
25482538
}
25492539

2550-
.footer-qrcode {
2540+
.footer-qrcodes {
25512541
display: flex;
2552-
align-items: center;
2553-
gap: 16px;
2554-
padding: 16px;
2555-
border-radius: 18px;
2556-
background: rgba(255, 255, 255, 0.03);
2557-
border: 1px solid rgba(255, 255, 255, 0.06);
2558-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
2559-
2560-
.footer-qrcode-media {
2561-
width: 120px;
2562-
height: 120px;
2563-
border-radius: 12px;
2564-
padding: 8px;
2565-
background: rgba(255, 255, 255, 0.05);
2566-
border: 1px solid rgba(255, 255, 255, 0.12);
2542+
gap: 20px;
2543+
margin-top: 16px;
2544+
2545+
.footer-qrcode-item {
25672546
display: flex;
2547+
flex-direction: column;
25682548
align-items: center;
2569-
justify-content: center;
2570-
transition: transform 0.2s ease, border-color 0.2s ease;
2571-
2572-
img {
2573-
width: 100%;
2574-
height: 100%;
2575-
object-fit: contain;
2576-
}
2549+
gap: 8px;
2550+
flex: 1;
25772551

2578-
&:hover {
2579-
transform: scale(1.04);
2580-
border-color: rgba(255, 255, 255, 0.3);
2581-
}
2582-
}
2552+
.footer-qrcode-media {
2553+
width: 120px;
2554+
height: 120px;
2555+
border-radius: 12px;
2556+
padding: 8px;
2557+
background: rgba(255, 255, 255, 0.05);
2558+
border: 1px solid rgba(255, 255, 255, 0.12);
2559+
display: flex;
2560+
align-items: center;
2561+
justify-content: center;
2562+
transition: transform 0.2s ease, border-color 0.2s ease;
25832563

2584-
.footer-qrcode-copy {
2585-
display: flex;
2586-
flex-direction: column;
2587-
gap: 6px;
2588-
text-align: left;
2564+
img {
2565+
width: 100%;
2566+
height: 100%;
2567+
object-fit: contain;
2568+
border-radius: 8px;
2569+
}
25892570

2590-
strong {
2591-
font-size: 16px;
2592-
color: #fff;
2571+
&:hover {
2572+
transform: scale(1.05);
2573+
border-color: rgba(255, 255, 255, 0.3);
2574+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
2575+
}
25932576
}
25942577

2595-
p {
2596-
font-size: 14px;
2597-
color: #d1d5db;
2578+
.footer-qrcode-label {
2579+
font-size: 12px;
2580+
color: #9ca3af;
25982581
margin: 0;
2599-
}
2600-
2601-
span {
2602-
font-size: 13px;
2603-
color: #6b7280;
2582+
text-align: center;
26042583
}
26052584
}
26062585

26072586
@media (max-width: 768px) {
26082587
flex-direction: column;
2609-
align-items: stretch;
2588+
gap: 16px;
26102589

2611-
.footer-qrcode-media {
2612-
width: 100%;
2613-
height: auto;
2614-
padding: 12px;
2590+
.footer-qrcode-item {
2591+
.footer-qrcode-media {
2592+
width: 140px;
2593+
height: 140px;
2594+
}
26152595

2616-
img {
2617-
height: 180px;
2596+
.footer-qrcode-label {
2597+
font-size: 13px;
26182598
}
26192599
}
26202600
}

‎frontend/src/pages/welcome/index.tsx‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ import hljs from 'highlight.js';
3333
import 'highlight.js/styles/monokai-sublime.min.css';
3434
import './index.less';
3535

36+
// 使用 require 导入中文文件名的图片
37+
const wechatQrcode = require('../../assets/images/二维码.png');
38+
3639
// 瑞金医院病理推理成功案例
3740
const ruijinCase = {
3841
partner: '上海交通大学医学院附属瑞金医院',
@@ -722,17 +725,24 @@ const Footer: React.FC = () => (
722725
<div className="footer-column footer-follow">
723726
<h4>关注我们</h4>
724727
<p className="footer-follow-desc">扫码加入技术交流群，掌握产品更新、获取技术支持，与更多开发者协作。</p>
725-
<div className="footer-qrcode">
726-
<div className="footer-qrcode-media">
727-
<img
728-
src="https://modelengine-ai.com/assets/fit-wechat-account.6e8dca4b.png"
729-
alt="联系我们二维码"
730-
/>
728+
<div className="footer-qrcodes">
729+
<div className="footer-qrcode-item">
730+
<div className="footer-qrcode-media">
731+
<img
732+
src={wechatQrcode}
733+
alt="微信二维码"
734+
/>
735+
</div>
736+
<p className="footer-qrcode-label">微信扫码加入社区</p>
731737
</div>
732-
<div className="footer-qrcode-copy">
733-
<strong>联系我们</strong>
734-
<p>微信扫码加入 Aido 社区交流群</p>
735-
<span>获取解决方案、技术支持与最佳实践</span>
738+
<div className="footer-qrcode-item">
739+
<div className="footer-qrcode-media">
740+
<img
741+
src="https://modelengine-ai.com/assets/fit-wechat-account.6e8dca4b.png"
742+
alt="微信公众号"
743+
/>
744+
</div>
745+
<p className="footer-qrcode-label">关注微信公众号</p>
736746
</div>
737747
</div>
738748
</div>
@@ -847,7 +857,7 @@ const HeroSection: React.FC<{ experienceUrl: string }> = ({ experienceUrl }) =>
847857
</section>
848858
);
849859

850-
const Navbar: React.FC<{ marketplaceUrl: string; freeTrialUrl: string }> = ({ marketplaceUrl, freeTrialUrl }) => {
860+
const Navbar: React.FC<{ freeTrialUrl: string }> = ({ freeTrialUrl }) => {
851861
const [isScrolled, setIsScrolled] = useState(false);
852862
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
853863

@@ -864,11 +874,15 @@ const Navbar: React.FC<{ marketplaceUrl: string; freeTrialUrl: string }> = ({ ma
864874
<div className="logo-icon">A</div>
865875
<span className="logo-text">Aido</span>
866876
</div>
867-
<div className="navbar-links">
868-
<a href={marketplaceUrl} target="_blank" rel="noreferrer">魔擎市场</a>
869-
<a href="https://modelengine-ai.com/#/docs/zh_CN/model-engine-intro" target="_blank" rel="noreferrer">文档</a>
870-
</div>
871877
<div className="navbar-actions">
878+
<a
879+
className="navbar-link-doc"
880+
href="https://modelengine-ai.com/#/docs/zh_CN/model-engine-intro"
881+
target="_blank"
882+
rel="noreferrer"
883+
>
884+
文档
885+
</a>
872886
<a
873887
className="navbar-btn-ghost"
874888
href="https://github.com/ModelEngine-Group/app-platform"
@@ -887,14 +901,14 @@ const Navbar: React.FC<{ marketplaceUrl: string; freeTrialUrl: string }> = ({ ma
887901
{mobileMenuOpen && (
888902
<div className="navbar-mobile-menu">
889903
<a
890-
href={marketplaceUrl}
904+
className="navbar-link-doc"
905+
href="https://modelengine-ai.com/#/docs/zh_CN/model-engine-intro"
891906
target="_blank"
892907
rel="noreferrer"
893908
onClick={() => setMobileMenuOpen(false)}
894909
>
895-
魔擎市场
910+
文档
896911
</a>
897-
<a href="https://modelengine-ai.com/#/docs/zh_CN/model-engine-intro" target="_blank" rel="noreferrer">文档</a>
898912
<a
899913
className="navbar-btn-ghost"
900914
href="https://github.com/ModelEngine-Group/app-platform"
@@ -926,7 +940,6 @@ const Navbar: React.FC<{ marketplaceUrl: string; freeTrialUrl: string }> = ({ ma
926940
* @constructor
927941
*/
928942
const WelcomePage: React.FC = () => {
929-
const marketplaceUrl = '/#/app';
930943
const experienceUrl = '/#/home';
931944
useEffect(() => {
932945
if (typeof window === 'undefined') {
@@ -944,7 +957,7 @@ const WelcomePage: React.FC = () => {
944957

945958
return (
946959
<div className="welcome-layout gpu-safe-mode">
947-
<Navbar marketplaceUrl={marketplaceUrl} freeTrialUrl={experienceUrl} />
960+
<Navbar freeTrialUrl={experienceUrl} />
948961
<div className="welcome-content">
949962
<HeroSection experienceUrl={experienceUrl} />
950963
<OpenSourceSection />

0 commit comments

Comments
 (0)