Files
juipvue/src/components/common/layout/header.vue
wanyongkang 4ca40a7528 样式
2020-12-02 23:38:15 +08:00

149 lines
3.3 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'
import Fingerprint from './../../../../static/js/fingerprint.js'
let finger = new Fingerprint()
var that = null
export default {
name: 'headerBar',
data () {
return {
qrVisible: false,
qrCode: null
}
},
props: {},
created () {
this.confire_finger()
},
methods: {
// 验证web指纹
confire_finger () {
let finger_code = finger.get()
this.$api.post(this.$api.phpURL + 'api/Verify/index', {code: finger_code}).then(res => {
if (res.msg == 'false') {
// eslint-disable-next-line camelcase
alert('访问错误!错误码:' + finger_code)
window.location.href = 'http://www.juip.com'
}
})
},
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>