qj-happy-common-zhongjian 1.0.27

package/src/views/layout-default/components/Navbar.vue

@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <el-menu class="navbar" mode="horizontal">
+      <!-- <hamburger
+        class="hamburger-container"
+        :toggleClick="toggleSideBar"
+        :isActive="sidebar.appNavOpen"
+      ></hamburger>
+      <breadcrumb></breadcrumb>-->
+
+      <div class="nav-head">
+        <el-popover placement="bottom-end" width="100" trigger="click">
+          <ul class="theme-color-box clearfix">
+            <li
+              @click="themeClick('bda16f')"
+              :class="[activeColor=='bda16f' ? 'active' :'']"
+              :style="{background:'#bda16f'}"
+            ></li>
+            <li
+              @click="themeClick('2c4158')"
+              :class="[activeColor=='2c4158' ? 'active' :'']"
+              :style="{background:'#2c4158'}"
+            ></li>
+          </ul>
+          <!-- <el-button class="theme-box" slot="reference">主题</el-button> -->
+        </el-popover>
+
+        <div class="user_name">
+          <p @click="lookInfo">
+            <i class="user-icon"></i>
+            <span class="user_line"></span>
+            <span class="user-name">{{$store.state.user.name}}</span>
+          </p>
+        </div>
+        <!-- <i class="set-icon"></i>
+        <i class="info-icon"></i>-->
+        <span class="spl_line"></span>
+        <div class="log_uot">
+          <i class="logout-icon" @click="logout"></i>
+          <!-- <span class="logout-text" @click="logout">退出</span>  -->
+        </div>
+      </div>
+      <!-- <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            Home
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+      </el-dropdown>-->
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Breadcrumb from "#/components/Breadcrumb";
+import Hamburger from "#/components/Hamburger";
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  data() {
+    return {
+      activeColor: "2c4158"
+    };
+  },
+  computed: {
+    ...mapGetters(["sidebar"])
+  },
+  methods: {
+    lookInfo() {
+      location.href = `${
+        location.origin
+      }/paas/buyer-manager/index.html#/operatorInfo`;
+    },
+    toggleSideBar() {
+      this.$store.commit("TOGGLE_SIDEBAR_APPNAV");
+    },
+    logout() {
+      this.$store.dispatch("LogOut").then(() => {
+        window.sessionStorage.clear();
+        this.$store.commit("ADD_MENU", []);
+        // location.href = "/paas/index";
+        location.href = `${location.origin}/paas/index/index.html#/loginWhite`;
+      });
+    },
+    themeClick(color) {
+      this.activeColor = color;
+      this.$emit("themeClick", color);
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.theme-color-box {
+  li {
+    width: 40px;
+    height: 20px;
+    border: 1px solid #e0e0e0;
+    cursor: pointer;
+    float: left;
+    margin: 5px;
+    opacity: 0.3;
+    &.active {
+      opacity: 1;
+    }
+  }
+}
+.user-name {
+  font-size: 14px;
+  line-height: 30;
+  margin-top: -1px;
+  display: inline-block;
+}
+.nav-head {
+  flex: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #bbbbbb;
+  margin-right: 15px;
+  // font-weight: normal;
+  // transition: all 10s linear;
+  i {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    // margin-right: 25px;
+    cursor: pointer;
+  }
+  .user_name {
+    cursor: pointer;
+    margin-right: 15px;
+    p {
+      width: 100%;
+      line-height: 24px;
+      height: 24px;
+      display: inline-table;
+      .user-icon {
+        vertical-align: middle;
+        background: url("../../../assets/nav/admin.png") no-repeat;
+        background-size: 80%;
+      }
+      .user_line {
+        border: 1px solid #f8f8f8;
+        margin: 0 5px;
+      }
+    }
+    &:hover {
+      .user-icon {
+        vertical-align: middle;
+        background-image: url("../../../assets/nav/admin-hover.png");
+        background-size: 100% 100%;
+      }
+      p {
+        color: #409dff;
+      }
+    }
+  }
+  .spl_line {
+    height: 40px;
+    border: 1px solid #f8f8f8;
+    line-height: 46px;
+    margin-right: 15px;
+  }
+  .log_uot {
+    height: 24px;
+    line-height: 24px;
+    width: 24px;
+    cursor: pointer;
+    .logout-icon {
+      vertical-align: middle;
+      background: url("../../../assets/nav/logout.png") no-repeat;
+      background-size: 80%;
+    }
+    .logout-text {
+      position: absolute;
+      bottom: -15px;
+      font-size: 12px;
+    }
+    &:hover {
+      .logout-icon {
+        vertical-align: middle;
+        background-image: url("../../../assets/nav/logout-hover.png");
+        background-size: 100% 100%;
+      }
+      .logout-text {
+        color: #409dff;
+      }
+    }
+  }
+}
+.theme-box {
+  border: none;
+  background: none;
+  margin-right: 30px;
+  &:active {
+    background: none;
+    color: #409dff;
+  }
+  &:hover {
+    background: none;
+    color: #409dff;
+  }
+  &:focus {
+    background: none;
+    color: #409dff;
+  }
+  &:visited {
+    background: none;
+    color: #409dff;
+  }
+}
+// .logout-text:hover{
+//   font-weight: bold;
+//   color:#3ca1ec;
+// }
+// .logout-text{
+//   margin:0 25px 0 8px;cursor:pointer;
+// }
+// .nav-head i{
+//   display: inline-block;
+//   width: 18px;
+//   height: 18px;
+//   // margin-right: 25px;
+//   cursor: pointer;
+// }
+// .nav-head p{
+//    margin-right: 15px;
+// }
+
+.set-icon {
+  background-image: url("../../../assets/nav/set.png");
+  background-size: 100% 100%;
+}
+
+.info-icon {
+  background-image: url("../../../assets/nav/info.png");
+  background-size: 100% 100%;
+}
+.navbar {
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 0 !important;
+  .hamburger-container {
+    line-height: 30px;
+    height: 30px;
+    float: left;
+    padding: 0 14px 0 20px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 46px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+

package/src/views/layout-default/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="menu-wrapper el-menu-custom">
+    <template v-for="item in routes[0].children" v-if="!item.hidden&&item.meta">
+      <el-submenu v-if="item.children" :index="item.name||item.path" :key="item.name">
+        <template slot="title">
+          <span v-if="item.meta&&item.meta.title && !item.hidden">{{item.meta.title}}</span>
+        </template>
+
+        <template v-for="child in item.children" v-if="item.children">
+          <sidebar-item
+            :is-nest="true"
+            class="nest-menu"
+            v-if="child.children&&child.children.length>0"
+            :routes="[child]"
+            :key="child.path"
+          ></sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+      <el-menu-item v-else :index="'/'+ item.path ">
+        <router-link :to=" '/'+ item.path " :key="item.path">
+          <span v-if="item.meta&&item.meta.title&& !item.hidden">{{item.meta.title}}</span>
+        </router-link>
+      </el-menu-item>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarItem",
+  props: {
+    routes: {
+      type: Array
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    console.log(this.routes, "=====++++==");
+    // this.loadData();
+  }
+};
+</script>
+<style rel="stylesheet" scoped>
+.menu-wrapper li.el-menu-item:focus,
+.menu-wrapper li.el-menu-item:hover,
+.menu-wrapper li.el-menu-item.is-active {
+  background-color: #fff !important;
+}
+.menu-wrapper li.el-menu-item {
+  height: 48px;
+  line-height: 44px;
+}
+</style>
+<style>
+.menu-wrapper {
+  font-size: 12px !important;
+}
+</style>

package/src/views/layout-default/components/Sidebar/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div style="background:rgb(234, 237, 241)">
+    <div class="app-title">{{appList.name}}</div>
+    <scroll-bar>
+      <el-menu
+        mode="vertical"
+        class="el-menu-vertical-demo"
+        :default-active="$route.path"
+        background-color="#eaedf1"
+        @select="handleSelect"
+      >
+        <sidebar-item :routes="routes"></sidebar-item>
+      </el-menu>
+    </scroll-bar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import SidebarItem from "./SidebarItem";
+import ScrollBar from "#/components/ScrollBar";
+
+export default {
+  components: { SidebarItem, ScrollBar },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    }
+  },
+  computed: {
+    ...mapGetters(["appList"]),
+    routes() {
+      return this.$router.options.routes;
+    }
+  }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.sidebar-container {
+}
+.el-menu-vertical-demo {
+  padding-top: 48px;
+}
+.app-title {
+  height: 47px;
+  line-height: 48px;
+  text-align: center;
+  color: #333;
+  font-weight: bold;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  background: #fff;
+  font-size: 14px;
+  border-bottom: solid 1px #e5e5e5;
+  background: #f3f3f3;
+}
+</style>
+

package/src/views/layout-default/components/index.js

@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppFooter } from './Footer'

package/src/views/layout-default/theme/darkBlue/Layout.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="background:#ebeff2" :class="[customColor]">
+    <navbar></navbar>
+    <el-container class="theme-main-center">
+      <left-nav @toggle="toggleCollapse"></left-nav>
+      <el-container>
+        <app-main></app-main>
+      </el-container>
+    </el-container>
+    <app-footer></app-footer>
+  </div>
+</template>
+
+<script>
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
+import Breadcrumb from "#/components/Breadcrumb";
+
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    Breadcrumb
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: "auto",
+      customColor: "custom-2c4158"
+    };
+  },
+  computed: {
+    ...mapGetters(["sidebar"])
+  },
+  mounted() {
+    if (process.env.APP_PATH === "index") {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch("ToggleSideBar");
+      }
+      this.isIndex = true;
+    }
+    window.addEventListener("resize", this.heightChange);
+    this.$store.dispatch("GetInfo");
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch("ToggleSideBar");
+    },
+    heightChange(val) {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~#/styles/mixin.scss";
+.theme-main-center {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.app-main {
+  min-height: inherit;
+  background: inherit !important;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss">
+@import "~#/styles/wf-ui.scss";
+/*  .btn-inner{float: right;width: 78px;height:30px;font-size: 12px;margin: 8px;line-height: 6px;}
+  .btn-outer{width:84px;height:38px;font-size: 14px;}
+  .btn-del{background-color: rgb(229, 98, 34);}
+  .last-table{border-right: 2px solid #eee;}*/
+//盒模型
+html,
+body,
+#app {
+  height: 100%;
+  overflow: auto;
+}
+body {
+  font-family: MicrosoftYaHei;
+}
+.t-box {
+  display: flex;
+}
+.t-box-flex1 {
+-moz-box-flex: 1;
+-webkit-box-flex: 1;
+box-flex: 1;
+width:auto
+}
+.t-box-flex2 {
+  -moz-box-flex: 2;
+-webkit-box-flex: 2;
+box-flex: 2;
+  width: auto;
+}
+.t-box-flex3 {
+ -moz-box-flex: 3;
+-webkit-box-flex: 3;
+box-flex: 3;
+  width: auto;
+}
+.t-box-center {
+  box-align: center;
+}
+.t-center {
+  text-align: center;
+}
+.t-right {
+  text-align: right;
+}
+.vertical-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vertical {
+  display: flex;
+  align-items: center;
+}
+.w1200 {
+  width: 1200px;
+}
+.m0a {
+  margin: 0 auto;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <el-container class="top-position">当前位置：<breadcrumb></breadcrumb></el-container>
+    <transition name="fade" mode="out-in">
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+import Breadcrumb from "#/components/Breadcrumb";
+export default {
+  components: {
+    Breadcrumb
+  },
+  name: "AppMain",
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+};
+</script>
+<style scoped>
+.app-main {
+  width: 100%;
+}
+.top-position {
+  height: 60px;
+  line-height: 60px;
+  background: #fff;
+  font-size: 14px;
+  color: #666;
+  padding-left: 35px;
+  margin-bottom: 10px;
+}
+</style>
+