From 4fd239b66bab9ed273df2e36168eb1743ec87c9f Mon Sep 17 00:00:00 2001
From: wt <wt>
Date: Wed, 3 Jun 2020 23:59:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Active.tsx           |  2 +-
 src/Manager.tsx          |  2 +-
 src/User.tsx             |  6 ++++--
 src/account/Login.tsx    | 10 ++++++----
 src/account/Register.tsx | 14 ++++++++------
 src/entity.ts            |  4 ++++
 src/index.css            | 30 ++++++++++++++++++++++++++++++
 src/ui/InputGroup.tsx    |  4 ++--
 8 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/Active.tsx b/src/Active.tsx
index c9a4d1a..70c907a 100644
--- a/src/Active.tsx
+++ b/src/Active.tsx
@@ -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>
diff --git a/src/Manager.tsx b/src/Manager.tsx
index 03027c5..a59248a 100644
--- a/src/Manager.tsx
+++ b/src/Manager.tsx
@@ -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>
diff --git a/src/User.tsx b/src/User.tsx
index 5e4ac98..43deca7 100644
--- a/src/User.tsx
+++ b/src/User.tsx
@@ -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}/>
diff --git a/src/account/Login.tsx b/src/account/Login.tsx
index 5fd91f7..24fbb48 100644
--- a/src/account/Login.tsx
+++ b/src/account/Login.tsx
@@ -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"}
diff --git a/src/account/Register.tsx b/src/account/Register.tsx
index 16233b4..52e0e70 100644
--- a/src/account/Register.tsx
+++ b/src/account/Register.tsx
@@ -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"}
diff --git a/src/entity.ts b/src/entity.ts
index eeb0a65..e206be7 100644
--- a/src/entity.ts
+++ b/src/entity.ts
@@ -83,6 +83,10 @@ export interface FormInputProps {
     col?: number
     //整体样式，若存在会覆盖col局部样式
     className?:string;
+    //内联样式
+    style?:object;
+    //前置文本宽度
+    prependTextClass?:string;
 }
 
 /**
diff --git a/src/index.css b/src/index.css
index 1cabd84..99a8b22 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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 )
+}
\ No newline at end of file
diff --git a/src/ui/InputGroup.tsx b/src/ui/InputGroup.tsx
index daa702b..45cf82b 100644
--- a/src/ui/InputGroup.tsx
+++ b/src/ui/InputGroup.tsx
@@ -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}