qj-common 4.3.0 → 4.3.2

package/src/views/pc/default/header-modules/index.vue

@@ -1,466 +1,466 @@
-<template>
-  <div id="ymHeaderbox" class="common-top common-theme bg-white">
-    <div class="Helmet">
-      <div class="Helmet_p auto">
-        <div class="Helmet_e">
-          <a href="###">
-            <img src="../assets/ymlogo.png" alt />
-          </a>
-        </div>
-        <div class="Helmet_w">
-          <div class="Helmet_t">
-            <div class="Helmet_input">
-              <i class="iconfont icon-sousuo pad-l10"></i>
-              <input
-                @keyup.enter="search"
-                @keyup.13="search"
-                v-model="searchValue"
-                type="text"
-                placeholder="Tmax"
-              />
-              <div class="secrbtn">
-                <el-button
-                  slot="append"
-                  @click.native="search"
-                  @keyup.13="search"
-                  >搜索</el-button
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- <a class="Helmet_s" @click="tocar">
-					<i></i>
-					<div class="Helmet_ico ucc-car">
-						<div class="Helmet_i">
-							<i class="iconfont icon-gouwuche3"></i>
-							<span v-if="isLogin&&total&&total>0"></span>
-						</div>
-					</div>
-					<span class="mcar">我的购物车</span>
-				</a> -->
-      </div>
-    </div>
-    <div class="toplead">
-      <div class="topleadbox">
-        <div class="topleadboxli">
-          <span>首页</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import hot from '#/assets/nav_lab.png';
-import { getToken, removeToken } from '#/utils/auth';
-import API from '#/api/common/index.js';
-export default {
-  name: 'ymHeader',
-};
-</script>
-<style lang="scss" scope>
-.auto {
-  margin: 0 auto;
-  width: 1200px;
-}
-
-.pad-l10 {
-  padding-left: 10px;
-}
-
-.icon-search-color {
-  color: #343434;
-}
-
-.common-top .search-box .el-input .el-input__inner {
-  border-color: #f2f2f2 !important;
-}
-
-.common-top .el-input-group__append,
-.common-top .el-input-group__prepend {
-  border-color: #f2f2f2 !important;
-}
-
-.common-top {
-  .el-input__icon {
-    line-height: 20px !important;
-  }
-  .search-box-input {
-    font-size: 12px;
-  }
-  .el-button {
-    width: 40px;
-  }
-  .el-input .el-input__inner {
-    /*border-radius: 32px 0 0 32px !important;*/
-    width: 130px !important;
-    height: 33px !important;
-  }
-  .search-box .el-input .el-input__inner {
-    border-right: none !important;
-  }
-  .el-input-group__append,
-  .el-input-group__prepend {
-    background: #1cac43;
-    border-left: none !important;
-    color: #343434 !important;
-    /*border-radius: 0 32px 32px 0 !important;*/
-    border: none !important;
-    span {
-      font-size: 18px;
-      font-weight: bold;
-      i {
-        color: #ffffff !important;
-      }
-    }
-  }
-  .el-input-group--append .el-input__inner,
-  .el-input-group--prepend .el-input__inner,
-  .el-input-group__append {
-    border-radius: 0;
-  }
-}
-
-.common-top .el-input-group__append,
-.common-top .el-input-group__prepend {
-  background: #1cac43;
-}
-
-.default-nav {
-  li {
-    margin-right: 72px !important;
-    a {
-      font-weight: normal;
-      font-size: 16px;
-    }
-  }
-}
-</style>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-#zgltopbox {
-  height: 173px;
-  #zgltop {
-    height: 125px;
-  }
-}
-
-.icon-UCC-PC-sousuo {
-  font-size: 12px;
-}
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
-.nav {
-  line-height: 120px;
-  max-width: 768px;
-  height: 120px;
-  width: auto;
-}
-
-.common-top {
-  width: 100%;
-  min-width: 1200px;
-  /*border-bottom: 1px solid #f5f5f5;*/
-  box-shadow: 0px 0px 6px rgba(153, 153, 153, 0.2);
-  .header-box {
-    height: inherit;
-  }
-  margin: 0 auto;
-  height: 126px;
-  line-height: 126px;
-  // border-bottom: 1px solid #f5f5f5;
-  .logo-img {
-    width: 240px;
-    height: 120px;
-    overflow: hidden;
-    img {
-      width: inherit;
-      height: inherit;
-    }
-  }
-  .search-box {
-    .search-history {
-      height: 30px;
-      line-height: 30px;
-      float: left;
-      font-size: 13px;
-      color: #999;
-      i {
-        margin: 0 5px;
-      }
-    }
-  }
-  .right {
-    .car-box {
-      position: relative;
-      // width: 160px;
-      height: 30px;
-      border: 1px solid #e0e0e0;
-      // border-radius: 5px;
-      line-height: 30px;
-      text-align: center;
-      display: block;
-      float: left;
-      padding: 0 20px;
-      margin: 50px 0 0 100px;
-      .car-num {
-        position: absolute;
-        color: #fff;
-        width: 32px;
-        height: 32px;
-        text-align: center;
-        line-height: 32px;
-        border-radius: 50%;
-        background: #ff9e01;
-        right: -16px;
-        top: -16px;
-      }
-    }
-  }
-}
-
-.toplead {
-  .topleadbox {
-    width: 870px;
-    height: 50px;
-    /*background-color: #1cac43;*/
-    text-align: center;
-    color: #333333;
-    margin: 0 auto;
-    .topleadboxli {
-      cursor: pointer;
-      display: block;
-      float: left;
-      width: 172px;
-      line-height: 50px;
-      font-weight: 100;
-      position: relative;
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #333333;
-      a {
-        color: white !important;
-      }
-      .activechecked {
-        display: inline-block;
-        color: #ffd608;
-        padding: 0 6px;
-        border-bottom: 2px solid #ffd608;
-        height: 48px;
-      }
-      .d3 {
-        position: absolute;
-        top: 76%;
-        left: 47%;
-        width: 0;
-        height: 0;
-        border-bottom: 5px solid white;
-        border-right: 5px solid transparent;
-        border-left: 5px solid transparent;
-      }
-    }
-    .active {
-      font-weight: 800;
-    }
-  }
-  .lhot {
-    margin-right: 4px;
-  }
-  .rhot {
-    position: absolute;
-    top: -3px;
-    right: 29px;
-    img {
-      width: 18px;
-      height: 23px;
-    }
-  }
-}
-
-.Helmet {
-  background: white;
-  .Helmet_p {
-    position: relative;
-    height: 118px;
-    box-sizing: border-box;
-    display: -webkit-flex;
-    display: flex;
-    .Helmet_e {
-      width: 171px;
-      height: 44px;
-      margin: 43px 200px 30px 0;
-      img {
-        vertical-align: top;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .Helmet_w {
-      margin-top: 38px;
-      width: 553px;
-      margin-right: 127px;
-      .Helmet_t {
-        width: 553px;
-        height: 38px;
-        .Helmet_input {
-          position: relative;
-          height: 38px;
-          line-height: 34px;
-          background: white;
-          border: 2px solid #ffd608;
-          box-sizing: border-box;
-          -webkit-transition: all 0.3s;
-          transition: all 0.3s;
-          font-weight: 800;
-          > i {
-            vertical-align: top;
-            color: #ffd608;
-            font-size: 8px;
-          }
-          .secrbtn {
-            cursor: pointer;
-            display: inline-block;
-            width: 60px;
-            height: 34px;
-            background: #ffd608;
-            text-align: center;
-            font-size: 14px;
-            font-weight: Regular;
-            color: #fff;
-            border: 1px solid #ffd608;
-            box-sizing: border-box;
-            position: relative;
-            right: -1px;
-            float: right;
-            line-height: 36px;
-          }
-          button {
-            border-color: #ffd608;
-            background: #ffd608;
-            color: #ffffff;
-            font-size: 14px !important;
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
-          > input::-webkit-input-placeholder {
-            /* placeholder颜色  */
-            color: #989898;
-            /* placeholder字体大小  */
-            font-size: 14px;
-          }
-          > input {
-            width: 340px;
-            color: #333333;
-            font-size: 14px;
-            font: 400 14px Arial;
-          }
-          .Helmet_seek {
-            cursor: pointer;
-            display: inline-block;
-            width: 60px;
-            height: 36px;
-            background: #ffd608;
-            text-align: center;
-            font-size: 22px;
-            font-weight: Regular;
-            color: white;
-            border: 1px solid #ffd608;
-            box-sizing: border-box;
-            position: relative;
-            right: -1px;
-            float: right;
-            line-height: 45px;
-          }
-        }
-      }
-    }
-    .Helmet_s {
-      cursor: pointer;
-      margin-top: 34px;
-      width: 153px;
-      height: 38px;
-      border: 2px solid #ffd608;
-      .Helmet_ico {
-        vertical-align: top;
-        display: inline-block;
-        position: relative;
-        height: 28px;
-        line-height: 28px;
-        background: #fff;
-        font-size: 25px;
-        font-weight: 400;
-        color: #000;
-        text-align: center;
-        padding: 0 14px 0 17px;
-        margin-left: 1px;
-        margin-top: 1px;
-        .Helmet_i {
-          /*padding: 0 14px 0 17px;
-						position: relative;
-						margin-top: 1px;
-						margin-left: 1px;*/
-          position: relative;
-          display: inline;
-          > i {
-            font-size: 18px !important;
-            vertical-align: middle;
-            color: #ffd608;
-          }
-          span {
-            position: absolute;
-            top: 6px;
-            left: 20px;
-            height: 10px;
-            width: 10px;
-            border-radius: 50%;
-            background-color: #ffd608;
-          }
-        }
-      }
-      .mcar {
-        color: #ffd608;
-        display: inline-block;
-        height: 36px;
-        line-height: 37px;
-        text-align: top;
-        vertical-align: top;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-      }
-      .ico_car {
-        width: 32px;
-        height: 32px;
-        line-height: 31px;
-        font-style: normal;
-        display: none;
-        background: #ff9e01;
-        border-radius: 50%;
-        text-align: center;
-        top: 18%;
-        right: 6.5%;
-        position: absolute;
-        font-size: 18px;
-        font-weight: 400;
-        color: rgba(255, 255, 255, 1);
-      }
-    }
-    .Helmet_V {
-      display: none;
-      position: absolute;
-      right: 0%;
-      top: 1%;
-    }
-  }
-}
-</style>
+<template>
+  <div id="ymHeaderbox" class="common-top common-theme bg-white">
+    <div class="Helmet">
+      <div class="Helmet_p auto">
+        <div class="Helmet_e">
+          <a href="###">
+            <img src="../assets/ymlogo.png" alt />
+          </a>
+        </div>
+        <div class="Helmet_w">
+          <div class="Helmet_t">
+            <div class="Helmet_input">
+              <i class="iconfont icon-sousuo pad-l10"></i>
+              <input
+                @keyup.enter="search"
+                @keyup.13="search"
+                v-model="searchValue"
+                type="text"
+                placeholder="Tmax"
+              />
+              <div class="secrbtn">
+                <el-button
+                  slot="append"
+                  @click.native="search"
+                  @keyup.13="search"
+                  >搜索</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <a class="Helmet_s" @click="tocar">
+					<i></i>
+					<div class="Helmet_ico ucc-car">
+						<div class="Helmet_i">
+							<i class="iconfont icon-gouwuche3"></i>
+							<span v-if="isLogin&&total&&total>0"></span>
+						</div>
+					</div>
+					<span class="mcar">我的购物车</span>
+				</a> -->
+      </div>
+    </div>
+    <div class="toplead">
+      <div class="topleadbox">
+        <div class="topleadboxli">
+          <span>首页</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import hot from '#/assets/nav_lab.png';
+import { getToken, removeToken } from '#/utils/auth';
+import API from '#/api/common/index.js';
+export default {
+  name: 'ymHeader',
+};
+</script>
+<style lang="scss" scope>
+.auto {
+  margin: 0 auto;
+  width: 1200px;
+}
+
+.pad-l10 {
+  padding-left: 10px;
+}
+
+.icon-search-color {
+  color: #343434;
+}
+
+.common-top .search-box .el-input .el-input__inner {
+  border-color: #f2f2f2 !important;
+}
+
+.common-top .el-input-group__append,
+.common-top .el-input-group__prepend {
+  border-color: #f2f2f2 !important;
+}
+
+.common-top {
+  .el-input__icon {
+    line-height: 20px !important;
+  }
+  .search-box-input {
+    font-size: 12px;
+  }
+  .el-button {
+    width: 40px;
+  }
+  .el-input .el-input__inner {
+    /*border-radius: 32px 0 0 32px !important;*/
+    width: 130px !important;
+    height: 33px !important;
+  }
+  .search-box .el-input .el-input__inner {
+    border-right: none !important;
+  }
+  .el-input-group__append,
+  .el-input-group__prepend {
+    background: #1cac43;
+    border-left: none !important;
+    color: #343434 !important;
+    /*border-radius: 0 32px 32px 0 !important;*/
+    border: none !important;
+    span {
+      font-size: 18px;
+      font-weight: bold;
+      i {
+        color: #ffffff !important;
+      }
+    }
+  }
+  .el-input-group--append .el-input__inner,
+  .el-input-group--prepend .el-input__inner,
+  .el-input-group__append {
+    border-radius: 0;
+  }
+}
+
+.common-top .el-input-group__append,
+.common-top .el-input-group__prepend {
+  background: #1cac43;
+}
+
+.default-nav {
+  li {
+    margin-right: 72px !important;
+    a {
+      font-weight: normal;
+      font-size: 16px;
+    }
+  }
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+#zgltopbox {
+  height: 173px;
+  #zgltop {
+    height: 125px;
+  }
+}
+
+.icon-UCC-PC-sousuo {
+  font-size: 12px;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.nav {
+  line-height: 120px;
+  max-width: 768px;
+  height: 120px;
+  width: auto;
+}
+
+.common-top {
+  width: 100%;
+  min-width: 1200px;
+  /*border-bottom: 1px solid #f5f5f5;*/
+  box-shadow: 0px 0px 6px rgba(153, 153, 153, 0.2);
+  .header-box {
+    height: inherit;
+  }
+  margin: 0 auto;
+  height: 126px;
+  line-height: 126px;
+  // border-bottom: 1px solid #f5f5f5;
+  .logo-img {
+    width: 240px;
+    height: 120px;
+    overflow: hidden;
+    img {
+      width: inherit;
+      height: inherit;
+    }
+  }
+  .search-box {
+    .search-history {
+      height: 30px;
+      line-height: 30px;
+      float: left;
+      font-size: 13px;
+      color: #999;
+      i {
+        margin: 0 5px;
+      }
+    }
+  }
+  .right {
+    .car-box {
+      position: relative;
+      // width: 160px;
+      height: 30px;
+      border: 1px solid #e0e0e0;
+      // border-radius: 5px;
+      line-height: 30px;
+      text-align: center;
+      display: block;
+      float: left;
+      padding: 0 20px;
+      margin: 50px 0 0 100px;
+      .car-num {
+        position: absolute;
+        color: #fff;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        line-height: 32px;
+        border-radius: 50%;
+        background: #ff9e01;
+        right: -16px;
+        top: -16px;
+      }
+    }
+  }
+}
+
+.toplead {
+  .topleadbox {
+    width: 870px;
+    height: 50px;
+    /*background-color: #1cac43;*/
+    text-align: center;
+    color: #333333;
+    margin: 0 auto;
+    .topleadboxli {
+      cursor: pointer;
+      display: block;
+      float: left;
+      width: 172px;
+      line-height: 50px;
+      font-weight: 100;
+      position: relative;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #333333;
+      a {
+        color: white !important;
+      }
+      .activechecked {
+        display: inline-block;
+        color: #ffd608;
+        padding: 0 6px;
+        border-bottom: 2px solid #ffd608;
+        height: 48px;
+      }
+      .d3 {
+        position: absolute;
+        top: 76%;
+        left: 47%;
+        width: 0;
+        height: 0;
+        border-bottom: 5px solid white;
+        border-right: 5px solid transparent;
+        border-left: 5px solid transparent;
+      }
+    }
+    .active {
+      font-weight: 800;
+    }
+  }
+  .lhot {
+    margin-right: 4px;
+  }
+  .rhot {
+    position: absolute;
+    top: -3px;
+    right: 29px;
+    img {
+      width: 18px;
+      height: 23px;
+    }
+  }
+}
+
+.Helmet {
+  background: white;
+  .Helmet_p {
+    position: relative;
+    height: 118px;
+    box-sizing: border-box;
+    display: -webkit-flex;
+    display: flex;
+    .Helmet_e {
+      width: 171px;
+      height: 44px;
+      margin: 43px 200px 30px 0;
+      img {
+        vertical-align: top;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .Helmet_w {
+      margin-top: 38px;
+      width: 553px;
+      margin-right: 127px;
+      .Helmet_t {
+        width: 553px;
+        height: 38px;
+        .Helmet_input {
+          position: relative;
+          height: 38px;
+          line-height: 34px;
+          background: white;
+          border: 2px solid #ffd608;
+          box-sizing: border-box;
+          -webkit-transition: all 0.3s;
+          transition: all 0.3s;
+          font-weight: 800;
+          > i {
+            vertical-align: top;
+            color: #ffd608;
+            font-size: 8px;
+          }
+          .secrbtn {
+            cursor: pointer;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+            background: #ffd608;
+            text-align: center;
+            font-size: 14px;
+            font-weight: Regular;
+            color: #fff;
+            border: 1px solid #ffd608;
+            box-sizing: border-box;
+            position: relative;
+            right: -1px;
+            float: right;
+            line-height: 36px;
+          }
+          button {
+            border-color: #ffd608;
+            background: #ffd608;
+            color: #ffffff;
+            font-size: 14px !important;
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+          > input::-webkit-input-placeholder {
+            /* placeholder颜色  */
+            color: #989898;
+            /* placeholder字体大小  */
+            font-size: 14px;
+          }
+          > input {
+            width: 340px;
+            color: #333333;
+            font-size: 14px;
+            font: 400 14px Arial;
+          }
+          .Helmet_seek {
+            cursor: pointer;
+            display: inline-block;
+            width: 60px;
+            height: 36px;
+            background: #ffd608;
+            text-align: center;
+            font-size: 22px;
+            font-weight: Regular;
+            color: white;
+            border: 1px solid #ffd608;
+            box-sizing: border-box;
+            position: relative;
+            right: -1px;
+            float: right;
+            line-height: 45px;
+          }
+        }
+      }
+    }
+    .Helmet_s {
+      cursor: pointer;
+      margin-top: 34px;
+      width: 153px;
+      height: 38px;
+      border: 2px solid #ffd608;
+      .Helmet_ico {
+        vertical-align: top;
+        display: inline-block;
+        position: relative;
+        height: 28px;
+        line-height: 28px;
+        background: #fff;
+        font-size: 25px;
+        font-weight: 400;
+        color: #000;
+        text-align: center;
+        padding: 0 14px 0 17px;
+        margin-left: 1px;
+        margin-top: 1px;
+        .Helmet_i {
+          /*padding: 0 14px 0 17px;
+						position: relative;
+						margin-top: 1px;
+						margin-left: 1px;*/
+          position: relative;
+          display: inline;
+          > i {
+            font-size: 18px !important;
+            vertical-align: middle;
+            color: #ffd608;
+          }
+          span {
+            position: absolute;
+            top: 6px;
+            left: 20px;
+            height: 10px;
+            width: 10px;
+            border-radius: 50%;
+            background-color: #ffd608;
+          }
+        }
+      }
+      .mcar {
+        color: #ffd608;
+        display: inline-block;
+        height: 36px;
+        line-height: 37px;
+        text-align: top;
+        vertical-align: top;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+      }
+      .ico_car {
+        width: 32px;
+        height: 32px;
+        line-height: 31px;
+        font-style: normal;
+        display: none;
+        background: #ff9e01;
+        border-radius: 50%;
+        text-align: center;
+        top: 18%;
+        right: 6.5%;
+        position: absolute;
+        font-size: 18px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+    .Helmet_V {
+      display: none;
+      position: absolute;
+      right: 0%;
+      top: 1%;
+    }
+  }
+}
+</style>