582 lines
17 KiB
Vue
Executable File
582 lines
17 KiB
Vue
Executable File
<template>
|
|
<div class="header-nav">
|
|
<div class="head-box">
|
|
<div class="head flexacenter">
|
|
<div class="left">
|
|
<slot name="operate"></slot>
|
|
<div class="head-title">
|
|
<slot name="header-title"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right flexacenter">
|
|
<search-box slot="search" :hot-searchkeywords="hotSearchkeywords" :issearch="issearch"></search-box>
|
|
|
|
<div class="head-more flexcenter" @click="headMorePopState = !headMorePopState">
|
|
<div class="red-dot" v-if="userInfo && userInfo.messagenum"></div>
|
|
<svg-icon icon-class="threeAcross" class-name="head-more-icon"></svg-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="head-arrows" :class="{animation: headMorePopState}" v-if="headMorePopState"></div>
|
|
<div class="head-more-pop" :class="{animation: headMorePopState}">
|
|
<div class="head-more-userinfo flex1 flexacenter">
|
|
<div class="head-more-left flexacenter" v-if="islogin">
|
|
<router-link class="flexacenter" to="/user" @click.native="headMorePopState = !headMorePopState">
|
|
<img class="head-more-userinfo-avatar" :src="userInfo.avatar || process.env.URL_ENV + '/img/defaultAvatar.jpg'" />
|
|
<div class="head-more-userinfo-username">{{ userInfo.nickname || "未登录" }}</div>
|
|
</router-link>
|
|
</div>
|
|
<div class="head-more-left flexacenter" v-else @click="handleRegister()">
|
|
<img class="head-more-userinfo-avatar" :src="userInfo.avatar || process.env.URL_ENV + '/img/defaultAvatar.jpg'" />
|
|
<div class="head-more-userinfo-username">{{ userInfo.nickname || "未登录" }}</div>
|
|
</div>
|
|
|
|
<div class="head-more-right">
|
|
<!-- 消息 -->
|
|
<div class="information-box" v-if="userInfo.messagenum">
|
|
<img class="information-icon" src="@/assets/img/icon/email.png" />
|
|
<div class="red-dot flexcenter">{{ userInfo.messagenum }}</div>
|
|
</div>
|
|
<!-- 登录按钮 -->
|
|
<div v-if="!islogin" class="loginBtn flexcenter" @click="handleRegister()">
|
|
登录/注册
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-list">
|
|
<a class="tab-item flexacenter" :href="item.url" target="_blank" :class="{pitch: item.current == 1}" v-for="(item, index) in menu" :key="index">{{ item.name }}</a>
|
|
</div>
|
|
|
|
<div class="head-more-post flexcenter" @click.stop="$skipUrl(invitationPost, false)">
|
|
<div class="head-more-post-icon flexcenter">
|
|
<svg-icon icon-class="addyellow" class-name="head-more-post-img"></svg-icon>
|
|
</div>
|
|
发布帖子
|
|
</div>
|
|
|
|
<div v-if="headMorePopState" @click="headMorePopState = !headMorePopState">
|
|
<svg-icon icon-class="cross" class-name="cross-icon"></svg-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="head-pop" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SearchBox from "../components/SearchBox.vue"
|
|
|
|
import {invitationPost} from "@/utils/bizarreUrl"
|
|
|
|
export default {
|
|
name: "HeaderNav",
|
|
data() {
|
|
return {
|
|
collapseShow: false, //显示折叠弹窗
|
|
a: 0,
|
|
headMorePopState: false, // 弹窗的状态
|
|
islogin: false,
|
|
userInfo: {}, // 注意 userInfo 写I 是否是大写 ,, 因为 user 已经改为全局，后面要删除传值的 user
|
|
menu: [],
|
|
hotSearchkeywords: [], // 热门搜索
|
|
invitationPost,
|
|
}
|
|
},
|
|
props: ["issearch", "needgetuser", "userinfo"],
|
|
watch: {
|
|
headMorePopState(newValue, oldValue) {
|
|
if (newValue) this.$pageStop()
|
|
else this.$pageMove()
|
|
},
|
|
},
|
|
mounted() {
|
|
let user = this.$store.state.user
|
|
if (JSON.stringify(user) === "{}") this.$store.dispatch("getUserInfo", this)
|
|
else {
|
|
this.userInfo = user
|
|
this.islogin = user.uid > 0 ? true : false
|
|
this.hotSearchkeywords = this.$store.state.hotSearchkeywords
|
|
this.menu = this.$store.state.menu
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 处理登录
|
|
handleRegister() {
|
|
let url = encodeURIComponent(location.href)
|
|
this.$skipUrl(`${this.$loginUrl}?referer=${url}`, false)
|
|
},
|
|
|
|
collapseClick() {
|
|
if (this.collapseShow == true) this.collapseShow = false
|
|
else this.collapseShow = true
|
|
},
|
|
collapseClose() {
|
|
this.collapseShow = false
|
|
},
|
|
},
|
|
|
|
destroyed() {
|
|
this.$pageMove()
|
|
},
|
|
|
|
components: {
|
|
SearchBox,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head-box {
|
|
z-index: 1000;
|
|
position: relative;
|
|
|
|
.head {
|
|
padding: 0 0.2933rem;
|
|
height: 1.3rem;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
width: calc(10rem - 0.5866rem);
|
|
background-color: #f5f5f5;
|
|
z-index: 100;
|
|
|
|
.left {
|
|
.head-title {
|
|
color: #000;
|
|
font-weight: 650;
|
|
font-size: 0.48rem;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.head-more {
|
|
position: relative;
|
|
|
|
.head-more-icon {
|
|
width: 0.48rem;
|
|
height: 0.4rem;
|
|
}
|
|
|
|
.red-dot {
|
|
position: absolute;
|
|
right: -0.2rem;
|
|
top: -0.2rem;
|
|
width: 0.16rem;
|
|
height: 0.16rem;
|
|
border-radius: 0.64rem;
|
|
background-color: rgba(253, 63, 93, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-arrows {
|
|
width: 0.1333rem;
|
|
height: 0.1333rem;
|
|
position: absolute;
|
|
bottom: -0.0133rem;
|
|
right: -0.5333rem;
|
|
width: 0;
|
|
height: 0;
|
|
transform: translateX(50%);
|
|
border: 0.24rem solid #000;
|
|
border-top-color: transparent;
|
|
border-bottom-color: rgb(255, 255, 255);
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
|
|
&.animation {
|
|
animation: slide-in-left2 0.5s ease-out forwards;
|
|
}
|
|
}
|
|
|
|
.head-more-pop {
|
|
position: absolute;
|
|
top: calc(100% - 0.0133rem);
|
|
height: calc(100vh - 1.3rem);
|
|
width: 7.6rem;
|
|
right: 0;
|
|
background-color: #fff;
|
|
overflow: auto;
|
|
transition: all 0.2s;
|
|
right: -100%;
|
|
opacity: 0;
|
|
|
|
&.animation {
|
|
animation: slide-in-left 0.5s ease-out forwards;
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
0% {
|
|
right: -100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
right: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left2 {
|
|
0% {
|
|
right: -0.5333rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
right: 0.5333rem;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.head-more-userinfo {
|
|
height: 2.88rem;
|
|
margin-left: 0.64rem;
|
|
margin-right: 0.72rem;
|
|
box-sizing: border-box;
|
|
border-bottom: 0.0133rem solid #ebebeb;
|
|
justify-content: space-between;
|
|
|
|
.head-more-left {
|
|
.head-more-userinfo-avatar {
|
|
margin-right: 0.24rem;
|
|
width: 1.28rem;
|
|
height: 1.28rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.head-more-userinfo-username {
|
|
font-size: 0.36rem;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.head-more-right {
|
|
.information-box {
|
|
position: relative;
|
|
width: 0.44rem;
|
|
height: 0.44rem;
|
|
|
|
.information-icon {
|
|
width: 0.44rem;
|
|
height: 0.44rem;
|
|
}
|
|
}
|
|
|
|
.red-dot {
|
|
position: absolute;
|
|
right: -0.2rem;
|
|
top: -0.2rem;
|
|
width: 0.36rem;
|
|
height: 0.36rem;
|
|
color: #fff;
|
|
border-radius: 0.64rem;
|
|
background-color: rgba(253, 63, 93, 1);
|
|
font-size: 0.26rem;
|
|
}
|
|
|
|
.loginBtn {
|
|
width: 2.24rem;
|
|
height: 0.8rem;
|
|
border-radius: 3.12rem;
|
|
background-color: rgba(98, 177, 255, 1);
|
|
color: #fff;
|
|
font-size: 0.34rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-list {
|
|
padding-right: 0.72rem;
|
|
margin-left: 0.64rem;
|
|
border-bottom: 0.0133rem solid #ebebeb;
|
|
|
|
.tab-item {
|
|
height: 1.44rem;
|
|
margin: 0.328rem 0;
|
|
border-radius: 0.22rem;
|
|
padding-left: 0.64rem;
|
|
font-size: 0.36rem;
|
|
color: #555555;
|
|
text-decoration: none;
|
|
|
|
&.pitch {
|
|
background-color: rgba(80, 227, 194, 1);
|
|
font-weight: 650;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-more-post {
|
|
color: #000;
|
|
font-size: 0.4rem;
|
|
margin: 1.28rem 0 2.6667rem;
|
|
|
|
.head-more-post-icon {
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
margin-right: 0.1333rem;
|
|
background-color: #fddf6d;
|
|
border-radius: 50%;
|
|
|
|
.head-more-post-img {
|
|
width: 0.24rem;
|
|
height: 0.24rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cross-icon {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
// padding: .8rem;
|
|
padding: 0.4rem;
|
|
// position: sticky;
|
|
position: fixed;
|
|
// bottom: .2667rem;
|
|
// bottom: 1rem;
|
|
bottom: 0.3rem;
|
|
// right: 3.8rem;
|
|
left: calc(50% + 1.2rem);
|
|
transform: translateX(-50%);
|
|
// right: 3.8rem;
|
|
// transform: translateX(50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-pop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.705882352941177);
|
|
}
|
|
}
|
|
|
|
// 折叠弹窗
|
|
.collapse-box {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 1.19rem;
|
|
width: 750px;
|
|
margin: 0 auto;
|
|
min-height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: 8;
|
|
|
|
&.collapse-show {
|
|
display: block;
|
|
}
|
|
|
|
.collapse-container {
|
|
background-color: #fff;
|
|
width: 7.6rem;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.collapse-my {
|
|
margin: 0.9rem 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 0.7rem 0 0.8rem;
|
|
|
|
.my-left {
|
|
width: 3.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.my-right {
|
|
width: 2.5rem;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
// 头像
|
|
.collapse-my-img {
|
|
width: 1.28rem;
|
|
height: 1.28rem;
|
|
border-radius: 0.67rem;
|
|
margin: 0 0.3rem 0 0;
|
|
}
|
|
|
|
.collapse-my-name {
|
|
font-size: 0.36rem;
|
|
color: #333;
|
|
}
|
|
|
|
.my-img {
|
|
width: 1.28rem;
|
|
height: 1.28rem;
|
|
}
|
|
|
|
.right-msg-img {
|
|
width: 0.44rem;
|
|
height: 0.44rem;
|
|
background-size: contain;
|
|
background-image: url("../assets/img/icon/email.png");
|
|
}
|
|
|
|
.right-msg-num {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
line-height: 0.3rem;
|
|
border-radius: 0.2rem;
|
|
background-color: #fd3f5d;
|
|
color: #fff;
|
|
font-size: 0.254rem;
|
|
position: absolute;
|
|
top: -0.15rem;
|
|
right: -0.2rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
// 未登录按钮
|
|
.loginBtn {
|
|
width: 2.24rem;
|
|
height: 0.8rem;
|
|
line-height: 0.8rem;
|
|
border-radius: 3.12rem;
|
|
background-color: rgba(98, 177, 255, 1);
|
|
color: #fff;
|
|
font-size: 0.34rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// 折叠弹窗列表
|
|
.collapse-list {
|
|
margin-left: 0.8rem;
|
|
border-top: 0.013333rem solid #eee;
|
|
border-bottom: 0.013333rem solid #eee;
|
|
display: flex;
|
|
padding: 0.3rem 0;
|
|
flex-direction: column;
|
|
|
|
span {
|
|
height: 1.44rem;
|
|
line-height: 1.44rem;
|
|
border-radius: 0.22rem;
|
|
padding: 0 0.8rem;
|
|
font-size: 0.36rem;
|
|
margin: 0.1rem 0.8rem 0.1rem 0;
|
|
}
|
|
|
|
.listActive {
|
|
background-color: rgba(80, 227, 194, 1);
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
// 折叠弹窗发布帖子
|
|
.collapse-publish {
|
|
margin: 0.9rem 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
|
|
span {
|
|
color: #000;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
// 发布帖子图片
|
|
.collapse-publish-img {
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
border-radius: 0.24rem;
|
|
background-color: #fddf6d;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 0.2rem;
|
|
}
|
|
|
|
.icon-add {
|
|
width: 0.24rem;
|
|
height: 0.24rem;
|
|
}
|
|
}
|
|
|
|
.collapse-close {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.5rem 0;
|
|
|
|
.icon-close {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.15rem 0.35rem 0.4rem;
|
|
|
|
.header-title {
|
|
width: 60%;
|
|
font-weight: bold;
|
|
font-size: 0.48rem;
|
|
color: #333;
|
|
}
|
|
|
|
.header-search-box {
|
|
width: 40%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-collapse {
|
|
width: 0.48rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
|
|
.icon-collapse {
|
|
width: 0.48rem;
|
|
height: 0.4rem;
|
|
}
|
|
}
|
|
|
|
.collapse-red {
|
|
width: 0.16rem;
|
|
height: 0.16rem;
|
|
background-color: red;
|
|
border-radius: 0.2rem;
|
|
position: absolute;
|
|
top: -0.15rem;
|
|
right: -0.2rem;
|
|
}
|
|
}
|
|
</style>
|