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

feat: 添加BI组件并优化多个页面样式和功能

Browse Source 
refactor: 重构slideshow-box组件，移除帖子标签

fix: 修复item-bottom组件中QR码加载状态显示问题

style: 调整多个页面的CSS样式，包括字体大小和间距

perf: 优化save.js文件同步逻辑，支持更多模板格式

docs: 更新组件文档和注释

chore: 添加bi组件相关文件并配置监听同步

test: 更新测试用例以适应组件变更
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-07 19:42:19 +08:00
parent 5c199bb8fe
commit dc871d80c0
28 changed files with 768 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
component/bi/bi.js Normal file
View File

File diff suppressed because one or more lines are too long

252
component/bi/bi.txt Normal file
View File

@@ -0,0 +1,252 @@
<style>
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
}
.one-line-display {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.two-line-display {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.coins-area {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
display: none;
}
.coins-area a {
text-decoration: none;
}
.coins-area .coins-box {
width: 624px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 11px;
flex-direction: column;
padding: 40px 30px 35px;
position: relative;
}
.coins-area .coins-box .fork {
width: 12px;
height: 12px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.coins-area .coins-box .coins-head {
margin-bottom: 32px;
}
.coins-area .coins-box .coins-head .icon {
width: 50px;
height: 60px;
margin-right: 16px;
}
.coins-area .coins-box .coins-head .text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #7f7f7f;
font-size: 14px;
}
.coins-area .coins-box .coins-head .text .sum {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-size: 18px;
color: #000000;
margin: 0 5px;
}
.coins-area .coins-box .coins-input {
width: 333px;
height: 36px;
background-color: #ffffff;
border: 1px solid #d7d7d7;
border-radius: 8px;
overflow: hidden;
margin-bottom: 31px;
}
.coins-area .coins-box .coins-input .input {
height: 100%;
border: none;
outline: none;
font-size: 14px;
padding: 0 10px;
}
.coins-area .coins-box .coins-input .btn {
width: 84px;
height: 100%;
line-height: 36px;
text-align: center;
background-color: #50e3c2;
cursor: pointer;
}
.coins-area .coins-box .coins-info {
color: #555555;
font-size: 14px;
margin-bottom: 43px;
}
.coins-area .coins-box .coins-info .icon {
width: 16px;
height: 16px;
margin-right: 6px;
}
.coins-area .coins-box .coins-info .sum {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin: 0 5px;
}
.coins-area .coins-box .coins-info .strategy {
margin-left: 5px;
color: #026277;
cursor: pointer;
text-decoration: none;
}
.coins-area .coins-box .coins-list-area {
max-height: 347px;
background-color: #fbfbfb;
border-radius: 16px;
width: 100%;
/* padding: 20px 20px 0; */
flex-direction: column;
}
.coins-area .coins-box .coins-list-area .coins-total {
color: #7f7f7f;
font-size: 14px;
margin: 20px 20px 0;
}
.coins-area .coins-box .coins-list-area .coins-total .sum {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin: 0 5px;
}
.coins-area .coins-box .coins-list-area .list {
overflow: auto;
margin: 0 20px;
}
.coins-area .coins-box .coins-list-area .list .item {
height: 65px;
padding: 0 35px;
}
.coins-area .coins-box .coins-list-area .list .item:not(:last-child) {
border-bottom: 1px solid #f2f2f2;
}
.coins-area .coins-box .coins-list-area .list .item .serial {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
color: #ffb600;
margin-right: 114px;
}
.coins-area .coins-box .coins-list-area .list .item .user {
color: #555555;
font-size: 13px;
cursor: pointer;
}
.coins-area .coins-box .coins-list-area .list .item .user .avatar {
width: 32px;
height: 32px;
margin-right: 10px;
border-radius: 50%;
}
.coins-area .coins-box .coins-list-area .list .item .amount {
color: #000000;
font-size: 16px;
}
.coins-area .coins-box .coins-list-area .list .item .amount .text {
font-size: 13px;
margin-left: 2px;
}
</style>
<div class="coins-area flexcenter">
<div class="coins-box flexcenter">
<img class="fork closeCoinBox" src="https://app.gter.net/image/gter/commonCom/bi/img/fork-icon.png" />
<div class="coins-head flexacenter">
<img class="icon" src="https://app.gter.net/image/gter/commonCom/bi/img/bi.png" />
<div class="text flexacenter">
该帖子已获得
<div class="sum"></div>
个寄托币
</div>
</div>
<div class="coins-input flexacenter">
<input class="input flex1" type="number" placeholder="输入投币数" />
<div class="btn coinSubmit">投币</div>
</div>
<div class="coins-info flexacenter">
<img class="icon" src="https://app.gter.net/image/gter/commonCom/bi/img/bi-black-icon.png" />
你当前共有
<div class="sum"></div>
寄托币
<a class="strategy" target="_blank" href="">[挣币攻略]</a>
</div>
<div class="coins-list-area flexflex"></div>
</div>
</div>

15
component/head-top/head-top.js
View File

@@ -5,7 +5,12 @@ const { defineComponent, ref, onMounted, nextTick } = Vue;
// 定义组件（直接使用模板） // 定义组件（直接使用模板）
export const headTop = defineComponent({ export const headTop = defineComponent({
name: "headTop", name: "headTop",
props: {}, props: {
page: {
type: String,
default: "",
},
},
setup(props) { setup(props) {
onMounted(() => {}); onMounted(() => {});
@@ -44,8 +49,12 @@ export const headTop = defineComponent({
let pitchState = ref(false); let pitchState = ref(false);
return { pitchState, state, signIn, input, defaultSearchText, goSearch }; let page = ref(...props.page);
// console.log("page", page.value);
return { page, pitchState, state, signIn, input, defaultSearchText, goSearch };
}, },
template: `<div class="head-top flexacenter"> <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" :class="{'pitch': pitchState}"> <input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" /> <img class="icon" src="/img/search-icon.svg" @click="goSearch" /> </div> <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="/img/sign-go.svg" /> GO </div> <img class="petal1" src="/img/petal1.png" /> <img class="petal2" src="/img/petal2.png" /> <img class="petal3" src="/img/petal3.png" /> </div> <div class="sign-in sign-in-already flexcenter" v-else> <img class="sign-icon" src="/img/sign-icon.png" /> <span>已签到，明天再来</span> </div></div>`, template: `<div class="head-top flexacenter"> <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" :class="{'pitch': pitchState}"> <input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" /> <img class="icon" src="/img/search-icon.svg" @click="goSearch" /> </div> <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else> <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="/img/sign-go.svg" /> GO </div> <img class="petal1" src="/img/petal1.png" /> <img class="petal2" src="/img/petal2.png" /> <img class="petal3" src="/img/petal3.png" /> </div> <div class="sign-in sign-in-already flexcenter" v-else> <img class="sign-icon" src="/img/sign-icon.png" /> <span>已签到，明天再来</span> </div> </template></div>`,
}); });

52
component/head-top/head-top.txt
View File

@@ -7,22 +7,40 @@
<input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" /> <input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" />
<img class="icon" src="/img/search-icon.svg" @click="goSearch" /> <img class="icon" src="/img/search-icon.svg" @click="goSearch" />
</div> </div>
<div class="post-list flexacenter" v-if="page == 'details'">
<div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <a href="/publish" target="_blank" style="margin-right: 10px">
<img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="post-item" src="/img/post-thread.png" />
<img class="coin-bj" src="/img/coin-bj.svg" /> </a>
<img class="coin-icon" src="/img/coin-icon.png" /> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px">
<span class="text flex1">签到领寄托币</span> <img class="post-item" src="/img/post-offer.png" />
<div class="sign-go flexcenter"> </a>
<img class="sign-go-bj" src="/img/sign-go.svg" /> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px">
GO <img class="post-item" src="/img/post-summary.png" />
</a>
<a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px">
<img class="post-item" src="/img/post-mj.png" />
</a>
<a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px">
<img class="post-item" src="/img/post-vote.png" />
</a>
</div>
<template v-else>
<div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak>
<img class="sign-in-bj" src="/img/sign-in-bj.svg" />
<img class="coin-bj" src="/img/coin-bj.svg" />
<img class="coin-icon" src="/img/coin-icon.png" />
<span class="text flex1">签到领寄托币</span>
<div class="sign-go flexcenter">
<img class="sign-go-bj" src="/img/sign-go.svg" />
GO
</div>
<img class="petal1" src="/img/petal1.png" />
<img class="petal2" src="/img/petal2.png" />
<img class="petal3" src="/img/petal3.png" />
</div> </div>
<img class="petal1" src="/img/petal1.png" /> <div class="sign-in sign-in-already flexcenter" v-else>
<img class="petal2" src="/img/petal2.png" /> <img class="sign-icon" src="/img/sign-icon.png" />
<img class="petal3" src="/img/petal3.png" /> <span>已签到，明天再来</span>
</div> </div>
<div class="sign-in sign-in-already flexcenter" v-else> </template>
<img class="sign-icon" src="/img/sign-icon.png" />
<span>已签到，明天再来</span>
</div>
</div> </div>

3
component/item-bottom/item-bottom.js
View File

@@ -106,6 +106,7 @@ export const itemBottom = defineComponent({
let QRcode = ref(""); let QRcode = ref("");
const showQRcode = () => { const showQRcode = () => {
if (QRcode.value) return if (QRcode.value) return
// return
ajaxGet(`/v2/api/forum/getQrcode?token=${item.value.token}`).then((res) => { ajaxGet(`/v2/api/forum/getQrcode?token=${item.value.token}`).then((res) => {
if (res.code != 200) return; if (res.code != 200) return;
const data = res.data || {}; const data = res.data || {};
@@ -120,5 +121,5 @@ export const itemBottom = defineComponent({
like, like,
}, },
template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <div class="bottom-item share flexacenter"> <img class="icon" src="/img/share-gray.png" /> <div class="text">转发</div> <div class="share-box flexcenter"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div v-if="QRcode" class="QRcode-box flexcenter"> <img class="QRcode" :src="QRcode" /> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`, template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <div class="bottom-item share flexacenter"> <img class="icon" src="/img/share-gray.png" /> <div class="text">转发</div> <div class="share-box flexcenter"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter"> <img v-if="QRcode" class="QRcode" :src="QRcode" /> <div v-else class="QRcode flexcenter"> <img class="load" src="/img/load-icon.svg" /> </div> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
}); });

7
component/item-bottom/item-bottom.txt
View File

@@ -44,8 +44,11 @@
<img class="share-icon" src="/img/weixin-icon.png" /> <img class="share-icon" src="/img/weixin-icon.png" />
<div class="text">微信转发</div> <div class="text">微信转发</div>
<div v-if="QRcode" class="QRcode-box flexcenter"> <div class="QRcode-box flexcenter">
<img class="QRcode" :src="QRcode" /> <img v-if="QRcode" class="QRcode" :src="QRcode" />
<div v-else class="QRcode flexcenter">
<img class="load" src="/img/load-icon.svg" />
</div>
<div class="text">微信扫码</div> <div class="text">微信扫码</div>
</div> </div>
</div> </div>

2
component/latest-list/latest-list.js
View File

@@ -53,7 +53,7 @@ export const latestList = defineComponent({
let topList = ref([]); let topList = ref([]);
const topicHandpicked = () => { const topicHandpicked = () => {
ajaxGet(`/v2/api/forum/topicLists?simple=1&best=1`).then((res) => { ajaxGet(`/v2/api/forum/topicLists?simple=1&best=1&limit=15`).then((res) => {
const data = res.data; const data = res.data;
topList.value = data.data; topList.value = data.data;
nextTick(() => { nextTick(() => {

14
component/slideshow-box/slideshow-box.js
View File

@@ -17,7 +17,7 @@ export const slideshowBox = defineComponent({
onMounted(() => getTopicLatest()); onMounted(() => getTopicLatest());
let tabPitch = ref("thread"); // thread offer vote interviewexperience let tabPitch = ref(""); // thread offer vote interviewexperience
let latestList = ref({}); let latestList = ref({});
const getTopicLatest = () => { const getTopicLatest = () => {
@@ -25,8 +25,8 @@ export const slideshowBox = defineComponent({
const data = res.data || []; const data = res.data || [];
(data.vote || []).forEach((item) => { (data.vote || []).forEach((item) => {
if (!item.title) { if (!item.title) {
item.title = item.content; // item.title = item.content;
item.content = ""; // item.content = "";
} }
}); });
@@ -38,9 +38,10 @@ export const slideshowBox = defineComponent({
}); });
}; };
const tabArr = ["thread", "offer", "vote", "interviewexperience"]; const tabArr = ["offer", "vote", "interviewexperience"];
// const tabArr = ["thread", "offer", "vote", "interviewexperience"];
const tabItem = (key) => { const tabItem = (key) => {
if (key == tabPitch.value) return; if (key == tabPitch.value) return;
const boxbox = document.querySelector(`.box-box`); const boxbox = document.querySelector(`.box-box`);
@@ -62,6 +63,7 @@ export const slideshowBox = defineComponent({
// 修改全局背景状态的 // 修改全局背景状态的
let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`); let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
let targetContentHeight = targetContentNode.offsetHeight; let targetContentHeight = targetContentNode.offsetHeight;
console.log("targetContentHeight", targetContentHeight);
boxbox.style.height = targetContentHeight + 66 + "px"; boxbox.style.height = targetContentHeight + 66 + "px";
@@ -78,5 +80,5 @@ export const slideshowBox = defineComponent({
return { tabItem, tabPitch, tabPitch, latestList }; return { tabItem, tabPitch, tabPitch, latestList };
}, },
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'/details/' + item.uniqid"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'/details/' + item.uniqid"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> </div></div>`, template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <!-- <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> --> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <!-- <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'/details/' + item.uniqid"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> --> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'/details/' + item.uniqid"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display">{{ item.data.project }}</div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
}); });

8
component/slideshow-box/slideshow-box.txt
View File

@@ -1,7 +1,7 @@
<div class="box-box" :class="['box-' + tabPitch]"> <div class="box-box" :class="['box-' + tabPitch]">
<div class="slideshow-box"> <div class="slideshow-box">
<div class="tab-list flexacenter"> <div class="tab-list flexacenter">
<div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <!-- <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> -->
<div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div>
<div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div>
<div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div>
@@ -9,7 +9,7 @@
</div> </div>
<div class="slideshow-content flexflex"> <div class="slideshow-content flexflex">
<!-- 问答 --> <!-- 问答 -->
<div class="thread-side-box side-box"> <!-- <div class="thread-side-box side-box">
<div class="box"> <div class="box">
<a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'/details/' + item.uniqid"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'/details/' + item.uniqid">
<div class="question flexacenter"> <div class="question flexacenter">
@@ -27,7 +27,7 @@
<img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg"> <img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg">
</a> </a>
</div> </div>
</div> </div> -->
<!-- offer --> <!-- offer -->
<div class="offer-side-box side-box"> <div class="offer-side-box side-box">
<div class="box"> <div class="box">
@@ -73,7 +73,7 @@
<div class="box"> <div class="box">
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank">
<div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="school one-line-display">{{ item.data.schoolname }}</div>
<div class="major one-line-display"></div> <div class="major one-line-display">{{ item.data.project }}</div>
<div class="info"> <div class="info">
<img class="icon" :src="item.user.avatar" /> <img class="icon" :src="item.user.avatar" />
<span class="text">{{ item.title || item.content }} </span> <span class="text">{{ item.title || item.content }} </span>

38
css/details.css
View File

@@ -75,13 +75,12 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 2; z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
} }
#details .matter .matter-left .matter-head .operate .operate { #details .matter .matter-left .matter-head .operate .operate {
position: absolute; position: absolute;
top: 23px; top: 23px;
right: 0; right: 0;
width: 100px; width: 80px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
@@ -101,16 +100,16 @@
} }
#details .matter .matter-left .matter-head .operate .operate .item { #details .matter .matter-left .matter-head .operate .operate .item {
text-align: center; text-align: center;
font-size: 18px; font-size: 14px;
color: #333333; color: #333333;
padding: 14px 0; padding: 14px 0;
cursor: pointer; cursor: pointer;
} }
#details .matter .matter-left .matter-head .operate .operate .item:first-of-type { #details .matter .matter-left .matter-head .operate .operate .item:first-of-type {
padding-top: 24px; padding-top: 14px;
} }
#details .matter .matter-left .matter-head .operate .operate .item:last-of-type { #details .matter .matter-left .matter-head .operate .operate .item:last-of-type {
padding-bottom: 24px; padding-top: 14px;
} }
#details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) { #details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7; border-bottom: 1px dotted #d7d7d7;
@@ -257,6 +256,11 @@
height: 100px; height: 100px;
margin-bottom: 4px; margin-bottom: 4px;
} }
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .QRcode .load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .text { #details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .text {
color: #555555; color: #555555;
font-size: 14px; font-size: 14px;
@@ -310,6 +314,11 @@
#details .matter .matter-left .related .list .item .text { #details .matter .matter-left .related .list .item .text {
width: 352px; width: 352px;
} }
#details .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#details .matter .sidebar-box .adv { #details .matter .sidebar-box .adv {
width: 291px; width: 291px;
height: 220px; height: 220px;
@@ -554,6 +563,7 @@
#details .coins-area .coins-box .coins-list-area .list .item { #details .coins-area .coins-box .coins-list-area .list .item {
height: 65px; height: 65px;
padding: 0 35px; padding: 0 35px;
cursor: pointer;
} }
#details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) { #details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) {
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;
@@ -603,13 +613,13 @@
.answer-discuss .input-box { .answer-discuss .input-box {
background-color: #f6f6f6; background-color: #f6f6f6;
border-radius: 10px; border-radius: 10px;
padding-top: 11px; padding-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
.answer-discuss .input-box .top { .answer-discuss .input-box .top {
padding: 0 14px; padding: 0 20px;
position: relative; position: relative;
} }
.answer-discuss .input-box .top .input-placeholder { .answer-discuss .input-box .top .input-placeholder {
@@ -621,8 +631,8 @@
left: 14px; left: 14px;
} }
.answer-discuss .input-box .top .avatar { .answer-discuss .input-box .top .avatar {
width: 24px; width: 30px;
height: 24px; height: 30px;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
margin-right: 10px; margin-right: 10px;
@@ -633,6 +643,7 @@
outline: none; outline: none;
background-color: transparent; background-color: transparent;
min-height: 40px; min-height: 40px;
padding-top: 5px;
padding-bottom: 11px; padding-bottom: 11px;
resize: none; resize: none;
} }
@@ -678,13 +689,12 @@
cursor: pointer; cursor: pointer;
} }
.answer-discuss .input-box .bottom { .answer-discuss .input-box .bottom {
height: 52px; padding: 0 20px;
padding: 0 14px;
justify-content: flex-end; justify-content: flex-end;
} }
.answer-discuss .input-box .bottom .operate .item { .answer-discuss .input-box .bottom .operate .item {
display: inline-flex; display: inline-flex;
margin-right: 20px; margin-right: 25px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@@ -704,8 +714,8 @@
z-index: -1; z-index: -1;
} }
.answer-discuss .input-box .bottom .operate .item .icon { .answer-discuss .input-box .bottom .operate .item .icon {
width: 16px; width: 20px;
height: 16px; height: 20px;
cursor: pointer; cursor: pointer;
} }
.answer-discuss .input-box .bottom .operate .item .emoji-box { .answer-discuss .input-box .bottom .operate .item .emoji-box {

43
css/details.less
View File

@@ -83,14 +83,14 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 2; z-index: 2;
background-color: rgba(0, 0, 0, 0.1); // background-color: rgba(0, 0, 0, 0.1);
} }
.operate { .operate {
position: absolute; position: absolute;
top: 23px; top: 23px;
right: 0; right: 0;
width: 100px; width: 80px;
background-color: rgba(242, 242, 242, 1); background-color: rgba(242, 242, 242, 1);
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
@@ -111,17 +111,17 @@
.item { .item {
text-align: center; text-align: center;
font-size: 18px; font-size: 14px;
color: #333333; color: #333333;
padding: 14px 0; padding: 14px 0;
cursor: pointer; cursor: pointer;
&:first-of-type { &:first-of-type {
padding-top: 24px; padding-top: 14px;
} }
&:last-of-type { &:last-of-type {
padding-bottom: 24px; padding-top: 14px;
} }
&:not(:last-of-type) { &:not(:last-of-type) {
@@ -293,6 +293,12 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-bottom: 4px; margin-bottom: 4px;
.load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
} }
.text { .text {
@@ -366,6 +372,12 @@
} }
.sidebar-box { .sidebar-box {
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.adv { .adv {
width: 291px; width: 291px;
height: 220px; height: 220px;
@@ -647,10 +659,12 @@
.item { .item {
height: 65px; height: 65px;
padding: 0 35px; padding: 0 35px;
cursor: pointer;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;
} }
.serial { .serial {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700; font-weight: 700;
@@ -708,14 +722,14 @@
.answer-discuss .input-box { .answer-discuss .input-box {
background-color: #f6f6f6; background-color: #f6f6f6;
border-radius: 10px; border-radius: 10px;
padding-top: 11px; padding-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
.answer-discuss .input-box .top { .answer-discuss .input-box .top {
padding: 0 14px; padding: 0 20px;
position: relative; position: relative;
} }
@@ -729,8 +743,8 @@
} }
.answer-discuss .input-box .top .avatar { .answer-discuss .input-box .top .avatar {
width: 24px; width: 30px;
height: 24px; height: 30px;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
margin-right: 10px; margin-right: 10px;
@@ -742,6 +756,7 @@
outline: none; outline: none;
background-color: transparent; background-color: transparent;
min-height: 40px; min-height: 40px;
padding-top: 5px;
padding-bottom: 11px; padding-bottom: 11px;
resize: none; resize: none;
} }
@@ -794,14 +809,14 @@
} }
.answer-discuss .input-box .bottom { .answer-discuss .input-box .bottom {
height: 52px; // height: 52px;
padding: 0 14px; padding: 0 20px;
justify-content: flex-end; justify-content: flex-end;
} }
.answer-discuss .input-box .bottom .operate .item { .answer-discuss .input-box .bottom .operate .item {
display: inline-flex; display: inline-flex;
margin-right: 20px; margin-right: 25px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@@ -824,8 +839,8 @@
} }
.answer-discuss .input-box .bottom .operate .item .icon { .answer-discuss .input-box .bottom .operate .item .icon {
width: 16px; width: 20px;
height: 16px; height: 20px;
cursor: pointer; cursor: pointer;
} }

2
css/edit.css
View File

@@ -173,6 +173,8 @@
padding: 36px 36px 20px; padding: 36px 36px 20px;
white-space: break-spaces; white-space: break-spaces;
position: relative; position: relative;
max-height: 80vh;
overflow: auto;
} }
#edit .edit-container .content-input.empty:before { #edit .edit-container .content-input.empty:before {
content: "输入正文"; content: "输入正文";

2
css/edit.less
View File

@@ -193,6 +193,8 @@
padding: 36px 36px 20px; padding: 36px 36px 20px;
white-space: break-spaces; white-space: break-spaces;
position: relative; position: relative;
max-height: 80vh;
overflow: auto;
&.empty:before { &.empty:before {
content: "输入正文"; content: "输入正文";

2
css/homepage-other.css
View File

@@ -94,7 +94,7 @@
color: #555555; color: #555555;
cursor: pointer; cursor: pointer;
} }
#homepage-other .matter .card-user .btn-area .item:not(:last-of-type) { #homepage-other .matter .card-user .btn-area .item:not(:last-child) {
margin-bottom: 15px; margin-bottom: 15px;
} }
#homepage-other .matter .card-user .btn-area .item.msg { #homepage-other .matter .card-user .btn-area .item.msg {

2
css/homepage-other.less
View File

@@ -105,7 +105,7 @@
color: #555555; color: #555555;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) { &:not(:last-child) {
margin-bottom: 15px; margin-bottom: 15px;
} }

14
css/index.css
View File

@@ -73,7 +73,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 14px;
color: #7f7f7f; color: #7f7f7f;
} }
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people { #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people {
@@ -469,6 +469,9 @@
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) { #appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
margin-bottom: 14px; margin-bottom: 14px;
} }
#appIndex .matter {
align-items: flex-start;
}
#appIndex .matter .matter-content { #appIndex .matter .matter-content {
margin-right: 12px; margin-right: 12px;
} }
@@ -520,14 +523,19 @@
#appIndex .matter .matter-content .item-box { #appIndex .matter .matter-content .item-box {
margin-bottom: 12px; margin-bottom: 12px;
} }
#appIndex .matter .sidebar .adv { #appIndex .matter .sidebar.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#appIndex .matter .sidebar .ad-item {
display: block; display: block;
width: 291px; width: 291px;
height: 220px; height: 220px;
margin-bottom: 12px; margin-bottom: 12px;
cursor: pointer; cursor: pointer;
} }
#appIndex .matter .sidebar .adv .adv-icon { #appIndex .matter .sidebar .ad-item img {
width: 291px; width: 291px;
height: 220px; height: 220px;
border-radius: 10px; border-radius: 10px;

14
css/index.less
View File

@@ -84,7 +84,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 14px;
color: #7f7f7f; color: #7f7f7f;
} }
@@ -561,6 +561,8 @@
} }
.matter { .matter {
align-items: flex-start;
.matter-content { .matter-content {
margin-right: 12px; margin-right: 12px;
.forum-sections-list { .forum-sections-list {
@@ -622,13 +624,19 @@
} }
.sidebar { .sidebar {
.adv { &.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.ad-item {
display: block; display: block;
width: 291px; width: 291px;
height: 220px; height: 220px;
margin-bottom: 12px; margin-bottom: 12px;
cursor: pointer; cursor: pointer;
.adv-icon { img {
width: 291px; width: 291px;
height: 220px; height: 220px;
border-radius: 10px; border-radius: 10px;

23
css/public.css
View File

@@ -5,6 +5,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
word-break: break-word;
} }
a { a {
text-decoration: none; text-decoration: none;
@@ -167,13 +168,12 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 2; z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
} }
.item-box .item-head .operate { .item-box .item-head .operate {
position: absolute; position: absolute;
top: 23px; top: 23px;
right: 0; right: 0;
width: 100px; width: 80px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
@@ -193,16 +193,16 @@ body {
} }
.item-box .item-head .operate .item { .item-box .item-head .operate .item {
text-align: center; text-align: center;
font-size: 18px; font-size: 14px;
color: #333333; color: #333333;
padding: 14px 0; padding: 14px 0;
cursor: pointer; cursor: pointer;
} }
.item-box .item-head .operate .item:first-of-type { .item-box .item-head .operate .item:first-of-type {
padding-top: 24px; padding-top: 14px;
} }
.item-box .item-head .operate .item:last-of-type { .item-box .item-head .operate .item:last-of-type {
padding-bottom: 24px; padding-top: 14px;
} }
.item-box .item-head .operate .item:not(:last-of-type) { .item-box .item-head .operate .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7; border-bottom: 1px dotted #d7d7d7;
@@ -392,6 +392,7 @@ body {
color: #000000; color: #000000;
line-height: 36px; line-height: 36px;
margin-bottom: 7px; margin-bottom: 7px;
display: block;
} }
.item-box.item-vote .message { .item-box.item-vote .message {
font-size: 14px; font-size: 14px;
@@ -671,6 +672,11 @@ body {
height: 100px; height: 100px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode .load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text { .item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text {
color: #555555; color: #555555;
font-size: 14px; font-size: 14px;
@@ -1397,6 +1403,12 @@ body {
.offer-side-box.side-box .box { .offer-side-box.side-box .box {
width: 271px; width: 271px;
} }
.thread-side-box.side-box .box,
.offer-side-box.side-box .box,
.interviewexperience-side-box .box,
.vote-side-box.side-box .box {
border-radius: 8px;
}
.head-navigation { .head-navigation {
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -1445,6 +1457,7 @@ body {
outline: none; outline: none;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
font-size: 14px;
} }
.head-top .input-box .icon { .head-top .input-box .icon {
width: 18px; width: 18px;

27
css/public.less
View File

@@ -5,6 +5,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
word-break: break-word;
} }
a { a {
@@ -195,14 +196,14 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 2; z-index: 2;
background-color: rgba(0, 0, 0, 0.1); // background-color: rgba(0, 0, 0, 0.1);
} }
.operate { .operate {
position: absolute; position: absolute;
top: 23px; top: 23px;
right: 0; right: 0;
width: 100px; width: 80px;
background-color: rgba(242, 242, 242, 1); background-color: rgba(242, 242, 242, 1);
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
@@ -223,17 +224,17 @@ body {
.item { .item {
text-align: center; text-align: center;
font-size: 18px; font-size: 14px;
color: #333333; color: #333333;
padding: 14px 0; padding: 14px 0;
cursor: pointer; cursor: pointer;
&:first-of-type { &:first-of-type {
padding-top: 24px; padding-top: 14px;
} }
&:last-of-type { &:last-of-type {
padding-bottom: 24px; padding-top: 14px;
} }
&:not(:last-of-type) { &:not(:last-of-type) {
@@ -466,6 +467,7 @@ body {
color: #000000; color: #000000;
line-height: 36px; line-height: 36px;
margin-bottom: 7px; margin-bottom: 7px;
display: block;
} }
.message { .message {
@@ -801,6 +803,12 @@ body {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-bottom: 4px; margin-bottom: 4px;
.load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
} }
.text { .text {
@@ -1668,6 +1676,13 @@ body {
width: 271px; width: 271px;
} }
.thread-side-box.side-box .box,
.offer-side-box.side-box .box,
.interviewexperience-side-box .box,
.vote-side-box.side-box .box {
border-radius: 8px;
}
.head-navigation { .head-navigation {
margin-bottom: 20px; margin-bottom: 20px;
.icon { .icon {
@@ -1722,6 +1737,7 @@ body {
outline: none; outline: none;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
font-size: 14px;
} }
.icon { .icon {
@@ -1998,6 +2014,7 @@ td {
} }
} }
// 多个调用
@keyframes loadingRotate { @keyframes loadingRotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);

8
css/search-tag.css
View File

@@ -57,6 +57,9 @@
color: #000000; color: #000000;
margin: 0 10px; margin: 0 10px;
} }
#search-tag .matter {
align-items: flex-start;
}
#search-tag .matter .matter-content { #search-tag .matter .matter-content {
margin-right: 12px; margin-right: 12px;
} }
@@ -112,3 +115,8 @@
#search-tag .matter .sidebar-box { #search-tag .matter .sidebar-box {
width: 291px; width: 291px;
} }
#search-tag .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}

8
css/search-tag.less
View File

@@ -67,6 +67,8 @@
} }
.matter { .matter {
align-items: flex-start;
.matter-content { .matter-content {
margin-right: 12px; margin-right: 12px;
@@ -133,6 +135,12 @@
.sidebar-box { .sidebar-box {
width: 291px; width: 291px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
} }
} }
} }

8
css/search.css
View File

@@ -61,6 +61,9 @@
color: #000000; color: #000000;
margin: 0 10px; margin: 0 10px;
} }
#search .matter {
align-items: flex-start;
}
#search .matter .matter-content { #search .matter .matter-content {
margin-right: 12px; margin-right: 12px;
} }
@@ -116,3 +119,8 @@
#search .matter .sidebar-box { #search .matter .sidebar-box {
width: 291px; width: 291px;
} }
#search .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}

8
css/search.less
View File

@@ -71,6 +71,8 @@
} }
.matter { .matter {
align-items: flex-start;
.matter-content { .matter-content {
margin-right: 12px; margin-right: 12px;
@@ -137,6 +139,12 @@
.sidebar-box { .sidebar-box {
width: 291px; width: 291px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
} }
} }
} }

27
css/section.css
View File

@@ -12,6 +12,11 @@
border-radius: 10px; border-radius: 10px;
margin-right: 15px; margin-right: 15px;
} }
#sectionIndex .matter .sidebar.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#sectionIndex .matter .sidebar .title { #sectionIndex .matter .sidebar .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650; font-weight: 650;
@@ -188,6 +193,9 @@
height: 16px; height: 16px;
margin-right: 3px; margin-right: 3px;
} }
#sectionIndex .matter .matter-content .details-box {
align-items: flex-start;
}
#sectionIndex .matter .matter-content .details-box .content-box { #sectionIndex .matter .matter-content .details-box .content-box {
margin-right: 12px; margin-right: 12px;
} }
@@ -284,7 +292,7 @@
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
padding: 0 21px; padding: 0 10px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 14px; margin-bottom: 14px;
cursor: pointer; cursor: pointer;
@@ -313,30 +321,35 @@
color: #7f7f7f; color: #7f7f7f;
margin-top: 10px; margin-top: 10px;
} }
#sectionIndex .matter .matter-content .details-box .adv { #sectionIndex .matter .matter-content .details-box .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#sectionIndex .matter .matter-content .details-box .sidebar-box .adv {
display: block; display: block;
width: 291px; width: 291px;
height: 220px; height: 220px;
margin-bottom: 12px; margin-bottom: 12px;
cursor: pointer; cursor: pointer;
} }
#sectionIndex .matter .matter-content .details-box .adv .adv-icon { #sectionIndex .matter .matter-content .details-box .sidebar-box .adv .adv-icon {
width: 291px; width: 291px;
height: 220px; height: 220px;
border-radius: 10px; border-radius: 10px;
} }
#sectionIndex .matter .matter-content .details-box .side-box { #sectionIndex .matter .matter-content .details-box .sidebar-box .side-box {
padding: 17px 10px 10px; padding: 17px 10px 10px;
margin-bottom: 12px; margin-bottom: 12px;
width: 291px; width: 291px;
border-radius: 10px; border-radius: 10px;
} }
#sectionIndex .matter .matter-content .details-box .side-box.offer-side-box { #sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
} }
#sectionIndex .matter .matter-content .details-box .side-box.vote-side-box { #sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
} }
#sectionIndex .matter .matter-content .details-box .side-box.interviewexperience-side-box { #sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
} }

76
css/section.less
View File

@@ -11,6 +11,12 @@
border-radius: 10px; border-radius: 10px;
margin-right: 15px; margin-right: 15px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.title { .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650; font-weight: 650;
@@ -115,7 +121,7 @@
margin-bottom: 28px; margin-bottom: 28px;
width: fit-content; width: fit-content;
width: 100%; width: 100%;
.item { .item {
padding: 12px 0; padding: 12px 0;
position: relative; position: relative;
@@ -214,6 +220,8 @@
} }
.details-box { .details-box {
align-items: flex-start;
.content-box { .content-box {
margin-right: 12px; margin-right: 12px;
@@ -318,7 +326,7 @@
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
padding: 0 21px; padding: 0 10px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 14px; margin-bottom: 14px;
cursor: pointer; cursor: pointer;
@@ -363,39 +371,47 @@
// border-radius: 10px; // border-radius: 10px;
// } // }
.adv { .sidebar-box {
display: block; &.fixed {
width: 291px; position: fixed;
height: 220px; right: calc((100% - 1200px) / 2);
margin-bottom: 12px; bottom: 10px;
cursor: pointer; }
.adv-icon {
.adv {
display: block;
width: 291px; width: 291px;
height: 220px; height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
}
// .sidebar {
.side-box {
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px; border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
} }
// }
} }
// .sidebar {
.side-box {
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
}
// }
} }
} }
} }

5
index.html
View File

@@ -7,7 +7,9 @@
<title>论坛首页</title> <title>论坛首页</title>
<link rel="stylesheet" href="./css/public.css" /> <link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/index.css" /> <link rel="stylesheet" href="./css/index.css" />
<script src="./js/vue.global.js"></script> <script src="./js/vue.global.js"></script>
<script src="./component/bi/bi.js"></script>
<style> <style>
[v-cloak] { [v-cloak] {
display: none; display: none;
@@ -19,6 +21,9 @@
<div class="container" id="appIndex" v-cloak> <div class="container" id="appIndex" v-cloak>
<head-top></head-top> <head-top></head-top>
<div class="" @click="clickbtn()">按钮</div>
<bi-card coins="20" token="_TXzU0MGGjdPFL8RR-Qmja2gGEbUCNPUddwAdczWPJctueas3yXWMkYCvr96dc95-Wu_WCMXYd1kHBCRMdIeydneWA5hsg4_a8hkH5tGKdrxdc_OPQtzsCPybE62xK9rPRFsdPwzQI9pqQYthZYqcANTqof0CpHcMS3yUP1NIvFnJ602njRjNTY~"></bi-card>
<div class="header-content-box flexflex"> <div class="header-content-box flexflex">
<div class="header-content-left"> <div class="header-content-left">
<div class="adv-list flexacenter"> <div class="adv-list flexacenter">

7
js/index.js
View File

@@ -285,7 +285,12 @@ const appIndex = createApp({
}); });
}; };
return { interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef }; const clickbtn = () => {
console.log("点击按钮");
BiComponent.initComponent();
};
return { clickbtn, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
}, },
}); });

14
js/save.js
View File

@@ -29,6 +29,9 @@ const watchList = {
"../component/hot-tag/hot-tag.txt": "../component/hot-tag/hot-tag.js", "../component/hot-tag/hot-tag.txt": "../component/hot-tag/hot-tag.js",
// 监听 hot-search.txt，同步到 hot-search.js // 监听 hot-search.txt，同步到 hot-search.js
"../component/hot-search/hot-search.txt": "../component/hot-search/hot-search.js", "../component/hot-search/hot-search.txt": "../component/hot-search/hot-search.js",
// 监听 bi.txt，同步到 bi.js
"../component/bi/bi.txt": "../component/bi/bi.js",
// 可添加更多文件（格式：'txt路径': 'js路径'） // 可添加更多文件（格式：'txt路径': 'js路径'）
// './component/other/other.txt': './component/other/other.js', // './component/other/other.txt': './component/other/other.js',
@@ -56,12 +59,19 @@ function syncContent(txtPath, jsPath) {
// 匹配 template: `...` 结构，替换反引号内的内容 // 匹配 template: `...` 结构，替换反引号内的内容
const templateRegex = /(template:\s*)(`[^`]*`)/; const templateRegex = /(template:\s*)(`[^`]*`)/;
// 匹配 template.innerHTML = `...` 结构
const innerHTMLRegex = /(template\.innerHTML\s*=\s*)(`[^`]*`)/;
if (templateRegex.test(jsContent)) { if (templateRegex.test(jsContent)) {
jsContent = jsContent.replace(templateRegex, `$1\`${txtContent}\``); jsContent = jsContent.replace(templateRegex, `$1\`${txtContent}\``);
fs.writeFileSync(jsPath, jsContent, "utf8"); fs.writeFileSync(jsPath, jsContent, "utf8");
console.log(`✅ 同步成功：${path.basename(txtPath)} → ${path.basename(jsPath)}`); console.log(`✅ 同步成功：${path.basename(txtPath)} → ${path.basename(jsPath)} (template格式)`);
} else if (innerHTMLRegex.test(jsContent)) {
jsContent = jsContent.replace(innerHTMLRegex, `$1\`${txtContent}\``);
fs.writeFileSync(jsPath, jsContent, "utf8");
console.log(`✅ 同步成功：${path.basename(txtPath)} → ${path.basename(jsPath)} (innerHTML格式)`);
} else { } else {
console.error(`❌ 格式错误：${path.basename(jsPath)} 中未找到 template: \`...\``); console.error(`❌ 格式错误：${path.basename(jsPath)} 中未找到 template: \`...\` 或 template.innerHTML = \`...\``);
} }
} catch (err) { } catch (err) {
console.error(`❌ 同步失败：${err.message}`); console.error(`❌ 同步失败：${err.message}`);