A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified

Browse Source
This commit is contained in:
A1300399510
2023-03-28 18:04:49 +08:00
commit 947f9418ad
52 changed files with 18283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

684
src/components/HeaderNav.vue Executable file
View File

@@ -0,0 +1,684 @@
<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">
<div class="head-search flexcenter" v-if="issearch">
<img class="head-search-icon" src="@/assets/img/headerNav/search.png" />
<span>搜索</span>
</div>
<div class="head-more flexcenter" @click="headMorePopState = !headMorePopState">
<div class="red-dot" v-if="false"></div>
<img class="head-more-icon" src="@/assets/img/headerNav/threeAcross.svg" />
</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">
<img class="head-more-userinfo-avatar" :src="userInfo.avatar" alt="" />
<div class="head-more-userinfo-username">
{{ userInfo.nickname }}
</div>
</div>
<div class="head-more-right">
<!-- 消息 -->
<div class="information-box" v-if="false">
<img class="information-icon" src="@/assets/img/headerNav/information.png" />
<div class="red-dot flexcenter">2</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: tab == item.name }"
v-for="(item, index) in menu" :key="index">{{ item.name }}</a>
</div>
<div class="head-more-post flexcenter" @click.stop="$skipUrl('https://www.gter.net/bbs/post.html', false)">
<div class="head-more-post-icon flexcenter">
<img class="head-more-post-img" src="@/assets/img/headerNav/addyellow.svg" />
</div>
发布帖子
</div>
<img class="cross-icon" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"
src="@/assets/img/headerNav/cross.svg" />
</div>
</div>
<div class="head-pop" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"></div>
</div>
<header v-if="false">
<!-- 标题 -->
<div class="header-title">
<slot name="header-title"></slot>
</div>
<div class="header-search-box">
<slot name="search"></slot>
<!-- 折叠按钮 -->
<div class="header-collapse" @click="collapseClick">
<svg-icon icon-class="collapse" class-name="icon-collapse"></svg-icon>
<div class="collapse-red"></div>
<!-- 红点 -->
</div>
<!-- 点击折叠按钮弹窗 -->
<div class="collapse-box" :class="{ 'collapse-show': collapseShow == true }" @click="collapseClose">
<div class="collapse-container" @click.stop>
<!-- 已登录头像 -->
<div class="collapse-my" v-if="a == 0">
<div class="my-left">
<div class="collapse-my-img">
<svg-icon icon-class="Ada" class-name="my-img"></svg-icon>
</div>
<div class="collapse-my-name">Ada</div>
</div>
<div class="my-right">
<div class="right-msg-img"></div>
<!-- 消息数量 -->
<div class="right-msg-num">2</div>
</div>
</div>
<!-- 未登录头像 -->
<div class="collapse-my" v-if="a == 1">
<div class="my-left">
<div class="collapse-my-img">
<svg-icon icon-class="notlogin" class-name="my-img"></svg-icon>
</div>
<div class="collapse-my-name">未登录</div>
</div>
<div class="my-right">
<div class="loginBtn">登录/注册</div>
</div>
</div>
<!-- 折叠列表 -->
<div class="collapse-list">
<span>寄托首页</span>
<span class="listActive">论坛</span>
<span>招生官</span>
<span>中外合办</span>
<span>加群</span>
<span>Offer榜</span>
</div>
<!-- 发布帖子 -->
<div class="collapse-publish">
<div class="collapse-publish-img">
<svg-icon icon-class="add" class-name="icon-add"></svg-icon>
</div>
<span>发布帖子</span>
</div>
<!-- 取消弹窗 -->
<div class="collapse-close" @click="collapseClose">
<svg-icon icon-class="collapse-close" class-name="icon-close"></svg-icon>
</div>
</div>
</div>
</div>
</header>
</div>
</template>
<script>
export default {
name: "HeaderNav",
data() {
return {
collapseShow: false, //显示折叠弹窗
a: 0,
baseURL: "https://offer.gter.net",
tab: "Offer榜",
headMorePopState: false, // 弹窗的状态
islogin: false,
userInfo: {},
menu: [],
};
},
props: ["issearch", "needgetuser", "userinfo"],
watch: {
needgetuser: {
handler(newValue, oldValue) {
if (newValue) this.getUserInfoData();
},
immediate: true,
},
userinfo(newValue, oldValue) {
this.userInfo = newValue;
this.islogin = newValue.uid > 0 ? true : false;
},
headMorePopState(newValue, oldValue) {
if (newValue) this.$pageStop();
else this.$pageMove();
},
},
mounted() {
this.getMenu()
},
methods: {
// 处理登录
handleRegister() {
let url = encodeURIComponent(location.href);
this.$skipUrl(`${this.$loginUrl}?referer=${url}`, false);
},
// 获取用户信息
getUserInfoData() {
this.$http.post("/widget/getUser").then((res) => {
if (res.code != 200) return;
this.userInfo = res.data;
this.islogin = res.data.uid > 0 ? true : false;
}).catch(err => {
this.$message.error(err.message)
});
},
getMenu() {
this.$http.get("/widget", {
type: "menu",
}).then((res) => {
console.log(res);
if (res.code != 200) return;
this.menu = res.data.menu.data;
});
},
// collapseClick() {
// if (this.collapseShow == true) this.collapseShow = false;
// else this.collapseShow = true;
// },
// collapseClose() {
// this.collapseShow = false;
// },
},
};
</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-search {
width: 2.4rem;
height: .8rem;
border-radius: 2.56rem;
background-color: rgba(235, 235, 235, 1);
color: #AAAAAA;
font-size: .3467rem;
.head-search-icon {
width: .4rem;
height: .4rem;
margin-right: .14rem;
}
margin-right: .4rem;
}
.head-more {
position: relative;
.head-more-icon {
width: .48rem;
height: .4rem;
}
.red-dot {
position: absolute;
right: -0.2rem;
top: -0.2rem;
width: .16rem;
height: .16rem;
border-radius: .64rem;
background-color: rgba(253, 63, 93, 1);
}
}
}
.head-arrows {
width: .1333rem;
height: .1333rem;
position: absolute;
bottom: -.0133rem;
right: -0.5333rem;
width: 0;
height: 0;
transform: translateX(50%);
border: .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 .2s;
&.animation {
animation: slide-in-left2 0.5s ease-out forwards;
}
}
.head-more-pop {
position: absolute;
top: calc(100% - .0133rem);
height: calc(100vh - 1.3rem);
width: 7.6rem;
right: 0;
background-color: #fff;
overflow: auto;
transition: all .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: .64rem;
padding-right: .72rem;
box-sizing: border-box;
border-bottom: .0133rem solid #ebebeb;
justify-content: space-between;
.head-more-left {
.head-more-userinfo-avatar {
margin-right: .24rem;
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
}
.head-more-userinfo-username {
font-size: .36rem;
color: #333333;
}
}
.head-more-right {
.information-box {
position: relative;
width: .44rem;
height: .44rem;
.information-icon {
width: .44rem;
height: .44rem;
}
}
.red-dot {
position: absolute;
right: -0.2rem;
top: -0.2rem;
width: .36rem;
height: .36rem;
color: #fff;
border-radius: .64rem;
background-color: rgba(253, 63, 93, 1);
font-size: .26rem;
}
.loginBtn {
width: 2.24rem;
height: .8rem;
border-radius: 3.12rem;
background-color: rgba(98, 177, 255, 1);
color: #fff;
font-size: .34rem;
}
}
}
.tab-list {
padding-right: .72rem;
margin-left: 0.64rem;
border-bottom: .0133rem solid #ebebeb;
.tab-item {
height: 1.44rem;
margin: .328rem 0;
border-radius: .22rem;
padding-left: .64rem;
font-size: .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: .4rem;
margin: 1.28rem 0 2.6667rem;
.head-more-post-icon {
width: .48rem;
height: .48rem;
margin-right: .1333rem;
background-color: #fddf6d;
border-radius: 50%;
.head-more-post-img {
width: .24rem;
height: .24rem;
}
}
}
.cross-icon {
width: .32rem;
height: .32rem;
// padding: .8rem;
padding: .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);
}
}
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;
}
// 折叠弹窗
.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;
}
}
}
}
</style>

209
src/components/SearchBox.vue Executable file
View File

@@ -0,0 +1,209 @@
<template>
<div>
<div class="header-search" @click="searchClick">
<div class="header-search-img"></div>
<div class="header-search-text">搜索</div>
</div>
<!-- 搜索弹窗 -->
<div class="search-window" :class="{'searchShow':searchWinShow == true}">
<!-- 搜索框 -->
<div class="search-input">
<form action="javascript:return true;" @submit.prevent>
<div class="search-icon"></div>
<input ref="searchInput" v-model="searchText" type="search" placeholder="请输入搜索关键词"/>
<div v-if="showClear" class="clear-text" @click="clearText"></div>
</form>
<div class="search-close" @click="searchClose">取消</div>
</div>
<!-- 历史搜索 -->
<div class="search-content">
<div class="search-text">历史搜索</div>
<div class="search-label">
<span>香港大学</span>
<span>香港大学</span>
</div>
</div>
<!-- 热门搜索 -->
<div class="search-content">
<div class="search-text">热门搜索</div>
<div class="search-label">
<span>Bocconi</span>
<span>Bocconi</span>
<span>Bocconi</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SearchBox",
data() {
return {
searchWinShow: false,//显示搜索弹窗
searchText: '',
showClear: false, //显示清除按钮
}
},
methods: {
// 点击显示搜索弹窗
searchClick() {
this.searchWinShow = true
this.$refs.searchInput.blur();
},
// 点击隐藏搜索弹窗
searchClose(){
this.searchWinShow = false
},
// 搜索键盘、搜索
search(categoryId) {
this.$refs.searchInput.blur();
},
// 清空文本框
clearText() {
if(this.searchText.length > 0) {
this.searchText = ""
}
}
},
mounted() {
if(this.searchText.length > 0) {
this.showClear = true
}else{
this.showClear = false
}
}
}
</script>
<style lang="scss" scoped>
// 搜索弹窗
.search-window{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-color: #f6f6f6;
z-index: 9;
&.searchShow{
display: block;
}
.search-input{
padding: 0.27rem 0.32rem 0.27rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.search-icon{
position: absolute;
top: 0.43rem;
left: 0.3rem;
width: 0.32rem;
height: 0.32rem;
background-size: contain;
background-image: url('@/assets/img/icon/search.png');
}
form{
width: 90%;
position: relative;
}
input{
width: 100%;
box-sizing: border-box;
text-align: left;
font-size: 0.36rem;
height: 1.12rem;
line-height: 1.12rem;
border-radius: 0.56rem;
background-color: #ebebeb;
border: none;
color: #000;
display: block;
outline: 0;
padding-left: 0.8rem;
padding-right: 0.9rem;
text-decoration: none;
&[type="search"]{-webkit-appearance:none;}
&::-webkit-search-cancel-button {display: none;}
&:placeholder-shown{
color: #aaa;
}
}
.clear-text{
width: 0.4rem;
height: 0.4rem;
position: absolute;
top: 0.35rem;
right: 0.3rem;
background-size: contain;
background-image: url('/src/assets/img/icon/clear.png');
}
.search-close{
width: 10%;
font-size: 0.36rem;
text-align: right;
}
}
.search-content{
padding: 0.27rem 0.32rem 0.27rem;
display: flex;
flex-direction: column;
margin-top: 0.2rem;
.search-text{
color: #7F7F7F;
font-size: 0.32rem;
margin-bottom: 0.13rem;
}
.search-label{
display: flex;
flex-direction: row;
flex-wrap: wrap;
span{
padding: 0 0.2rem;
height: 0.96rem;
line-height: 0.96rem;
background-color: #fff;
border-radius: 0.16rem;
color: #333;
text-align: center;
font-size: 0.36rem;
margin: 0.2rem 0.16rem 0 0;
}
}
}
}
.header-search {
width: 2.4rem;
height: 0.8rem;
line-height: 0.8rem;
border-radius: 2.56rem;
background-color: rgba(235, 235, 235, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 0.35rem;
.header-search-img {
width: 0.4rem;
height: 0.4rem;
background-size: contain;
margin: 0 0.133333rem 0 0;
background-image: url("@/assets/img/icon/search.png");
}
.header-search-text {
text-align: left;
font-size: 0.32rem;
color: #aaaaaa;
display: block;
}
}
</style>

41
src/components/SvgIcon.vue Executable file
View File

@@ -0,0 +1,41 @@
<template>
<svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
<use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className;
} else {
return 'svg-icon';
}
}
}
};
</script>
<style scoped>
.svg-icon {
/* width: 100%;
height: 100%; */
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>