qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,187 @@
+<template>
+	<div class="container">
+		<div class="bac">
+			<div class="logo fex-c pad-b20" @click="goHome">
+				<img :src="proappEnvLayout && proappEnvLayout.proappEnvLogo" alt>
+			</div>
+			<div class="search">
+				<div class="searchTatol">
+					<!-- <div class="searchC"></div> -->
+					<input v-model="searchValue" placeholder="请输入关键字进行搜索" @keyup.enter="search(searchValue)" />
+					<div class="search_logo" @click.passive.stop="search(searchValue)">
+						<i class="el-icon-search t-24" style="color:white;"></i>
+					</div>
+				</div>
+				<div style="display:flex;color:#666666;font-size:14px">
+					<p>热门词搜索：</p>
+					<p v-for="(item, index) in searchWord[0]?searchWord[0].cmsContlistReDomainList:''" :key="index"
+						style="margin-right:10px;cursor:pointer" @click.passive.stop="searchs(item)">
+						{{ item.contlistName }}
+					</p>
+				</div>
+			</div>
+			<div class="shopCart" @click="linkToShoppingCar()">
+				<img alt=""
+					src="http://b2bopt-dev2021122100000001.qjclouds.com//paas/shop/2021122100000001/2022-02-17/3eeb28fbd145464b92a3710b5f714c56.png"
+					style="width:23px;height:23px" />
+				<p>我的购物车</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		queryConttitleReDomainByCode
+	} from '#/api/apimanage.js'
+	let logo_default_href =
+		"https://opt.lbaby1998.com/paas/shop/2021122100000001/2022-07-05/c4b2eeb72f834547920be58450fb07be.png";
+	export default {
+		data() {
+			return {
+				searchValue: '',
+				searchWord: [],
+				logo: sessionStorage.getItem('proappEnvLayout') ? location.origin + JSON.parse(sessionStorage.getItem(
+					'proappEnvLayout')).proappEnvLogo : logo_default_href,
+				orginHref: process.env.NODE_ENV == "development" ? '' : '/paas/b2b-cli-pc-ayd/index.html'
+			}
+		},
+		computed: {
+			proappEnvLayout() {
+				let proappEnvLayout = sessionStorage.getItem("proappEnvLayout") ?
+					JSON.parse(sessionStorage.getItem("proappEnvLayout")) : {
+						proappEnvLogo: this.logo
+					};
+				return proappEnvLayout;
+			},
+		},
+		created() {
+			let index1 = sessionStorage.getItem('index1');
+			this.searchWord = [];
+			if (index1) {
+				index1 = JSON.parse(index1);
+				index1.forEach((item) => {
+					if (item.conttitleName == '热门搜索词') {
+						this.searchWord.push(item)
+					}
+				})
+			} else {
+				queryConttitleReDomainByCode({
+					tginfoMenuCode: 'index1'
+				}).then((res) => {
+					if (res) {
+						sessionStorage.setItem('index1', JSON.stringify(res))
+						res.forEach((item) => {
+							if (item.conttitleName == '热门搜索词') {
+								this.searchWord.push(item)
+							}
+						})
+					}
+				})
+			}
+		},
+		methods: {
+			search(code) {
+				if (this.$route.query.hasOwnProperty('searchParam') && this.$route.path == '/searchResult') {
+					this.$store.commit('SET_SEARCH_PARAM', code);
+				} else {
+					location.href = `${this.orginHref}#/searchResult?searchParam=` + code
+				}
+			},
+			searchs(item) {
+				window.location = item.contlistUrl
+			},
+			goHome() {
+				location.href = `${this.orginHref}#/islandStore`;
+			},
+			linkToShoppingCar() {
+				location.href = `${this.orginHref}#/car`;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background-color: #fff;
+
+		.bac {
+			width: 1200px;
+			margin: 0 auto;
+			height: 132px;
+			display: flex;
+			justify-content: space-between;
+
+			.logo {
+				width: 90px;
+
+				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: 44px;
+						text-align: center;
+						line-height: 50px;
+
+						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>