qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,304 @@
+<style lang="scss" scoped>
+/* Package By Joenix */
+
+$theme: #e21f0c;
+$page: 1200px;
+$unit: 20px;
+
+$space-toper: 50px;
+
+.in {
+  @mixin flex($mode: center) {
+    display: flex;
+    justify-content: $mode;
+    align-items: center;
+  }
+
+  @mixin shadow($size: 4px) {
+    box-shadow: 0 0 $size rgba(0, 0, 0, 0.125);
+  }
+
+  &--flex {
+    @include flex(space-between);
+  }
+
+  &--shadow {
+    @include shadow(8px);
+  }
+
+  &--hand {
+    cursor: pointer;
+    transition: all 0.36s;
+  }
+
+  &--header {
+    &--container {
+      width: $page;
+      margin: 0 auto;
+    }
+
+    &--toper {
+      line-height: $space-toper;
+      background-color: $theme;
+    }
+
+    &--logo {
+      width: 190px;
+      height: 100px;
+    }
+
+    &--search {
+      &--input {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &--button {
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    &--navigator {
+      height: 100px;
+
+      span {
+        line-height: 100px;
+        margin: 0 30px;
+        display: inline-block;
+        font-size: 18px;
+        font-weight: bold;
+        position: relative;
+        color: #363636;
+
+        &:after {
+          content: "";
+          display: block;
+          height: 4px;
+          bottom: 0;
+          background-color: $theme;
+          transition: all 0.36s;
+          position: absolute;
+
+          width: 0;
+          left: 50%;
+        }
+
+        &:hover {
+          color: $theme;
+
+          &:after {
+            width: 100%;
+            left: 0;
+          }
+        }
+      }
+    }
+  }
+
+
+}
+</style>
+
+<template>
+  <div class="common-top-bar cephalosome in--header">
+    <!-- Search -->
+    <div class="search_mod in--shadow">
+      <div class="in--header--container in--flex">
+        <img
+          class="in--header--logo in--hand"
+          :src="proappEnvLogo && proappEnvLogo.proappEnvLogo"
+          @click="toIndex()"
+        />
+        <div class="in--header--navigator">
+          <span class="in--hand" @click="toDetail(0)">商城首页</span>
+          <span class="in--hand" @click="toDetail(3)">个人中心</span>
+          <span class="in--hand" @click="toDetail(1)">我的订单</span>
+          <span class="in--hand" @click="toDetail(2)">购物车</span>
+        </div>
+        <div class="search_content in--header--search">
+          <input
+            class="in--header--search--input"
+            v-model="searchValue"
+            @keyup.enter="search"
+          />
+          <div
+            class="search_button in--header--search--button in--hand"
+            @click="search()"
+          >
+            搜 索
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { indexRequest, loginOut } from "#/api/login.js";
+
+export default {
+  data() {
+    return {
+    
+      searchValue: "",
+      userInfo: {}
+    };
+  },
+  computed: {
+    proappEnvLogo() {
+      let proappEnvLogo = sessionStorage.getItem("proappEnvLayout")
+        ? JSON.parse(sessionStorage.getItem("proappEnvLayout"))
+        : null;
+      return proappEnvLogo;
+    },
+  },
+  mounted() {
+    if (window.sessionStorage.getItem("personalInfo")) {
+      this.userInfo = JSON.parse(window.sessionStorage.getItem("personalInfo"));
+    }
+    if (window.sessionStorage.getItem("proappEnvLayout")) {
+      this.proappEnvLayout = JSON.parse(window.sessionStorage.getItem("proappEnvLayout"));
+      console.log(this.proappEnvLayout,'----proappEnvLayout');
+    }
+  },
+  methods: {
+   
+    tocar() {
+      location.href =
+        "/paas/pc-mall/index.html#/car";
+    },
+    user() {
+     location.href =
+        "/paas/user-manager/index.html#/user";
+    },
+    toDetail(type) {
+      if (type == 0) {
+        location.href = "/paas/pc-mall/index.html#/indexSDX";
+      } else if (type == 1) {
+        location.href = "/paas/order-manager/index.html#/order";
+      }else if(type ==3){
+        location.href = "/paas/user-manager/index.html#/user";
+      }
+       else {
+        location.href = "/paas/pc-mall/index.html#/car";
+      }
+    },
+    login() {
+      // this.$router.push("/loginYm");
+     location.href =
+        "/paas/index/index.html#/loginPc";
+    },
+    register() {
+      // this.$router.push("/register");
+      location.href =
+        "/paas/index/index.html#/regPc";
+    },
+    toIndex() {
+      location.href = "/paas/pc-mall/index.html#/indexSDX";
+    },
+    search() {
+      location.href =
+        "/paas/pc-mall/index.html#/searchResult?searchParam=" +
+        this.searchValue;
+    },
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top_mod {
+  // width: 100%;
+  // height: 36px;
+  // padding: 0 18%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(51, 51, 51, 1);
+  //   background: #fafafa;
+}
+
+.nav_bar {
+  width: 100%;
+  height: 50px;
+  background: #e21f0c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home_text2 {
+  margin: 0 96px;
+}
+
+.nav_bar div {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(35, 35, 35, 1);
+  cursor: pointer;
+}
+
+.left_mod,
+.button_box {
+  display: flex;
+  align-items: center;
+}
+
+.user_accounts {
+  margin-right: 42px;
+  cursor: pointer;
+}
+
+.border_line {
+  width: 1px;
+  height: 16px;
+  background: rgba(204, 204, 204, 1);
+  margin: 0 20px;
+}
+
+.right_mod {
+  display: flex;
+  align-items: center;
+}
+
+.search_content input {
+  width: 360px;
+  height: 40px;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid #e21f0c;
+  padding-left: 12px;
+  box-sizing: border-box;
+}
+
+.search_button {
+  width: 80px;
+  height: 40px;
+  background: #e21f0c;
+  font-size: 14px;
+  font-weight: 400;
+  // color: rgba(39, 39, 39, 1);
+  color:#fff;
+  text-align: center;
+  line-height: 40px;
+}
+
+.search_mod {
+  box-sizing: border-box;
+  margin: 25px 0;
+  background: #fff;
+}
+
+.search_mod img {
+  width: 150px;
+  height: 100px;
+}
+
+.search_mod,
+.search_content {
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,174 @@
+<template>
+  <div class="common-top common-theme bg-white">
+    <div class="t-box w1200 m0a header-box">
+      <div class="left logo-img">
+        <a href="/">
+          <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt>
+        </a>
+      </div>
+      <div class="search-box">
+        <el-input
+          class="search-input search-box-input"
+          placeholder
+          prefix-icon="el-icon-search"
+          @keyup.enter="search"
+          v-model="searchValue"
+        >
+          <el-button slot="append" @click.native="search" @keyup.13="search">
+            <i class="iconfont icon-UCC-PC-sousuo"></i>
+          </el-button>
+        </el-input>
+        <!-- <div class="search-history" v-if="false">
+          <span>手机</span>
+          <i>|</i>
+          <span>手机</span>
+          <i>|</i>
+          <span>手机</span>
+          <i></i>
+        </div>-->
+      </div>
+      <div class="right common-car">
+        <a class="car-box" href="/paas/pc-mall/index.html#/car">
+          <i class="iconfont icon-shouye-"></i>
+          {{carName}}
+          <!-- <div class="car-num">1</div> -->
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      logo: require("../assets/logo_ucc.png"),
+      keywords: "",
+      searchValue: this.$route.query.searchParam
+        ? this.$route.query.searchParam
+        : ""
+    };
+  },
+  created() {
+    localStorage.getItem("searchParam")
+      ? (this.searchValue = localStorage.getItem("searchParam"))
+      : "";
+  },
+  computed: {
+    proappEnvLogo() {
+      let proappEnvLogo = sessionStorage.getItem("proappEnvLayout")
+        ? JSON.parse(sessionStorage.getItem("proappEnvLayout"))
+        : null;
+      return proappEnvLogo;
+    },
+    carName() {
+      return sessionStorage.getItem("carName")
+        ? sessionStorage.getItem("carName")
+        : "购物车";
+    }
+  },
+  methods: {
+    search() {
+      localStorage.removeItem("searchParam");
+      location.href =
+        "/paas/pc-mall/index.html#/searchResult?searchParam=" +
+        this.searchValue;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.common-top {
+  .el-input__icon {
+    line-height: 20px !important;
+  }
+  .el-input .el-input__inner {
+    height: 44px !important;
+    line-height: 44px !important;
+  }
+  .el-input-group__append,
+  .el-input-group__prepend {
+    // background: #006fac !important;
+    // border: 2px solid #006fac !important;
+    // color: #fff !important;
+
+    span {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .el-input-group--append .el-input__inner,
+  .el-input-group--prepend .el-input__inner,
+  .el-input-group__append {
+    border-radius: 0;
+  }
+}
+</style>
+
+<style  rel="stylesheet/scss" lang="scss" scoped >
+.common-top {
+  .header-box {
+    height: inherit;
+  }
+  margin: 0 auto;
+  height: 160px;
+  line-height: 160px;
+  // border-bottom: 1px solid #f5f5f5;
+  .logo-img {
+    width: 260px;
+    height: 100%;
+    overflow: hidden;
+    img {
+      max-width: 80%;
+      max-height: 60%;
+    }
+  }
+
+  .search-box {
+    padding-top: 50px;
+    width: 570px;
+    margin-left: 80px;
+    .search-input {
+      float: left;
+    }
+    .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: 44px;
+      border: 1px solid #e0e0e0;
+      // border-radius: 5px;
+      line-height: 44px;
+      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;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+  <div class="common-top common-theme bg-white">
+    <div class="t-box w1200 m0a header-box">
+      <div class="left logo-img">
+        <a href="/">
+          <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt>
+        </a>
+      </div>
+      <div class="search-box">
+        <el-input
+          class="search-input search-box-input"
+          placeholder
+          prefix-icon="el-icon-search"
+          @keyup.enter="search"
+          v-model="searchValue"
+        >
+          <el-button slot="append" @click.native="search" @keyup.13="search">
+            <i class="iconfont icon-UCC-PC-sousuo"></i>
+          </el-button>
+        </el-input>
+        <!-- <div class="search-history" v-if="false">
+          <span>手机</span>
+          <i>|</i>
+          <span>手机</span>
+          <i>|</i>
+          <span>手机</span>
+          <i></i>
+        </div>-->
+      </div>
+      <div class="right common-car">
+        <a class="car-box" :href="bxpcUrl">
+          <i class="iconfont icon-beixin9 c-theme"></i>
+          心愿单
+          <!-- {{carName}} -->
+          <!-- <div class="car-num">1</div> -->
+        </a>
+      </div>
+      <div class="right common-car">
+        <a class="car-box" :href="bxjUrl">
+          <i class="iconfont icon-shouye- c-theme"></i>
+          购物车
+          <!-- {{carName}} -->
+          <!-- <div class="car-num">1</div> -->
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      logo: require("../assets/logo_ucc.png"),
+      keywords: "",
+      searchValue: this.$route.query.searchParam
+        ? this.$route.query.searchParam
+        : "",
+      bxpcUrl:
+        "http://bxpc" +
+        location.host.substring(location.host.indexOf(".")) +
+        "/paas/pc-mall/index.html#/car",
+      bxjUrl:
+        "http://bxj" +
+        location.host.substring(location.host.indexOf(".")) +
+        "/paas/pc-mall/index.html#/car"
+    };
+  },
+  created() {
+    localStorage.getItem("searchParam")
+      ? (this.searchValue = localStorage.getItem("searchParam"))
+      : "";
+  },
+  computed: {
+    proappEnvLogo() {
+      let proappEnvLogo = sessionStorage.getItem("proappEnvLayout")
+        ? JSON.parse(sessionStorage.getItem("proappEnvLayout"))
+        : null;
+      return proappEnvLogo;
+    },
+    carName() {
+      return sessionStorage.getItem("carName")
+        ? sessionStorage.getItem("carName")
+        : "购物车";
+    }
+  },
+  methods: {
+    search() {
+      localStorage.removeItem("searchParam");
+      location.href =
+        "/paas/pc-mall/index.html#/searchResult?searchParam=" +
+        this.searchValue;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.common-top {
+  .el-input__icon {
+    line-height: 20px !important;
+  }
+  .el-input .el-input__inner {
+    height: 44px !important;
+    line-height: 44px !important;
+  }
+  .el-input-group__append,
+  .el-input-group__prepend {
+    // background: #006fac !important;
+    // border: 2px solid #006fac !important;
+    // color: #fff !important;
+
+    span {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .el-input-group--append .el-input__inner,
+  .el-input-group--prepend .el-input__inner,
+  .el-input-group__append {
+    border-radius: 0;
+  }
+}
+</style>
+
+<style  rel="stylesheet/scss" lang="scss" scoped >
+.common-top {
+  .header-box {
+    height: inherit;
+  }
+  margin: 0 auto;
+  height: 160px;
+  line-height: 160px;
+  // border-bottom: 1px solid #f5f5f5;
+  .logo-img {
+    width: 260px;
+    height: 100%;
+    overflow: hidden;
+    img {
+      max-width: 80%;
+      max-height: 60%;
+    }
+  }
+
+  .search-box {
+    padding-top: 50px;
+    width: 570px;
+    margin-left: 80px;
+    .search-input {
+      float: left;
+    }
+    .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: 42px;
+      border: 1px solid #e0e0e0;
+      // border-radius: 5px;
+      line-height: 42px;
+      text-align: center;
+      display: block;
+      float: left;
+      padding: 0 20px;
+      margin: 50px 0 0 12px;
+      .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;
+      }
+    }
+  }
+}
+</style>