qj-happy-common-zhongjian 1.0.27

package/src/views/layout-default/theme/darkBlue/components/Footer.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="footer-wrap">
+    <div class="top w1200 m0a">
+      <ul class="t-box">
+        <li class="t-box t-box-flex1" v-for="(item,index) in footerInfo" :key="index">
+          <div class="left">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="right">
+            <h4>{{item.title}}</h4>
+            <p>{{item.info}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="bottm w1200 m0a t-box">
+      <div class="left t-box">
+        <dl class="t-box-flex1" v-for="(item,index) in footer" :key="index">
+          <dt>{{item.title}}</dt>
+          <dd v-for="(info, index1) in item.item" :key="index1">{{info}}</dd>
+        </dl>
+      </div>
+      <div class="right">
+        <img :src="logo" alt="">
+        <p>© 悠福网 2008-2012 上海对外服务有限公司 
+        <p>版权所有  沪ICP备12010602号-1</p>  
+        <p>咨询电话：021-63879900</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      footerInfo: [
+        {
+          img: require("../assets/f-brand.png"),
+          title: "100%品牌",
+          info: "企业综合福利服务商"
+        },
+        {
+          img: require("../assets/f-reward.png"),
+          title: "100%专业",
+          info: "服务企业  幸福员工"
+        },
+        {
+          img: require("../assets/f-tel.png"),
+          title: "客服电话",
+          info: "400-1962-002"
+        }
+      ],
+      footer: [
+        {
+          title: "新手帮助",
+          item: ["注册登录", "找回密码"]
+        },
+        {
+          title: "交易指南",
+          item: ["结算支付", "订单管理", "福点账户"]
+        },
+        {
+          title: "售后服务",
+          item: ["售后准则", "退货退款", "发票制度"]
+        },
+        {
+          title: "产品介绍",
+          item: ["节假慰问", "生活服务"]
+        },
+        {
+          title: "关于我们",
+          item: ["关于我们", "诚聘英才"]
+        }
+      ],
+      logo: require("../assets/logo1.png")
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.footer-wrap {
+  width: 100%;
+  background-color: #eeeeee;
+  .top {
+    border-bottom: 1px solid #dddddd;
+    padding: 28px 0 21px;
+    height: 41px;
+    li {
+      justify-content: center;
+    }
+    .left {
+      margin-right: 20px;
+    }
+    .right {
+      h4 {
+        font-size: 18px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #444444;
+      }
+      p {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #999999;
+        margin-top: 7px;
+      }
+    }
+  }
+  .bottm {
+    padding: 48px 0 40px;
+    .left {
+      padding-left: 110px;
+    }
+    dl {
+      margin-right: 80px;
+    }
+    dt {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 16px;
+      color: #999999;
+      margin-bottom: 17px;
+    }
+    dd {
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 16px;
+      color: #999999;
+      margin-bottom: 10px;
+    }
+    .right {
+      padding-left: 30px;
+      img {
+        margin-bottom: 10px;
+      }
+      p {
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 18px;
+        color: #999999;
+      }
+    }
+  }
+}
+</style>

package/src/views/layout-default/theme/darkBlue/components/LeftNavbar.vue

@@ -0,0 +1,465 @@
+<template>
+  <div
+    :class="{'is-active':sidebar.appNavOpen}"
+    class="el-menu-vertical-demo"
+    :style="{height:height+'px'}"
+  >
+    <!-- <div class="top-logo">
+        <img src="../assets/logo.png">
+    </div>-->
+    <div class="tool-menu-svg">
+      <a class="header-container">
+        <div class="header-img">
+          <i class="user-icon"></i>
+        </div>
+        <span>{{$store.state.user.name}}</span>
+      </a>
+      <a class="my-youfu">{{memberName}}</a>
+    </div>
+    <div class="el-container-box">
+      <div class="el-menu-box">
+        <ul
+          class="el-menu-ul"
+          v-for="(item,index) in userLeftRouter.list"
+          :key="index"
+          v-if="!item.menuTarget"
+        >
+          <li
+            class="active"
+            v-for="(itemChild,indexChild) in (item.children ? item.children : [])"
+            :key="indexChild"
+          >
+            <a class="active" @click="menuLi($event)">
+              <i
+                class="iconfont"
+                :class="itemChild.proappMenuRemark ? itemChild.proappMenuRemark :'icon-caidan-shi'"
+              ></i>
+              {{itemChild.menuName}}
+            </a>
+            <ol v-if="itemChild.children!==null">
+              <li
+                v-for="(itemOl,indexOl) in itemChild.children"
+                :key="indexOl"
+                :class="[$route.path == '/'+itemOl.menuAction ? 'active':'',itemOl.menuAction]"
+                v-if=" !itemOl.menuTarget"
+              >
+                <div class="el-li-title">
+                  <a @click="menuHref(item.menuAction,itemOl,2)">
+                    <em></em>
+                    <span></span>
+                    {{itemOl.menuName}}
+                  </a>
+                  <i
+                    v-if="itemOl.children!==null"
+                    :class="[iconStatic? 'el-icon-minus':'el-icon-plus', 'el-icon']"
+                    @click="menuIcon($event)"
+                  ></i>
+                </div>
+                <dl v-if="itemOl.children!==null" class="el-dl-list-box">
+                  <dd
+                    v-for="(itemDd,indexDd) in itemOl.children"
+                    :key="indexDd"
+                    :class="[$route.path.split('/')[2] == itemDd.menuAction ? 'is-active3':'']"
+                    v-if=" !itemDd.menuTarget"
+                  >
+                    <a
+                      class="el-dd-list"
+                      @click="menuHref(item.menuAction,itemDd,3)"
+                    >{{itemDd.menuName}}</a>
+                  </dd>
+                </dl>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 85,
+      heightBox: document.documentElement.clientHeight - 355,
+      isCollapse: true,
+      iconStatic: false,
+      memberName: "会员中心", //会员中心账户名
+      userLeftRouter: []
+    };
+  },
+  beforeMounted() {
+    console.log(this.appList, "appListappList");
+    this.appList.forEach(el => {
+      if (el.menuDefaultClass === "user") {
+        this.memberName = el.menuName ? el.menuName : "会员中心";
+        let memberRouter = el.children ? el.children : [];
+        memberRouter.forEach(item => {
+          this.userLeftRouter =
+            item.menuDefaultClass === "userLeftRouter" && item.children
+              ? item.children
+              : [];
+        });
+      }
+    });
+  },
+  mounted() {
+    window.addEventListener("resize", this.heightChange);
+    //先判断是几级菜单，现在的是二级菜单
+    if (document.querySelector(".active")) {
+      //表示二级菜单
+      document.querySelector(".active").parentNode.parentNode.className =
+        "active";
+    } else if (document.querySelector(".is-active3")) {
+      //三级菜单
+      let obj = document.querySelector(".is-active3");
+      console.log(obj, "obj");
+      this.iconStatic = true;
+      obj.parentNode.parentNode.childNodes[0].classList.add("active");
+      obj.parentNode.parentNode.parentNode.parentNode.childNodes[0].classList.add(
+        "active"
+      );
+      obj.className = "active";
+    }
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  methods: {
+    // toggle(index) {
+    //   this.checkindex = index;
+    // },
+    menuLi(e) {
+      //点击显示二级菜单
+      //点击添加class
+      e.target.classList.toggle("active");
+    },
+    menuIcon(e) {
+      //点击显示三级菜单
+      e.target.parentNode.classList.toggle("active");
+      if (e.target.className.indexOf("el-icon-plus") >= 0) {
+        e.target.classList.remove("el-icon-plus");
+        e.target.classList.add("el-icon-minus");
+      } else {
+        e.target.classList.remove("el-icon-minus");
+        e.target.classList.add("el-icon-plus");
+      }
+    },
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    menuHref(menuAction, item, index) {
+      let path =
+        index === 2
+          ? "/" + item.menuAction
+          : "/" + item.proappMenuPcode + "/" + item.menuAction;
+      // index===2 是二级菜单，3是三级菜单
+      if (item.children === null) {
+        //可跳转
+        if (location.href.indexOf("localhost") >= 0) {
+          //localhost表示本地跳转
+
+          this.$router.push({
+            path: path
+          });
+
+          this.$store.commit("MENUTITLE", item.menuName);
+        } else {
+          if (location.href.indexOf(menuAction) >= 0) {
+            //表示线上同源下跳转
+            this.$router.push({
+              path: path
+            });
+            this.$store.commit("MENUTITLE", item.menuName);
+          } else {
+            location.href = menuAction + "#" + path;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet" scoped>
+.el-menu-ul ol {
+  display: none;
+  margin-left: 7px;
+  /* transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
+  transform: translateY(0); */
+}
+.el-menu-ul li ol li.active .el-dl-list-box,
+.el-menu-ul ol.active,
+.el-menu-ul li a.active + ol {
+  display: block;
+}
+
+.el-menu-ul .active ol,
+.el-menu-ul .active + ol {
+  display: block;
+}
+
+.el-menu-vertical-demo {
+  width: 196px;
+  margin-top: 12px;
+}
+.user-icon {
+  display: block;
+  height: 80px;
+  overflow: hidden;
+  background: url("../../../../../assets/nav/admin.png") center no-repeat;
+}
+.top-logo {
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  margin-bottom: 2px;
+  background: #fff;
+}
+.top-logo img {
+  height: 70px;
+}
+.el-menu-vertical-demo {
+  background: none;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #f1f8ff !important;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #f1f8ff !important;
+}
+
+.header-img {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 20px 0 0px;
+  text-align: center;
+}
+.header-container {
+  display: block;
+}
+.header-container span {
+  display: block;
+  color: #666;
+  line-height: 30px;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  /*height: 150px;*/
+  text-align: center;
+  /*position: absolute;*/
+  z-index: 12;
+  background: #fff;
+  border-bottom: solid 1px #eee;
+  padding-bottom: 10px;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.my-youfu {
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  background: #f1f8ff;
+  color: #2171d2;
+  margin-top: 30px;
+  position: relative;
+}
+.my-youfu:after {
+  content: "";
+  display: block;
+  width: 4px;
+  background: #2171d2;
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  top: 0;
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 60px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+.el-menu-ul a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+
+.el-menu-ul {
+  margin: 0px 15px;
+  width: 166px;
+  font-size: 14px;
+  line-height: 42px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.el-dl-list-box {
+  display: none;
+}
+.el-dl-list-box a {
+  display: block;
+}
+.el-menu-ul ol li {
+  position: relative;
+}
+.el-menu-ul ol li:last-child .el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 0px;
+}
+.el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+
+.el-menu-ul ol li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+.el-menu-ul ol li:last-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 23px;
+}
+.el-menu-ul i {
+  font-size: 16px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.el-menu-box a {
+  color: #666;
+}
+.el-menu-box {
+  position: relative;
+}
+.el-menu-box ~ .el-menu-box {
+  /* border-top: 1px solid #eee; */
+  margin-top: 20px;
+}
+.el-container-box {
+  background: #fff;
+  /*margin-top: 150px;*/
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.el-li-title span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+.el-li-title.active + dl {
+  display: block;
+}
+.el-li-title em {
+  width: 15px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+  vertical-align: middle;
+}
+.el-dd-list {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  padding-left: 45px;
+}
+.el-li-title i.el-icon {
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+</style>
+