F

src/components/QCarousel/index.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { Carousel } from 'antd';
+import "./style.less";
+
+export default (props) => {
+  const list = [
+    {
+      id: '1', url: 'https://qbitnetwork.com/_nuxt/img/001.cf2fdf6.png', title: '量子虚拟卡，一卡畅享全球支付体验',
+      text1: '高效覆盖VISA和Mastercard线上线下国际支付场景', text2: '卡段丰富，批量开卡无限制，支付成功率与稳定性高，满足多样支付需求'
+    },
+    {
+      id: '2', url: 'https://qbitnetwork.com/_nuxt/img/002.663300e.png', title: '全球收款，本地化收款优化全球资金链路',
+      text1: '更低费率，0元线上开户，入金封顶千三，结汇无限额', text2: '全球覆盖，支持40+主流货币，覆盖180+国家/地区'
+    },
+    {
+      id: '3', url: 'https://qbitnetwork.com/_nuxt/img/003.5d6dea0.png', title: '国际付款，强大支付网络优化付款链路',
+      text1: '与全球支付网络无缝直连，实现高效、低成本国际付款', text2: '可通过网页客户端批量向收款人支付，或通过API实现全方位支付自动化'
+    },
+    {
+      id: '4', url: 'https://qbitnetwork.com/_nuxt/img/004.f8be4da.png', title: '奇点融，减少账期压力提升经营效益',
+      text1: '纯线上申请流程，快至24小时内完成风控，48小时放款', text2: '纯信用贷款一次授信、循环使用，流程操作简单，省心省事'
+    }
+  ]
+  return (
+    <Carousel autoplay style={{ height: '40vw' }}>
+      {
+        list?.map((item) => {
+          return (
+            <div key={item?.id}>
+              <img src={item?.url} className="qlogin-carousel-img" />
+              <div className="qlogin-carousel-title">{item?.title}</div>
+              <div className="qlogin-carousel-text">
+                {item?.text1}
+              </div>
+              <div className="qlogin-carousel-text">
+                {item?.text2}
+              </div>
+            </div>
+          )
+        })
+      }
+    </Carousel>
+  )
+}

src/components/QCarousel/style.less

@@ -0,0 +1,15 @@
+.qlogin-carousel-img {
+  width: 38vw;
+  margin: auto;
+}
+.qlogin-carousel-title {
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  padding-bottom: 1em;
+}
+.qlogin-carousel-text {
+  width: 20vw;
+  text-align: center;
+  margin: auto;
+}

src/pages/qLogin/QLogin.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Form, Input, Radio, Select, Row, Col } from "antd";
+import "./style.less";
+
+export default (props) => {
+  const navigate = useNavigate();
+
+  const [form] = Form.useForm();
+  const onFinish = () => {
+
+  }
+
+  return (
+    <div className="qlogin-right-box">
+      <div className="qlogin-right-title">登录你的Qbit账户</div>
+      <Form
+        form={form}
+        layout="vertical"
+        size="large"
+        onFinish={onFinish}
+      >
+        <Form.Item
+          label="手机号"
+          name="loginName"
+          rules={[{ required: true }]}
+        >
+          <Input.Group>
+            <Row>
+              <Col span={8}>
+                <Select defaultValue="+86">
+                  <Option value="+86" style={{ backgroundColor: '#f5f5f5' }}>+86</Option>
+                  <Option value="+852" style={{ backgroundColor: '#f5f5f5' }}>+852</Option>
+                </Select>
+              </Col>
+              <Col span={16}><Input placeholder="请输入手机号" /></Col>
+            </Row>
+          </Input.Group>
+        </Form.Item>
+        <Form.Item
+          label="密 码"
+          name="password"
+          rules={[{ required: true }]}
+        >
+          <Input.Password
+            placeholder="请输入密码"
+            style={{ borderRadius: "4px" }}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button
+            type="primary"
+            size="large"
+            style={{ width: "100%", marginTop: "24px", borderRadius: "4px", height: '3em' }}
+            htmlType="submit"
+          >
+            登录
+          </Button>
+        </Form.Item>
+      </Form>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div>还没有Qbit账户？</div><Button type="link" onClick={() => navigate('/qRegister')}>立即注册</Button>
+      </div>
+    </div>
+  )
+}

src/pages/qLogin/index.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import QLogin from "./QLogin";
+import QCarousel from "@/components/QCarousel";
+import "./style.less";
+
+export default (props) => {
+
+  return (
+    <div className="qlogin">
+      <div className="qlogin-left">
+        <QCarousel />
+      </div>
+      <div style={{ flex: 1 }}>
+        <QLogin />
+      </div>
+    </div>
+  )
+}

src/pages/qLogin/style.less

