初始提交

src/components/common/layout/header.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="base_topBarbox">
+    <div class="base_topBar editbase_topBar">
+      <div class="base_explain">
+        <span id="toolbar_title" class="edittopTittles">{{$store.state.currentNav}}</span>
+        <div class="base-top-bar">
+          <div class="base-top-bar__right">
+            <!-- <div class="base-top-bar__right">
+              <a href="/user_manage#/user_feedback" class="top-bar__text border-r">用户反馈</a>
+            </div> -->
+            <div><el-link type="danger" @click="logout">退出系统</el-link></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import QRCode from "qrcodejs2";
+var that = null;
+export default {
+  name: "headerBar",
+  data() {
+    return {
+      qrVisible: false,
+      qrCode: null
+    };
+  },
+  props: {},
+  created() {},
+  methods: {
+    open() {
+        console.log(open);
+      var url = "http://yk.hncore.net/store";
+      this.makeqrcode(url);
+    },
+    logout(){
+      localStorage.clear();
+      this.$router.replace('/login');
+    },
+    showQr() {
+      this.qrVisible = true;
+    },
+    makeqrcode(url) {
+      var that = this;
+      this.qrCode&&this.qrCode.clear();
+      var qr = document.getElementById("qrcode");
+      qr.innerHTML = "";
+      this.qrCode = new QRCode(qr, {
+        text: url,
+        width: 150,
+        height: 150,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H
+      });
+    }
+  },
+  computed: {}
+};
+</script>
+<style lang="less" scoped>
+.base_topBarbox {
+  position: absolute;
+  margin-left: 180px;
+  top: 0;
+  left: 0;
+  width: calc(100% - 180px);
+  z-index: 1000;
+  background-color: #fff;
+}
+.edittopTittles {
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 56px;
+}
+.base_topBar {
+  min-width: 1100px;
+  background-color: #fff;
+  padding: 0 20px;
+}
+.base_explain {
+  display: -ms-flexbox;
+  display: flex;
+}
+#toolbar_title,
+.base_topBar.try_time .warn_info_box {
+  display: block;
+}
+.base-top-bar {
+  width: 100%;
+  height: 56px;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+.base-top-bar__right {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.base-top-bar__right {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.top-bar__text {
+  width: 56px;
+  font-size: 14px;
+  color: #666666;
+  line-height: 20px;
+  margin: 0 16px;
+  position: relative;
+  cursor: pointer;
+}
+.top-bar__shop-view {
+  width: 81px;
+  height: 28px;
+  line-height: 26px;
+  text-align: center;
+  border-radius: 14px;
+  border: 1px solid #b2b2b2;
+  font-size: 12px;
+  color: #666666;
+  margin-right: 17px;
+  cursor: pointer;
+}
+</style>