手机端ui

Author: 1319612909

web/src/App.vue

@@ -15,6 +15,7 @@ export default {
 // 引入初始化样式
 @import '@/style/main.scss';
 @import '@/style/base.scss';
+@import '@/style/mobile.scss';
 #app {
   background: #eee;
   height: 100vh;

web/src/style/basics.scss

@@ -32,3 +32,6 @@ $color-table-tbody:#595959;
 $color-table-thead:#262626;
 // dashboard
 $height-car:68px;
+// mobile
+$padding-xs: 5px;
+$margin-xs: 5px;

web/src/style/main.scss

@@ -1204,6 +1204,14 @@ $mainHight: 100vh;
     top: 0;
     box-sizing: border-box;
     z-index: 999;
+    >.el-row{
+        padding: 0;
+        .el-col-lg-14{
+            height: 60px;
+        }
+    }
+   
+
 }
 
 
@@ -1387,14 +1395,14 @@ $mainHight: 100vh;
 
     .car-left {
         height: $height-car;
-        width: 70%;
-        float: left;
+        // width: 70%;
+        // float: left;
     }
 
     .car-right {
         height: $height-car;
-        width: 29%;
-        float: left;
+        // width: 29%;
+        // float: left;
 
         .flow,
         .user-number,

web/src/style/mobile.scss

@@ -0,0 +1,89 @@
+
+@import '@/style/basics.scss';
+@media screen and (min-width: 320px)and (max-width: 750px){
+        .el-header{
+            padding: 0 $padding-xs;
+        }
+        .layout-cont {
+            .main-cont{
+                .breadcrumb{
+                    padding: 0 $padding-xs;
+                }
+            }
+        } 
+        .layout-cont{
+            .right-box{
+                margin-right: $margin-xs;
+            }
+        } 
+        .search-component{
+            width: 30px;
+        }
+        .screenfull{
+            width: 26px;
+            text-align: center;
+        }
+        .el-main{
+            .admin-box{
+                margin-left: 0;
+                margin-right: 0;
+            }
+            .big.admin-box{
+                padding: 0 0 15px 0;
+            }
+            .big {
+                .bottom {
+                    .chart-player{
+                        height: auto!important;
+                        margin-bottom: 15px;
+                    }
+                    .todoapp{
+                        background-color: #fff;
+                        padding-bottom: 10px;
+                    }
+                }
+            }
+        }
+       
+        .card .car-left,
+        .card .car-right{
+            width: 100%;
+            height: 100%;
+        }
+        .card{
+            padding-left: $padding-xs;
+            padding-right: $padding-xs;
+
+        }
+        .card {
+            .text{
+                width: 100%;
+                h4{
+                    white-space: break-spaces;
+                }
+            }
+        }
+        .shadow{
+            margin-left: 5px;
+            margin-right: 5px;
+            .grid-content{
+                margin-bottom: 10px;
+                padding: 0;
+            }
+        } 
+        .el-dialog{
+            width: 90%;
+        }
+        .el-transfer{
+            .el-transfer-panel{
+                width: 40%;
+                display: inline-block;
+            }
+            .el-transfer__buttons{
+                padding: 0 5px;
+                display: inline-block;
+            }
+           
+        }
+       
+}