A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510
2023-12-18 11:12:07 +08:00
commit 27d89922da
56 changed files with 14386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/Empty.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="empty-box flexcenter">
<div class="dot-list flexacenter">
<img class="item" src="@/assets/img/dot-yellow.svg" />
<img class="item" src="@/assets/img/dot-yellow.svg" />
<img class="item" src="@/assets/img/dot-yellow.svg" />
<img class="item" src="@/assets/img/dot-gray.svg" />
<img class="item" src="@/assets/img/dot-gray.svg" />
<img class="item" src="@/assets/img/dot-gray.svg" />
</div>
<img class="empty-icon" src="@/assets/img/empty-icon.svg" />
<div class="empty-hint">{{ hint || "暂无内容" }}</div>
</div>
</template>
<script setup>
let props = defineProps({
hint: String,
})
</script>
<style lang="less" scoped>
.empty-box {
// width: 690px;
// height: 490px;
background-color: #ffffff;
border-radius: 6px;
margin: 0 auto;
flex-direction: column;
.dot-list .item {
width: 8px;
height: 8px;
&:not(:last-of-type) {
margin-right: 5px;
}
}
.empty-icon {
width: 100px;
height: 100px;
margin-top: 10px;
margin-bottom: 15px;
}
.empty-hint {
font-size: 13px;
color: #7f7f7f;
line-height: 22px;
}
}
</style>

219
components/Header.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<header class="header flexacenter">
<div class="header-box flexacenter">
<img class="logo-icon" @click="goIndex" src="@/assets/img/logo-icon.png" />
<div class="header-right flexacenter">
<div class="search-box flexacenter">
<input class="flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
<img class="search-icon" src="@/assets/img/search-icon.png" @click="searchClick" />
<div class="history-box" v-if="historicalSearchState">
<div class="history-title">历史搜索</div>
<div class="history-list">
<div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
</div>
</div>
</div>
<div class="my-btn-list flexacenter">
<div class="my-btn-item flexcenter">我的收藏</div>
<div class="my-btn-item flexcenter">我的面经</div>
</div>
<div class="sponsor-btn flexcenter" @click="goPublish">
<img class="add-icon" src="@/assets/img/add-icon.svg" />
发布面经
</div>
</div>
</div>
</header>
</template>
<script setup>
const router = useRouter()
const route = useRoute()
let keyword = ref("")
onMounted(() => {
getHistoricalSearchList()
})
watchEffect(() => {
keyword.value = route.query["keyword"]
})
// 点击跳转首页
const goIndex = () => {
router.push(`/index.html`)
}
// 点击发布
const goPublish = () => {
router.push(`/publish`)
}
// 获取历史记录方法
const getHistoricalSearchList = () => {
const list = localStorage.getItem("historical-Search")
if (list) historicalSearchList.value = JSON.parse(list) || []
else historicalSearchList.value = []
}
// 存入历史记录 随便去重 和 限制长度 方法
const setHistoricalSearchList = () => {
if (!keyword.value) return
historicalSearchList.value.unshift(keyword.value)
historicalSearchList.value = [...new Set(historicalSearchList.value)]
historicalSearchList.value = historicalSearchList.value.slice(0, 10)
localStorage.setItem("historical-Search", JSON.stringify(historicalSearchList.value))
}
// 搜索点击事件
const searchClick = () => {
router.push(`/index.html?keyword=${keyword.value}`)
setHistoricalSearchList()
searchBlur()
}
// 搜索获取焦点
const searchFocus = () => {
if (historicalSearchList.value.length == 0) return
historicalSearchState.value = true
}
// 搜索失去焦点
const searchBlur = () => {
setTimeout(() => (historicalSearchState.value = false), 300)
}
// 点击历史记录 item
const handleClickHistoricalItem = value => {
keyword.value = value
searchClick()
}
// 点击清除搜索
const handleClickClear = () => {
console.log("点击清除")
}
let historicalSearchState = ref(false) // 历史记录弹窗状态
let historicalSearchList = ref([]) // 历史记录数据
</script>
<style scoped lang="less">
header.header {
min-width: 1200px;
padding-top: 30px;
margin-bottom: 51px;
.header-box {
margin: 0 auto;
width: 1200px;
justify-content: space-between;
.logo-icon {
width: 103px;
height: 50px;
cursor: pointer;
}
.header-right {
.search-box {
width: 320px;
height: 32px;
background-color: #fff;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 104px;
position: relative;
input {
height: 100%;
border: none;
outline: none;
padding: 0 16px;
font-size: 13px;
border-radius: 104px;
}
.search-icon {
width: 20px;
height: 20px;
margin: 0 16px;
cursor: pointer;
}
.history-box {
position: absolute;
top: 36px;
left: 0;
width: 320px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 10px;
padding-top: 15px;
z-index: 2;
padding-bottom: 14px;
.history-title {
font-size: 13px;
color: #aaaaaa;
padding-left: 16px;
margin-bottom: 9px;
}
.history-list {
.history-item {
font-size: 14px;
color: #333;
height: 30px;
line-height: 30px;
padding: 0 16px;
cursor: pointer;
}
}
}
}
.my-btn-list {
margin-left: 20px;
height: 32px;
background-color: #fff;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 5px;
font-size: 13px;
padding: 0 7px;
color: #555555;
.my-btn-item {
padding: 0 10px;
cursor: pointer;
height: 100%;
position: relative;
&:not(:last-of-type)::after {
content: "|";
color: #d7d7d7;
position: absolute;
right: 0;
}
}
}
.sponsor-btn {
width: 130px;
height: 32px;
font-size: 13px;
color: #000;
margin-left: 20px;
background: rgba(253, 223, 109, 1);
border-radius: 5px;
cursor: pointer;
.add-icon {
width: 14px;
height: 14px;
margin-right: 10px;
}
}
}
}
}
</style>

