lk
2 months ago
1 changed files with 126 additions and 0 deletions
@ -0,0 +1,126 @@ |
|||
import React from "react"; |
|||
import { Layout, Tabs, Input, Button, Typography, Row, Col } from "antd"; |
|||
import { QrcodeOutlined, UserOutlined, LockOutlined } from "@ant-design/icons"; |
|||
|
|||
const { Title, Text, Link } = Typography; |
|||
const { TabPane } = Tabs; |
|||
|
|||
const Login2: React.FC = () => { |
|||
return ( |
|||
<Layout |
|||
style={{ |
|||
height: "100vh", |
|||
background: "url('https://placehold.co/1920x1080') no-repeat center center", |
|||
backgroundSize: "cover" |
|||
}} |
|||
> |
|||
<Row justify="center" align="middle" style={{ height: "100%" }}> |
|||
<Col> |
|||
<Row> |
|||
<Col span={12} style={{ padding: "20px" }}> |
|||
<Title level={3}>向量检索服务免费试用</Title> |
|||
<Text>免费试用向量检索服务,玩转大模型生成式检索</Text> |
|||
<br /> |
|||
<Link href="#">查看详情 ></Link> |
|||
</Col> |
|||
<Col |
|||
span={12} |
|||
style={{ |
|||
padding: "20px", |
|||
background: "#fff", |
|||
borderRadius: "8px", |
|||
position: "relative", |
|||
width:"500px", |
|||
height:"400px", |
|||
}} |
|||
> |
|||
<div |
|||
style={{ |
|||
position: "absolute", |
|||
top: 0, |
|||
right: 0, |
|||
width: 0, |
|||
height: 0, |
|||
borderLeft: "80px solid transparent", |
|||
borderTop: "80px solid #ff9800", |
|||
textAlign: "center" |
|||
}} |
|||
> |
|||
<Link |
|||
href="#" |
|||
style={{ |
|||
position: "absolute", |
|||
top: "-70px", |
|||
right: "0px", |
|||
color: "#fff", |
|||
fontSize: "16px", |
|||
transform: "rotate(0deg)", |
|||
textAlign: "center", |
|||
width: "60px", |
|||
display: "block" |
|||
}} |
|||
> |
|||
注册 |
|||
</Link> |
|||
|
|||
</div> |
|||
<Tabs defaultActiveKey="1"> |
|||
<TabPane tab="账号密码登录" key="1"> |
|||
<Input |
|||
size="large" |
|||
placeholder="请输入账号" |
|||
prefix={<UserOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
<Input.Password |
|||
size="large" |
|||
placeholder="请输入登录密码" |
|||
prefix={<LockOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
</TabPane> |
|||
<TabPane tab="邮箱登录" key="2"> |
|||
<Input |
|||
size="large" |
|||
placeholder="请输入邮箱" |
|||
prefix={<UserOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
<Input.Password |
|||
size="large" |
|||
placeholder="请输入验证码" |
|||
prefix={<LockOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
</TabPane> |
|||
<TabPane tab="飞机登录" key="3"> |
|||
<Input |
|||
size="large" |
|||
placeholder="请输入飞机代码" |
|||
prefix={<UserOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
</TabPane> |
|||
</Tabs> |
|||
<Input.Password |
|||
size="large" |
|||
placeholder="验证码" |
|||
prefix={<LockOutlined />} |
|||
style={{ marginBottom: "20px" }} |
|||
/> |
|||
<Button type="primary" block> |
|||
登录 |
|||
</Button> |
|||
<Row justify="space-between" style={{ marginTop: "10px" }}> |
|||
<Link href="#">忘记账号</Link> |
|||
<Link href="#">找回密码</Link> |
|||
</Row> |
|||
</Col> |
|||
</Row> |
|||
</Col> |
|||
</Row> |
|||
</Layout> |
|||
); |
|||
}; |
|||
|
|||
export default Login2; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue