qj-common 4.1.0

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="container">
+    <div class="bac">
+      <div class="logo" @click="linkToIndex()">
+        <img :src="logo" alt="" srcset="" />
+      </div>
+      <div class="search">
+        <div class="searchTatol">
+          <!-- <div class="searchC"></div> -->
+          <input placeholder="请输入关键字进行搜索" v-model="searchValue" @keyup.enter="search(searchValue)" />
+          <div class="search_logo" @click="search(searchValue)">
+            <img src="http://b2bopt-dev2021122100000001.qjclouds.com//paas/shop/2021122100000001/2022-02-17/99f34efac81d480c870ff5e0ad79e869.png" alt="" />
+          </div>
+        </div>
+        <div style="display:flex;color:#666666;font-size:14px">
+          <p>热门词搜索：</p>
+          <p style="margin-right:10px;cursor:pointer" v-for="(item, index) in searchWord[0]?searchWord[0].cmsContlistReDomainList:''" @click="search(item.contlistName)" :key="index">{{ item.contlistName }}</p>
+        </div>
+      </div>
+      <div class="shopCart" @click="linkToShoppingCar()">
+        <img src="http://b2bopt-dev2021122100000001.qjclouds.com//paas/shop/2021122100000001/2022-02-17/3eeb28fbd145464b92a3710b5f714c56.png" alt="" style="width:23px;height:23px" />
+        <p>我的购物车</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { indexRequest } from '#/api/login.js'
+export default {
+  data() {
+    return {
+      searchValue: '',
+      searchWord: [],
+      hrefurl: process.env.API_ROOT,
+	  logo:''
+    }
+  },
+  created() {
+	this.logo=JSON.parse(sessionStorage.getItem('proappEnvLayout')).proappEnvLogo || '';
+    indexRequest({ tginfoMenuCode: 'index1' }).then((res) => {
+      if (res) {
+        res.forEach((item) => {
+          if (item.conttitleName == '热门搜索词') {
+            this.searchWord.push(item)
+            // this.searchWord.forEach((ele) => {
+            //   console.log(ele.contlistName, 'contlistNamecontlistName')
+            // })
+
+            console.log(this.searchWord, 'this.searchWord')
+          } else {
+            // this.swiperData = res.cmsContlistReDomainList
+            //   ? [...res.cmsContlistReDomainList].map((res) => {
+            //       return {
+            //         image: this.getImgFullUrl(res.contlistPicurlNow),
+            //         url: res.contlistUrlNow
+            //       }
+            //     })
+            //   : null
+          }
+        })
+      }
+    })
+  },
+  methods: {
+    search(code) {
+      code?location.href = '/paas/b2b-cli-pc-ayd/index.html#/searchResult?searchParam='+code:
+      location.href = '/paas/b2b-cli-pc-ayd/index.html#/searchResult?searchParam=' + this.searchValue
+    },
+    linkToIndex(){
+      location.href = this.hrefurl + `/paas/b2b-cli-pc-ayd/index.html#/islandStore`;
+    },
+    linkToShoppingCar() {
+      location.href =
+        this.hrefurl + `/paas/b2b-cli-pc-ayd/index.html#/car`;
+      // this.$router.push({
+      //path: '/goodsDetails',
+      //query: {
+      //skuNo: code
+      //}
+      //})
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background-color: #fff;
+  .bac {
+    width: 1200px;
+    margin: 0 auto;
+    height: 132px;
+    display: flex;
+    justify-content: space-between;
+    .logo {
+      img {
+        width: 90px;
+        cursor: pointer;
+      }
+    }
+    .search {
+      margin-top: 26px;
+      .searchTatol {
+        display: flex;
+        input {
+          text-indent: 16px;
+          border: 1px solid #ed2f17;
+          height: 42px;
+          width: 510px;
+          margin-bottom: 10px;
+        }
+        input::-webkit-input-placeholder {
+          /*WebKit browsers*/
+          color: #ccc;
+        }
+
+        input::-moz-input-placeholder {
+          /*Mozilla Firefox*/
+          color: #ccc;
+        }
+
+        input::-ms-input-placeholder {
+          /*Internet Explorer*/
+          color: #ccc;
+        }
+        .search_logo {
+          cursor: pointer;
+          background-color: #ed2f17;
+          width: 80px;
+          height: 45px;
+          text-align: center;
+          line-height: 45px;
+          img {
+            width: 23px;
+          }
+        }
+      }
+    }
+    .shopCart {
+      cursor: pointer;
+      margin-top: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ed2f17;
+      height: 42px;
+      width: 180px;
+      // background-color: red;
+      border: 1px solid #ed2f17;
+      p {
+        font-size: 14px;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +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>