Browse Source

首页infoCard垂直居中

zhuth 7 years ago
parent
commit
675b98638a
1 changed files with 41 additions and 35 deletions
  1. 41 35
      frontend/saas-web/app/view/home/InfoCard.scss

+ 41 - 35
frontend/saas-web/app/view/home/InfoCard.scss

@@ -4,45 +4,51 @@ $max-card-width: 235px;
 
     .x-panel-bodyWrap {
         .x-autocontainer-innerCt {
-
-            .x-row {
+            .x-component {
                 display: flex;
-                width: 100%;
-                justify-content: flex-start;
-            
-                .x-col {
-            
-                    flex: 1;
-                    max-width: $max-card-width;
-                    color: #fff;
-                    padding: 10px;
-            
-                    .x-box {
-                        padding: 16px;
-                        height: 120px;
-                        border-radius: 0.5rem;
-                        position: relative;
-                        display: block;
-                        cursor: pointer;
-            
-                        &:hover {
-                            opacity: 0.7;
-                        }
+                flex-direction: column;
+                justify-content: center;
+                height: 100%;
 
-                        h3 {
-                            text-align: center;
-                            font-size: 16px;
+                .x-row {
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                
+                    .x-col {
+                
+                        flex: 1;
+                        max-width: $max-card-width;
+                        color: #fff;
+                        padding: 10px;
+                
+                        .x-box {
+                            padding: 16px;
+                            height: 120px;
+                            border-radius: 0.5rem;
+                            position: relative;
+                            display: block;
+                            cursor: pointer;
+                
+                            &:hover {
+                                opacity: 0.7;
+                            }
+    
+                            h3 {
+                                text-align: center;
+                                font-size: 16px;
+                            }
+                
+                            p {
+                                font-size: 24px;
+                                text-align: center;
+                                margin-top: 32px;
+                            }
+                
                         }
-            
-                        p {
-                            font-size: 24px;
-                            text-align: center;
-                            margin-top: 32px;
+                        .x-box.x-view-item-focused {
+                            outline: none !important;
                         }
-            
-                    }
-                    .x-box.x-view-item-focused {
-                        outline: none !important;
                     }
                 }
             }