Files
PC-Light-Forum/searchV2.html
DESKTOP-RQ919RC\Pc f2469a1a3b fix(样式): 修复移动端布局问题并优化样式
修复移动端搜索页面的布局问题,优化响应式设计
调整头部导航栏的z-index防止遮挡
统一处理签到组件的显示逻辑
修复搜索推荐框宽度问题
优化媒体查询断点设置
2025-12-24 18:54:19 +08:00

528 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>搜索结果 - - 寄托天下 -- 寄托天下</title>
<link rel="stylesheet" href="https://framework.x-php.com/gter/forum/css/public.css?v=nbSmnHfeC1qX" />
<link rel="stylesheet" href="https://framework.x-php.com/gter/forum/css/search.css?v=nbSmnHfeC1qX" />
<!-- <link rel="stylesheet" href="https://f.gter.net/css/search.css" /> -->
<meta name="description" content="在寄托天下留学论坛上搜索, 分享留学经验, 咨询签证, 面试, 机经, offer, 奖学金, 名校专业等。">
<meta name="keywords" content=", 寄托天下, 留学论坛">
<meta name="author" content="">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="搜索结果 - - 寄托天下">
<meta property="og:description" content="在寄托天下留学论坛上搜索, 分享留学经验, 咨询签证, 面试, 机经, offer, 奖学金, 名校专业等。">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="搜索结果 - - 寄托天下">
<meta property="twitter:description" content="在寄托天下留学论坛上搜索, 分享留学经验, 咨询签证, 面试, 机经, offer, 奖学金, 名校专业等。">
<meta property="twitter:image" content="">
<!-- 网站图标 -->
<link rel="icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
<style>
[v-cloak] {
display: none !important;
}
#pre-loader {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
#pre-loader .three-bounce>div {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100%;
top: 50%;
margin-top: -9px;
background: #aeadba;
animation: bouncedelay 1.4s infinite ease-in-out;
animation-fill-mode: both;
}
#pre-loader .three-bounce .one {
animation-delay: -0.32s;
}
#pre-loader .three-bounce .two {
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%,
100%,
80% {
transform: scale(0);
-webkit-transform: scale(0);
}
40% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
/* 修复大于768px时.read-box被撑开的问题 */
#search .search-no .recommend-box .hot-box,
#search .search-no .recommend-box .read-box {
min-width: 0;
}
</style>
<script type="text/javascript">
var STYLEID = '2',
STATICURL = 'static/',
IMGDIR = 'https://bbs.gter.net/template/archy_plt8/image',
VERHASH = 'Z62',
charset = 'gbk',
discuz_uid = '0',
cookiepre = '4B5x_c0ae_',
cookiedomain = 'gter.net',
cookiepath = '/',
showusercard = '1',
attackevasive = '0',
disallowfloat = '',
creditnotice = ',',
defaultstyle = '',
REPORTURL = 'aHR0cDovL2Jicy5ndGVyLm5ldC9mb3J1bS5waHA/dGlkPTI0MDYzNTYmZ290bz1sYXN0cG9zdA==',
SITEURL = 'https://app.gter.net/',
JSPATH = 'static/js/';
</script>
<script src="https://app.gter.net/bottom?tpl=header&menukey=bbs"></script>
<script src="https://framework.x-php.com/gter/bbs/static/js/common.js" charset="gbk"></script>
</head>
<body>
<script>
window.__ASSET_VERSION__ = 'Z69';
// 判断是否是移动端
window.isMobile = window.innerWidth <= 768;
</script>
<div id="ajaxwaitid"></div>
<div id="append_parent"></div>
<div class="head-top flexacenter" style="width: 1200px;margin: 20px auto 30px;z-index: 8;">
<a href="/" class="flexacenter" target="_blank">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
</a>
<div class="flex1"></div>
<div class="input-box flexacenter">
<div class="placeholder">
<div class="placeholder-box" style="transition: transform .3s ease"></div>
</div>
<input class="input flex1" type="text" maxlength="140" /> <img class="icon" onclick="searchEvent()" src="https://framework.x-php.com/gter/forum/img/search-icon.svg?v=nbSmnHfeC1qX" />
<div class="search-box-history">
<div class="search-box-history-title">历史搜索</div>
<div class="search-box-history-list"></div>
</div>
</div>
<div class="post-list flexacenter"> </div>
<div class="sign-in sign-in-no flexacenter"></div>
<div class="head-more flexcenter" onclick="openHeadPop()">
<img class="more-icon" style="width: 18px;height: 15px;" src="https://framework.x-php.com/gter/forum/img/threeAcross.svg?v=nbSmnHfeC1qX" />
</div>
<div class="head-pop" style="display: none;">
<div class="head-more-pop">
<div class="head-more-userinfo flex1 flexacenter">
<div class="head-more-left flexacenter"><img class="head-more-userinfo-avatar" src="" alt="">
<div class="head-more-userinfo-username"></div>
</div>
<div class="head-more-right">
<div class="loginBtn flexcenter" onclick="go_ajax_Login()">登录/注册</div>
</div>
</div>
<div class="tab-list"><a class="tab-item flexacenter" href="https://www.gter.net" target="_blank">寄托首页</a><a class="tab-item flexacenter pitch" href="https://f.gter.net" target="_blank">论坛</a><a class="tab-item flexacenter" href="https://app.gter.net/admissionOfficer" target="_blank">招生官</a><a class="tab-item flexacenter" href="https://bbs.gter.net/thread-2345065-1-1.html" target="_blank">加群</a><a class="tab-item flexacenter" href="https://offer.gter.net" target="_blank">Offer榜</a></div>
<a class="head-more-post flexcenter" href="/publish" target="" onclick="skipLoginUrl(event)">
<div class="head-more-post-icon flexcenter"><img class="head-more-post-img" src="https://framework.x-php.com/gter/forum/img/addyellow.svg?v=nbSmnHfeC1qX" /></div>发布帖子
</a>
<img class="cross-icon" onclick="crossHeadPop()" src="https://framework.x-php.com/gter/forum/img/cross.svg?v=nbSmnHfeC1qX">
</div>
</div>
</div>
<div class="valueA" style="display: none;">https://framework.x-php.com/gter/forum/</div>
<div class="container" id="search">
<div class="templateValue" ref="kwValue"></div>
<div class="templateValue" ref="typeValue"></div>
<div v-if="isNoSearch" class="search-no" style="min-height: 50vh;">
<img class="earth-icon flexflex" src="/img/earth-icon.png">
<div class="input-box flexacenter">
<input class="input flex1 vuehide" placeholder="请输入关键词" v-model="kw" @keyup.enter="startSearch(kw ? '' : placeholder)">
<input v-cloak class="input flex1" :placeholder="placeholder" v-model="kw" @keyup.enter="startSearch(kw ? '' : placeholder)">
<div class="btn" @click="startSearch(kw ? '' : placeholder)">搜索</div>
</div>
<div class="recommend-box flexflex" v-cloak>
<div class="hot-box" v-if="searchList.length != 0">
<div class="recommend-head flexacenter">
<img class="icon" src="/img/triangle-violet.svg">
热门搜索
</div>
<div class="hot-list flexflex">
<div class="item" v-for="item in searchList" @click="startSearch(item.keyword)">{{ item.keyword }}</div>
</div>
</div>
<div class="hot-box" v-if="tagList.length != 0">
<div class="recommend-head flexacenter">
<img class="icon" src="/img/triangle-yellow.svg">
热门标签
</div>
<div class="hot-list flexflex">
<a class="item flexacenter" href="/recommend" target="_blank">
<img class="icon" src="/img/recommend-head-icon.png">
编辑推荐
</a>
<a class="item flexacenter" href="/best" target="_blank">
<img class="icon" src="/img/essence-head-icon.png">
精华帖
</a>
<a class="item" v-for="item in tagList" :href="'/tag/' + item.tagname" target="_blank">{{ item.tagname }}</a>
</div>
</div>
<div class="read-box" v-if="recommendList.length != 0">
<div class="recommend-head flexacenter">
<img class="icon" src="/img/triangle-blue.svg">
推荐阅读
</div>
<div class="read-list">
<a class="item flexacenter" v-for="item in recommendList" target="_blank" :href="'/details/' + item.uniqid ">
<div class="dot"></div>
<div class="text flex1 one-line-display">{{ item.title }}</div>
</a>
</div>
</div>
</div>
</div>
<template v-else>
<div class="search-box flexacenter">
<input class="search-input flex1" placeholder="请输入搜索关键词" v-model="kw" @keyup.enter="startSearch()" />
<img class="search-icon" src="https://framework.x-php.com/gter/forum/img/search-icon.svg?v=nbSmnHfeC1qX" alt="" @click="startSearch()" />
</div>
<template v-if="!isEmptySearch">
<div class="classify flexacenter">
<div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
</div>
<div class="quantity flexacenter">
{{ tabList[tabValue] }}
<div class="line"></div>
<div class="num">{{ total }}</div>
</div>
</template>
<!-- <div id="pre-loader">
<div class="three-bounce" p-id="11">
<div class="one" p-id="12"></div>
<div class="two" p-id="13"></div>
<div class="three" p-id="14"></div>
</div>
</div> -->
<div class="matter flexflex" ref="matterRef" v-cloak>
<div class="matter-content flex1" ref="matterContentRef" :style="{'top': matterHeight + 'px'}">
<div class="list-box" v-if="list.length != 0">
<template v-for="(item,index) in list" :key="index">
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
<item-project v-else-if="item.type == 'programs' || tabValue == 'xg'" :itemdata="item"></item-project>
<item-forum v-else :itemdata="item"></item-forum>
</template>
</div>
<load-box :loading="loading"></load-box>
<div v-if="list.length == 0 && page == null" class="empty flexcenter">
<img class="empty-icon" src="https://framework.x-php.com/gter/forum/img/empty-icon.png?v=nbSmnHfeC1qX" />
<div class="empty-text">{{ kw ? '- 暂无内容 -' : '- 请输入搜索关键词 -' }}</div>
</div>
<div class="pages-box flexcenter" v-if="pagination.length != 0">
<img v-if="page == 1" class="arrows" src="https://framework.x-php.com/gter/forum/img/arrows-gray-simple.svg?v=nbSmnHfeC1qX" alt="" />
<img @click="prevPage" v-else class="arrows rotate180" src="https://framework.x-php.com/gter/forum/img/arrows-gray-deep.svg?v=nbSmnHfeC1qX" alt="" />
<div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
<img v-if="page == maxPage" class="arrows rotate180" src="https://framework.x-php.com/gter/forum/img/arrows-gray-simple.svg?v=nbSmnHfeC1qX" alt="" />
<img @click="nextPage" v-else v-else class="arrows" src="https://framework.x-php.com/gter/forum/img/arrows-gray-deep.svg?v=nbSmnHfeC1qX" alt="" />
</div>
</div>
<div class="sidebar-box" ref="sidebarRef" :style="{'top': sidebarHeight + 'px'}">
<div class="recommend-and-essence flexacenter">
<a class="item flexcenter" target="_blank" href="/recommend">
<img class="icon" src="/img/recommend-head-icon.png" />
<div class="text">编辑推荐</div>
</a>
<a class="item flexcenter" target="_blank" href="/best">
<img class="icon" src="/img/essence-head-icon.png" />
<div class="text">精华帖</div>
</a>
</div>
<hot-search :isNoRequestData="true" :searchlist="searchList"></hot-search>
<hot-tag :isNoRequestData="true" :taglist="tagList"></hot-tag>
<slideshow-box></slideshow-box>
<latest-list></latest-list>
</div>
</div>
</template>
</div>
<script src="https://framework.x-php.com/gter/forum/js/vue.global.js?v=nbSmnHfeC1qX"></script>
<script src="https://framework.x-php.com/gter/forum/js/axios.min.js?v=nbSmnHfeC1qX"></script>
<script src="https://framework.x-php.com/gter/forum/js/public.js?v=nbSmnHfeC1qX"></script>
<!-- <script src="https://f.gter.net/js/public.js"></script> -->
<script type="module" src="https://framework.x-php.com/gter/forum/js/search.js?v=nbSmnHfeC1qX"></script>
<!-- <script type="module" src="https://f.gter.net/js/search.js"></script> -->
<script src="https://app.gter.net/bottom?tpl=footer,popupnotification"></script>
<script>
if (location.href.indexOf('details') != -1) {
const postList = document.querySelector('.head-top .post-list')
postList.innerHTML = `<a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-thread.png?v=nbSmnHfeC1qX" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-offer.png?v=nbSmnHfeC1qX" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-summary.png?v=nbSmnHfeC1qX" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-mj.png?v=nbSmnHfeC1qX" /> </a> <a href="https://vote.gter.net/publish" target="_blank"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-vote.png?v=nbSmnHfeC1qX" /> </a>`
postList.style.display = 'flex'
} else if (location.href.indexOf('search') != -1) {
const box = document.querySelector(".head-top")
box.querySelector(".input-box").style.display = "none"
box.querySelector(".sign-in").style.display = "none"
} else if (location.href.indexOf("publish") != -1) {
const box = document.querySelector(".head-top")
if (box) document.body.removeChild(box)
} else {
const signIn = document.querySelector('.head-top .sign-in')
console.log('signIn', signIn);
signIn.innerHTML = `<div class="sign-in-no-box" onclick="headSignIn()">
<img class="sign-in-bj" src="https://framework.x-php.com/gter/forum/img/sign-in-bj.svg?v=nbSmnHfeC1qX" /><img class="coin-bj" src="https://framework.x-php.com/gter/forum/img/coin-bj.svg?v=nbSmnHfeC1qX" />
<img class="coin-icon" src="https://framework.x-php.com/gter/forum/img/coin-icon.png?v=nbSmnHfeC1qX" /><span class="text flex1">签到领寄托币</span>
<div class="sign-go flexcenter">
<img class="sign-go-bj" src="https://framework.x-php.com/gter/forum/img/sign-go.svg?v=nbSmnHfeC1qX" /> GO
</div>
<img class="petal1" src="https://framework.x-php.com/gter/forum/img/petal1.png?v=nbSmnHfeC1qX" />
<img class="petal2" src="https://framework.x-php.com/gter/forum/img/petal2.png?v=nbSmnHfeC1qX" />
<img class="petal3" src="https://framework.x-php.com/gter/forum/img/petal3.png?v=nbSmnHfeC1qX" />
</div>
<div class="sign-in-already-box">
<img class="sign-icon" src="https://framework.x-php.com/gter/forum/img/sign-icon.png?v=nbSmnHfeC1qX" />
<span>已签到,明天再来</span>
</div>`
signIn.style.display = 'flex'
let userInfoWinTimerCount = 0;
const userInfoWinTimer = setInterval(() => {
if (location.host == "127.0.0.1:5501") return;
if (todaysignedState) {
clearInterval(userInfoWinTimer);
if (todaysigned == 1) {
signIn.classList.add('sign-in-already')
signIn.classList.remove("sign-in-no");
}
}
userInfoWinTimerCount++;
if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
}, 50);
}
function headSignIn() {
SignInComponent.initComponent();
}
const searchInput = document.querySelector('.head-top .input')
// 绑定 blur 和 focus 事件
if (searchInput) {
searchInput.addEventListener('blur', function () {
setTimeout(() => {
const historyBox = document.querySelector('.head-top .search-box-history')
if (historyBox) historyBox.style.display = 'none'
}, 300);
const inputBox = document.querySelector('.head-top .input-box')
if (inputBox) inputBox.classList.remove('pitch')
startCarousel();
})
searchInput.addEventListener('focus', () => {
const historyBox = document.querySelector('.head-top .search-box-history')
const historyItem = historyBox.querySelectorAll(".search-box-history-item")
if (historyBox && historyItem.length > 0) historyBox.style.display = 'block'
const inputBox = document.querySelector('.head-top .input-box')
if (inputBox) inputBox.classList.add('pitch')
if (carouselTimer) clearInterval(carouselTimer);
})
// 绑定回车事件
searchInput.addEventListener('keydown', (e) => {
if (e.key == 'Enter') searchEvent()
})
searchInput.addEventListener('input', (e) => {
const value = e.target.value || ''
const placeholder = document.querySelector(".head-top .placeholder")
if (value) placeholder.style.display = 'none'
else placeholder.style.display = 'block'
})
}
let historySearchList = []
// 获取历史搜索
const getHistorySearch = () => {
const data = JSON.parse(localStorage.getItem("history-search")) || [];
historySearchList = data;
let itemAll = ``
data.forEach((item, index) => itemAll += `<div class="search-box-history-item one-line-display" onclick="searchEvent('${item}')">${item}</div>`) // 绑定事件 searchEvent 点击搜索)
const historyList = document.querySelector('.search-box-history-list')
historyList.innerHTML = itemAll
};
if (location.href.indexOf("/publish") == -1 && location.href.indexOf("/search") == -1) getHistorySearch();
const searchEvent = (value) => {
if (window.innerWidth <= 480) {
redirectToExternalWebsite("/search");
return
}
const kw = value || searchInput.value || hotSearchWords[currentIndex]?.keyword || "";;
if (!kw) return;
historySearchList.unshift(kw);
historySearchList = [...new Set(historySearchList)];
if (historySearchList.length > 10) historySearchList = historySearchList.splice(0, 10);
localStorage.setItem("history-search", JSON.stringify(historySearchList));
redirectToExternalWebsite("/search/" + kw);
searchInput.value = ""
}
let hotSearchWords = [];
const renderingPlaceholder = () => {
let itemAll = ``
hotSearchWords.forEach(item => {
itemAll += `<div class="item one-line-display" >大家都在搜:${item.keyword}</div>`
})
const sliceHotSearchWords = hotSearchWords.slice(0, 2)
sliceHotSearchWords.forEach(item => {
itemAll += `<div class="item one-line-display" >大家都在搜:${item.keyword}</div>`
})
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
placeholderBox.innerHTML = itemAll
}
const getWConfigg = () => {
ajaxGet("/v2/api/config/website").then((res) => {
if (res.code == 200) {
let data = res["data"] || {};
hotSearchWords = data.hotSearchWords || [];
renderingPlaceholder()
data.time = new Date().toISOString();
localStorage.setItem("wConfig", JSON.stringify(data));
}
});
};
const checkWConfig = () => {
const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
if (wConfig.time) {
const time = new Date(wConfig.time);
const now = new Date();
if (now - time > 24 * 60 * 60 * 1000) getWConfigg();
else {
hotSearchWords = wConfig.hotSearchWords || [];
renderingPlaceholder()
}
} else getWConfigg();
};
checkWConfig()
const renderCurrentIndex = () => {
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
if (placeholderBox) placeholderBox.style.transform = `translateY(${-currentIndex * 36}px)`
}
let currentIndex = 0; // 当前显示的关键词索引
let carouselTimer = null; // 轮播定时器
// 启动轮播函数
const startCarousel = () => {
// 清除已有的定时器
if (carouselTimer) clearInterval(carouselTimer);
// 设置新的定时器,每秒滚动一次
carouselTimer = setInterval(() => {
if (hotSearchWords.length > 1) {
if (currentIndex >= hotSearchWords.length - 1) {
currentIndex++;
setTimeout(() => {
currentIndex = 0;
}, 2300);
} else currentIndex++;
}
renderCurrentIndex()
}, 2300);
};
startCarousel();
const openHeadPop = () => {
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
// 登录
const headMoreLeft = document.querySelector(".head-pop .head-more-left")
headMoreLeft.innerHTML = `<img class="head-more-userinfo-avatar" src="${window["userInfoWin"]?.avatar}" alt=""><div class="head-more-userinfo-username">${window["userInfoWin"]?.nickname}</div>`
} else {
const avatar = document.querySelector(".head-pop .head-more-userinfo-avatar")
avatar.src = "/img/defaultAvatar.png"
const headMoreRight = document.querySelector(".head-pop .head-more-right")
headMoreRight.style.display = "block"
}
document.querySelector(".head-pop").classList.add("head-pop-show");
}
const skipLoginUrl = (e) => {
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) { }
else {
e.preventDefault();
go_ajax_Login();
}
}
const crossHeadPop = () => document.querySelector(".head-pop").classList.remove("head-pop-show");
</script>
</body>
</html>