样式修改

README.md

@@ -1,2 +1,44 @@
-#   互联网+互助平台后台
-##  React+Material-UI
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

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="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"}

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

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}