Skip to content

register2 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 2, 2020
Merged

register2 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/page/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ function Login() {
<Tab label="密码登录" />
<Tab label="短信验证码登录" />
</Tabs>
<div className="tab-view">
<div className="space-justify-view">
<SwipeableViews
axis={theme.direction === "rtl" ? "x-reverse" : "x"}
index={tabs}
Expand Down
63 changes: 30 additions & 33 deletions src/page/register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,37 +83,7 @@ function Register() {
<Container maxWidth={clientWidth <= 600 ? false : "xs"} className={clientWidth <= 600 ? "" : "container"}>
<div>
<FlexCard size={clientWidth <= 600 ? "small" : "large"}>
<Collapse in={page === 2} >
<CardContent className={page === 2 ? "validation-card" : "validation-card-none"}>
<div className="register-tip">
<img className="logo" src={Logo} alt="Logo" />
<Typography className="register-tip-text" variant="h1">
验证您的账号
</Typography>
<p className="project-tip-text">一个账号，畅享BlueAirLive所有服务</p>
<Tabs
value={tabs}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
>
<Tab label="使用手机注册" />
<Tab label="使用邮箱注册" />
</Tabs>
<SwipeableViews
axis={theme.direction === "rtl" ? "x-reverse" : "x"}
index={tabs}
onChangeIndex={handleChangeIndex}
>
<TabPanel value={tabs} index={0} dir={theme.direction}>
<TextField className="input" label="手机号码" />
</TabPanel>
<TabPanel value={tabs} index={1} dir={theme.direction}></TabPanel>
</SwipeableViews>
</div>
</CardContent>
</Collapse>

<Collapse in={page === 1}>
<CardContent className={page === 1 ? "register-card" : "register-card-none"}>
<div className="register-tip">
Expand All @@ -132,7 +102,7 @@ function Register() {
<TextField className="input" label="密码" />
<TextField className="input" label="确认密码" />
<p className="password-tip-text">
使用{Setting.PASSWORD_MINLEN}个~{Setting.PASSWORD_MAXLEN}个字符（字母、数字和符号的组合）
使用{Setting.PASSWORD_MINLEN}个~{Setting.PASSWORD_MAXLEN}个字符（必须包含字母和数字）
</p>
</div>

Expand All @@ -157,7 +127,34 @@ function Register() {
<Link href="/#/login">登录账号</Link>
</Grid>
<Grid item xs={6} className="options-right">
<Button variant="contained" color="primary" onClick={handleNextPage} disableElevation>
<Button variant="contained" color="primary" onClick={handleNextPage} disableElevation>
下一步
</Button>
</Grid>
</Grid>
</CardContent>
</Collapse>

<Collapse in={page === 2} >
<CardContent className={page === 2 ? "validation-card" : "validation-card-none"}>
<div className="register-tip">
<img className="logo" src={Logo} alt="Logo" />
<Typography className="register-tip-text" variant="h1">
验证您的账号
</Typography>
<p className="project-tip-text">一个账号，畅享BlueAirLive所有服务</p>

</div>
<div className="space-justify-view">
<TextField className="input" label="验证码" />
</div>

<Grid container justify="center" alignItems="center">
<Grid item xs={6}>
<Link href="">重新发送</Link>
</Grid>
<Grid item xs={6} className="options-right">
<Button variant="contained" color="primary" onClick={handleNextPage} disableElevation>
下一步
</Button>
</Grid>
Expand Down
42 changes: 26 additions & 16 deletions src/static/css/logcommon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
.container {
display: flex !important;
height: calc(100vh - 4px);
display : flex !important;
height : calc(100vh - 4px);
justify-content: center;
align-items: center;
align-items : center;
}

.logo {
width: 80px;
height: 80px;
text-align: center;
width : 80px;
height : 80px;
text-align : center;
margin-bottom: 0.3em;
}

.register-card,
.validation-card {
width: 100%;
padding: 20px 40px 36px !important;
width : 100% !important;
padding: 2rem 2.5rem 2rem !important;
}

/*调整一下手机版的左右边框*/
@media screen and (max-width: 600px) {

.register-card,
.validation-card {
width : 100%;
padding: 2rem 1rem 2rem !important;
}
}

.register-card-none,
Expand All @@ -28,30 +38,30 @@
}

.register-tip-text {
display: block;
font-size: 24px !important;
display : block;
font-size : 24px !important;
font-weight: 400 !important;
line-height: 32px !important;
}

.project-tip-text {
color: rgba(0, 0, 0, 0.45);
color : rgba(0, 0, 0, 0.45);
font-size: 14px;
}

.input {
width: 100%;
width : 100%;
margin-bottom: 0.3em !important;
}

.email-tip-text {
font-size: 12px;
text-align: left;
font-size : 12px;
text-align : left;
margin-bottom: 0.5em;
}

.password-tip-text {
font-size: 12px;
font-size : 12px;
text-align: left;
}

Expand All @@ -74,5 +84,5 @@

/*重置focus，不然感觉不好看*/
.MuiButton-containedPrimary:focus {
background-color: #1890FF !important;
background-color: #1890FF !important;
}
2 changes: 1 addition & 1 deletion src/static/css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.tab-view{
.space-justify-view{
margin-top: 0.4em;
margin-bottom: 1em;
}
11 changes: 0 additions & 11 deletions src/static/css/register.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@

.register-card,
.validation-card {
width: 100%;
padding: 20px 40px 36px !important;
}

.register-card-none,
.validation-card-none {
display: none;
}

.register-tip {
text-align: center;
}
Expand Down