fix svg compatibility problem

Signed-off-by: jingyang <3161362058@qq.com>
labring · Nov 3, 2023 · de94616 · de94616
1 parent 05e7e87
commit de94616
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 5 deletions.
diff --git a/docs/website/src/pages/components/Banner/index.scss b/docs/website/src/pages/components/Banner/index.scss
@@ -18,7 +18,6 @@
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
-  line-height: 140%;
   letter-spacing: 0.16px;
   z-index: 99;
   flex-shrink: 0;
@@ -139,3 +138,10 @@
   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;
+  }
+}
diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx
@@ -6,7 +6,6 @@ import useWindow from '@site/src/hooks/useWindow';
 import GithubIcon from '@site/static/icons/github.svg';
 import MeunIcon from '@site/static/icons/meun.svg';
 import LogoIcon from '@site/static/icons/sealos.svg';
-import HeaderSvg from '@site/static/illustrations/bg-header.svg';
 import React, { useEffect, useState } from 'react';
 import VideoPlayer from '../VideoPlayer';
 import './index.scss';
@@ -84,7 +83,12 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   if (!isPc) {
     return (
       <div id="Start" className="home-header">
-        <HeaderSvg className="header-img" />
+        <img
+          draggable="false"
+          className="header-img"
+          src={require('@site/static/img/bg-header.png').default}
+          alt="community"
+        />
         <nav>
           <div className="left">
             <MeunIcon width={'24px'} height={'24px'} onClick={() => openSideBar()} />
@@ -139,7 +143,12 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
 
   return (
     <div id="Start" className="home-header">
-      <HeaderSvg className="header-img" />
+      <img
+        draggable="false"
+        className="header-img"
+        src={require('@site/static/img/bg-header.png').default}
+        alt="community"
+      />
       <nav>
         <div className="left">
           <div

diff --git a/docs/website/src/pages/self-hosting/index.scss b/docs/website/src/pages/self-hosting/index.scss
@@ -49,6 +49,12 @@
   }
 }
 
+.header-img {
+  width: 100%;
+  position: absolute;
+  top: 0px;
+}
+
 .sealo_price_header_bg {
   position: absolute;
   top: 0;

diff --git a/docs/website/src/pages/self-hosting/index.tsx b/docs/website/src/pages/self-hosting/index.tsx
@@ -19,7 +19,13 @@ export default function Pricing() {
     <div id="sealos-layout-wrap-home-page">
       <Layout>
         <div className="sealos_price_page">
-          <div className="sealo_price_header_bg"></div>
+          {/* <div className="sealo_price_header_bg"></div> */}
+          <img
+            draggable="false"
+            className="header-img"
+            src={require('@site/static/img/license-bg-header.png').default}
+            alt="community"
+          />
           <Banner />
           <div className="px-10 w-full flex justify-center lg:px-0">
             <Header isPc={isPc} />

diff --git a/docs/website/static/img/bg-header.png b/docs/website/static/img/bg-header.png
diff --git a/docs/website/static/img/license-bg-header.png b/docs/website/static/img/license-bg-header.png