Merge branch 'feature/yuananting/20210619/help-center-enter' into 'master'

Feature/yuananting/20210619/help center enter

See merge request !48

src/common/less/icon-font.less

 @font-face {
-  font-family: 'iconfont';  /* project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot');
-  src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2223403_boiin24pch6.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2223403_boiin24pch6.svg#iconfont') format('svg');
+  font-family: 'iconfont'; /* Project id 2223403 */
+  src: url('//at.alicdn.com/t/font_2223403_oe5p510553.woff2?t=1624259078391') format('woff2'),
+    url('//at.alicdn.com/t/font_2223403_oe5p510553.woff?t=1624259078391') format('woff'),
+    url('//at.alicdn.com/t/font_2223403_oe5p510553.ttf?t=1624259078391') format('truetype');
 }
-.iconfont{
-  font-family:"iconfont" !important;
-  font-size:16px;
-  font-style:normal;
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
 }

src/modules/root/Header.less

-@import "../../core/variables.less";
+@import '../../core/variables.less';
 @top-height: 60px;
 @icon-color: #939393;
 .top-container {
@@ -7,16 +7,23 @@
   left: 0;
   right: 0;
   height: @top-height;
-  background-color: #2966FF;
+  background-color: #2966ff;
   // z-index:2;
-  &::after{
-    content:'';
-    width:100%;
-    height:60px;
-    background: linear-gradient(180deg, #2966FF 0%, rgba(41, 102, 255, 0.82) 29%, rgba(41, 102, 255, 0.58) 55%, rgba(41, 102, 255, 0.27) 77%, rgba(7, 78, 255, 0) 100%);
-    position:absolute;
-    z-index:2;
-    top:59px;
+  &::after {
+    content: '';
+    width: 100%;
+    height: 60px;
+    background: linear-gradient(
+      180deg,
+      #2966ff 0%,
+      rgba(41, 102, 255, 0.82) 29%,
+      rgba(41, 102, 255, 0.58) 55%,
+      rgba(41, 102, 255, 0.27) 77%,
+      rgba(7, 78, 255, 0) 100%
+    );
+    position: absolute;
+    z-index: 2;
+    top: 59px;
   }
   .logo {
     display: inline-block;
@@ -26,7 +33,7 @@
   .logo-name {
     font-size: 14px;
     font-weight: 500;
-    color: #2966FF;
+    color: #2966ff;
     line-height: 20px;
     vertical-align: middle;
     font-weight: bold;
@@ -204,7 +211,7 @@
             cursor: pointer;
           }
           .college-name {
-            color:#FFFFFF;
+            color: #ffffff;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -213,9 +220,9 @@
           .icon {
             font-size: 14px;
             margin-left: 8px;
-            color: #FFF;
+            color: #fff;
             &:hover {
-              color:#FFF;
+              color: #fff;
             }
           }
         }
@@ -283,7 +290,7 @@
         align-items: center;
         .store-name {
           font-size: 14px;
-          color: #FFF;
+          color: #fff;
           line-height: 49px;
           margin-left: 8px;
           white-space: nowrap;
@@ -296,17 +303,17 @@
           width: 1px;
           height: 16px;
           background-color: #f4f4f4;
-          margin-right:16px;
+          margin-right: 16px;
         }
       }
       .right-box {
         display: flex;
         align-items: center;
       }
-      .right-bg-img{
-        img{
-          width:277px;
-          height:60px;
+      .right-bg-img {
+        img {
+          width: 277px;
+          height: 60px;
         }
       }
       .link-to-store {
@@ -315,31 +322,27 @@
         line-height: 49px;
         .text {
           font-size: 14px;
-          color: #FFF;
+          color: #fff;
           line-height: 49px;
           margin-left: 7px;
         }
         .iconfont {
-          color: #FFF;
+          color: #fff;
         }
         .link {
           cursor: pointer;
           position: relative;
-          .link-btn{
-            padding:3px 12px;
+          .link-btn {
+            padding: 3px 12px;
             border: 1px solid rgba(255, 255, 255, 0.5);
             border-radius: 4px;
-            &:hover{
+            &:hover {
               border: 1px solid rgba(255, 255, 255, 1);
             }
           }
           .store-popover {
-            display: none;
-          }
-          &:hover {
-            .store-popover {
             position: absolute;
-              display: flex;
+            display: none;
             width: 216px;
             height: 260px;
             top: 49px;
@@ -362,7 +365,7 @@
                 line-height: 20px;
               }
               .url-link {
-                  color: #2966FF;
+                color: #2966ff;
                 font-size: 14px;
                 line-height: 20px;
               }
@@ -386,19 +389,24 @@
                 line-height: 41px;
                 width: 130px;
               }
-
             }
           }
+          &:hover {
+            .store-popover {
+              display: flex;
+            }
           }
         }
-        .share {
+        .share,
+        .help {
           cursor: pointer;
           margin-left: 16px;
-          .share-btn{
-            padding:3px 12px;
+          .share-btn,
+          .help-btn {
+            padding: 3px 12px;
             border: 1px solid rgba(255, 255, 255, 0.5);
             border-radius: 4px;
-            &:hover{
+            &:hover {
               border: 1px solid rgba(255, 255, 255, 1);
             }
           }
@@ -529,7 +537,7 @@
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          color:#FFF;
+          color: #fff;
         }
       }
     }
@@ -588,7 +596,7 @@
   .user-detail {
     position: relative;
     padding-bottom: 16px;
-    border-bottom: 1px solid #E8E8E8;
+    border-bottom: 1px solid #e8e8e8;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -625,7 +633,7 @@
       cursor: pointer;
       color: #333;
       .menu-before {
-        color: #BFBFBF;
+        color: #bfbfbf;
         margin-right: 8px;
         font-size: 14px;
       }