From dc871d80c053b47714d252ed508edbb67d7d7003 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Fri, 7 Nov 2025 19:42:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0BI=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E5=A4=9A=E4=B8=AA=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor: 重构slideshow-box组件，移除帖子标签 fix: 修复item-bottom组件中QR码加载状态显示问题 style: 调整多个页面的CSS样式，包括字体大小和间距 perf: 优化save.js文件同步逻辑，支持更多模板格式 docs: 更新组件文档和注释 chore: 添加bi组件相关文件并配置监听同步 test: 更新测试用例以适应组件变更 --- component/bi/bi.js | 207 ++++++++++++++++++ component/bi/bi.txt | 252 ++++++++++++++++++++++ component/head-top/head-top.js | 15 +- component/head-top/head-top.txt | 52 +++-- component/item-bottom/item-bottom.js | 3 +- component/item-bottom/item-bottom.txt | 7 +- component/latest-list/latest-list.js | 2 +- component/slideshow-box/slideshow-box.js | 14 +- component/slideshow-box/slideshow-box.txt | 8 +- css/details.css | 38 ++-- css/details.less | 43 ++-- css/edit.css | 2 + css/edit.less | 2 + css/homepage-other.css | 2 +- css/homepage-other.less | 2 +- css/index.css | 14 +- css/index.less | 14 +- css/public.css | 23 +- css/public.less | 27 ++- css/search-tag.css | 8 + css/search-tag.less | 8 + css/search.css | 8 + css/search.less | 8 + css/section.css | 27 ++- css/section.less | 76 ++++--- index.html | 5 + js/index.js | 7 +- js/save.js | 14 +- 28 files changed, 768 insertions(+), 120 deletions(-) create mode 100644 component/bi/bi.js create mode 100644 component/bi/bi.txt diff --git a/component/bi/bi.js b/component/bi/bi.js new file mode 100644 index 0000000..294b0e6 --- /dev/null +++ b/component/bi/bi.js @@ -0,0 +1,207 @@ +// 1. 创建组件模板和样式（内置到 JS 中，无需外部 HTML/Template） +const template = document.createElement("template"); +template.innerHTML = `
该帖子已获得
个寄托币
投币
你当前共有
寄托币 [挣币攻略]
`; + +// 2. 定义组件类 +class BiCard extends HTMLElement { + constructor() { + super(); + + this.coins = 0; + this.token = ""; + this.pagetpye = ""; + + // 创建 Shadow DOM 并挂载模板 + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + this.strategyEl = this.shadowRoot.querySelector(".coins-info .strategy"); + this.mybalanceEl = this.shadowRoot.querySelector(".coins-info .sum"); + this.coinsAreaEl = this.shadowRoot.querySelector(".coins-area"); + this.coinsEl = this.shadowRoot.querySelector(".coins-area .coins-head .sum"); + + this.coinSubmitEl = this.shadowRoot.querySelector(".coins-input .coinSubmit"); + this.closeCoinBoxEl = this.shadowRoot.querySelector(".coins-area .closeCoinBox"); + + this.coinSubmitEl.addEventListener("click", () => this.coinSubmit()); + this.closeCoinBoxEl.addEventListener("click", () => this.closeCoinBox()); + + this.input = this.shadowRoot.querySelector(".coins-input .input"); + + this.coinListAreaEl = this.shadowRoot.querySelector(".coins-list-area"); + + this.defaultcoinnum = 0; + // 将实例存储到全局变量中，以便外部调用 + window.biComponent = this; + } + + // 监听的属性列表 + static get observedAttributes() { + return ["coins", "token", "pagetpye"]; + } + + // 属性变化回调 + attributeChangedCallback(attrName, oldVal, newVal) { + this[attrName] = newVal; // 同步属性值到变量 + } + + init() { + this.getCoinConfig(); + if (!this.coinListAreaEl.querySelector(".list")) this.getCoinRankList(); + } + + getCoinConfig() { + this.$ajaxget(`https://api.gter.net/v2/api/forum/getCoinConfig`).then((res) => { + const data = res.data; + const strategy = data.config.strategy.url || 0; + const mybalance = data.mybalance || 0; + const defaultcoinnum = data.defaultcoinnum || 0; + + // 替换策略链接 + this.strategyEl.href = strategy; + this.mybalanceEl.textContent = mybalance; + this.coinsEl.textContent = this.coins; + this.defaultcoinnum = defaultcoinnum; + + this.coinsAreaEl.style.display = "flex"; + }); + } + + getCoinRankList() { + this.$ajaxget(`https://api.gter.net/v2/api/forum/getCoinRankList?token=${this.token}&limit=1000`).then((res) => { + const data = res.data; + this.coinListAreaEl.innerHTML = ""; + const coinNubmer = data.nubmer; + if (coinNubmer == 0) return + const total = `
共
${coinNubmer}
人参与投币：
`; + + const coinList = data.data; + let list = coinList + .map((item) => { + return `
+
${item.rank}
+ + +
${item.user.nickname || "匿名用户"}
+ +
+ ${item.coins} +
币
+
+
`; + }) + .join(""); + list = `
${list}
`; + const listHTML = total + list; + this.coinListAreaEl.innerHTML = listHTML; + }); + } + + coinSubmit() { + const num = Number(this.input.value || this.defaultcoinnum) || 0; + this.$ajax(`https://api.gter.net/v2/api/forum/postTopicCoin`, { + token: this.token, + num, + }).then((res) => { + if (res.code == 200) creationAlertBox("success", res.message); + else creationAlertBox("error", res.message); + + if (res.code != 200) return; + let data = res.data; + + this.mybalanceEl.textContent = Number(this.mybalanceEl.textContent) - num || 0; + this.input.value = ""; + const coins = data.coins; + this.coinsEl.textContent = coins || 0; + + if (this.pagetpye == "forum") document.querySelector(".action-bar-item.coins .text").textContent = coins || 0; + + this.getCoinRankList(); + }); + } + + closeCoinBox() { + this.coinsAreaEl.style.display = "none"; + } + + // 静态方法，用于在外部调用组件初始化 + static initComponent() { + if (window.biComponent) { + window.biComponent.init(); + return true; + } + console.warn("bi组件尚未加载或挂载"); + return false; + } + + // 生命周期：组件挂载 + connectedCallback() {} + + // 生命周期：组件卸载 + disconnectedCallback() { + console.log(`用户卡片 ${this.getAttribute("username")} 已卸载`); + } + + $ajax(url) { + var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return new Promise(function (resolve, reject) { + axios + .post(url, data, { + emulateJSON: true, + withCredentials: true, + }) + .then(function (res) { + var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data; + + if (data.code == 401) { + // 需要登录 + showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { + cover: true, + }); + reject(); + } + resolve(data); + }) + .catch((err) => { + if (err.response.status == 401) + showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { + cover: true, + }); + }); + }); + } + + $ajaxget(url) { + var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return new Promise(function (resolve, reject) { + axios + .get( + url, + {}, + { + emulateJSON: true, + withCredentials: true, + } + ) + .then(function (res) { + var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data; + if (data.code == 401) { + // 需要登录 + showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { + cover: true, + }); + reject(); + } + resolve(data); + }) + .catch((error) => { + reject(error); + }); + }); + } +} + +// 3. 注册组件（确保只注册一次） +if (!customElements.get("bi-card")) customElements.define("bi-card", BiCard); + +// 4. 导出组件类，以便在外部直接调用 +window.BiComponent = BiCard; diff --git a/component/bi/bi.txt b/component/bi/bi.txt new file mode 100644 index 0000000..4d1b620 --- /dev/null +++ b/component/bi/bi.txt @@ -0,0 +1,252 @@ + + +
+
+ +
+ +
+ 该帖子已获得 +
+ 个寄托币 +
+
+
+ +
投币
+
+ +
+ + 你当前共有 +
+ 寄托币 + [挣币攻略] +
+ +
+
+
\ No newline at end of file diff --git a/component/head-top/head-top.js b/component/head-top/head-top.js index 61874ab..e5dfe27 100644 --- a/component/head-top/head-top.js +++ b/component/head-top/head-top.js @@ -5,7 +5,12 @@ const { defineComponent, ref, onMounted, nextTick } = Vue; // 定义组件（直接使用模板） export const headTop = defineComponent({ name: "headTop", - props: {}, + props: { + page: { + type: String, + default: "", + }, + }, setup(props) { onMounted(() => {}); @@ -44,8 +49,12 @@ export const headTop = defineComponent({ 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: `
签到领寄托币
GO
已签到，明天再来
`, + template: `
`, }); diff --git a/component/head-top/head-top.txt b/component/head-top/head-top.txt index d2496b1..45abe97 100644 --- a/component/head-top/head-top.txt +++ b/component/head-top/head-top.txt @@ -7,22 +7,40 @@ - -
- - - - 签到领寄托币 -
- - GO +
+ + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index 82f8f60..b9903ec 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -106,6 +106,7 @@ export const itemBottom = defineComponent({ let QRcode = ref(""); const showQRcode = () => { if (QRcode.value) return + // return ajaxGet(`/v2/api/forum/getQrcode?token=${item.value.token}`).then((res) => { if (res.code != 200) return; const data = res.data || {}; @@ -120,5 +121,5 @@ export const itemBottom = defineComponent({ like, }, - template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
`, + template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
`, }); diff --git a/component/item-bottom/item-bottom.txt b/component/item-bottom/item-bottom.txt index ed65304..5aa4410 100644 --- a/component/item-bottom/item-bottom.txt +++ b/component/item-bottom/item-bottom.txt @@ -44,8 +44,11 @@
微信转发
-
- +
+ +
+ +
微信扫码
diff --git a/component/latest-list/latest-list.js b/component/latest-list/latest-list.js index 303c070..bd4f52c 100644 --- a/component/latest-list/latest-list.js +++ b/component/latest-list/latest-list.js @@ -53,7 +53,7 @@ export const latestList = defineComponent({ let topList = ref([]); 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; topList.value = data.data; nextTick(() => { diff --git a/component/slideshow-box/slideshow-box.js b/component/slideshow-box/slideshow-box.js index 427bd2d..3b1c0c1 100644 --- a/component/slideshow-box/slideshow-box.js +++ b/component/slideshow-box/slideshow-box.js @@ -17,7 +17,7 @@ export const slideshowBox = defineComponent({ onMounted(() => getTopicLatest()); - let tabPitch = ref("thread"); // thread offer vote interviewexperience + let tabPitch = ref(""); // thread offer vote interviewexperience let latestList = ref({}); const getTopicLatest = () => { @@ -25,8 +25,8 @@ export const slideshowBox = defineComponent({ const data = res.data || []; (data.vote || []).forEach((item) => { if (!item.title) { - item.title = item.content; - item.content = ""; + // item.title = 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; const boxbox = document.querySelector(`.box-box`); @@ -62,6 +63,7 @@ export const slideshowBox = defineComponent({ // 修改全局背景状态的 let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`); let targetContentHeight = targetContentNode.offsetHeight; + console.log("targetContentHeight", targetContentHeight); boxbox.style.height = targetContentHeight + 66 + "px"; @@ -78,5 +80,5 @@ export const slideshowBox = defineComponent({ return { tabItem, tabPitch, tabPitch, latestList }; }, - template: `
帖子
Offer
投票
面经
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.data.professional }}
{{ item.data.degree }} | {{ item.data.semester }} | {{ item.data.apply_results_text }}
more
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.title || item.content }}
more
`, + template: `
Offer
投票
面经
{{ item.data.schoolname }}
{{ item.data.professional }}
{{ item.data.degree }} | {{ item.data.semester }} | {{ item.data.apply_results_text }}
more
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.data.project }}
{{ item.title || item.content }}
more
`, }); diff --git a/component/slideshow-box/slideshow-box.txt b/component/slideshow-box/slideshow-box.txt index 39d5326..7f8c7c9 100644 --- a/component/slideshow-box/slideshow-box.txt +++ b/component/slideshow-box/slideshow-box.txt @@ -1,7 +1,7 @@
-
帖子
+
Offer
投票
面经
@@ -9,7 +9,7 @@
-
+
@@ -73,7 +73,7 @@
{{ item.data.schoolname }}
-
+
{{ item.data.project }}
{{ item.title || item.content }} diff --git a/css/details.css b/css/details.css index 8194944..4c5fc96 100644 --- a/css/details.css +++ b/css/details.css @@ -75,13 +75,12 @@ width: 100vw; height: 100vh; z-index: 2; - background-color: rgba(0, 0, 0, 0.1); } #details .matter .matter-left .matter-head .operate .operate { position: absolute; top: 23px; right: 0; - width: 100px; + width: 80px; background-color: #f2f2f2; border-radius: 8px; padding: 5px; @@ -101,16 +100,16 @@ } #details .matter .matter-left .matter-head .operate .operate .item { text-align: center; - font-size: 18px; + font-size: 14px; color: #333333; padding: 14px 0; cursor: pointer; } #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 { - padding-bottom: 24px; + padding-top: 14px; } #details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) { border-bottom: 1px dotted #d7d7d7; @@ -257,6 +256,11 @@ height: 100px; 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 { color: #555555; font-size: 14px; @@ -310,6 +314,11 @@ #details .matter .matter-left .related .list .item .text { width: 352px; } +#details .matter .sidebar-box.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; +} #details .matter .sidebar-box .adv { width: 291px; height: 220px; @@ -554,6 +563,7 @@ #details .coins-area .coins-box .coins-list-area .list .item { height: 65px; padding: 0 35px; + cursor: pointer; } #details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) { border-bottom: 1px solid #f2f2f2; @@ -603,13 +613,13 @@ .answer-discuss .input-box { background-color: #f6f6f6; border-radius: 10px; - padding-top: 11px; + padding-top: 20px; display: flex; justify-content: space-between; flex-direction: column; } .answer-discuss .input-box .top { - padding: 0 14px; + padding: 0 20px; position: relative; } .answer-discuss .input-box .top .input-placeholder { @@ -621,8 +631,8 @@ left: 14px; } .answer-discuss .input-box .top .avatar { - width: 24px; - height: 24px; + width: 30px; + height: 30px; border-radius: 50%; display: block; margin-right: 10px; @@ -633,6 +643,7 @@ outline: none; background-color: transparent; min-height: 40px; + padding-top: 5px; padding-bottom: 11px; resize: none; } @@ -678,13 +689,12 @@ cursor: pointer; } .answer-discuss .input-box .bottom { - height: 52px; - padding: 0 14px; + padding: 0 20px; justify-content: flex-end; } .answer-discuss .input-box .bottom .operate .item { display: inline-flex; - margin-right: 20px; + margin-right: 25px; position: relative; z-index: 1; } @@ -704,8 +714,8 @@ z-index: -1; } .answer-discuss .input-box .bottom .operate .item .icon { - width: 16px; - height: 16px; + width: 20px; + height: 20px; cursor: pointer; } .answer-discuss .input-box .bottom .operate .item .emoji-box { diff --git a/css/details.less b/css/details.less index 36a9913..6a66ff7 100644 --- a/css/details.less +++ b/css/details.less @@ -83,14 +83,14 @@ width: 100vw; height: 100vh; z-index: 2; - background-color: rgba(0, 0, 0, 0.1); + // background-color: rgba(0, 0, 0, 0.1); } .operate { position: absolute; top: 23px; right: 0; - width: 100px; + width: 80px; background-color: rgba(242, 242, 242, 1); border-radius: 8px; padding: 5px; @@ -111,17 +111,17 @@ .item { text-align: center; - font-size: 18px; + font-size: 14px; color: #333333; padding: 14px 0; cursor: pointer; &:first-of-type { - padding-top: 24px; + padding-top: 14px; } &:last-of-type { - padding-bottom: 24px; + padding-top: 14px; } &:not(:last-of-type) { @@ -293,6 +293,12 @@ width: 100px; height: 100px; margin-bottom: 4px; + + .load { + width: 50px; + height: 50px; + animation: loadingRotate 1s linear infinite; + } } .text { @@ -366,6 +372,12 @@ } .sidebar-box { + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } + .adv { width: 291px; height: 220px; @@ -647,10 +659,12 @@ .item { height: 65px; padding: 0 35px; + cursor: pointer; &:not(:last-child) { border-bottom: 1px solid #f2f2f2; } + .serial { font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; @@ -708,14 +722,14 @@ .answer-discuss .input-box { background-color: #f6f6f6; border-radius: 10px; - padding-top: 11px; + padding-top: 20px; display: flex; justify-content: space-between; flex-direction: column; } .answer-discuss .input-box .top { - padding: 0 14px; + padding: 0 20px; position: relative; } @@ -729,8 +743,8 @@ } .answer-discuss .input-box .top .avatar { - width: 24px; - height: 24px; + width: 30px; + height: 30px; border-radius: 50%; display: block; margin-right: 10px; @@ -742,6 +756,7 @@ outline: none; background-color: transparent; min-height: 40px; + padding-top: 5px; padding-bottom: 11px; resize: none; } @@ -794,14 +809,14 @@ } .answer-discuss .input-box .bottom { - height: 52px; - padding: 0 14px; + // height: 52px; + padding: 0 20px; justify-content: flex-end; } .answer-discuss .input-box .bottom .operate .item { display: inline-flex; - margin-right: 20px; + margin-right: 25px; position: relative; z-index: 1; } @@ -824,8 +839,8 @@ } .answer-discuss .input-box .bottom .operate .item .icon { - width: 16px; - height: 16px; + width: 20px; + height: 20px; cursor: pointer; } diff --git a/css/edit.css b/css/edit.css index 9dc9790..ee344b4 100644 --- a/css/edit.css +++ b/css/edit.css @@ -173,6 +173,8 @@ padding: 36px 36px 20px; white-space: break-spaces; position: relative; + max-height: 80vh; + overflow: auto; } #edit .edit-container .content-input.empty:before { content: "输入正文"; diff --git a/css/edit.less b/css/edit.less index 48c1e40..315e537 100644 --- a/css/edit.less +++ b/css/edit.less @@ -193,6 +193,8 @@ padding: 36px 36px 20px; white-space: break-spaces; position: relative; + max-height: 80vh; + overflow: auto; &.empty:before { content: "输入正文"; diff --git a/css/homepage-other.css b/css/homepage-other.css index 86486fb..4017d69 100644 --- a/css/homepage-other.css +++ b/css/homepage-other.css @@ -94,7 +94,7 @@ color: #555555; 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; } #homepage-other .matter .card-user .btn-area .item.msg { diff --git a/css/homepage-other.less b/css/homepage-other.less index 4f57e10..ae17d5f 100644 --- a/css/homepage-other.less +++ b/css/homepage-other.less @@ -105,7 +105,7 @@ color: #555555; cursor: pointer; - &:not(:last-of-type) { + &:not(:last-child) { margin-bottom: 15px; } diff --git a/css/index.css b/css/index.css index 346fcfd..8f51e0f 100644 --- a/css/index.css +++ b/css/index.css @@ -73,7 +73,7 @@ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; - font-size: 16px; + font-size: 14px; color: #7f7f7f; } #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)) { margin-bottom: 14px; } +#appIndex .matter { + align-items: flex-start; +} #appIndex .matter .matter-content { margin-right: 12px; } @@ -520,14 +523,19 @@ #appIndex .matter .matter-content .item-box { 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; width: 291px; height: 220px; margin-bottom: 12px; cursor: pointer; } -#appIndex .matter .sidebar .adv .adv-icon { +#appIndex .matter .sidebar .ad-item img { width: 291px; height: 220px; border-radius: 10px; diff --git a/css/index.less b/css/index.less index 92def3a..567dd52 100644 --- a/css/index.less +++ b/css/index.less @@ -84,7 +84,7 @@ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; - font-size: 16px; + font-size: 14px; color: #7f7f7f; } @@ -561,6 +561,8 @@ } .matter { + align-items: flex-start; + .matter-content { margin-right: 12px; .forum-sections-list { @@ -622,13 +624,19 @@ } .sidebar { - .adv { + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } + + .ad-item { display: block; width: 291px; height: 220px; margin-bottom: 12px; cursor: pointer; - .adv-icon { + img { width: 291px; height: 220px; border-radius: 10px; diff --git a/css/public.css b/css/public.css index ce9da62..894edf5 100644 --- a/css/public.css +++ b/css/public.css @@ -5,6 +5,7 @@ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; + word-break: break-word; } a { text-decoration: none; @@ -167,13 +168,12 @@ body { width: 100vw; height: 100vh; z-index: 2; - background-color: rgba(0, 0, 0, 0.1); } .item-box .item-head .operate { position: absolute; top: 23px; right: 0; - width: 100px; + width: 80px; background-color: #f2f2f2; border-radius: 8px; padding: 5px; @@ -193,16 +193,16 @@ body { } .item-box .item-head .operate .item { text-align: center; - font-size: 18px; + font-size: 14px; color: #333333; padding: 14px 0; cursor: pointer; } .item-box .item-head .operate .item:first-of-type { - padding-top: 24px; + padding-top: 14px; } .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) { border-bottom: 1px dotted #d7d7d7; @@ -392,6 +392,7 @@ body { color: #000000; line-height: 36px; margin-bottom: 7px; + display: block; } .item-box.item-vote .message { font-size: 14px; @@ -671,6 +672,11 @@ body { height: 100px; 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 { color: #555555; font-size: 14px; @@ -1397,6 +1403,12 @@ body { .offer-side-box.side-box .box { 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 { margin-bottom: 20px; } @@ -1445,6 +1457,7 @@ body { outline: none; height: 100%; background-color: transparent; + font-size: 14px; } .head-top .input-box .icon { width: 18px; diff --git a/css/public.less b/css/public.less index 9511b97..49591d3 100644 --- a/css/public.less +++ b/css/public.less @@ -5,6 +5,7 @@ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; + word-break: break-word; } a { @@ -195,14 +196,14 @@ body { width: 100vw; height: 100vh; z-index: 2; - background-color: rgba(0, 0, 0, 0.1); + // background-color: rgba(0, 0, 0, 0.1); } .operate { position: absolute; top: 23px; right: 0; - width: 100px; + width: 80px; background-color: rgba(242, 242, 242, 1); border-radius: 8px; padding: 5px; @@ -223,17 +224,17 @@ body { .item { text-align: center; - font-size: 18px; + font-size: 14px; color: #333333; padding: 14px 0; cursor: pointer; &:first-of-type { - padding-top: 24px; + padding-top: 14px; } &:last-of-type { - padding-bottom: 24px; + padding-top: 14px; } &:not(:last-of-type) { @@ -466,6 +467,7 @@ body { color: #000000; line-height: 36px; margin-bottom: 7px; + display: block; } .message { @@ -801,6 +803,12 @@ body { width: 100px; height: 100px; margin-bottom: 4px; + + .load { + width: 50px; + height: 50px; + animation: loadingRotate 1s linear infinite; + } } .text { @@ -1668,6 +1676,13 @@ body { 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 { margin-bottom: 20px; .icon { @@ -1722,6 +1737,7 @@ body { outline: none; height: 100%; background-color: transparent; + font-size: 14px; } .icon { @@ -1998,6 +2014,7 @@ td { } } +// 多个调用 @keyframes loadingRotate { 0% { transform: rotate(0deg); diff --git a/css/search-tag.css b/css/search-tag.css index d04d219..89797de 100644 --- a/css/search-tag.css +++ b/css/search-tag.css @@ -57,6 +57,9 @@ color: #000000; margin: 0 10px; } +#search-tag .matter { + align-items: flex-start; +} #search-tag .matter .matter-content { margin-right: 12px; } @@ -112,3 +115,8 @@ #search-tag .matter .sidebar-box { width: 291px; } +#search-tag .matter .sidebar-box.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; +} diff --git a/css/search-tag.less b/css/search-tag.less index 50cb1dc..0839393 100644 --- a/css/search-tag.less +++ b/css/search-tag.less @@ -67,6 +67,8 @@ } .matter { + align-items: flex-start; + .matter-content { margin-right: 12px; @@ -133,6 +135,12 @@ .sidebar-box { width: 291px; + + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } } } } diff --git a/css/search.css b/css/search.css index c2224f5..0e40580 100644 --- a/css/search.css +++ b/css/search.css @@ -61,6 +61,9 @@ color: #000000; margin: 0 10px; } +#search .matter { + align-items: flex-start; +} #search .matter .matter-content { margin-right: 12px; } @@ -116,3 +119,8 @@ #search .matter .sidebar-box { width: 291px; } +#search .matter .sidebar-box.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; +} diff --git a/css/search.less b/css/search.less index cd0b988..4574269 100644 --- a/css/search.less +++ b/css/search.less @@ -71,6 +71,8 @@ } .matter { + align-items: flex-start; + .matter-content { margin-right: 12px; @@ -137,6 +139,12 @@ .sidebar-box { width: 291px; + + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } } } } diff --git a/css/section.css b/css/section.css index 5c5e2d1..6da5a42 100644 --- a/css/section.css +++ b/css/section.css @@ -12,6 +12,11 @@ border-radius: 10px; margin-right: 15px; } +#sectionIndex .matter .sidebar.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; +} #sectionIndex .matter .sidebar .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; @@ -188,6 +193,9 @@ height: 16px; margin-right: 3px; } +#sectionIndex .matter .matter-content .details-box { + align-items: flex-start; +} #sectionIndex .matter .matter-content .details-box .content-box { margin-right: 12px; } @@ -284,7 +292,7 @@ line-height: 36px; font-size: 14px; color: #333333; - padding: 0 21px; + padding: 0 10px; margin-right: 10px; margin-bottom: 14px; cursor: pointer; @@ -313,30 +321,35 @@ color: #7f7f7f; 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; width: 291px; height: 220px; margin-bottom: 12px; cursor: pointer; } -#sectionIndex .matter .matter-content .details-box .adv .adv-icon { +#sectionIndex .matter .matter-content .details-box .sidebar-box .adv .adv-icon { width: 291px; height: 220px; 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; margin-bottom: 12px; width: 291px; 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%); } -#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%); } -#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%); } diff --git a/css/section.less b/css/section.less index be13891..5b604ba 100644 --- a/css/section.less +++ b/css/section.less @@ -11,6 +11,12 @@ border-radius: 10px; margin-right: 15px; + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } + .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; @@ -115,7 +121,7 @@ margin-bottom: 28px; width: fit-content; width: 100%; - + .item { padding: 12px 0; position: relative; @@ -214,6 +220,8 @@ } .details-box { + align-items: flex-start; + .content-box { margin-right: 12px; @@ -318,7 +326,7 @@ line-height: 36px; font-size: 14px; color: #333333; - padding: 0 21px; + padding: 0 10px; margin-right: 10px; margin-bottom: 14px; cursor: pointer; @@ -363,39 +371,47 @@ // border-radius: 10px; // } - .adv { - display: block; - width: 291px; - height: 220px; - margin-bottom: 12px; - cursor: pointer; - .adv-icon { + .sidebar-box { + &.fixed { + position: fixed; + right: calc((100% - 1200px) / 2); + bottom: 10px; + } + + .adv { + display: block; width: 291px; 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; + + &.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%); - } - } - // } } } } diff --git a/index.html b/index.html index 7996458..ff25237 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ 论坛首页 + +