F

src/layouts/AuthLayout/components/Header/Language.jsx

@@ -1,14 +1,18 @@
-import { ProFormSelect } from "@ant-design/pro-components";
 import { Select } from "antd";
-import React from "react";
-import { useModel } from '@/store';
+import React, { useMemo } from "react";
+import { useModel } from "@/store";
 export default (props) => {
+  const { style } = props;
 
-  const {lang}=useModel("language")
+  const styles = useMemo(() => {
+    return { ...style, width: 120 };
+  }, []);
+  console.log(styles)
+  const { lang } = useModel("language");
   const language = [
     { label: "中文简体", value: "zh-CN" },
     { label: "中文繁体", value: "zh-Tw" },
     { label: "英文", value: "en-Us" },
   ];
-  return <Select defaultValue={lang} style={{ width: 120 }} options={language} />;
+  return <Select defaultValue={lang} style={styles} options={language} />;
 };

src/pages/firstPage/components/FooterPage.jsx

@@ -0,0 +1,145 @@
+import Language from "@/layouts/AuthLayout/components/Header/Language";
+import { Select } from "antd";
+import React from "react";
+export default (props) => {
+  const imgList = [
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+    "https://qbitnetwork.com/_nuxt/img/004.001.ee7377e.svg",
+  ];
+  return (
+    <div className="footer">
+      <div className="preparation">
+        <div className="marginAuto service">
+          <a href="JavaScript:;" target="_self">
+            <div>
+              {" "}
+              <img
+                src="https://qbitnetwork.com/_nuxt/img/logo.dark.bbd2103.svg"
+                alt=""
+              />
+            </div>
+          </a>
+          <div style={{ height: "40px" }}></div>
+          <div className="columns">
+            <div>
+              <div className="columns_text">准备好开始了吗</div>
+              <div style={{ height: "26px" }}></div>
+              <div className="flicker flickers">
+                <span>立即注册</span>
+              </div>
+              <div style={{ height: "104px" }}></div>
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <Language style={{ backGroundColor: "rgba(0,0,0,0)" }} />
+                <div style={{ width: "16px" }}></div>
+                <div style={{ display: "flex", gap: "8px" }}>
+                  {imgList.map((it, index) => {
+                    return (
+                      <span key={index} style={{ cursor: "pointer" }}>
+                        <img src={it} alt="" srcset="" />
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+            <div style={{ marginRight: "auto" }}></div>
+            <div style={{ columnGap: "80px", display: "flex" }}>
+              <div>
+                <div className="about">产品服务</div>
+                <div style={{ height: "28px" }}></div>
+                <div style={{ display: "grid", gap: "20px" }}>
+                  <a className="about_a" href="JavaScript:;">
+                    全球收款
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    量子卡
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    国际付款
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    供应链金融
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    公司注册
+                  </a>
+                </div>
+              </div>
+              <div>
+                <div className="about">API对接</div>
+                <div style={{ height: "28px" }}></div>
+                <div style={{ display: "grid", gap: "20px" }}>
+                  <a className="about_a" href="JavaScript:;">
+                    BaaS
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    CaaS
+                  </a>
+                </div>
+              </div>
+              <div>
+                <div className="about">开发者文档</div>
+                <div style={{ height: "28px" }}></div>
+                <div style={{ display: "grid", gap: "20px" }}>
+                  <a className="about_a" href="JavaScript:;">
+                    产品文档
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    API技术文档
+                  </a>
+                </div>
+              </div>
+              <div>
+                <div className="about">资源</div>
+                <div style={{ height: "28px" }}></div>
+                <div style={{ display: "grid", gap: "20px" }}>
+                  <a className="about_a" href="JavaScript:;">
+                    新闻资讯
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    生态合作
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    帮助中心
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    条款&政策
+                  </a>
+                </div>
+              </div>
+              <div>
+                <div className="about">关于我们</div>
+                <div style={{ height: "28px" }}></div>
+                <div style={{ display: "grid", gap: "20px" }}>
+                  <a className="about_a" href="JavaScript:;">
+                    了解Qbit
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    安全合规
+                  </a>
+                  <a className="about_a" href="JavaScript:;">
+                    联系我们
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* footer- */}
+      <div className="footer_down">
+        <div className="footer_report">
+          <a href="JavaScript:;">浙ICP备19050323号-1</a>&nbsp;
+          <a href="JavaScript:;">浙公网安备33010402004040号</a>
+          <br />
+          Copyright © AILINGUAL LIMITED. All rights reserved.
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/firstPage/index.jsx

@@ -14,6 +14,7 @@ import InitialHeart from "./components/ToInitialHeart";
 import ToInitialHeart from "./components/ToInitialHeart";
 import ToSelect from "./components/ToSelectRegister";
 import ToSelectRegister from "./components/ToSelectRegister";
+import FooterPage from "./components/FooterPage";
 export default (props) => {
   const theme = "light";
   return (
@@ -37,6 +38,8 @@ export default (props) => {
       <div style={{ height: "200px" }}></div>
       <ToInitialHeart />
       <ToSelectRegister />
+
+      <FooterPage />
     </Layout>
   );
 };

src/pages/firstPage/index.less

@@ -140,7 +140,6 @@
 
 
             .flickers {
-                border: 1 solid #000;
                 background: rgba(0, 0, 0, 0);
                 border: 1px solid #000;
 
@@ -559,6 +558,125 @@
     }
 }
 
+
+.footer {
+    .preparation {
+        background-color: #f0f8f8;
+
+        .service {
+            padding-top: 80px;
+            padding-bottom: 60px;
+
+            .columns {
+                display: flex;
+
+                .columns_text {
+                    font-weight: 700;
+                    font-size: 28px;
+                    line-height: 38px;
+                }
+
+
+                .flicker {
+                    width: 98px;
+                    height: 31px;
+                    background: black;
+                    color: white;
+                    border-radius: 12px;
+                    padding: 6px 20px;
+                    position: relative;
+                    line-height: 50px;
+
+                    span {
+                        display: block;
+                        text-align: center;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 20px;
+                    }
+
+                }
+
+                .flicker:hover {
+                    animation-duration: 1s;
+                    animation-fill-mode: both;
+                    animation-name: box-button-background-black-unset;
+                    transition-timing-function: linear;
+                }
+
+                .flickers:hover {
+                    animation-duration: 1s;
+                    animation-fill-mode: both;
+                    animation-name: box-button-background-transparent-black;
+                    transition-timing-function: linear;
+
+                    span {
+                        color: #FFF;
+                    }
+
+                }
+
+
+                .flickers {
+                    border: 1px solid #000;
+                    background: rgba(0, 0, 0, 0);
+
+                    span {
+                        color: #000;
+                    }
+
+                }
+
+                .about {
+                    font-weight: 600;
+                    font-size: 16px;
+                    line-height: 24px;
+
+                }
+
+                .about_a {
+                    color: #3B4D59;
+                    line-height: 20px;
+                    font-size: 14px;
+                }
+
+                .about_a:hover {
+                    text-decoration: underline;
+                    text-underline-offset: 0.2em;
+                }
+            }
+        }
+    }
+
+    .footer_down {
+        background-color: #f7fcfc;
+        padding-bottom: 24px;
+        padding-top: 20px;
+
+        .footer_report {
+            color: #aeb4b8;
+            text-align: center;
+            line-height: 20px;
+            font-size: 14px;
+            a{
+                color: #aeb4b8;
+            }
+        }
+    }
+
+}
+
+.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: rgba(0, 0, 0, 0);
+    color: #698f8f;
+    border-radius: 12px;
+}
+
+.ant-select-dropdown {
+    background-color: rgba(0, 0, 0, 0);
+
+}
+
 @keyframes fadeOut {
     from {
         opacity: 0;