177
components/Item.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<a class="box flexflex" target="_blank" :href="`./details/${item['uniqid']}`">
<img class="img" :src="item['schoolimage']" />
<div class="content flexflex">
<div class="name">{{ item["school"] }}</div>
<div class="list flexflex">
<div class="item flexacenter" v-if="item['profession']">
<div class="item-name">专业</div>
<div class="item-value ellipsis">{{ item["profession"] }}</div>
</div>
<div class="item flexacenter" v-if="item['project']">
<div class="item-name">项目</div>
<div class="item-value ellipsis">{{ item["project"] }}</div>
</div>
<div class="item flexacenter" v-if="item['interviewtime']">
<div class="item-name">时间</div>
<div class="item-value ellipsis">{{ item["interviewtime"] }}</div>
</div>
</div>
<div class="text-box">
<div class="text">{{ item["message"] }}</div>
<div class="time flexacenter">
<img class="time-icon time-black-icon" src="@/assets/img/time-icon.svg" />
<img class="time-icon time-white-icon" src="@/assets/img/time-white-icon.svg" />
{{ handleDate(item["releasetime"]) }}发布
</div>
</div>
<div class="data-list flexacenter">
<div class="data-item flexacenter" @click.prevent="handleLike(item['uniqid'], item['token'])">
<img class="data-item-icon" v-if="item['islike'] == 0" src="@/assets/img/like-no.svg" />
<img class="data-item-icon" v-else src="@/assets/img/like-yes.png" />
{{ item["likenum"] || 0 }}
</div>
<div class="data-item flexacenter">
<img class="data-item-icon" src="@/assets/img/comment-icon.svg" />
{{ item["commentnum"] || 0 }}
</div>
</div>
</div>
</a>
</template>
<script setup>
let props = defineProps({
item: Object,
})
const emit = defineEmits(["childEvent"])
// 处理点赞
const handleLike = (uniqid, token) => {
emit("handleLike", token)
}
</script>
<style lang="less" scoped>
.box {
width: 385px;
// height: 278px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
padding: 20px 20px 25px;
cursor: pointer;
margin-bottom: 20px;
.img {
width: 26px;
height: 26px;
margin-right: 10px;
}
.content {
flex-direction: column;
.name {
font-weight: 650;
font-size: 16px;
color: #000000;
margin-top: 2px;
margin-bottom: 16px;
}
.list {
flex-direction: column;
margin-bottom: 16px;
.item {
&:not(:last-of-type) {
margin-bottom: 10px;
}
.item-name {
color: #7f7f7f;
line-height: 20px;
font-size: 13px;
margin-right: 12.5px;
}
.item-value {
font-size: 14px;
color: #333333;
width: 255px;
}
}
}
.text-box {
// width: 304px;
border-radius: 10px;
background: #f2f2f2;
border: 1px solid #f6f6f6;
padding: 12px;
margin-bottom: 12px;
transition: all 0.3s;
&:hover {
background: rgba(114, 219, 134, 1);
.text {
color: #fff;
}
.time {
color: #fff;
.time-icon {
&.time-black-icon {
display: none;
}
&.time-white-icon {
display: block;
}
}
}
}
.text {
line-height: 24px;
font-size: 13px;
color: #333333;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.time {
color: #aaaaaa;
font-size: 13px;
.time-icon {
width: 20px;
height: 20px;
margin-right: 6px;
&.time-black-icon {
display: block;
}
&.time-white-icon {
display: none;
}
}
}
}
.data-list {
justify-content: flex-end;
color: #aaaaaa;
font-size: 12px;
.data-item {
margin-left: 15px;
.data-item-icon {
width: 13px;
margin-right: 5px;
}
}
}
}
}
</style>

