mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-06 12:45:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

opti: Login样式修改

Browse Source
This commit is contained in:
wenbo.dong 2017-07-24 17:21:10 +08:00
parent 1a3015a8c4
commit c484ae0f5a
4 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/containers/Login/Login.js
View File

@ -4,6 +4,16 @@ import { connect } from 'react-redux';
import { Form, Button, Input, Icon, message } from 'antd';
import { loginActions } from '../../actions/login';
const FormItem = Form.Item;
import './Login.scss'
const formItemStyle = {
marginBottom: '.16rem'
}
const changeHeight = {
height: '.42rem'
}
@connect(
state => {
return {
@ -49,29 +59,29 @@ class Login extends Component {
<Form onSubmit={this.handleSubmit}>
{/* 用户名 (Email) */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('email', {
rules: [{ required: true, message: '请输入email!' }]
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
<Input style={changeHeight} prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
)}
</FormItem>
{/* 密码 */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('password', {
rules: [{ required: true, message: '请输入密码!' }]
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
<Input style={changeHeight} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
{/* 登录按钮 */}
<FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
<FormItem style={formItemStyle}>
<Button style={changeHeight} type="primary" htmlType="submit" className="login-form-button">登录</Button>
</FormItem>
<Button id="qsso-login" type="primary" className="login-form-button" onClick={() => window.QSSO.attach('qsso-login','/user/login_by_token')}>QSSO登录</Button>
<Button style={changeHeight} id="qsso-login" type="primary" className="login-form-button" size="large" onClick={() => window.QSSO.attach('qsso-login','/user/login_by_token')} ghost>QSSO登录</Button>
</Form>
)

14
client/containers/Login/Login.scss
View File

@ -1,4 +1,16 @@
@import '../../styles/common.scss';
/* .login-main.css */
.ant-tabs-nav-wrap {
font-size: .16rem;
text-align: center;
}
.ant-btn-primary {
// background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
// border: none !important;
width: 100%;
}
.ant-form-item{
margin-bottom: .1rem;
}

4
client/containers/Login/LoginWrap.js
View File

@ -1,10 +1,10 @@
import './Login.scss'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Tabs } from 'antd';
import LoginForm from './Login';
import RegForm from './Reg';
import './Login.scss';
const TabPane = Tabs.TabPane;
@ -21,7 +21,7 @@ class LoginWrap extends Component {
render() {
const { loginWrapActiveKey } = this.props;
return (
<Tabs defaultActiveKey={loginWrapActiveKey} className="login-form">
<Tabs defaultActiveKey={loginWrapActiveKey} className="login-form" tabBarStyle={{border: 'none'}}>
<TabPane tab="登录" key="1">
<LoginForm/>
</TabPane>

28
client/containers/Login/Reg.js
View File

@ -5,6 +5,14 @@ import { Form, Button, Input, Icon, message } from 'antd';
import { regActions } from '../../actions/login';
const FormItem = Form.Item;
const formItemStyle = {
marginBottom: '.16rem'
}
const changeHeight = {
height: '.42rem'
}
@connect(
state => {
return {
@ -75,25 +83,25 @@ class Reg extends Component {
<Form onSubmit={this.handleSubmit}>
{/* 用户名 */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('userName', {
rules: [{ required: true, message: '请输入用户名!' }]
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
<Input style={changeHeight} prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
)}
</FormItem>
{/* Emaiil */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('email', {
rules: [{ required: true, message: '请输入email!' }]
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
<Input style={changeHeight} prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
)}
</FormItem>
{/* 密码 */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('password', {
rules: [{
required: true,
@ -102,12 +110,12 @@ class Reg extends Component {
validator: this.checkConfirm
}]
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
<Input style={changeHeight} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
{/* 密码二次确认 */}
<FormItem>
<FormItem style={formItemStyle}>
{getFieldDecorator('confirm', {
rules: [{
required: true,
@ -116,13 +124,13 @@ class Reg extends Component {
validator: this.checkPassword
}]
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Confirm Password" />
<Input style={changeHeight} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Confirm Password" />
)}
</FormItem>
{/* 注册按钮 */}
<FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">注册</Button>
<FormItem style={formItemStyle}>
<Button style={changeHeight} type="primary" htmlType="submit" className="login-form-button">注册</Button>
</FormItem>
</Form>
)