panqihua
/
help_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

样式修改

Browse Source
0603
wt 5 years ago
parent 079583602b
commit 4fd239b66b
8 changed files with 56 additions and 16 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/Active.tsx
  2. 2
      src/Manager.tsx
  3. 6
      src/User.tsx
  4. 10
      src/account/Login.tsx
  5. 14
      src/account/Register.tsx
  6. 4
      src/entity.ts
  7. 30
      src/index.css
  8. 4
      src/ui/InputGroup.tsx

2
src/Active.tsx
Unescape View File

@ -123,7 +123,7 @@ export class Active extends React.Component<any, {
return (
<Tabs defaultActiveKey="info" id="uncontrolled-tab-example">
<Tab eventKey="info" title="活动管理">
<Table striped bordered hover className="mt-3">
<Table striped bordered hover className="mt-3 custom-table ml-auto mr-auto">
<thead>
<tr>
<th>#</th>

2
src/Manager.tsx
Unescape View File

@ -208,7 +208,7 @@ export class Manager extends React.Component<
menuName={"添加管理员"} onClose={()=>{
this.setState({dialog:null});
}}/>})}>添加管理员</Button>
<Table striped bordered hover className="mt-3">
<Table striped bordered hover className="mt-3 custom-table ml-auto mr-auto overflow-auto custom-table-height">
<thead>
<tr>
<th>#</th>

6
src/User.tsx
Unescape View File

@ -1,5 +1,5 @@
import React from "react";
import {Button, Col, Form, Image, Row, Tab, Table, Tabs} from "react-bootstrap";
import {Button, Col, Container, Form, Image, Row, Tab, Table, Tabs} from "react-bootstrap";
import {PageProps, UserEntity, UserType} from "./entity";
import {Input} from "./ui/InputGroup";
import {JSONResponse, Method, request} from "./interface";
@ -244,6 +244,7 @@ export class User extends React.Component<
return (
<Tabs defaultActiveKey="info" id="uncontrolled-tab-example">
<Tab eventKey="info" title="用户信息">
{/*<div className="overflow-auto custom-table-height">*/}
<Table striped bordered hover className="mt-3">
<thead>
<tr>
@ -263,7 +264,7 @@ export class User extends React.Component<
<th>操作</th>
</tr>
</thead>
<tbody>
<tbody className="custom-table-height">
{this.state.userList?this.state.userList.length>0?this.state.userList.map((user:UserEntity, index:number)=>
<tr key={"tr"+index}>
<td className="align-middle">{index+1}</td>
@ -298,6 +299,7 @@ export class User extends React.Component<
</tr>):<h3 className="text-center text-danger">没有用户信息</h3>:null}
</tbody>
</Table>
{/*</div>*/}
{this.state.page?<Page onClick={(page:number)=>this.loadUser(page)} currentPage={this.state.page.currentPage}
totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>

10
src/account/Login.tsx
Unescape View File

@ -59,12 +59,13 @@ export class Login extends React.Component<LoginProps, LoginState>{
render() {
return (
<div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
<div className="container">
<div className="d-flex align-items-center" style={{backgroundColor:"#FFF8F8",height:"937px",overflow:"hidden"}}>
<div style={{height:300,backgroundColor:"#ffffff",width:"800px",float:"left",overflow:"hidden",marginTop:"-50px",border:"3px solid #ffffff",borderRadius:15,boxShadow:"0 0 10px #939292"}} className="container">
<div style={{float:"left",marginTop:"20px",marginLeft:"270px",color:"#1D45FF",fontFamily:"微软雅黑",fontSize:20}}>互联网+互助系统后台登录</div>
<div style={{marginTop:70}}>
<Form>
<Input name="managerId" type="text" desc="管理员账号" value={this.state.managerId}
<Input style={{}} name="managerId" type="text" desc="管理员账号" value={this.state.managerId}
onChange={(value: string)=>{this.setState({managerId:value})}} valid={{check:this.state.managerId.length>0}}/>
<Input name="password" type="password" desc="管理员密码" value={this.state.password}
@ -76,6 +77,7 @@ export class Login extends React.Component<LoginProps, LoginState>{
<Button variant="info" className="mt-3 col-2" onClick={()=>this.props.toRegister()}>跳转到注册</Button>
</Form>
</div>
</div>
<MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"login-dialog"}

14
src/account/Register.tsx
Unescape View File

@ -74,18 +74,19 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
render() {
return (
<div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
<div className="container">
<div className="d-flex align-items-center" style={{backgroundColor:"#FFF8F8",height:"937px",overflow:"hidden"}}>
<div style={{height:400,backgroundColor:"#ffffff",width:"800px",float:"left",overflow:"hidden",marginTop:"-50px",border:"3px solid #ffffff",borderRadius:15,boxShadow:"0 0 10px #939292"}} className="container">
<div style={{float:"left",marginTop:"20px",marginLeft:"270px",color:"#1D45FF",fontFamily:"微软雅黑",fontSize:20}}>互联网+互助系统后台注册</div>
<div style={{marginTop:75}}>
<Form>
<Input col={4} name="managerId" type="text" desc="管理员账号" value={this.state.managerId} onChange={(value: string)=>{
<Input prependTextClass={"input-prepend-text"} col={7} name="managerId" type="text" desc="管理员账号" value={this.state.managerId} onChange={(value: string)=>{
this.setState({...this.state,...{managerId:value}})}} valid={{check:this.isNotEmpty(this.state.managerId)}}/>
<Input col={4} name="password" type="password" desc="管理员密码" value={this.state.password}
<Input prependTextClass={"input-prepend-text"} col={7} name="password" type="password" desc="管理员密码" value={this.state.password}
onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/>
<Input col={4} name="confirmPwd" type="password" desc="确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
<Input prependTextClass={"input-prepend-text"} col={7} name="confirmPwd" type="password" desc="&nbsp;&nbsp;确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
onChange={(value: string)=>{this.setState({confirmPwd:value})}}
valid={{check:this.checkPwd(),
invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/>
@ -95,6 +96,7 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
<Button variant="info" className="mt-3 col-2" onClick={()=>this.props.toLogin()}>返回登陆</Button>
</Form>
</div>
</div>
<MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"register-dialog"}

4
src/entity.ts
Unescape View File

@ -83,6 +83,10 @@ export interface FormInputProps {
col?: number
//整体样式，若存在会覆盖col局部样式
className?:string;
//内联样式
style?:object;
//前置文本宽度
prependTextClass?:string;
}
/**

30
src/index.css
Unescape View File

@ -35,3 +35,33 @@ code {
width: 30px;
height: 30px;
}
/*前置文本宽度*/
.input-prepend-text{
width:106px;
}
/*表格示例样式*/
.custom-table{
max-width: 95%;
}
.custom-table-height{
height: 500px;
}
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}

4
src/ui/InputGroup.tsx
Unescape View File

@ -27,9 +27,9 @@ export class Input extends React.Component<FormInputProps, { undefined?:undefine
render() {
return (
<InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
<InputGroup style={this.props.style||{}} className={this.props.className?this.props.className:"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
<InputGroup.Prepend>
<InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
<InputGroup.Text className={this.props.prependTextClass?this.props.prependTextClass:""} id={this.props.name}>{this.props.desc}</InputGroup.Text>
</InputGroup.Prepend>
<FormControl autoComplete={this.props.name} className={this.valid()} type={this.props.type} as={this.props.as}
placeholder={(this.props.placeholder||"").length>0?this.props.placeholder:"请输入"+this.props.desc}

Write Preview
Loading…
Cancel
Save