样式修改

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>

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>

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}/>

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="d-flex align-items-center" style={{backgroundColor:"#FFF8F8",height:"937px",overflow:"hidden"}}>
-            <div className="container">
+            <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"}

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="d-flex align-items-center" style={{backgroundColor:"#FFF8F8",height:"937px",overflow:"hidden"}}>
-                <div className="container">
+                <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"}

src/entity.ts

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

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 )
+}

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}