4 changed files with 150 additions and 103 deletions
@ -0,0 +1,99 @@ |
|||||
|
<template> |
||||
|
<div class="top-header"> |
||||
|
<img class="logo" src="@/assets/images/official/TDUCK@2x.png"> |
||||
|
<div> |
||||
|
<span class="menu-item" @click="$router.push({path:'/'})">首页</span> |
||||
|
<a class="menu-item" href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a> |
||||
|
<a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a> |
||||
|
<span class="menu-item" @click="$router.push({path:'/payService'})">付费服务</span> |
||||
|
<span class="menu-item add-contact-me">加入社群 |
||||
|
<div> |
||||
|
<img src="@/assets/images/official/contact_me_qr.png"> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button> |
||||
|
<el-button v-if="!isLogin" @click="$router.push({path:'/login'})"> |
||||
|
登 录 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import store from '@/store' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Header', |
||||
|
computed: { |
||||
|
getStore() { |
||||
|
return store |
||||
|
}, |
||||
|
isLogin() { |
||||
|
return this.getStore.getters['user/isLogin'] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top-header { |
||||
|
width: 100%; |
||||
|
height: 72px; |
||||
|
line-height: 72px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-around; |
||||
|
align-content: center; |
||||
|
align-items: center; |
||||
|
background: linear-gradient(-67deg, rgb(32, 84, 240), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1)); |
||||
|
* { |
||||
|
z-index: 20; |
||||
|
} |
||||
|
.logo { |
||||
|
width: 182px; |
||||
|
height: 28px; |
||||
|
} |
||||
|
.menu-item { |
||||
|
font-size: 17px; |
||||
|
font-weight: 300; |
||||
|
cursor: pointer; |
||||
|
color: #fff; |
||||
|
margin-right: 73px; |
||||
|
line-height: 72px; |
||||
|
} |
||||
|
.add-contact-me { |
||||
|
position: relative; |
||||
|
div { |
||||
|
margin-top: 20px; |
||||
|
position: absolute; |
||||
|
right: 0%; |
||||
|
top: 100%; |
||||
|
visibility: hidden; |
||||
|
opacity: 0; |
||||
|
transform: translateY(100px); |
||||
|
transition: 0.3s; |
||||
|
} |
||||
|
img { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
} |
||||
|
} |
||||
|
.add-contact-me:hover { |
||||
|
div { |
||||
|
visibility: visible; |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
.login-btn { |
||||
|
width: 95px; |
||||
|
height: 37px; |
||||
|
background: #fff; |
||||
|
border-radius: 11px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue