first commit

滴滴淘/shop-pc/src/assets/less/components/Header.less

@@ -0,0 +1,94 @@
+@import '../public/color.less';
+@import '../public/mixins.less';
+::-webkit-scrollbar{
+  height: 0;
+  width: 0;
+}
+.header {
+  width: 100%;
+  background-color: @white;
+  .header-top {
+    line-height: 51px;
+    height: 51px;
+    border-bottom: 1px solid @BorderBase;
+    .title {
+      display: inline-block;
+      color: @color1;
+      font-size: 18px;
+      text-decoration: none;
+      padding: 0 10px;
+    }
+    .operation-group {
+      float: right;
+      margin-right: 20px;
+      display: flex;
+      align-items: center;
+      .member {
+        padding: 0 10px;
+        margin: 0 10px;
+        cursor: pointer;
+      }
+    }
+  }
+  .route{
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    .header-router {
+      padding: 10px 0px;
+      margin: 0 10px;
+      width: 100%;
+      height: 52px;
+      box-sizing: border-box;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+      position: relative;
+      background-color: @white;
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+      scrollbar-track-color: transparent;
+      -ms-scrollbar-track-color: transparent;
+      &::-webkit-scrollbar{
+        height: 0 !important;
+        width: 0;
+      }
+      .but {
+        margin: 0 3px;
+        line-height: 1.5715;
+        position: relative;
+        display: inline-block;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 32px;
+        padding: 4px 15px;
+        font-size: 14px;
+        border-radius: 2px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: @white;
+        border-color: @BorderBase;
+      }
+      .but:hover {
+        color: @c1;
+        border-color: @c1;
+        .shadow();
+      }
+      .but-active {
+        color: @c1 !important;
+        border-color: @c1 !important;
+      }
+    }
+  }
+}
+@media screen and (min-width: 1600px) {
+  .showGuide{
+    display: none;
+  }
+}