opti: 项目卡片布局调整

client/components/ProjectCard/ProjectCard.scss

@@ -45,7 +45,7 @@
   .ant-card-body {
     background-color: $color-bg-gray;
     border-radius: 4px;
-    padding-top: .9rem;
+    padding-top: .24rem + .16rem + 1rem;
     box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
   }
   .ui-logo {
@@ -55,8 +55,8 @@
     position: absolute;
     left: 50%;
     top: 0;
-    transform: translate(-50%, -20%);
-    font-size: .4rem;
+    transform: translate(-50%, .24rem);
+    font-size: .5rem;
     color: #fff;
     background-color: #2395f1;
     line-height: 1rem;
@@ -64,7 +64,6 @@
   }
   .ui-title {
     font-size: .19rem;
-    margin-bottom: .08rem;
     font-weight: normal;
     overflow: hidden;
     text-overflow:ellipsis;
@@ -82,18 +81,45 @@
 
 }
 
-.card-panel-s {
+// .card-panel-s {
+//   .m-card {
+//     .ant-card-body {
+//       padding-top: .6rem;
+//     }
+//     .ui-logo {
+//       width: .6rem;
+//       height: .6rem;
+//       line-height: .6rem;
+//       transform: translate(-50%, -20%);
+//       font-size: .24rem;
+//       background-color: #2395f1;
+//     }
+//   }
+// }
+@media (max-width: 768px) {
   .m-card {
     .ant-card-body {
-      padding-top: .6rem;
+      padding-top: .24rem + .16rem + .6rem;
     }
     .ui-logo {
       width: .6rem;
       height: .6rem;
       line-height: .6rem;
-      transform: translate(-50%, -20%);
-      font-size: .24rem;
-      background-color: #2395f1;
+      font-size: .3rem;
+    }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 992px) {
+  .m-card {
+    .ant-card-body {
+      padding-top: .24rem + .16rem + .8rem;
+    }
+    .ui-logo {
+      width: .8rem;
+      height: .8rem;
+      line-height: .8rem;
+      font-size: .4rem;
     }
   }
 }

client/constants/variable.js

@@ -25,9 +25,9 @@ export default {
   },
   PROJECT_COLOR: {
     blue: '#2395f1',
-    green: '#57cf27',
-    yellow: '#fac200',
-    red: '#ff561b',
+    green: '#00a854',
+    yellow: '#ffbf00',
+    red: '#f56a00',
     pink: '#f5317f',
     cyan: '#00a2ae',
     gray: '#bfbfbf',

client/containers/Project/Setting/ProjectMessage/ProjectMessage.js

@@ -261,13 +261,14 @@ class ProjectMessage extends Component {
                 rules: [{
                   required: false,
                   whitespace: true,
-                  message: "请输入环境域名",
                   validator(rule, value, callback) {
                     if (value) {
                       if (value.length === 0) {
                         callback('请输入环境域名');
                       } else if (!/\S/.test(value)) {
                         callback('请输入环境域名');
+                      } else if (!/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/.test(value)) {
+                        callback('域名格式错误');
                       } else {
                         return callback();
                       }
@@ -396,11 +397,13 @@ class ProjectMessage extends Component {
             {envSettingItems}
           </FormItem>
 
-          <FormItem {...formItemLayout}>
-            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
-              <Icon type="plus" /> 添加环境配置
-            </Button>
-          </FormItem>
+          <Row>
+            <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
+              <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
+                <Icon type="plus" /> 添加环境配置
+              </Button>
+            </Col>
+          </Row>
 
           <FormItem
             {...formItemLayout}

client/containers/Project/Setting/Setting.scss

@@ -88,6 +88,25 @@
     background-color: #2395f1;
     line-height: 1rem;
     box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+    position: relative;
+    &:after {
+      opacity: 0;
+      content: '点击修改';
+      display: block;
+      transition: all .4s;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border-radius: 50%;
+      font-size: .14rem;
+      color: #fff;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0, .25);
+    }
+    &:hover:after {
+      opacity: 1;
+    }
   }
 }