Merge branch 'master' into feature/maolipeng/20210629/piliang

src/modules/home/Home.less

@@ -2,34 +2,35 @@
   // padding: 0 16px 16px;
   min-width: 1100px;
   position: relative;
-  z-index:3;
+  z-index: 3;
   .g2-tooltip-marker {
     border-radius: 50% !important;
   }
   .home-title {
     color: #333;
-    padding-left:28px;
-    font-size:16px;
-    font-weight:bold;
+    padding-left: 28px;
+    font-size: 16px;
+    font-weight: bold;
     position: relative;
-    padding-top:16px;
-    &::before{
-      width:4px;
-      height:12px;
-      content:'';
-      background-image: linear-gradient(#2966FF 83.5%, #0ACCA4 16.5%);
-      display:inline-block;
+    padding-top: 16px;
+    &::before {
+      width: 4px;
+      height: 12px;
+      content: '';
+      background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+      display: inline-block;
       position: absolute;
-      left:16px;
-      top:22px;
+      left: 16px;
+      top: 22px;
     }
   }
   @font-face {
     font-family: 'number';
     src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
   }
-  .data-wrap{
-    background: #FFF;
+  .data-wrap {
+    background: #fff;
+    padding-bottom: 25px;
     .data-box {
       display: flex;
       justify-content: space-between;
@@ -41,7 +42,7 @@
         width: ~'calc(16.67% - 8px)';
         padding: 16px;
         &.course-data {
-          width: ~'calc(50% - 24px)';
+          width: 33%;
         }
         .header {
           display: flex;
@@ -55,7 +56,7 @@
             font-size: 14px;
             line-height: 18px;
             color: #333;
-            font-weight:500;
+            font-weight: 500;
           }
         }
         .data-number {
@@ -74,7 +75,7 @@
           .iconfont {
             font-size: 12px;
             margin-right: 4px;
-            color: #EC4B35;
+            color: #ec4b35;
           }
           .footer-number {
             font-size: 12px;
@@ -83,17 +84,17 @@
         }
         .course-box {
           border-radius: 4px;
-          background: #FAFAFA;
+          background: #fafafa;
           height: 124px;
-          width: 66%;
+          width: 60%;
           position: absolute;
           right: 16px;
-          top: 16px;
-          padding: 8px 24px 0;
+          top: 28px;
+          padding: 8px 0 0;
           .course-item {
             display: inline-block;
             width: 50%;
-            padding: 4px 0 12px;
+            padding: 4px 24px 12px;
             .course-title {
               font-size: 12px;
               color: #999;
@@ -105,6 +106,7 @@
                 font-size: 16px;
                 font-family: 'number';
                 margin-right: 16px;
+                white-space: nowrap;
               }
               .course-word {
                 font-size: 12px;
@@ -114,11 +116,12 @@
               .iconfont {
                 font-size: 12px;
                 margin-right: 4px;
-                color: #EC4B35;
+                color: #ec4b35;
               }
               .add-number {
                 font-size: 12px;
                 color: #999;
+                white-space: nowrap;
               }
             }
           }
@@ -126,9 +129,9 @@
       }
     }
   }
-  .study-wrap{
-    background: #FFF;
-    margin-top:16px;
+  .study-wrap {
+    background: #fff;
+    margin-top: 16px;
     .study-box {
       display: flex;
       justify-content: space-between;
@@ -148,7 +151,7 @@
           margin-bottom: 12px;
           .iconfont {
             font-size: 14px;
-            color: #BFBFBF;
+            color: #bfbfbf;
             margin-left: 4px;
           }
           .tip {
@@ -169,13 +172,13 @@
               color: #666;
               cursor: pointer;
               &.selected {
-                color: #2966FF;
+                color: #2966ff;
                 &::after {
                   position: absolute;
                   width: 24px;
                   height: 2px;
                   content: '';
-                  background: #2966FF;
+                  background: #2966ff;
                   border-radius: 1px;
                   left: 9px;
                   bottom: -4px;
@@ -196,7 +199,7 @@
           display: flex;
           align-items: center;
           &.odd {
-            background: #FAFAFA;
+            background: #fafafa;
           }
           .table-image {
             width: 24px;
@@ -257,7 +260,7 @@
             width: 204px;
             height: 204px;
             border-radius: 102px;
-            background: #F1F3F6;
+            background: #f1f3f6;
             margin-top: -20px;
             .small-circle {
               display: flex;
@@ -280,13 +283,13 @@
           &.unfinished {
             top: 152px;
             .spot {
-              background: #2966FF;
+              background: #2966ff;
             }
           }
           &.finished {
             top: 232px;
             .spot {
-              background: #FFBB54;
+              background: #ffbb54;
             }
           }
           .spot {
@@ -352,14 +355,14 @@
         align-items: center;
         color: #666;
         .student-dot {
-          background: #2966FF;
+          background: #2966ff;
           height: 8px;
           width: 8px;
           border-radius: 50%;
           margin-right: 8px;
         }
         .time-dot {
-          background: #FEB613;
+          background: #feb613;
           height: 8px;
           width: 8px;
           border-radius: 50%;
@@ -382,7 +385,8 @@
     font-size: 14px;
   }
   .g2-tooltip-list {
-    li,span {
+    li,
+    span {
       display: flex;
       align-items: center;
       font-size: 14px;

src/modules/root/Header.less

@@ -346,7 +346,7 @@
             width: 216px;
             height: 260px;
             top: 49px;
-            left: 0;
+            left: -50px;
             background-color: #fff;
             flex-wrap: wrap;
             box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);