131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
|
<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>
|