docs: add Sponsor
tangjinzhou
parent
6255f1632c
commit
2cda7bde09
|
|
@ -1,32 +1,33 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="280" viewBox="0 0 1200 280">
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="280" viewBox="0 0 1200 280">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
<stop offset="0%" stop-color="#0B1021" />
|
<stop offset="0%" stop-color="#0B1021" />
|
||||||
<stop offset="100%" stop-color="#182A4A" />
|
<stop offset="100%" stop-color="#182A4A" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<pattern id="dots" width="28" height="28" patternUnits="userSpaceOnUse">
|
<pattern id="dots" width="28" height="28" patternUnits="userSpaceOnUse">
|
||||||
<circle cx="2" cy="2" r="2" fill="#7FB3FF" opacity="0.12"/>
|
<circle cx="2" cy="2" r="2" fill="#7FB3FF" opacity="0.12" />
|
||||||
</pattern>
|
</pattern>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<!-- background -->
|
<!-- background -->
|
||||||
<rect width="1200" height="280" fill="url(#g)"/>
|
<rect width="1200" height="280" fill="url(#g)" />
|
||||||
<rect width="1200" height="280" fill="url(#dots)"/>
|
<rect width="1200" height="280" fill="url(#dots)" />
|
||||||
|
|
||||||
<!-- decorative braces -->
|
<!-- decorative braces -->
|
||||||
<text x="80" y="140.0" text-anchor="start" font-size="140" font-family="monospace" fill="#5DF2A3" opacity="0.08">{</text>
|
<text x="80" y="140.0" text-anchor="start" font-size="140" font-family="monospace" fill="#5DF2A3"
|
||||||
<text x="1120" y="140.0" text-anchor="end" font-size="140" font-family="monospace" fill="#5DF2A3" opacity="0.08">}</text>
|
opacity="0.08">{</text>
|
||||||
|
<text x="1120" y="140.0" text-anchor="end" font-size="140" font-family="monospace" fill="#5DF2A3"
|
||||||
|
opacity="0.08">}</text>
|
||||||
|
|
||||||
<!-- brand name -->
|
<!-- brand name -->
|
||||||
<text x="600.0" y="120.0" text-anchor="middle"
|
<text x="600.0" y="120.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="800" font-size="72"
|
||||||
font-family="Inter, system-ui" font-weight="800" font-size="72" fill="#5DF2A3">Mentorbook.AI</text>
|
fill="#5DF2A3">Mentorbook.AI</text>
|
||||||
|
|
||||||
<!-- main slogan -->
|
<!-- main slogan -->
|
||||||
<text x="600.0" y="175.0" text-anchor="middle"
|
<text x="600.0" y="175.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="700" font-size="42"
|
||||||
font-family="Inter, system-ui" font-weight="700" font-size="42" fill="#EAF2FF">你的 AI 导师，你的学习之旅</text>
|
fill="#EAF2FF">你的 AI 导师，你的学习助手</text>
|
||||||
|
|
||||||
<!-- value props -->
|
|
||||||
<text x="600.0" y="225.0" text-anchor="middle"
|
|
||||||
font-family="Inter, system-ui" font-weight="500" font-size="24" fill="#7FB3FF">✨ 个性化课程 · 即时反馈 · 100+ 学科领域</text>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
<!-- value props -->
|
||||||
|
<text x="600.0" y="225.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="500" font-size="24"
|
||||||
|
fill="#7FB3FF">✨ 个性化课程 · 即时反馈 · 100+ 学科领域</text>
|
||||||
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,17 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="show">
|
<div class="top-rice">
|
||||||
<template v-if="ads.length">
|
<!-- Mentorbook banner -->
|
||||||
<a-carousel autoplay>
|
<div v-if="showMentorbook" class="mentorbook-banner">
|
||||||
<template v-for="ad in ads" :key="ad.href">
|
<a href="https://mentorbook.ai/" target="_blank" class="banner-content">
|
||||||
<a :href="ad.href" target="_blank">
|
<div class="brand-name">Mentorbook.AI</div>
|
||||||
<img style="width: 100%; max-width: 1200px" :alt="ad.alt || ''" :src="ad.img" />
|
<div class="main-slogan">
|
||||||
</a>
|
{{ isCN ? '你的 AI 导师，你的学习助手' : 'Your AI Mentor, Your Learning Journey' }}
|
||||||
</template>
|
</div>
|
||||||
</a-carousel>
|
<div class="value-props">
|
||||||
</template>
|
{{
|
||||||
|
isCN
|
||||||
|
? '✨ 个性化课程 · 即时反馈 · 100+ 学科领域'
|
||||||
|
: '✨ Personalized Courses · Instant Feedback · 100+ Subjects'
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://mentorbook.ai/" target="_blank" class="start-button">
|
||||||
|
{{ isCN ? '免费开始' : 'Get Started Free' }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import isBetween from 'dayjs/plugin/isBetween';
|
import isBetween from 'dayjs/plugin/isBetween';
|
||||||
|
|
@ -28,23 +37,205 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: true,
|
show: true,
|
||||||
showGoogleAd: location.host.indexOf('antdv.com') > -1,
|
showMentorbook: true,
|
||||||
cnAds: [
|
cnAds: [
|
||||||
{
|
{
|
||||||
img: `https://yidengfe.com/launches/01/yd.png?v=${Date.now()}`,
|
img: `https://yidengfe.com/launches/01/yd.png?v=${Date.now()}`,
|
||||||
href: 'https://yidengfe.com/launches/01/yd.html',
|
href: 'https://yidengfe.com/launches/01/yd.html',
|
||||||
visible: isEffective('2020-09-11 17:00:00', '2021-03-11 17:00:00'),
|
visible: true,
|
||||||
|
},
|
||||||
|
].filter(ad => ad.visible),
|
||||||
|
enAds: [
|
||||||
|
{
|
||||||
|
img: `https://yidengfe.com/launches/01/yd.png?v=${Date.now()}`,
|
||||||
|
href: 'https://yidengfe.com/launches/01/yd.html',
|
||||||
|
visible: true,
|
||||||
},
|
},
|
||||||
].filter(ad => ad.visible),
|
].filter(ad => ad.visible),
|
||||||
enAds: [].filter(ad => ad.visible),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
ads() {
|
otherAds() {
|
||||||
return this.isCN ? this.cnAds : this.enAds;
|
return this.isCN ? this.cnAds : this.enAds;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
.top-rice {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.mentorbook-banner {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(135deg, #0b1021 0%, #182a4a 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 16px;
|
||||||
|
height: 48px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
// Dots pattern background
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image: radial-gradient(circle, rgba(127, 179, 255, 0.12) 2px, transparent 2px);
|
||||||
|
background-size: 28px 28px;
|
||||||
|
background-position: 0 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Left brace
|
||||||
|
&::after {
|
||||||
|
content: '{';
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #5df2a3;
|
||||||
|
opacity: 0.08;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
flex: 1;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: #5df2a3;
|
||||||
|
color: #0b1021;
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #4dd893;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(93, 242, 163, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 12px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 26px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #5df2a3;
|
||||||
|
line-height: 48px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-slogan {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #eaf2ff;
|
||||||
|
line-height: 48px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-props {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7fb3ff;
|
||||||
|
line-height: 48px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-link {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-image {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<TopAd :is-c-n="isZhCN" />
|
||||||
<Header />
|
<Header />
|
||||||
<div v-if="headers.length" class="toc-affix" :style="y > 102 ? 'position:fixed; top: 16px;' : ''">
|
<div v-if="headers.length" class="toc-affix" :style="y > 102 ? 'position:fixed; top: 16px;' : ''">
|
||||||
<a-anchor style="width: 160px" :items="headers">
|
<a-anchor style="width: 160px" :items="headers">
|
||||||
|
|
@ -43,8 +44,6 @@
|
||||||
</template>
|
</template>
|
||||||
<a-col :xxxl="20" :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
|
<a-col :xxxl="20" :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
|
||||||
<section :class="mainContainerClass">
|
<section :class="mainContainerClass">
|
||||||
<WWAdsVue v-if="isZhCN" />
|
|
||||||
<TopAd v-else />
|
|
||||||
<Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">
|
<Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">
|
||||||
<component :is="matchCom" />
|
<component :is="matchCom" />
|
||||||
</Demo>
|
</Demo>
|
||||||
|
|
@ -85,22 +84,6 @@
|
||||||
</template>
|
</template>
|
||||||
</a-float-button>
|
</a-float-button>
|
||||||
</a-float-button-group>
|
</a-float-button-group>
|
||||||
<!-- <div class="fixed-widgets" :style="isZhCN ? { bottom: '175px' } : {}">
|
|
||||||
<a-dropdown placement="top">
|
|
||||||
<template #overlay>
|
|
||||||
<a-menu
|
|
||||||
:selected-keys="[themeMode.theme.value]"
|
|
||||||
@click="({ key }) => themeMode.changeTheme(key)"
|
|
||||||
>
|
|
||||||
<a-menu-item key="default">{{ $t('app.theme.switch.default') }}</a-menu-item>
|
|
||||||
<a-menu-item key="dark">{{ $t('app.theme.switch.dark') }}</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</template>
|
|
||||||
<a-avatar class="fixed-widgets-avatar" :size="44">
|
|
||||||
<template #icon><ThemeIcon /></template>
|
|
||||||
</a-avatar>
|
|
||||||
</a-dropdown>
|
|
||||||
</div> -->
|
|
||||||
<PrevAndNext :menus="menus" :current-menu-index="currentMenuIndex" :is-zh-c-n="isZhCN" />
|
<PrevAndNext :menus="menus" :current-menu-index="currentMenuIndex" :is-zh-c-n="isZhCN" />
|
||||||
<Footer />
|
<Footer />
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue