Develop

.eslintrc.js

@@ -205,7 +205,7 @@ module.exports = {
     'no-underscore-dangle': 0, // 允许任意使用下划线
     'one-var': [1, 'never'], // 定义变量一行一个
     'padded-blocks': [0, 'never'], // 块代码上下不能留空行
-    semi: 2, // 校验分号
+    semi: 0, // 校验分号
     'semi-spacing': 2, // 分号后面留空
     'keyword-spacing': 2, // 关键词后面加空格
     'space-before-blocks': 2, // 块级代码加空格

.umirc.js

@@ -23,7 +23,7 @@ export default {
   history: 'hash',
   cssLoaderOptions: {},
   alias: {
-    component: path.resolve(__dirname, './src/component'),
+    component: path.resolve(__dirname, './src/component')
   },
   chainWebpack(config, { webpack }) {
     // config.plugin('analyzer').use(

src/assets/css/common/displaFlex.less

@@ -0,0 +1,209 @@
+@charset "UTF-8";
+
+.displayFlex{
+  display: flex;
+  display:-webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+}
+
+.flex-direction-row{
+  -webkit-box-orient:horizontal;
+  -webkit-box-direction:normal;
+  -moz-box-orient:horizontal;
+  -moz-box-direction:normal;
+  flex-direction:row;
+  -webkit-flex-direction:row;
+}
+.flex-direction-column{
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -moz-box-orient:vertical;
+  -moz-box-direction:normal;
+  flex-direction:column;
+  -webkit-flex-direction:column;
+}
+.flex-justify-content{
+  -webkit-justify-content:center;
+  justify-content:center;
+  -moz-box-pack:center;
+  -webkit-box-pack:center;
+  box-pack:center;
+}
+.flex-justify-right{
+  -webkit-justify-content: flex-end;
+  justify-content:flex-end;
+  -moz-box-pack:end;
+  -webkit-box-pack:end;
+  box-pack:end;
+}
+.flex-justify-between{
+  -webkit-justify-content: space-between;
+  justify-content:space-between;
+  -moz-box-pack:justify;
+  -webkit-box-pack:justify;
+  box-pack:space-between;
+}
+.flex-align-items {
+  align-items: center;
+  -webkit-align-items:center;
+  box-align:center;
+  -moz-box-align:center;
+  -webkit-box-align:center;
+
+}
+.flex-align-end {
+  align-items: end;
+  -webkit-align-items: flex-end;
+  -moz-box-align:end;
+  -webkit-box-align:end;
+
+}
+.flex-wrap{
+  -webkit-flex-wrap:wrap;
+  -webkit-box-lines:multiple;
+  -moz-flex-wrap:wrap;
+  flex-wrap:wrap;
+}
+.flex-1{
+  -moz-box-flex: 1.0; /*Firefox*/
+  -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
+  box-flex: 1.0;
+  flex:1;
+}
+.flex-justify-align{
+  display: flex;
+  display:-webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-justify-content:center;
+  justify-content:center;
+  -moz-box-pack:center;
+  -webkit-box-pack:center;
+  box-pack:center;
+  align-items:center;
+  -webkit-align-items:center;
+  box-align:center;
+  -moz-box-align:center;
+  -webkit-box-align:center;
+}
+.justify-align{
+  -webkit-justify-content:center;
+  justify-content:center;
+  -moz-box-pack:center;
+  -webkit-box-pack:center;
+  box-pack:center;
+  align-items:center;
+  -webkit-align-items:center;
+  box-align:center;
+  -moz-box-align:center;
+  -webkit-box-align:center;
+}
+.flex-justify{
+  display: flex;
+  display:-webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-justify-content:center;
+  justify-content:center;
+  -moz-box-pack:center;
+  -webkit-box-pack:center;
+  box-pack:center;
+}
+.border_bottom (@color){
+  &:before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: '';
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid @color;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.border_top (@color){
+  &:before {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    content: '';
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid @color;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.border_right(@color){
+  &:before {
+    position: absolute;
+    top: 0;
+    right: -1px;
+    left: 0;
+    content: '';
+    height: 100%;
+    width: 1px;
+    border-right: 1px solid @color;
+    -webkit-transform: scaleX(0.5);
+    transform: scaleX(0.5);
+  }
+}
+.border_left(@color){
+  &:before {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    right: 0;
+    content: '';
+    height: 100%;
+    width: 1px;
+    border-lef: 1px solid @color;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.duohang(@number) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: @number;
+  overflow: hidden;
+}
+//单行
+.danhang {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
+.textareaPLaceholder(@color){
+
+  textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+    color:@color;
+  }
+  textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color:@color;
+  }
+  textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color:@color;
+  }
+  textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color:@color;
+  }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+

src/component/user/Sign/index.less

@@ -0,0 +1,59 @@
+.sign-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 42px);
+  box-sizing: border-box;
+
+  :global {
+    .sign-container{
+      background-color: #ffffff;
+      width: 444px;
+      margin: 0px auto;
+
+      .sign-header {
+        margin: 30px 0px 30px 0px;
+        p{
+          margin: 20px auto 0px auto;
+          font-size: 20px;
+          font-family: "Adobe Heiti Std R";
+          font-weight: normal;
+          color: rgba(24, 38, 42, 1);
+          line-height: 26px;
+        }
+      }
+
+      .sign-foot {
+        background:rgba(246,246,246,1);
+        padding: 38px 0px 40px 0px;
+        color: #18262A;
+        a {
+          color: #40AEA8
+        }
+      }
+
+      form {
+        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+          color:    #FF40AEA8;
+          font-weight: bold;
+        }
+        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+          color:    #FF40AEA8;
+          opacity:  1;
+          font-weight: bold;
+        }
+        ::-moz-placeholder { /* Mozilla Firefox 19+ */
+          color:    #FF40AEA8;
+          opacity:  1;
+          font-weight: bold;
+        }
+        :-ms-input-placeholder { /* Internet Explorer 10-11 */
+          color:    #FF40AEA8;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}

src/component/user/Sign/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import style from './index.less'
+import Logo from 'assets/images/login/logo.png'
+
+export default class Index extends React.Component<Props, State> {
+  render() {
+    const { header, children, footer } = this.props;
+    return (
+      <div className={style['sign-main']}>
+        <div className={'sign-container'}>
+          <div className={'sign-header'}>
+            <img src={Logo} />
+            <p>{header}</p>
+          </div>
+          {children}
+          <div className={'sign-foot'}>
+            {footer}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}