qj-common 4.3.0 → 4.3.2

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

@@ -1,295 +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>
-
+<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>
+