fix: 贡献者部分调整

fix: footer部分调整

Author: OweQian

components/footer/index.tsx

@@ -4,7 +4,9 @@ import publicLogo from "@/public/public_logo.png";
 import styles from "./styles.module.scss";
 import cName from "classnames";
 import {isEmpty} from "lodash";
+import logoText from "@/public/logo-text.svg";
 import QRCode from "@/public/code.jpg";
+import logoIcon from "@/public/logo-icon.svg";
 interface ILink {
   label: string;
   link?: string;
@@ -26,7 +28,7 @@ const Footer: FC<IFooterProps> = ({}) => {
   const data = {
     "title": "IoTSharp",
     "qr_code": "",
-    "copy_right": "Copyright © 2023 The IoTSharp Authors",
+    "copy_right": "© 2018 - 2023 The IoTSharp Authors. All rights reserved.",
     "site_number": "",
     "public_number": "冀ICP备18039206号",
     "qr_code_image": {
@@ -120,7 +122,10 @@ const Footer: FC<IFooterProps> = ({}) => {
   return (
     <div className={styles.footer}>
       <div className={styles.topArea}>
-        <h1 className={styles.footerTitle}>{title}</h1>
+        <h1 className={styles.footerTitle}>
+          <Image src={logoIcon} alt="" width={35} height={35}/>
+          <Image src={logoText} alt="" width={135} height={40}/>
+        </h1>
         <div className={styles.linkListArea}>
           {footerData?.linkList?.map((item, index) => {
             return (

components/footer/styles.module.scss

@@ -11,11 +11,12 @@
     flex-wrap: wrap;
 
     .footerTitle {
-      font-weight: 500;
-      font-size: 2.25rem;
-      line-height: 2.25rem;
-      color: #ffffff;
       margin: 0;
+      display: flex;
+
+      img:nth-of-type(1) {
+        margin-right: 10px;
+      }
     }
 
     .linkListArea {

pages/components/contributors/index.tsx

@@ -1,29 +1,34 @@
 import {FC} from "react";
-import {Col, Row} from '@douyinfe/semi-ui';
+import {Row, Col, Descriptions} from '@douyinfe/semi-ui';
 import styles from "./styles.module.scss";
+import Image from "next/image";
+import ContributorForQQ from '@/public/contributor_1.png';
+import ContributorForWechat from '@/public/contributor_2.png';
 
 export interface IContributorsProps {
 }
 
 const Contributors: FC<IContributorsProps> = ({}) => {
   return (
     <div className={styles.contributorsContainer}>
-      <Row className={styles.row} type="flex" align="middle">
-        <Col span={7}>
-          <div className={styles.title}>参与建设</div>
-          <div className={styles.description}>很多小伙伴在和我们一同建设 IoTSharp，如果你有兴趣，欢迎加入我们 。</div>
+      <p className={styles.title}>与用户共同成长</p>
+      <p className={styles.subTitle}>IoTSharp 重视我们的用户，加入并助力我们不断完善</p>
+      <Descriptions align="center" size="large" row>
+        <Descriptions.Item itemKey="Stars">795+</Descriptions.Item>
+        <Descriptions.Item itemKey="Fork">1100+</Descriptions.Item>
+        <Descriptions.Item itemKey="Download">1000+</Descriptions.Item>
+        <Descriptions.Item itemKey="Contributors">30+</Descriptions.Item>
+      </Descriptions>
+      <Row gutter={80}>
+        <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+          <Image src={ContributorForQQ} alt="" width={90} height={90}/>
         </Col>
-        <Col span={10} offset={2}>
-          <a href="https://github.com/iotsharp/iotsharp/graphs/contributors">
-            <img src="https://contrib.rocks/image?repo=iotsharp/iotsharp" />
-          </a>
-          <a href="https://github.com/iotsharp/ClientAppWithVue3/graphs/contributors">
-            <img src="https://contrib.rocks/image?repo=iotsharp/ClientAppWithVue3" />
-          </a>
+        <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+          <Image src={ContributorForWechat} alt="" width={90} height={90}/>
         </Col>
       </Row>
     </div>
   );
 };
 
-export default Contributors;
+export default Contributors;

pages/components/contributors/styles.module.scss

@@ -1,40 +1,53 @@
 .contributorsContainer {
   display: flex;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   align-items: center;
-  width: 60%;
-  margin-bottom: 5rem;
-  padding-top: 3.125rem;
-  padding-bottom: 3.125rem;
-  background: var(--yellow-color);
-  border-radius: 0 126px 126px 0;
-  position: relative;
-  &:before {
-    display: block;
-    content: "";
-    height: 100%;
-    width: 800px;
-    position: absolute;
-    left: -800px;
-    top: 0;
-    background: var(--yellow-color);
-  }
-  .row {
-    margin-left: -100px;
-  }
+  flex-direction: column;
+  width: 100%;
+  padding: 10rem 8rem;
   .title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    line-height: 3.5rem;
-    letter-spacing: .5px;
+    font-size: 2rem;
+    color: var(--semi-color-text-0);
+    font-weight: 600;
+    margin-top: 0;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .subTitle {
+    font-size: 1.125rem;
+    color: var(--semi-color-text-0);
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+    margin-bottom: 3rem;
+    margin-top: 0;
   }
   img {
     width: 100%;
+    height: 23rem;
+    border-radius: 8px;
   }
-  .description {
-    font-size: 1rem;
-    line-height: 1.56rem;
-    letter-spacing: .15px;
+  :global {
+    .semi-descriptions {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 0 20px;
+    }
+    .semi-row {
+      width: 100%;
+      margin-top: 3rem;
+    }
+    .semi-descriptions table {
+      width: 100%;
+      padding: 20px;
+    }
+    .semi-descriptions-double tbody {
+      width: 100%;
+      justify-content: space-between;
+    }
+    .semi-descriptions-value {
+      color: rgb(var(--semi-purple-5));
+    }
   }
 }