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

a1300399510@qq.com 提交于 2023/03/30 -10:40:01

Browse Source
This commit is contained in:
XiaoMo
2023-03-30 10:40:10 +08:00
parent 5e7b831f70
commit 88e1f39e70
5 changed files with 0 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

676
src/components/HeaderNav_DESKTOP-6MA514B_3月-29-200637-2023_Conflict.vue
View File

@@ -1,676 +0,0 @@
<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">
<!-- <slot name="search"></slot> -->
<search-box slot="search" :issearch="true"></search-box>
<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">
<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>
import SearchBox from "../components/SearchBox.vue";
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()
},
components: {
SearchBox,
},
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-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);
}
}
// 折叠弹窗
.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>

91
src/components/plateNavigation-大小写冲突-肖荣豪_Win10.vue
View File

@@ -1,91 +0,0 @@
<!-- 板块导航 头部 点击板块后的头部导航 -->
<template>
<router-link class="path-box" to="/allSections">
<div>论坛</div>
<span class="path-slash">/</span>
<div class="oneEllipsis">{{ stairname }}</div>
<span class="path-slash">/</span>
<div class="oneEllipsis">{{ subsectionsname }}</div>
</router-link>
</template>
<script>
export default {
name: 'PlateNavigation',
data() {
return {
};
},
props: ["stairname", "subsectionsname"],
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
//路径
.path-box {
display: flex;
flex-direction: row;
height: 1.28rem;
line-height: 1.28rem;
margin: 0.2rem 0.35rem 0;
// padding: 0 0.25rem;
padding: 0 .4rem;
border-radius: 1.68rem 1.68rem 0 1.68rem;
background-color: #fff;
font-size: 0.32rem;
-webkit-box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
position: relative;
.path-slash {
color: #D7D7D7;
font-size: .32rem;
margin: 0 .18rem;
}
div {
color: #7F7F7F;
max-width: 2.5rem;
// &::before {
// content: "/";
// width: 0.2rem;
// padding: 0 0.07rem;
// color: #7F7F7F;
// }
&:last-child {
max-width: 50%;
color: #000;
font-weight: bold;
}
// &:first-child::before {
// content: "";
// }
}
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 0;
right: 0;
border-top: 0.24rem solid rgba(98, 177, 255, 1);
border-left: 0.24rem solid transparent;
transform: rotateX(180deg);
margin: 0 0.09rem 0.09rem 0;
}
}
</style>