From 63a693af6aa7296f72770d7a926f9429ade10118 Mon Sep 17 00:00:00 2001 From: zhujingyang <72259332+zjy365@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:12:39 +0800 Subject: [PATCH] feat:docs sale banner (#4564) --- docs/website/docusaurus.config.js | 56 +++--- .../src/components/SaleBanner/index.scss | 174 ++++++++++++++++++ .../src/components/SaleBanner/index.tsx | 72 ++++++++ .../src/pages/components/Header/index.scss | 1 + docs/website/src/pages/index.tsx | 2 + 5 files changed, 277 insertions(+), 28 deletions(-) create mode 100644 docs/website/src/components/SaleBanner/index.scss create mode 100644 docs/website/src/components/SaleBanner/index.tsx diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js index 5e38eb1a599..b2f01098998 100644 --- a/docs/website/docusaurus.config.js +++ b/docs/website/docusaurus.config.js @@ -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: ` -
-
如果您是国内用户，请直接访问 👉
-
- 国内官网 -
- - - - - - - - - - - - -
- `, - isCloseable: true, - } - }), + // ...(!isChinese && { + // announcementBar: { + // id: 'sealos_tip', + // content: ` + //
+ //
如果您是国内用户，请直接访问 👉
+ //
+ // 国内官网 + //
+ // + // + // + // + // + // + // + // + // + // + // + // + //
+ // `, + // isCloseable: true, + // } + // }), algolia: { // Algolia 提供的应用 ID appId: "SLTSB7B9Y0", diff --git a/docs/website/src/components/SaleBanner/index.scss b/docs/website/src/components/SaleBanner/index.scss new file mode 100644 index 00000000000..33782391737 --- /dev/null +++ b/docs/website/src/components/SaleBanner/index.scss @@ -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; + } +} diff --git a/docs/website/src/components/SaleBanner/index.tsx b/docs/website/src/components/SaleBanner/index.tsx new file mode 100644 index 00000000000..8850522507a --- /dev/null +++ b/docs/website/src/components/SaleBanner/index.tsx @@ -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 ( + <> +
+ 🎉 Sealos 开春福利大放送！充值优惠限时开启，多充多送还有精美周边！ +
+ 活动详情 + +
+
+ {isBannerVisible &&
} + {isBannerVisible && ( +
+
+ + Sealos +
+
+
🎉 Sealos 开春福利大放送！
+
充值优惠限时开启
+
多充多送还有精美周边！
+
{ + window.open( + `https://${doMain}/?openapp=system-costcenter?openRecharge=true`, + '_blank' + ); + closeBanner(); + }} + > + 立即参加 +
+
+ 我再想想 +
+
+
+ )} + + ); +} diff --git a/docs/website/src/pages/components/Header/index.scss b/docs/website/src/pages/components/Header/index.scss index 7048e256e84..179de435681 100644 --- a/docs/website/src/pages/components/Header/index.scss +++ b/docs/website/src/pages/components/Header/index.scss @@ -14,6 +14,7 @@ } nav { + margin-top: 48px; max-width: 1280px; position: relative; width: 100%; diff --git a/docs/website/src/pages/index.tsx b/docs/website/src/pages/index.tsx index 8c474bfc177..4c4779f64c0 100644 --- a/docs/website/src/pages/index.tsx +++ b/docs/website/src/pages/index.tsx @@ -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(); @@ -50,6 +51,7 @@ const Home = () => { const HomeRender = (
+ {currentLanguage === 'en'