251
components/MyPopup.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<div class="popup-mask flexcenter">
<div class="box flexflex">
<div class="tba-list flexcenter">
<div class="tab-item pitch flexcenter">
我的收藏
<div class="value">12</div>
</div>
<div class="tab-item flexcenter">
我的面经
<div class="value">12</div>
</div>
</div>
<div class="empty-box flexcenter" v-if="false"><Empty></Empty></div>
<div class="content">
<div class="item flexflex" v-for="(item, index) in 10" :key="index">
<div class="left flexflex">
<div class="name">香港理工大学</div>
<div class="info-box flexflex">
<div class="info-item flexacenter" v-for="item in 2" :key="item">
<div class="info-item-name">专业</div>
<div class="info-item-value">Electrical and Electronics Engineering</div>
</div>
</div>
<div class="text-box flexacenter">
我是本专业+跨专业申请，中大是直接给了推研所。没啥经验分享，主要是港大和港科的面经…
</div>
</div>
<div class="operate-area flexacenter">
<!-- <img class="delete-icon" src="@/assets/img/delete-icon.svg" /> -->
<div class="anonymous-box flexacenter">
<div class="text">公开</div>
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
<div class="state-popup flexflex" v-if="false">
<div class="state-popup-item flexacenter flex1 pitch">
<div class="">公开发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
<div class="state-popup-item flexacenter flex1">
<div class="">匿名发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="less" scoped>
.popup-mask {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
max-width: none;
max-height: none;
border: none;
outline: none;
.box {
width: 750px;
height: 606px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
flex-direction: column;
padding: 30px 30px 46px;
.tba-list {
font-size: 16px;
margin-bottom: 29px;
.tab-item {
color: #aaaaaa;
padding: 0 22px;
cursor: pointer;
position: relative;
&:first-of-type::after {
content: "";
width: 1px;
height: 16px;
background: #d7d7d7;
position: absolute;
right: 0;
}
.value {
margin-left: 10px;
}
&.pitch {
font-weight: 650;
color: #000000;
.value {
color: #555;
font-weight: 400;
}
}
}
}
.empty-box {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 6px;
margin: 0 auto;
}
.content {
width: 100%;
height: 100%;
// background: #000000;
overflow: auto;
padding-right: 10px;
padding-bottom: 20px;
.item {
// flex-direction: column;
border-bottom: 1px dotted #ebebeb;
padding-bottom: 20px;
cursor: pointer;
margin-left: 22px;
margin-bottom: 21px;
.left {
flex-direction: column;
// padding-left: 22px;
position: relative;
&::after {
content: "";
position: absolute;
top: 4px;
left: -22px;
width: 5px;
height: 12px;
background-color: rgba(49, 215, 46, 1);
border-radius: 25px;
}
.name {
font-weight: 650;
font-size: 14px;
color: #000000;
margin-bottom: 10px;
}
.info-box {
flex-direction: column;
margin-bottom: 7px;
.info-item {
line-height: 24px;
&:not(:last-of-type) {
margin-bottom: 3px;
}
.info-item-name {
color: #7f7f7f;
font-size: 13px;
margin-right: 12px;
}
.info-item-value {
font-size: 13px;
color: #333333;
}
}
}
.text-box {
width: 580px;
height: 45px;
background-color: rgba(246, 246, 246, 1);
border-radius: 5px;
color: #000000;
font-size: 13px;
padding: 0 16px;
}
}
.operate-area {
flex: 1;
display: flex;
justify-content: flex-end;
.delete-icon {
width: 12px;
cursor: pointer;
}
.anonymous-box {
.text {
font-size: 13px;
color: #333333;
}
.arrow-icon {
width: 8px;
height: 5px;
margin-left: 6px;
}
position: relative;
.state-popup {
position: absolute;
top: 30px;
right: 0;
width: 140px;
height: 101px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
flex-direction: column;
.state-popup-item {
justify-content: space-between;
color: #555;
font-size: 14px;
padding: 0 10px;
&:hover {
color: #000000;
}
&.pitch {
color: #72db86;
.state-popup-icon {
display: block;
}
}
&:not(:last-of-type) {
border-bottom: 1px dotted #e3e3e3;
}
.state-popup-icon {
width: 11px;
height: 8px;
display: none;
}
}
}
}
}
}
}
}
}
</style>