@@ -0,0 +1,25 @@
+.qlogin {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  .qlogin-left {
+    width: 46%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-image: url(https://qbitnetwork.com/_nuxt/img/000.b39e58b.svg);
+    background-repeat: no-repeat;
+    background-color: #f7fafa;
+  }
+}
+.qlogin-right-box {
+  width: 400px;
+  padding-left: 90px;
+  padding-top: 70px;
+  .qlogin-right-title {
+    font-weight: 600;
+    font-size: 30px;
+    margin-bottom: 40px;
+  }
+}

src/pages/qRegister/QRegister.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Form, Input, Radio, Select, Row, Col, Checkbox } from "antd";
+import "./style.less";
+
+export default (props) => {
+  const navigate = useNavigate();
+
+  const { Search } = Input;
+  const [form] = Form.useForm();
+  const onFinish = () => {
+
+  }
+
+  return (
+    <div className="qregister-right-box">
+      <div className="qregister-right-title">开通Qbit账户</div>
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '40px' }}>
+        <div>已有账户？</div><Button type="link" onClick={() => navigate('/qLogin')}>去登陆</Button>
+      </div>
+      <Form
+        form={form}
+        layout="vertical"
+        size="large"
+        onFinish={onFinish}
+      >
+        <Form.Item
+          label="手机号"
+          name="loginName"
+          rules={[{ required: true }]}
+        >
+          <Input.Group>
+            <Row>
+              <Col span={8}>
+                <Select defaultValue="+86">
+                  <Option value="+86" style={{ backgroundColor: '#f5f5f5' }}>+86</Option>
+                  <Option value="+852" style={{ backgroundColor: '#f5f5f5' }}>+852</Option>
+                </Select>
+              </Col>
+              <Col span={16}><Input placeholder="请输入手机号" /></Col>
+            </Row>
+          </Input.Group>
+        </Form.Item>
+
+        <Form.Item
+          label="验证码"
+          name="loginName"
+          rules={[{ required: true }]}
+        >
+          <Input.Group>
+            <Row>
+              <Col span={15}>
+                <Input placeholder="请输入手机验证码" />
+              </Col>
+              <Col span={9}><Button type="primary">获取验证码</Button></Col>
+            </Row>
+          </Input.Group>
+        </Form.Item>
+        <Form.Item
+          label="设置密码"
+          name="password"
+          rules={[{ required: true }]}
+        >
+          <Input.Password
+            placeholder="请设置密码"
+            style={{ borderRadius: "4px" }}
+          />
+        </Form.Item>
+        <Form.Item
+          label="确认密码"
+          name="password"
+          rules={[{ required: true }]}
+        >
+          <Input.Password
+            placeholder="请再次输入密码"
+            style={{ borderRadius: "4px" }}
+          />
+        </Form.Item>
+        <Form.Item
+          label="微信号(选填)"
+          name="loginName"
+        >
+          <Input placeholder="请输入微信号/手机号" style={{ borderRadius: "4px" }} />
+        </Form.Item>
+        <Form.Item
+          label="邀请码(选填)"
+          name="loginName"
+        >
+          <Input placeholder="若有，请输入邀请码" style={{ borderRadius: "4px" }} />
+        </Form.Item>
+        <Checkbox>
+          <div>
+            <span>我已阅读并同意</span>
+            <a>Qbit General Terms and Conditions</a>和
+            <a>Privacy Policies</a>
+            {/*<Button type="link">Qbit General Terms and Conditions</Button>
+            和<Button type="link">Privacy Policies</Button> */}
+          </div>
+
+        </Checkbox>
+        <Form.Item>
+          <Button
+            type="primary"
+            size="large"
+            style={{ width: "100%", marginTop: "24px", borderRadius: "4px", height: '3em' }}
+            htmlType="submit"
+          >
+            确认开通
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+}

src/pages/qRegister/index.jsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from "react";
+import QRegister from "./QRegister";
+import QCarousel from "@/components/QCarousel";
+import "./style.less";
+
+export default (props) => {
+  return (
+    <div className="qregister">
+      <div className="qregister-left">
+        <QCarousel />
+      </div>
+      <div style={{ flex: 1 }}>
+        <QRegister />
+      </div>
+    </div>
+  )
+}

src/pages/qRegister/style.less

@@ -0,0 +1,24 @@
+.qregister-right-box {
+  width: 400px;
+  padding-left: 90px;
+  padding-top: 70px;
+  .qregister-right-title {
+    font-weight: 600;
+    font-size: 30px;
+  }
+}
+.qregister {
+  display: flex;
+  align-items: stretch;
+  .qregister-left {
+    width: 46%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-image: url(https://qbitnetwork.com/_nuxt/img/000.b39e58b.svg);
+    background-repeat: no-repeat;
+    background-color: #f7fafa;
+    min-height: 100vh;
+  }
+}

src/routes/routes.jsx

@@ -16,6 +16,10 @@ import EcologicalPartner from "@/pages/ecologicalpartner";
 import AccountSettings from "@/pages/accountsettings";
 import FirstPage from "@/pages/firstPage/index";
 
+
+import QLogin from '@/pages/qLogin/index';
+import QRegister from '@/pages/qRegister/index';
+
 /**
  * meta 用来扩展自定义数据数据
  * {
@@ -118,6 +122,16 @@ export const defaultRoutes = [
     path: "/firstPage",
     element: <FirstPage />,
   },
+  // q登录页
+  {
+    path: "/qLogin",
+    element: <QLogin />,
+  },
+  // q注册页
+  {
+    path: "/qRegister",
+    element: <QRegister />,
+  },
   {
     path: "/login",
     element: <Login />,