feat: banner调整

Author: OweQian

components/navbar/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: hsla(0,0%,100%,.5);
+  background-color: var(--navbar-background-color);
   backdrop-filter: blur(0.5rem);
   border-bottom: 1px solid var(--semi-color-border);
   width: 100%;

pages/components/banner/index.tsx

@@ -1,19 +1,14 @@
 import {FC, useContext, useEffect, useRef} from "react";
 import styles from "./styles.module.scss";
 import {Col, Row} from '@douyinfe/semi-ui';
-import Image from "next/image";
 import cName from "classnames";
-import bannerIcon from "@/public/banner.svg";
-import IoTIcon from "@/public/iot.svg";
-import logoText from "@/public/logo-text.svg";
 import {ThemeContext} from "@/stores/theme";
 
 export interface IBannerProps {}
 
 const Banner: FC<IBannerProps> = ({}) => {
   const mainRef = useRef<HTMLDivElement>(null);
   const {theme} = useContext(ThemeContext);
-
   useEffect(() => {
     mainRef.current?.classList.remove(styles.withAnimation);
     window.requestAnimationFrame(() => {
@@ -23,12 +18,10 @@ const Banner: FC<IBannerProps> = ({}) => {
   return (
     <div className={cName([styles.banner, styles.withAnimation])} ref={mainRef}>
       <Row type="flex" align="middle">
-        <Col xs={24} sm={24} md={24} lg={14} xl={14}>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
           <div className={styles.container}>
-            <div className={styles.subTitle}><Image src={IoTIcon} alt="" width={30} height={30}/>Internet of Things</div>
-            <div className={styles.title}><Image src={logoText} alt="" width={260} height={60}/></div>
-            <div className={styles.label}>基于.Net 6.0、C# 的开源IoT平台</div>
-            <div className={styles.description}>设备管理与数据收集、处理、可视化的解决方案</div>
+            <div className={styles.title}>连接物理设备与数字世界</div>
+            <div className={styles.description}>基于.Net 6.0 使用C#开发的数据采集、数据清洗、数据可视化与设备资产管理的开源物联网(IoT)基础服务平台。</div>
             <div className={styles.button} onClick={(): void => {
               window.open(
                 "https://docs.iotsharp.net/",
@@ -39,8 +32,11 @@ const Banner: FC<IBannerProps> = ({}) => {
             </div>
           </div>
         </Col>
-        <Col xs={24} sm={24} md={24} lg={10} xl={10}>
-          <Image src={bannerIcon} alt="" width={400} height={400} className={styles.icon}/>
+        <Col xs={24} sm={24} md={24} lg={14} xl={14} offset={2}>
+          <div className={styles.bannerImage}>
+            <div className={styles.background} />
+            <div className={styles.icon}/>
+          </div>
         </Col>
       </Row>
     </div>

pages/components/banner/styles.module.scss

@@ -124,49 +124,41 @@
 
 .banner {
   width: 100%;
-  padding: 12rem 8rem;
-  background: url("/img.png");
-  background-size: 100% 100%;
+  padding: 10rem 8rem;
+  overflow: hidden;
+  border-bottom: 1px solid var(--semi-color-border);
   :global {
     .semi-row-flex {
       height: 100%;
     }
   }
   .icon {
-    width: 100%;
+    width: 920px;
+    position: relative;
+    border-radius: 8px;
+    height: 32.5rem!important;
+    border-bottom: 1px solid var(--semi-color-border);
+    background-image: var(--banner-icon);
+    background-size: 100% 100%;
   }
   .container {
     display: flex;
     flex-direction: column;
-    .subTitle {
-      font-size: 1.25rem;
-      margin-bottom: .7rem;
-      display: flex;
-      align-items: center;
-      color: #ffffff;
-      img {
-        margin-right: .313rem;
-      }
-    }
 
     .title {
       font-weight: 700;
-      font-size: 3rem;
+      font-size: 2.8rem;
       line-height: 4rem;
-      color: #fdfeff;
     }
 
     .label {
-      font-weight: 500;
       font-size: 1.8rem;
       line-height: 2rem;
-      color: #fdfeff;
     }
 
     .description {
       font-size: 1.25rem;
       line-height: 2rem;
-      color: #fdfeff;
       margin-top: 1.6rem;
     }
 
@@ -184,7 +176,41 @@
       cursor: pointer;
       border: 2px solid var(--yellow-color);
       background-color: var(--yellow-color);
-      margin-top: 2rem;
+      margin-top: 4rem;
+    }
+  }
+  .bannerImage {
+    position: relative;
+    width: 100%;
+    padding-top: 20px;
+    padding-left: 50px;
+  }
+  .background {
+    position: absolute;
+    width: 640px;
+    height: 640px;
+    left: -50px;
+    top: -20px;
+    -webkit-filter: blur(120px);
+    filter: blur(120px);
+    opacity: .6;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 474px;
+      height: 474px;
+      border-radius: 50%;
+      top: 132px;
+      background-color: rgb(var(--semi-purple-5));
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      width: 474px;
+      height: 474px;
+      border-radius: 50%;
+      left: 166px;
+      background-color: rgb(var(--semi-indigo-5));
     }
   }
 }

pages/global.scss

@@ -18,6 +18,7 @@ html[data-theme="dark"] {
   --secondary-font-color-1: #9e9e9f;
   --popup-content-background-color: #1f1f1f;
   --box-shadow: rgba(255, 255, 255, 0.8);
+  --banner-icon: url("../public/banner_dark.png");
   --home-background-icon: url("../public/home_bg_dark.png");
   --home-background-icon-webp: url("../public/home_bg_dark.webp");
 }
@@ -36,6 +37,7 @@ html[data-theme="light"] {
   --semi-page-hover-background-color: rgb(244, 245, 245);
   --navbar-icon: url("../public/logo-text-dark.svg");
   --theme-icon: url("../public/theme_light.png");
+  --banner-icon: url("../public/banner_light.png");
   --popup-close-icon: url("../public/close_light.png");
   --popup-close-hover-background-color: #f5f5f5;
   --secondary-font-color-1: #333333;