Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:docs sale banner #4564

Merged
merged 2 commits into from
Mar 6, 2024
Merged

feat:docs sale banner #4564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b6d321
feat:docs sale banner
zjy365 Jan 22, 2024
29745af
edit link
zjy365 Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions docs/website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,34 +60,34 @@ const config = {

themeConfig: { // @type {import('@docusaurus/preset-classic').ThemeConfig}
metadata: [{ name: 'title', content: 'Sealos by 环界云' }],
...(!isChinese && {
announcementBar: {
id: 'sealos_tip',
content: `
<div class="sealos-banner-box">
<div >如果您是国内用户，请直接访问 👉 </div>
<div class="sealos-banner-btn" onclick="window.open('https://sealos.run', '_blank');">
国内官网
</div>
<svg
onclick="handleBannerClose()"
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1145_366)">
<path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
<path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
<path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1145_366">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
`,
isCloseable: true,
}
}),
// ...(!isChinese && {
// announcementBar: {
// id: 'sealos_tip',
// content: `
// <div class="sealos-banner-box">
// <div >如果您是国内用户，请直接访问 👉 </div>
// <div class="sealos-banner-btn" onclick="window.open('https://sealos.run', '_blank');">
// 国内官网
// </div>
// <svg
// onclick="handleBannerClose()"
// width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
// <g clip-path="url(#clip0_1145_366)">
// <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
// <path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
// <path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
// </g>
// <defs>
// <clipPath id="clip0_1145_366">
// <rect width="24" height="24" fill="white"/>
// </clipPath>
// </defs>
// </svg>
// </div>
// `,
// isCloseable: true,
// }
// }),
algolia: {
// Algolia 提供的应用 ID
appId: "SLTSB7B9Y0",
Expand Down
174 changes: 174 additions & 0 deletions docs/website/src/components/SaleBanner/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
.sealos-banner-box {
position: fixed;
background: linear-gradient(
90deg,
rgba(20, 46, 78, 0.3) 0%,
rgba(33, 115, 160, 0.3) 50%,
rgba(20, 46, 78, 0.3) 100%
);
backdrop-filter: blur(187px);
width: 100%;
height: 48px;
display: flex;
justify-content: center;
align-items: center;

color: #fff;
font-family: PingFang SC;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 140%;
letter-spacing: 0.16px;
z-index: 99;
}

.sealos-banner-btn {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
padding: 0 22px;
margin-left: 24px;
position: relative;
}

.sealos-banner-container {
width: 590px;
height: 444px;
border-radius: 16px;
background: #0e1a28;
box-shadow: 0px 8px 29px 0px rgba(187, 196, 206, 0.25);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
.title {
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px 16px 0px 0px;
background: rgba(122, 207, 255, 0.1);

.txt {
color: #fff;
font-family: Karmilla;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 140%;
margin-left: 8px;
}
}
}

.sealos-banner-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 117px;

color: #fff;
font-style: normal;
font-weight: 600;
line-height: 140%;
letter-spacing: 0.28px;

.banner-title {
font-size: 28px;
margin-top: 76px;
margin-bottom: 30px;
}

.banner__subtitle {
font-size: 18px;
}
}

.btn {
cursor: pointer;
border-radius: 64px;
background: #479ceb;
display: flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
margin-top: 46px;
width: 100%;
}

.btn-cancel {
cursor: pointer;
margin-top: 20px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.sealos-banner-modal {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.48);
z-index: 99;
}

@media screen and (max-width: 1000px) {
.sealos-banner-box {
font-size: 12px;
font-weight: 500;
padding: 0 16px;
}

.sealos-banner-btn {
font-size: 12px;
font-weight: 500;
padding: 0 8px;
min-width: 80px;
margin-left: 4px;
svg {
width: 24px;
height: 24px;
right: 0;
}
}

.sealos-banner-container {
width: 90%;

.title {
svg {
width: 36px;
height: 36px;
}

.txt {
font-size: 20px;
}
}
}

.sealos-banner-body {
padding: 0 12px;
.banner-title {
font-size: 20px;
}

.banner-subtitle {
font-size: 14px;
}
}

.btn {
font-size: 14px;
}
}
72 changes: 72 additions & 0 deletions docs/website/src/components/SaleBanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import Translate from '@docusaurus/Translate';
import DrawIcon from '@site/static/icons/draw.svg';
import LogoIcon from '@site/static/icons/sealos.svg';
import React, { useEffect, useState } from 'react';
import './index.scss';

export default function SaleBanner() {
const [isBannerVisible, setIsBannerVisible] = useState(false);
const [doMain, setDoMain] = useState('cloud.sealos.io');

const closeBanner = () => {
setIsBannerVisible(false);
};

const goDetailFeishu = () => {
window.open(`https://forum.laf.run/d/1207`, '_blank');
};

useEffect(() => {
// Get the last display timestamp from localStorage
const lastDisplayTimestamp = localStorage.getItem('bannerLastDisplay');
const today = new Date().toLocaleDateString();

// Check if the banner has not been displayed today
if (!lastDisplayTimestamp || lastDisplayTimestamp !== today) {
setIsBannerVisible(true);
// Store the current date in localStorage
localStorage.setItem('bannerLastDisplay', today);
}
}, []);

return (
<>
<div className="sealos-banner-box">
<Translate>🎉 Sealos 开春福利大放送！充值优惠限时开启，多充多送还有精美周边！</Translate>
<div className="sealos-banner-btn" onClick={goDetailFeishu}>
活动详情
<DrawIcon />
</div>
</div>
{isBannerVisible && <div className="sealos-banner-modal"></div>}
{isBannerVisible && (
<div className="sealos-banner-container">
<div className="title">
<LogoIcon width={'42px'} height={'42px'} />
<span className="txt">Sealos</span>
</div>
<div className="sealos-banner-body">
<div className="banner-title">🎉 Sealos 开春福利大放送！</div>
<div className="banner-subtitle">充值优惠限时开启</div>
<div className="banner-subtitle">多充多送还有精美周边！</div>
<div
className="btn"
onClick={() => {
window.open(
`https://${doMain}/?openapp=system-costcenter?openRecharge=true`,
'_blank'
);
closeBanner();
}}
>
立即参加
</div>
<div className="btn-cancel" onClick={closeBanner}>
我再想想
</div>
</div>
</div>
)}
</>
);
}
1 change: 1 addition & 0 deletions docs/website/src/pages/components/Header/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
}

nav {
margin-top: 48px;
max-width: 1280px;
position: relative;
width: 100%;
Expand Down
2 changes: 2 additions & 0 deletions docs/website/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Introduce from './components/Introduce';
import HomeUserBy from './components/UserBy';
import './index.scss';
import Head from '@docusaurus/Head';
import SaleBanner from '../components/SaleBanner';

const Home = () => {
const { screenWidth, cloudUrl, currentLanguage } = useWindow();
Expand Down Expand Up @@ -50,6 +51,7 @@ const Home = () => {

const HomeRender = (
<div id="sealos-layout-wrap-home-page">
<SaleBanner />
<Head>
<title>
{currentLanguage === 'en'
Expand Down
Loading