11<template >
2- <div v-if =" show" >
3- <template v-if =" ads .length " >
4- <a-carousel autoplay >
5- <template v-for =" ad in ads " :key =" ad .href " >
6- <a :href =" ad.href" target =" _blank" >
7- <img style =" width : 100% ; max-width : 1200px " :alt =" ad.alt || ''" :src =" ad.img" />
8- </a >
9- </template >
10- </a-carousel >
11- </template >
2+ <div class =" top-rice" >
3+ <!-- Mentorbook banner -->
4+ <div v-if =" showMentorbook" class =" mentorbook-banner" >
5+ <a href =" https://mentorbook.ai/" target =" _blank" class =" banner-content" >
6+ <div class =" brand-name" >Mentorbook.AI</div >
7+ <div class =" main-slogan" >
8+ {{ isCN ? '你的 AI 导师,你的学习助手' : 'Your AI Mentor, Your Learning Journey' }}
9+ </div >
10+ <div class =" value-props" >
11+ {{
12+ isCN
13+ ? '✨ 个性化课程 · 即时反馈 · 100+ 学科领域'
14+ : '✨ Personalized Courses · Instant Feedback · 100+ Subjects'
15+ }}
16+ </div >
17+ </a >
18+ <a href =" https://mentorbook.ai/" target =" _blank" class =" start-button" >
19+ {{ isCN ? '免费开始' : 'Get Started Free' }}
20+ </a >
21+ </div >
1222 </div >
1323</template >
14-
1524<script >
1625import dayjs from ' dayjs' ;
1726import isBetween from ' dayjs/plugin/isBetween' ;
@@ -28,23 +37,205 @@ export default {
2837 data () {
2938 return {
3039 show: true ,
31- showGoogleAd : location . host . indexOf ( ' antdv.com ' ) > - 1 ,
40+ showMentorbook : true ,
3241 cnAds: [
3342 {
3443 img: ` https://yidengfe.com/launches/01/yd.png?v=${ Date .now ()} ` ,
3544 href: ' https://yidengfe.com/launches/01/yd.html' ,
36- visible: isEffective (' 2020-09-11 17:00:00' , ' 2021-03-11 17:00:00' ),
45+ visible: true ,
46+ },
47+ ].filter (ad => ad .visible ),
48+ enAds: [
49+ {
50+ img: ` https://yidengfe.com/launches/01/yd.png?v=${ Date .now ()} ` ,
51+ href: ' https://yidengfe.com/launches/01/yd.html' ,
52+ visible: true ,
3753 },
3854 ].filter (ad => ad .visible ),
39- enAds: [].filter (ad => ad .visible ),
4055 };
4156 },
4257 computed: {
43- ads () {
58+ otherAds () {
4459 return this .isCN ? this .cnAds : this .enAds ;
4560 },
4661 },
4762};
4863 </script >
4964
50- <style lang="less" scoped></style >
65+ <style lang="less" scoped>
66+ .top-rice {
67+ width : 100% ;
68+ margin-bottom : 16px ;
69+
70+ .mentorbook-banner {
71+ display : flex ;
72+ width : 100% ;
73+ background : linear-gradient (135deg , #0b1021 0% , #182a4a 100% );
74+ position : relative ;
75+ overflow : hidden ;
76+ padding : 0 16px ;
77+ height : 48px ;
78+ box-sizing : border-box ;
79+ align-items : center ;
80+ justify-content : space-between ;
81+
82+ // Dots pattern background
83+ & ::before {
84+ content : ' ' ;
85+ position : absolute ;
86+ top : 0 ;
87+ left : 0 ;
88+ right : 0 ;
89+ bottom : 0 ;
90+ background-image : radial-gradient (circle , rgba (127 , 179 , 255 , 0.12 ) 2px , transparent 2px );
91+ background-size : 28px 28px ;
92+ background-position : 0 0 ;
93+ pointer-events : none ;
94+ z-index : 0 ;
95+ }
96+
97+ // Left brace
98+ & ::after {
99+ content : ' {' ;
100+ position : absolute ;
101+ left : 20px ;
102+ top : 50% ;
103+ transform : translateY (-50% );
104+ font-size : 32px ;
105+ font-family : monospace ;
106+ color : #5df2a3 ;
107+ opacity : 0.08 ;
108+ pointer-events : none ;
109+ z-index : 0 ;
110+ }
111+
112+ .banner-content {
113+ position : relative ;
114+ z-index : 1 ;
115+ flex : 1 ;
116+ height : 48px ;
117+ display : flex ;
118+ flex-direction : row ;
119+ justify-content : center ;
120+ align-items : center ;
121+ gap : 12px ;
122+ text-decoration : none ;
123+ transition : opacity 0.3s ;
124+
125+ & :hover {
126+ opacity : 0.9 ;
127+ }
128+ }
129+
130+ .start-button {
131+ position : relative ;
132+ z-index : 1 ;
133+ display : flex ;
134+ align-items : center ;
135+ justify-content : center ;
136+ height : 32px ;
137+ padding : 0 16px ;
138+ background : #5df2a3 ;
139+ color : #0b1021 ;
140+ font-family : ' Inter' , system-ui , -apple-system , sans-serif ;
141+ font-weight : 600 ;
142+ font-size : 14px ;
143+ text-decoration : none ;
144+ border-radius : 6px ;
145+ white-space : nowrap ;
146+ transition : all 0.3s ;
147+ margin-left : 16px ;
148+
149+ & :hover {
150+ background : #4dd893 ;
151+ transform : translateY (-1px );
152+ box-shadow : 0 4px 12px rgba (93 , 242 , 163 , 0.3 );
153+ }
154+
155+ & :active {
156+ transform : translateY (0 );
157+ }
158+
159+ @media (max-width : 768px ) {
160+ font-size : 12px ;
161+ padding : 0 12px ;
162+ height : 28px ;
163+ }
164+
165+ @media (max-width : 480px ) {
166+ font-size : 11px ;
167+ padding : 0 10px ;
168+ height : 26px ;
169+ margin-left : 8px ;
170+ }
171+ }
172+
173+ .brand-name {
174+ font-family : ' Inter' , system-ui , -apple-system , sans-serif ;
175+ font-weight : 800 ;
176+ font-size : 20px ;
177+ color : #5df2a3 ;
178+ line-height : 48px ;
179+ white-space : nowrap ;
180+
181+ @media (max-width : 768px ) {
182+ font-size : 18px ;
183+ }
184+
185+ @media (max-width : 480px ) {
186+ font-size : 16px ;
187+ }
188+ }
189+
190+ .main-slogan {
191+ font-family : ' Inter' , system-ui , -apple-system , sans-serif ;
192+ font-weight : 600 ;
193+ font-size : 16px ;
194+ color : #eaf2ff ;
195+ line-height : 48px ;
196+ white-space : nowrap ;
197+
198+ @media (max-width : 768px ) {
199+ font-size : 14px ;
200+ }
201+
202+ @media (max-width : 480px ) {
203+ display : none ;
204+ }
205+ }
206+
207+ .value-props {
208+ font-family : ' Inter' , system-ui , -apple-system , sans-serif ;
209+ font-weight : 500 ;
210+ font-size : 14px ;
211+ color : #7fb3ff ;
212+ line-height : 48px ;
213+ white-space : nowrap ;
214+
215+ @media (max-width : 1024px ) {
216+ display : none ;
217+ }
218+ }
219+ }
220+
221+ .ad-link {
222+ display : block ;
223+ width : 100% ;
224+ text-decoration : none ;
225+ transition : opacity 0.3s ;
226+ margin-top : 16px ;
227+
228+ & :hover {
229+ opacity : 0.9 ;
230+ }
231+ }
232+
233+ .ad-image {
234+ width : 100% ;
235+ max-width : 1200px ;
236+ height : auto ;
237+ display : block ;
238+ margin : 0 auto ;
239+ }
240+ }
241+ </style >
0 commit comments