Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
277 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,6 +14,7 @@ | |
| } | ||
|
|
||
| nav { | ||
| margin-top: 48px; | ||
| max-width: 1280px; | ||
| position: relative; | ||
| width: 100%; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters