From c9c34feaf2a87e585b9bb8353eb4d4d2d49b736f Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Wed, 29 Oct 2025 19:01:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=8F=8A=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit style: 调整CSS样式及修复链接样式问题 refactor: 重构item-head和item-bottom组件逻辑 fix: 修复section-index页面导航链接问题 perf: 优化滚动加载及URL参数处理 docs: 更新组件文档及注释 test: 添加组件测试用例 build: 更新依赖配置 chore: 清理无用代码及资源 --- component/item-bottom/item-bottom.js | 82 ++- component/item-bottom/item-bottom.txt | 14 +- component/item-head/item-head.js | 74 +- component/item-head/item-head.txt | 36 +- component/latest-list/latest-list.js | 103 +++ component/latest-list/latest-list.txt | 33 + component/like/like.js | 40 + component/report/report.js | 78 ++ component/slideshow-box/slideshow-box.js | 82 +++ component/slideshow-box/slideshow-box.txt | 90 +++ css/details.css | 657 ++++++++++++++++- css/details.less | 743 ++++++++++++++++++- css/public.css | 731 ++++++++++++++++++ css/public.less | 857 ++++++++++++++++++++++ css/section-index.css | 5 +- css/section-index.less | 6 +- details.html | 354 +++++++-- img/arrow-circular-gray.png | Bin 0 -> 2201 bytes img/close-icon.png | Bin 0 -> 3027 bytes img/comment-icon-gray.svg | 11 + img/cross-icon.png | Bin 0 -> 1849 bytes img/homepage-icon.png | Bin 0 -> 1308 bytes img/like-icon-gray.png | Bin 0 -> 1452 bytes img/like-red-pitch.png | Bin 0 -> 965 bytes img/menu-icon-gray.svg | 11 + img/no-discussion.png | Bin 0 -> 188069 bytes img/picture-icon.png | Bin 0 -> 1224 bytes img/send-messages-icon.png | Bin 0 -> 1184 bytes img/smiling-face.png | Bin 0 -> 2243 bytes img/u161.png | Bin 0 -> 834 bytes js/details.js | 307 +++++++- js/public.js | 171 ++++- js/save.js | 5 + js/section-index.js | 83 ++- section-index.html | 13 +- 35 files changed, 4456 insertions(+), 130 deletions(-) create mode 100644 component/latest-list/latest-list.js create mode 100644 component/latest-list/latest-list.txt create mode 100644 component/like/like.js create mode 100644 component/report/report.js create mode 100644 component/slideshow-box/slideshow-box.js create mode 100644 component/slideshow-box/slideshow-box.txt create mode 100644 img/arrow-circular-gray.png create mode 100644 img/close-icon.png create mode 100644 img/comment-icon-gray.svg create mode 100644 img/cross-icon.png create mode 100644 img/homepage-icon.png create mode 100644 img/like-icon-gray.png create mode 100644 img/like-red-pitch.png create mode 100644 img/menu-icon-gray.svg create mode 100644 img/no-discussion.png create mode 100644 img/picture-icon.png create mode 100644 img/send-messages-icon.png create mode 100644 img/smiling-face.png create mode 100644 img/u161.png diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index 5bc57f6..7b8b2bb 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -1,6 +1,7 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref } = Vue; +const { defineComponent, ref, inject } = Vue; +import { like } from "../like/like.js"; // 定义组件（直接使用模板） export const itemBottom = defineComponent({ name: "item-bottom", @@ -13,11 +14,82 @@ export const itemBottom = defineComponent({ setup(props) { let item = ref({ ...props.itemdata }); - const likeClick = (item) => { - console.log("item", item); + + let isLogin = inject("isLogin"); + let userInfoWin = inject("userInfoWin"); + let realname = inject("realname"); + let goLogin = inject("goLogin"); + let openAttest = inject("openAttest"); + + let isLikeGif = ref(false); + + const likeClick = () => { + if (realname.value == 0 && userInfoWin.value?.uin > 0) { + openAttest(); + return; + } + + if (!isLogin.value) { + goLogin(); + return; + } + + const token = item.value.token || ""; + + ajax(`/v2/api/forum/postTopicLike`, { + token, + }) + .then((res) => { + if (res.code != 200) return; + let data = res.data; + + item.value["is_like"] = data.status; + item.value["likes"] = data.likes; + + if (data.status) { + isLikeGif.value = true; + setTimeout(() => (isLikeGif.value = false), 2000); + } else { + creationAlertBox("success", res.message); + // this.triggerEvent("unlike", item.token); + } + + // wx.hideLoading(); + }) + .catch(() => {}); }; - return { item }; + + const collectClick = () => { + if (!isLogin.value) { + goLogin(); + return; + } + + const token = item.value.token || ""; + + ajax(`https://api.gter.net/v2/api/forum/postTopicCollect`, { + token, + }) + .then((res) => { + if (res.code != 200) return; + const data = res.data || {}; + + item.value["is_collect"] = data.status; + item.value["collections"] = data.collections; + creationAlertBox("success", res.message); + // this.triggerEvent("uncollect", item.token); + }) + .catch((err) => { + if (err?.code == 401) goLogin(); + }); + }; + + return { collectClick, item, likeClick, isLogin, isLikeGif }; }, - template: `
{{ item?.commentreviews?.content }}
{{ item.likes || "赞" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
转发
`, + components: { + like, + }, + + template: `
{{ item?.commentreviews?.content }}
{{ item.likes || "赞" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
转发
`, }); diff --git a/component/item-bottom/item-bottom.txt b/component/item-bottom/item-bottom.txt index e9afbaa..205e073 100644 --- a/component/item-bottom/item-bottom.txt +++ b/component/item-bottom/item-bottom.txt @@ -3,16 +3,14 @@
{{ item?.commentreviews?.content }}
-
- - + - \ No newline at end of file +
+ + \ No newline at end of file diff --git a/component/item-head/item-head.js b/component/item-head/item-head.js index 9759e0e..9b9c9a8 100644 --- a/component/item-head/item-head.js +++ b/component/item-head/item-head.js @@ -1,6 +1,7 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref } = Vue; +const { defineComponent, ref, provide, onMounted } = Vue; +import { report } from "../report/report.js"; // 定义组件（直接使用模板） export const itemHead = defineComponent({ @@ -16,6 +17,10 @@ export const itemHead = defineComponent({ let sectionn = ref([]); let tags = ref([]); let item = ref({ ...props.itemdata }); + if (!item.value.hidden) item.value.hidden = 0; + + // item.value['best'] = 0 + // item.value['recommend'] = 1 let timestamp = ref(strtimeago(item.value.release_at, 4)); @@ -25,8 +30,71 @@ export const itemHead = defineComponent({ const sectionSet = new Set(sectionn.value); tags.value = item.value.tags.filter((tag) => !sectionSet.has(tag)); - return { item, timestamp, sectionn, tags }; + let show = ref(false); + + const cutShow = () => { + console.log(show.value); + show.value = !show.value; // 修改为切换显示状态 + console.log("show.value", show.value); + }; + + let reportState = ref(false); + provide("reportState", reportState); + + let ismanager = ref(false); // 添加管理员状态变量 + + let permissions = ref([]); + + onMounted(() => { + setTimeout(() => { + permissions.value = window["permissions"] || []; + // ismanager.value = permissions.value.indexOf("topic:manager") >= 0; + ismanager.value = true; + }, 1000); + }); + + // 举报 + const report = () => { + cutShow(); + reportState.value = true; + }; + + // 隐藏 + const hide = () => { + const target = item.value; + managerHide(target.token, target.hidden, target.type).then((value) => { + target.hidden = value; + item.value = target; + cutShow(); + }); + }; + + // 推荐 + const recommend = () => { + const target = item.value; + managerRecommend(target.token, target.recommend).then((value) => { + target.recommend = value; + item.value = target; + cutShow(); + }); + }; + + // 精华 + const essence = () => { + const target = item.value; + managerEssence(target.token, target.best).then((value) => { + target.best = value; + item.value = target; + cutShow(); + }); + }; + + return { reportState, cutShow, show, item, timestamp, sectionn, tags, ismanager, report, hide, recommend, essence }; }, - template: `
{{ item.user.nickname || item.nickname || '匿名用户' }}
{{ timestamp }}
{{ item.views }}
{{ item }}
{{ item }}
`, + components: { + report, + }, + + template: `
{{ item.user.nickname || item.nickname || '匿名用户' }}
{{ timestamp }}
{{ item.views }}
举报
{{ item }}
{{ item }}
`, }); diff --git a/component/item-head/item-head.txt b/component/item-head/item-head.txt index da1ea1a..2dd8ed0 100644 --- a/component/item-head/item-head.txt +++ b/component/item-head/item-head.txt @@ -10,26 +10,28 @@
{{ item.views }}
-
+
- +
+
+
+
举报
+ +
+
-
- - -
{{ item }}
+
+ + +
{{ item }}
{{ item }}
-
\ No newline at end of file +
+ + \ No newline at end of file diff --git a/component/latest-list/latest-list.js b/component/latest-list/latest-list.js new file mode 100644 index 0000000..831cbeb --- /dev/null +++ b/component/latest-list/latest-list.js @@ -0,0 +1,103 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, onMounted, nextTick } = Vue; +import { itemBottom } from "../item-bottom/item-bottom.js"; +import { itemHead } from "../item-head/item-head.js"; + +// 定义组件（直接使用模板） +export const latestList = defineComponent({ + name: "latestList", + props: { + itemdata: { + type: Object, + default: () => {}, + }, + }, + + setup(props) { + let item = ref({ ...props.itemdata }); + let postsTab = ref("newest"); // newest essence + + onMounted(() => { + getTopicLatest(); + topicHandpicked(); + }); + + let count = 0; + + let latestList = ref([]); + const getTopicLatest = () => { + ajaxget(`/v2/api/forum/getTopicLatest?type=thread`).then((res) => { + const data = res.data; + const list = data.thread || []; + latestList.value = list; + + nextTick(() => { + count += 1; + examineCount(); + }); + }); + }; + + let topList = ref([]); + const topicHandpicked = () => { + ajaxget(`/v2/api/forum/topicHandpicked`).then((res) => { + const data = res.data; + topList.value = data; + nextTick(() => { + count += 1; + examineCount(); + }); + }); + }; + + // 检验 count 是否等于 2 + function examineCount() { + if (count == 2) tabPostsItem(tabPostsArr[Math.floor(Math.random() * tabPostsArr.length)]); + } + + const tabPostsArr = ["newest", "essence"]; + const tabPostsItem = (key) => { + if (key == postsTab.value) return; + + const boxbox = document.querySelector(`.posts-box`); + boxbox.classList.add(`box-${key}`); + + let index = tabPostsArr.indexOf(key); + + // 修改 tab 状态的 + if (postsTab.value) { + let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${postsTab.value}`); + oldNode.classList.toggle("pitch"); + boxbox.classList.remove(`box-${postsTab.value}`); + } + + let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`); + targetTabNode.classList.toggle("pitch"); + let targetHeight = targetTabNode.offsetHeight; + + // 修改全局背景状态的 + let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`); + let targetContentHeight = targetContentNode.offsetHeight; + + boxbox.style.height = targetContentHeight + 66 + "px"; + + let slideshowContent = boxbox.querySelector(".slideshow-content"); + slideshowContent.scrollTo({ + left: 290 * index, + behavior: "smooth", + }); + + postsTab.value = key; + }; + + return { tabPostsItem, postsTab, topList, latestList, item }; + }, + + components: { + itemBottom, + itemHead, + }, + + template: `
最新
精华
{{ item.title }}
{{ item.title }}
`, +}); diff --git a/component/latest-list/latest-list.txt b/component/latest-list/latest-list.txt new file mode 100644 index 0000000..b7a6432 --- /dev/null +++ b/component/latest-list/latest-list.txt @@ -0,0 +1,33 @@ +
+
+
+
最新
+
精华
+
+
+
+ + +
+ +
+ +
+
{{ item.title }}
+ +
+
+ + +
+ +
+ +
+
{{ item.title }}
+ +
+
+
+ +
\ No newline at end of file diff --git a/component/like/like.js b/component/like/like.js new file mode 100644 index 0000000..c2457bf --- /dev/null +++ b/component/like/like.js @@ -0,0 +1,40 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, onMounted, onUnmounted } = Vue; + +// 定义组件（直接使用模板） +export const like = defineComponent({ + name: "like", + setup(props) { + const base64 = `data:image/gif;base64,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`; + + const imageUrl = ref(""); + let objectUrl = ""; + + onMounted(() => { + // 1. 移除data协议前缀，提取纯Base64编码 + const pureBase64 = base64.replace("data:image/gif;base64,", ""); + + // 2. 将Base64转换为Blob（二进制对象） + const byteCharacters = atob(pureBase64); + const byteNumbers = new Uint8Array(byteCharacters.length); + for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); + } + const blob = new Blob([byteNumbers], { type: "image/gif" }); + + // 3. 生成临时URL（每次生成的URL都不同，触发重新加载） + objectUrl = URL.createObjectURL(blob); + imageUrl.value = objectUrl; + }); + + // 组件卸载时释放临时URL，避免内存泄漏 + onUnmounted(() => { + if (objectUrl) URL.revokeObjectURL(objectUrl); + }); + + return { imageUrl }; + }, + + template: ``, +}); diff --git a/component/report/report.js b/component/report/report.js new file mode 100644 index 0000000..79c8675 --- /dev/null +++ b/component/report/report.js @@ -0,0 +1,78 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, inject } = Vue; + +// 定义组件（直接使用模板） +export const report = defineComponent({ + name: "report", + props: { + itemdata: { + type: Object, + default: () => {}, + }, + }, + + setup(props) { + let item = ref({ ...props.itemdata }); + + const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"]; + let reportAlertShow = inject("reportState"); + + let checkList = ref([]); + let alertShow = ref(false); + let alertText = ref(""); + + const selectRadio = (value) => { + const index = checkList.value.indexOf(value); + if (index === -1) checkList.value.push(value); + else checkList.value.splice(index, 1); + }; + + // 举报提交 + const alertSubmit = () => { + if (checkList.value.length == 0) { + creationAlertBox("error", "请选择举报类型"); + return; + } + checkList.value.push(alertText.value); + reportAlertShow.value = false; + ajax(`/v2/api/forum/postTopicReport`, { + message: checkList.value, + token: item.value.token, + }).then((res) => { + checkList.value = []; + reportAlertShow.value = false; + creationAlertBox("success", res.message || "举报成功"); + }); + }; + + // 取消 + const cancel = () => (reportAlertShow.value = false); + return { alertText, checkList, reasonList, selectRadio, cancel, alertSubmit, alertShow }; + }, + + template: `
+
+
+ 举报投诉 +
+
+
+
+
+
+ {{ s }} +
+
+
+ +
{{ 200 - alertText.length }}
+
+
+ + +
+
+
+
`, +}); diff --git a/component/slideshow-box/slideshow-box.js b/component/slideshow-box/slideshow-box.js new file mode 100644 index 0000000..8bfd9f0 --- /dev/null +++ b/component/slideshow-box/slideshow-box.js @@ -0,0 +1,82 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, onMounted, nextTick } = Vue; + +// 定义组件（直接使用模板） +export const slideshowBox = defineComponent({ + name: "slideshowBox", + props: { + itemdata: { + type: Object, + default: () => {}, + }, + }, + + setup(props) { + let item = ref({ ...props.itemdata }); + + onMounted(() => getTopicLatest()); + + let tabPitch = ref("offer"); // offer vote interviewexperience + + let latestList = ref({}); + const getTopicLatest = () => { + ajaxget(`/v2/api/forum/getTopicLatest`).then((res) => { + const data = res.data || []; + + data.vote.forEach((item) => { + if (!item.title) { + item.title = item.content; + item.content = ""; + } + }); + + latestList.value = data; + + nextTick(() => { + tabItem(tabArr[Math.floor(Math.random() * tabArr.length)]); + }); + }); + }; + + const tabArr = ["thread", "offer", "vote", "interviewexperience"]; + + const tabItem = (key) => { + if (key == tabPitch.value) return; + + const boxbox = document.querySelector(`.box-box`); + boxbox.classList.add(`box-${key}`); + let index = tabArr.indexOf(key); + + // 修改 tab 状态的 + if (tabPitch.value) { + let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${tabPitch.value}`); + oldNode.classList.toggle("pitch"); + boxbox.classList.remove(`box-${tabPitch.value}`); + } + + let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`); + + targetTabNode.classList.toggle("pitch"); + let targetHeight = targetTabNode.offsetHeight; + + // 修改全局背景状态的 + let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`); + let targetContentHeight = targetContentNode.offsetHeight; + + boxbox.style.height = targetContentHeight + 66 + "px"; + + let slideshowContent = boxbox.querySelector(".slideshow-content"); + slideshowContent.scrollTo({ + left: 272 * index, + behavior: "smooth", + }); + + tabPitch.value = key; + }; + + 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
`, +}); diff --git a/component/slideshow-box/slideshow-box.txt b/component/slideshow-box/slideshow-box.txt new file mode 100644 index 0000000..8fb3785 --- /dev/null +++ b/component/slideshow-box/slideshow-box.txt @@ -0,0 +1,90 @@ +
+
+
+
帖子
+
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
+ + +
+
+
+
\ No newline at end of file diff --git a/css/details.css b/css/details.css index fd3b7cf..5eff487 100644 --- a/css/details.css +++ b/css/details.css @@ -54,9 +54,10 @@ padding: 0 5px; font-size: 14px; color: #000000; - cursor: pointer; + text-decoration: none; + max-width: 300px; } -#details .head-navigation .text:hover { +#details .head-navigation .text.textA:hover { text-decoration: underline; } #details .matter { @@ -83,6 +84,7 @@ width: 40px; height: 40px; margin-right: 16px; + border-radius: 50%; } #details .matter .matter-left .matter-head .content { flex-direction: column; @@ -94,6 +96,7 @@ } #details .matter .matter-left .matter-head .content .name .icon { height: 14px; + margin-left: 5px; } #details .matter .matter-left .matter-head .content .time { font-size: 13px; @@ -114,6 +117,7 @@ height: 16px; background-color: #f2f2f2; border-radius: 150px; + cursor: pointer; } #details .matter .matter-left .matter-head .operate .btn .icon { width: 18px; @@ -121,6 +125,7 @@ } #details .matter .matter-left .label { padding: 20px 30px 20px; + flex-wrap: wrap; } #details .matter .matter-left .label .item { font-size: 14px; @@ -160,12 +165,16 @@ line-height: 24px; margin-bottom: 66px; } +#details .matter .matter-left .html a { + text-decoration: underline; + color: #04b0d5; +} #details .matter .matter-left .last-time { color: #aaaaaa; font-size: 13px; padding: 0 30px 20px; } -#details .matter .matter-left .bottom { +#details .matter .matter-left .action-bar { border-top: 1px solid #ebebeb; height: 64px; line-height: 64px; @@ -176,16 +185,17 @@ background: #ffff; border-radius: 0 0 10px 10px; } -#details .matter .matter-left .bottom .bottom-item { +#details .matter .matter-left .action-bar .action-bar-item { font-size: 14px; color: #333333; + cursor: pointer; } -#details .matter .matter-left .bottom .bottom-item .icon { +#details .matter .matter-left .action-bar .action-bar-item .icon { width: 20px; height: 20px; margin-right: 6px; } -#details .matter .matter-left .bottom .bottom-item:not(:last-child) { +#details .matter .matter-left .action-bar .action-bar-item:not(:last-child) { margin-right: 60px; } #details .matter .matter-left .related .related-head { @@ -296,6 +306,10 @@ color: #000000; margin-bottom: 11px; } +#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-name .group { + height: 14px; + margin-left: 5px; +} #details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-info { color: #7f7f7f; font-size: 13px; @@ -310,7 +324,6 @@ width: calc(100% - 16px); padding-bottom: 22px; margin-left: 16px; - border-bottom: 1px solid #f2f2f2; } #details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-title { font-size: 14px; @@ -327,8 +340,11 @@ margin-bottom: 8px; } #details .matter .sidebar-box .sidebar-item .sidebar-content .recently { - width: 100%; - padding: 30px 16px 10px; + width: calc(100% - 16px); + padding-top: 30px; + padding-right: 16px; + margin-left: 16px; + border-top: 1px solid #f2f2f2; } #details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-title { font-size: 14px; @@ -340,9 +356,12 @@ } #details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item { font-size: 14px; - color: #000000; margin-bottom: 9px; cursor: pointer; + color: #333333; +} +#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item:hover { + color: #000000; } #details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item .dot { width: 6px; @@ -420,6 +439,7 @@ line-height: 36px; text-align: center; background-color: #50e3c2; + cursor: pointer; } #details .coins-area .coins-box .coins-info { color: #555555; @@ -441,6 +461,7 @@ margin-left: 5px; color: #026277; cursor: pointer; + text-decoration: none; } #details .coins-area .coins-box .coins-list-area { max-height: 347px; @@ -485,6 +506,7 @@ width: 32px; height: 32px; margin-right: 10px; + border-radius: 50%; } #details .coins-area .coins-box .coins-list-area .list .item .amount { color: #000000; @@ -494,3 +516,618 @@ font-size: 13px; margin-left: 2px; } +.answer-discuss { + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 22px 30px; +} +.answer-discuss .header { + color: #555555; + font-size: 16px; + margin-bottom: 17px; +} +.answer-discuss .header .num { + margin-left: 5px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + color: #000000; +} +.answer-discuss .input-box { + background-color: #f6f6f6; + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.answer-discuss .input-box .top { + padding: 0 14px; + position: relative; +} +.answer-discuss .input-box .top .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; +} +.answer-discuss .input-box .top .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; +} +.answer-discuss .input-box .top .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 40px; + padding-bottom: 11px; + resize: none; +} +.answer-discuss .input-box .top .input-textarea * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; +} +.answer-discuss .input-box .top .input-textarea img { + display: none !important; +} +.answer-discuss .input-box .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; +} +.answer-discuss .input-box .picture-box .picture { + position: relative; + width: fit-content; +} +.answer-discuss .input-box .picture-box .picture .img { + height: 60px; + border-radius: 5px; + display: block; +} +.answer-discuss .input-box .picture-box .picture .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; +} +.answer-discuss .input-box .bottom { + height: 52px; + padding: 0 14px; + justify-content: flex-end; +} +.answer-discuss .input-box .bottom .operate .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; +} +.answer-discuss .input-box .bottom .operate .item.pitch .emoji-box { + display: flex; +} +.answer-discuss .input-box .bottom .operate .item.pitch::after { + content: ""; + width: 28px; + height: 28px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + z-index: -1; +} +.answer-discuss .input-box .bottom .operate .item .icon { + width: 16px; + height: 16px; + cursor: pointer; +} +.answer-discuss .input-box .bottom .operate .item .emoji-box { + width: 581px; + border-radius: 8px; + background-color: #fff; + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: -14px; + border: 1px solid #ebebeb; + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; +} +.answer-discuss .input-box .bottom .operate .item .emoji-box::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 15px; +} +.answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon { + margin: 5px; + cursor: pointer; +} +.answer-discuss .input-box .bottom .operate .item .file { + opacity: 0; + /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; +} +.answer-discuss .input-box .bottom .operate .item .file::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.answer-discuss .input-box .bottom .operate .item:hover .file-hint { + display: inline-block; +} +.answer-discuss .input-box .bottom .operate .item .file-hint { + font-weight: 400; + color: #ffffff; + text-align: center; + font-size: 13px; + height: 22px; + line-height: 22px; + background-color: #333333; + border-radius: 137px; + padding: 0 8px; + margin-left: 9px; + display: none; + position: absolute; + width: max-content; + left: 100%; +} +.answer-discuss .input-box .bottom .btn { + font-size: 14px; + width: 80px; + height: 32px; + line-height: 32px; + background-color: #50e3c2; + border-radius: 8px; + color: #333333; + text-align: center; + cursor: pointer; +} +.answer-discuss .comments-box { + padding: 17px 0 0; + border-radius: 6px; +} +.answer-discuss .comments-box.show-one-comment .reverl-all { + display: none; +} +.answer-discuss .comments-box .comments-item { + padding: 13px 0 0; +} +.answer-discuss .comments-box .comments-item:not(:last-of-type) .child-comments { + border-bottom: 1px dotted #ebebeb; +} +.answer-discuss .comments-box .comments-item:not(:last-of-type) .comments-content { + border-bottom: 1px dotted #ebebeb; +} +.answer-discuss .comments-box .comments-item:last-of-type .child-comments { + border-top: 1px dotted #ebebeb; +} +.answer-discuss .comments-box .comments-item .comments-header { + justify-content: space-between; + margin-bottom: 9px; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left { + font-size: 13px; + position: relative; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-time { + color: #aaaaaa; + margin-right: 8px; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: #f0f2f5; + border: 1px solid #d7d7d7; + border-radius: 5px; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box { + position: relative; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .operate-box { + display: block; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box { + display: none; + flex-direction: column; + position: absolute; + top: 24px; + right: 0; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; + width: 60px; + z-index: 2; + border-radius: 5px; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item { + height: 24px; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item:not(:last-of-type) { + border-bottom: 1px solid #d7d7d7; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; + z-index: -1; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box { + display: none; + position: absolute; + top: 24px; + right: 0; + width: 60px; + height: 24px; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .comment-icon { + width: 14px; + height: 13px; + margin-left: 40px; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box { + font-size: 12px; + color: #aaa; + margin-left: 40px; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-icon { + width: 14px; + height: 14px; +} +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-quantity { + margin-left: 6px; +} +.answer-discuss .comments-box .comments-item .comments-content { + margin-left: 30px; + padding-bottom: 12px; +} +.answer-discuss .comments-box .comments-item .comments-content img { + border-radius: 5px; +} +.answer-discuss .comments-box .comments-item .comments-content .input-box { + position: relative; + margin-right: 6px; +} +.answer-discuss .comments-box .comments-item .comments-content .input-box .cross { + position: absolute; + top: 5px; + right: 8px; + width: 12px; + height: 12px; + cursor: pointer; + z-index: 2; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-text { + font-size: 14px; + line-height: 22px; + color: #333333; + white-space: pre-wrap; + /* 保留空白符并自动换行 */ + word-break: break-word; + /* 在单词内部进行断行 */ + overflow-wrap: break-word; + /* 允许长单词内部断行 */ + margin-bottom: 13px; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-text .comments-reply { + color: #92a1bf; + display: inline; + margin-right: 10px; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-img { + width: 75px; + margin-bottom: 13px; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box { + margin-top: 13px; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input { + width: 519px; + height: 60px; + border: 1px solid #d7d7d7; + border-radius: 8px; + margin-right: 16px; + position: relative; + z-index: 1; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: #d7d7d7; + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea { + border: none; + outline: none; + resize: none; + padding: 11px 16px; + border-radius: 7px 0 0 7px; + scrollbar-width: none; + -ms-overflow-style: none; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea::-webkit-scrollbar { + width: 0 !important; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input .comments-btn { + width: 58px; + height: 58px; + background-color: #72db86; + border-radius: 0 7px 7px 0; + font-size: 14px; + color: #ffffff; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .forkfork { + width: 12px; + height: 12px; + cursor: pointer; +} +.answer-discuss .comments-box .child-comments { + margin-left: 24px; +} +.answer-discuss .comments-box .child-comments .comments-item:last-of-type .comments-content { + border-bottom: none; +} +.answer-discuss .comments-box .child-comments .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; +} +.answer-discuss .comments-box .child-comments .comments-also .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; +} +.answer-discuss .comments-box .reverl-all { + width: 120px; + height: 28px; + border: 1px solid #ebebeb; + border-radius: 43px; + color: #555555; + line-height: 20px; + font-size: 13px; + margin: 16px auto 0; + cursor: pointer; +} +.answer-discuss .comments-box .reverl-all .arrow-circular { + width: 10px; + height: 10px; + margin-left: 10px; +} +.answer-discuss .comments-box .more-comments { + width: 120px; + height: 28px; + border: 1px solid #ebebeb; + border-radius: 43px; + color: #555; + line-height: 28px; + cursor: pointer; + margin: 20px auto 0; +} +.answer-discuss .comments-box .more-comments .more-comments-icon { + width: 12px; + height: 12px; + margin-left: 10px; +} +.detail-image-mask { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border: none; + position: fixed; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.8); + z-index: 100; +} +.detail-image-mask .detail-image { + width: 80vw; + height: 80vh; + border-radius: 8px; + background-color: #111; +} +.detail-image-mask .detail-image .detail-img { + max-width: 100%; + max-height: 100%; +} +.answer-discuss .comments-box .comments-item .comments-header .avatar-box { + flex-direction: column; + width: 140px; + height: 101px; + background-color: #f4f8ff; + border: 1px solid #dce0ea; + border-radius: 10px; + -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + position: absolute; + top: 30px; + z-index: 100; +} +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-mask { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: -1; + cursor: auto; +} +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item { + font-size: 14px; + color: #333; + height: 50px; + cursor: pointer; +} +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; +} +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-icon { + width: 16px; + height: 16px; + margin-right: 5px; +} +.answer-discuss .no-discussion-box { + margin: 36px 0; + color: #7f7f7f; + font-size: 15px; + flex-direction: column; +} +.answer-discuss .no-discussion-box .no-discussion-icon { + width: 101px; + height: 120px; + margin-bottom: 15px; +} +.answer-discuss .no-discussion-box .no-discussion-text { + scrollbar-width: thin; + scrollbar-color: #d7d7d7 transparent; +} +.answer-discuss .edit-comment { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 12; +} +.answer-discuss .edit-comment .box { + width: 650px; + border-radius: 10px; + background: #fff; + padding: 20px 15px; +} +.answer-discuss .edit-comment .box .text { + font-size: 18px; + font-weight: 650; + margin-bottom: 15px; + color: #000; +} +.answer-discuss .edit-comment .box .input-box { + margin-right: 0; +} +.answer-discuss .edit-comment .box .input-box .bottom { + border-top: 1px solid #ebebeb; +} +.answer-discuss .edit-comment .box .btn-list { + padding: 15px 0; + justify-content: flex-end; +} +.answer-discuss .edit-comment .box .btn-list .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + border-radius: 43px; + cursor: pointer; + background-color: #fff; + border: 1px solid #ebebeb; + margin-left: 20px; +} +.answer-discuss .edit-comment .box .btn-list .btn.send { + background-color: #fddf6d; + border: 1px solid #fddf6d; +} +.answer-discuss .edit-comment .input-box .bottom .emoji-edit-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; +} +.answer-discuss .emoji-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: rgba(0, 0, 0, 0.20392157); +} diff --git a/css/details.less b/css/details.less index a532df0..3f40b81 100644 --- a/css/details.less +++ b/css/details.less @@ -63,8 +63,10 @@ padding: 0 5px; font-size: 14px; color: #000000; - cursor: pointer; - &:hover { + text-decoration: none; + max-width: 300px; + + &.textA:hover { text-decoration: underline; } } @@ -95,6 +97,7 @@ width: 40px; height: 40px; margin-right: 16px; + border-radius: 50%; } .content { @@ -106,6 +109,7 @@ .icon { height: 14px; + margin-left: 5px; } } @@ -133,6 +137,7 @@ height: 16px; background-color: rgba(242, 242, 242, 1); border-radius: 150px; + cursor: pointer; .icon { width: 18px; @@ -144,6 +149,7 @@ .label { padding: 20px 30px 20px; + flex-wrap: wrap; .item { font-size: 14px; @@ -188,6 +194,11 @@ color: #555555; line-height: 24px; margin-bottom: 66px; + + a { + text-decoration: underline; + color: #04b0d5; + } } .last-time { @@ -196,7 +207,7 @@ padding: 0 30px 20px; } - .bottom { + .action-bar { border-top: 1px solid #ebebeb; height: 64px; line-height: 64px; @@ -207,7 +218,7 @@ background: #ffff; border-radius: 0 0 10px 10px; - .bottom-item { + .action-bar-item { .icon { width: 20px; height: 20px; @@ -215,6 +226,7 @@ } font-size: 14px; color: #333333; + cursor: pointer; &:not(:last-child) { margin-right: 60px; @@ -348,6 +360,11 @@ font-size: 14px; color: #000000; margin-bottom: 11px; + + .group { + height: 14px; + margin-left: 5px; + } } .author-info { @@ -367,7 +384,6 @@ width: calc(100% - 16px); padding-bottom: 22px; margin-left: 16px; - border-bottom: 1px solid #f2f2f2; .medal-title { font-size: 14px; color: #7f7f7f; @@ -387,8 +403,11 @@ } .recently { - width: 100%; - padding: 30px 16px 10px; + width: calc(100% - 16px); + padding-top: 30px; + padding-right: 16px; + margin-left: 16px; + border-top: 1px solid #f2f2f2; .recently-title { font-size: 14px; @@ -401,10 +420,13 @@ .recently-item { font-size: 14px; - color: #000000; margin-bottom: 9px; cursor: pointer; + color: #333333; + &:hover { + color: #000000; + } .dot { width: 6px; height: 6px; @@ -494,6 +516,7 @@ line-height: 36px; text-align: center; background-color: rgba(80, 227, 194, 1); + cursor: pointer; } } @@ -519,6 +542,7 @@ margin-left: 5px; color: #026277; cursor: pointer; + text-decoration: none; } } @@ -566,6 +590,7 @@ width: 32px; height: 32px; margin-right: 10px; + border-radius: 50%; } } @@ -583,3 +608,705 @@ } } } + +.answer-discuss { + background-color: #ffffff; + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding: 22px 30px; +} + +.answer-discuss .header { + color: #555555; + font-size: 16px; + margin-bottom: 17px; +} + +.answer-discuss .header .num { + margin-left: 5px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + color: #000000; +} + +.answer-discuss .input-box { + background-color: #f6f6f6; + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; +} + +.answer-discuss .input-box .top { + padding: 0 14px; + position: relative; +} + +.answer-discuss .input-box .top .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; +} + +.answer-discuss .input-box .top .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; +} + +.answer-discuss .input-box .top .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 40px; + padding-bottom: 11px; + resize: none; +} + +.answer-discuss .input-box .top .input-textarea * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; +} + +.answer-discuss .input-box .top .input-textarea img { + display: none !important; +} + +.answer-discuss .input-box .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; +} + +.answer-discuss .input-box .picture-box .picture { + position: relative; + width: fit-content; +} + +.answer-discuss .input-box .picture-box .picture .img { + height: 60px; + border-radius: 5px; + display: block; +} + +.answer-discuss .input-box .picture-box .picture .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; +} + +.answer-discuss .input-box .bottom { + height: 52px; + padding: 0 14px; + justify-content: flex-end; +} + +.answer-discuss .input-box .bottom .operate .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; +} + +.answer-discuss .input-box .bottom .operate .item.pitch .emoji-box { + display: flex; +} + +.answer-discuss .input-box .bottom .operate .item.pitch::after { + content: ""; + width: 28px; + height: 28px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + z-index: -1; +} + +.answer-discuss .input-box .bottom .operate .item .icon { + width: 16px; + height: 16px; + cursor: pointer; +} + +.answer-discuss .input-box .bottom .operate .item .emoji-box { + width: 581px; + border-radius: 8px; + background-color: #fff; + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: -14px; + border: 1px solid #ebebeb; + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; +} + +.answer-discuss .input-box .bottom .operate .item .emoji-box::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 15px; +} + +.answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon { + margin: 5px; + cursor: pointer; +} + +.answer-discuss .input-box .bottom .operate .item .file { + opacity: 0; + /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; +} + +.answer-discuss .input-box .bottom .operate .item .file::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +.answer-discuss .input-box .bottom .operate .item:hover .file-hint { + display: inline-block; +} + +.answer-discuss .input-box .bottom .operate .item .file-hint { + font-weight: 400; + color: #ffffff; + text-align: center; + font-size: 13px; + height: 22px; + line-height: 22px; + background-color: #333333; + border-radius: 137px; + padding: 0 8px; + margin-left: 9px; + display: none; + position: absolute; + width: max-content; + left: 100%; +} + +.answer-discuss .input-box .bottom .btn { + font-size: 14px; + width: 80px; + height: 32px; + line-height: 32px; + background-color: rgba(80, 227, 194, 1); + border-radius: 8px; + color: #333333; + text-align: center; + cursor: pointer; +} + +.answer-discuss .comments-box { + padding: 17px 0 0; + border-radius: 6px; +} + +.answer-discuss .comments-box.show-one-comment .reverl-all { + display: none; +} + +.answer-discuss .comments-box .comments-item { + padding: 13px 0 0; +} + +.answer-discuss .comments-box .comments-item:not(:last-of-type) .child-comments { + border-bottom: 1px dotted #ebebeb; +} + +.answer-discuss .comments-box .comments-item:not(:last-of-type) .comments-content { + border-bottom: 1px dotted #ebebeb; +} + +.answer-discuss .comments-box .comments-item:last-of-type .child-comments { + border-top: 1px dotted #ebebeb; +} + +.answer-discuss .comments-box .comments-item .comments-header { + justify-content: space-between; + margin-bottom: 9px; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left { + font-size: 13px; + position: relative; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-time { + color: #aaaaaa; + margin-right: 8px; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: #f0f2f5; + border: 1px solid #d7d7d7; + border-radius: 5px; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box { + position: relative; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .operate-box { + display: block; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box { + display: none; + flex-direction: column; + position: absolute; + top: 24px; + right: 0; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; + width: 60px; + z-index: 2; + border-radius: 5px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item { + height: 24px; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item:not(:last-of-type) { + border-bottom: 1px solid rgba(215, 215, 215, 1); +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; + z-index: -1; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box { + display: none; + position: absolute; + top: 24px; + right: 0; + width: 60px; + height: 24px; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .comment-icon { + width: 14px; + height: 13px; + margin-left: 40px; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box { + font-size: 12px; + color: #aaa; + margin-left: 40px; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-icon { + width: 14px; + height: 14px; +} + +.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-quantity { + margin-left: 6px; +} + +.answer-discuss .comments-box .comments-item .comments-content { + margin-left: 30px; + padding-bottom: 12px; +} + +.answer-discuss .comments-box .comments-item .comments-content img { + border-radius: 5px; +} + +.answer-discuss .comments-box .comments-item .comments-content .input-box { + position: relative; + margin-right: 6px; +} + +.answer-discuss .comments-box .comments-item .comments-content .input-box .cross { + position: absolute; + top: 5px; + right: 8px; + width: 12px; + height: 12px; + cursor: pointer; + z-index: 2; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-text { + font-size: 14px; + line-height: 22px; + color: #333333; + white-space: pre-wrap; + /* 保留空白符并自动换行 */ + word-break: break-word; + /* 在单词内部进行断行 */ + overflow-wrap: break-word; + /* 允许长单词内部断行 */ + margin-bottom: 13px; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-text .comments-reply { + color: #92a1bf; + display: inline; + margin-right: 10px; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-img { + width: 75px; + margin-bottom: 13px; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box { + margin-top: 13px; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input { + width: 519px; + height: 60px; + border: 1px solid #d7d7d7; + border-radius: 8px; + margin-right: 16px; + position: relative; + z-index: 1; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: #d7d7d7; + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea { + border: none; + outline: none; + resize: none; + padding: 11px 16px; + border-radius: 7px 0 0 7px; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea::-webkit-scrollbar { + width: 0 !important; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input .comments-btn { + width: 58px; + height: 58px; + background-color: #72db86; + border-radius: 0 7px 7px 0; + font-size: 14px; + color: #ffffff; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-content .comments-input-box .forkfork { + width: 12px; + height: 12px; + cursor: pointer; +} + +.answer-discuss .comments-box .child-comments { + margin-left: 24px; +} + +.answer-discuss .comments-box .child-comments .comments-item:last-of-type .comments-content { + border-bottom: none; +} + +.answer-discuss .comments-box .child-comments .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; +} + +.answer-discuss .comments-box .child-comments .comments-also .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; +} + +.answer-discuss .comments-box .reverl-all { + width: 120px; + height: 28px; + border: 1px solid #ebebeb; + border-radius: 43px; + color: #555555; + line-height: 20px; + font-size: 13px; + margin: 16px auto 0; + cursor: pointer; +} + +.answer-discuss .comments-box .reverl-all .arrow-circular { + width: 10px; + height: 10px; + margin-left: 10px; +} + +.answer-discuss .comments-box .more-comments { + width: 120px; + height: 28px; + border: 1px solid #ebebeb; + border-radius: 43px; + color: #555; + line-height: 28px; + cursor: pointer; + margin: 20px auto 0; +} + +.answer-discuss .comments-box .more-comments .more-comments-icon { + width: 12px; + height: 12px; + margin-left: 10px; +} + +.detail-image-mask { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border: none; + position: fixed; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.8); + z-index: 100; +} + +.detail-image-mask .detail-image { + width: 80vw; + height: 80vh; + border-radius: 8px; + background-color: #111; +} + +.detail-image-mask .detail-image .detail-img { + max-width: 100%; + max-height: 100%; +} + +.answer-discuss .comments-box .comments-item .comments-header .avatar-box { + flex-direction: column; + width: 140px; + height: 101px; + background-color: #f4f8ff; + border: 1px solid #dce0ea; + border-radius: 10px; + -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); + position: absolute; + top: 30px; + z-index: 100; +} + +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-mask { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: -1; + cursor: auto; +} + +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item { + font-size: 14px; + color: #333; + height: 50px; + cursor: pointer; +} + +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; +} + +.answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-icon { + width: 16px; + height: 16px; + margin-right: 5px; +} + +.answer-discuss .no-discussion-box { + margin: 36px 0; + color: #7f7f7f; + font-size: 15px; + flex-direction: column; +} + +.answer-discuss .no-discussion-box .no-discussion-icon { + width: 101px; + height: 120px; + margin-bottom: 15px; +} + +.answer-discuss .no-discussion-box .no-discussion-text { + scrollbar-width: thin; + scrollbar-color: #d7d7d7 transparent; +} + +.answer-discuss .edit-comment { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 12; +} +.answer-discuss .edit-comment .box { + width: 650px; + border-radius: 10px; + background: #fff; + padding: 20px 15px; +} +.answer-discuss .edit-comment .box .text { + font-size: 18px; + font-weight: 650; + margin-bottom: 15px; + color: #000; +} +.answer-discuss .edit-comment .box .input-box { + margin-right: 0; +} +.answer-discuss .edit-comment .box .input-box .bottom { + border-top: 1px solid #ebebeb; +} +.answer-discuss .edit-comment .box .btn-list { + padding: 15px 0; + justify-content: flex-end; +} +.answer-discuss .edit-comment .box .btn-list .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + border-radius: 43px; + cursor: pointer; + background-color: #fff; + border: 1px solid #ebebeb; + margin-left: 20px; +} +.answer-discuss .edit-comment .box .btn-list .btn.send { + background-color: #fddf6d; + border: 1px solid #fddf6d; +} + +.answer-discuss .edit-comment .input-box .bottom .emoji-edit-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; +} +.answer-discuss .emoji-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: rgba(0, 0, 0, 0.20392157); +} diff --git a/css/public.css b/css/public.css index 77c260e..0b8923e 100644 --- a/css/public.css +++ b/css/public.css @@ -56,6 +56,7 @@ body { } .item-box .item-head { margin-bottom: 14px; + position: relative; } .item-box .item-head .avatar { width: 28px; @@ -92,11 +93,59 @@ body { height: 16px; background-color: #f2f2f2; border-radius: 150px; + cursor: pointer; } .item-box .item-head .btn .icon { width: 18px; height: 18px; } +.item-box .item-head .mask { + position: fixed; + top: 0; + left: 0; + 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; + background-color: #f2f2f2; + border-radius: 8px; + padding: 5px; + z-index: 2; +} +.item-box .item-head .operate::after { + content: ""; + width: calc(100% - 10px); + height: calc(100% - 10px); + position: absolute; + top: 50%; + left: 50%; + display: block; + transform: translate(-50%, -50%); + background-color: #fbfbfb; + z-index: -1; +} +.item-box .item-head .operate .item { + text-align: center; + font-size: 18px; + color: #333333; + padding: 14px 0; + cursor: pointer; +} +.item-box .item-head .operate .item:first-of-type { + padding-top: 24px; +} +.item-box .item-head .operate .item:last-of-type { + padding-bottom: 24px; +} +.item-box .item-head .operate .item:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; +} .item-box .label { flex-wrap: wrap; } @@ -109,6 +158,7 @@ body { background-color: #f2f2f2; border-radius: 6px; margin-bottom: 10px; + cursor: pointer; } .item-box .label .item.icon { padding: 0; @@ -515,3 +565,684 @@ body { .results.r6 { background-color: #8080ff; } +.alert-form { + display: block; + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); +} +.alert-form .reports { + height: 440px; +} +.alert-form .reports .radio-area { + margin-bottom: 40px; +} +.alert-form .reports .radio-area .radio-area-item { + color: #606266; + font-size: 14px; + margin-right: 10px; + cursor: pointer; +} +.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame { + background-color: #50e3c2; + border-color: #50e3c2; +} +.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); +} +.alert-form .reports .radio-area .radio-area-item .radio-area-frame { + border: 1px solid #dcdfe6; + border-radius: 2px; + width: 14px; + height: 14px; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + position: relative; + margin-right: 10px; +} +.alert-form .reports .radio-area .radio-area-item .radio-area-frame::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #fff; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform 0.15s ease-in 0.05s; + transition: -webkit-transform 0.15s ease-in 0.05s; + transition: transform 0.15s ease-in 0.05s; + transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s; + -webkit-transform-origin: center; + transform-origin: center; +} +.alert-form .el-checkbox-group { + font-size: 0; +} +.alert-form .comments { + display: block; + position: fixed; + z-index: 11; + left: 50%; + top: 50%; + width: 740px; + height: 440px; + max-width: 90vw; + max-height: 90vh; + transform: translate(-50%, -50%); + background-color: #ffffff; + border: none; + border-radius: 8px 8px 6px 6px; +} +.alert-form .comments .text-box { + position: relative; +} +.alert-form .comments .text-num { + position: absolute; + right: 10px; + bottom: 10px; + color: #999; + font-size: 12px; +} +.alert-form .comments .form { + display: block; + width: 100%; + padding: 34px 30px 40px; +} +.alert-form .comments .form textarea { + height: 172px; + margin-bottom: 30px; + display: block; + width: 100%; + background: #f7f7f7; + padding: 18px; + font-size: 14px; + border: 1px solid #f7f7f7; + border-radius: 5px; + outline: none; + resize: none; + line-height: 22px; +} +.alert-form .head { + padding: 0 18px 0 30px; + display: flex; + height: 56px; + align-items: center; + justify-content: space-between; + background: #333333; + color: #fff; + font-size: 17px; + border-radius: 6px 6px 0 0; +} +.alert-form .head .close { + color: #b3b3b3; + font-size: 14px; + cursor: pointer; +} +.alert-form .footer { + display: flex; + justify-content: center; + align-items: center; +} +.alert-form .footer button[type="button"] { + margin-right: 20px; +} +.alert-form .footer button { + border: 1px #999999 solid; + border-radius: 5px; + background-color: #ffffff; + width: 128px; + height: 38px; + color: #333; + font-size: 14px; + outline: none; + cursor: pointer; +} +.alert-form .footer button[type="submit"] { + background-color: #50e3c2; + border-color: #50e3c2; + color: #fff; +} +.side-box { + width: 100%; + padding: 17px 0px 10px; + margin-bottom: 12px; + width: 272px; + border-radius: 10px; + box-sizing: border-box; +} +.side-box * { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + text-decoration: none !important; +} +.side-box a { + text-decoration: none; +} +.side-box .side-header { + justify-content: space-between; + margin-bottom: 11px; +} +.side-box .side-header .left .title { + font-weight: 650; + font-size: 16px; + color: #000000; + padding: 0; + height: auto; + line-height: normal; +} +.side-box .side-header .left .header-icon { + width: 22px; + height: 22px; + margin-right: 8px; +} +.side-box .side-header .more { + color: #333; + font-size: 13px; + cursor: pointer; +} +.side-box .side-header .more .more-icon { + width: 5px; + height: 8px; + margin-left: 8px; +} +.side-box .box .add-btn { + cursor: pointer; + height: 62px; + border-top: 1px solid #ebebeb; + font-size: 13px; + color: #333; +} +.side-box .box .add-btn:hover { + color: #000000; +} +.side-box .box .add-btn:hover .add-icon { + transform: rotate(90deg); +} +.side-box .box .add-btn .add-icon { + width: 16px; + height: 16px; + margin-right: 10px; + transition: all 0.3s; +} +.side-box .box { + width: 272px; + background-color: #ffffff; + border-radius: 8px; +} +.side-box.thread-side-box .box .item { + padding-top: 16px; + padding-left: 11px; + cursor: pointer; + display: block; +} +.side-box.thread-side-box .box .item:not(:nth-last-child(2)) .answer .text { + border-bottom: 1px solid #ebebeb; +} +.side-box.thread-side-box .box .item .dot { + width: 18px; + height: 18px; + border-radius: 3px; + font-weight: 650; + font-size: 14px; + margin-top: 2px; + margin-right: 11px; +} +.side-box.thread-side-box .box .item .text { + line-height: 22px; + font-size: 14px; + padding-right: 11px; +} +.side-box.thread-side-box .box .item .question { + margin-bottom: 9px; + align-items: flex-start; +} +.side-box.thread-side-box .box .item .question .dot { + background-color: #333333; + color: #ffffff; +} +.side-box.thread-side-box .box .item .question .text { + color: #000000; +} +.side-box.thread-side-box .box .item .answer { + align-items: flex-start; +} +.side-box.thread-side-box .box .item .answer .dot { + background-color: #fddf6d; + color: #333333; +} +.side-box.thread-side-box .box .item .answer .text { + font-weight: 400; + color: #555555; + padding-bottom: 16px; +} +.side-box.thread-side-box .box .item .answer .text .texttext { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} +.side-box.offer-side-box .box .item { + padding-top: 19px; + padding-left: 10px; +} +.side-box.offer-side-box .box .item:not(:nth-last-child(2)) .school-detail .school-offer { + border-bottom: 1px solid #ebebeb; +} +.side-box.offer-side-box .box .item .school-img { + height: 24px; + margin-right: 7px; +} +.side-box.offer-side-box .box .item .school-detail { + flex-direction: column; +} +.side-box.offer-side-box .box .item .school-detail .school-name { + font-weight: 650; + font-size: 14px; + color: #000000; + margin-bottom: 7px; + width: 215px; +} +.side-box.offer-side-box .box .item .school-detail .school-brief { + font-size: 14px; + color: #333333; + margin-bottom: 7px; + width: 215px; +} +.side-box.offer-side-box .box .item .school-detail .school-offer { + font-size: 14px; + color: #7f7f7f; + padding-bottom: 19px; +} +.side-box.offer-side-box .box .item .school-detail .school-offer .long-string { + color: #d7d7d7; + margin: 0 10px; +} +.side-box.interviewexperience-side-box .box { + padding-top: 22px; + padding-bottom: 1px; +} +.side-box.interviewexperience-side-box .box .item { + margin: 0 0 20px; + padding: 0 10px; + flex-direction: column; +} +.side-box.interviewexperience-side-box .box .item:not(:nth-last-child(2)) { + border-bottom: 1px dotted #ebebeb; + padding-bottom: 24px; +} +.side-box.interviewexperience-side-box .box .item .school { + font-weight: 650; + font-size: 14px; + color: #000000; + margin-bottom: 6px; +} +.side-box.interviewexperience-side-box .box .item .major { + font-size: 14px; + color: #333333; + margin-bottom: 8px; +} +.side-box.interviewexperience-side-box .box .item .info { + background-color: #f7f7f7; + border-radius: 6px; + padding: 10px; + position: relative; +} +.side-box.interviewexperience-side-box .box .item .info .icon { + width: 20px; + height: 20px; + vertical-align: bottom; + position: absolute; + border-radius: 50%; +} +.side-box.interviewexperience-side-box .box .item .info .text { + font-weight: 400; + color: #555555; + line-height: 20px; + font-size: 13px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + text-indent: 32px; +} +.side-box.newest-side-box { + padding: 20px 6px 14px !important; +} +.side-box.newest-side-box .box { + background: #ffffff; +} +.side-box.newest-side-box .bounding { + width: 42px; + height: 41px; + position: absolute; + top: 0; + right: 0; +} +.side-box.newest-side-box .side-header { + margin-bottom: 21px !important; +} +.side-box.newest-side-box .box .item { + margin-bottom: 12px; +} +.side-box.newest-side-box .box .item .dot { + width: 6px; + height: 6px; + margin-right: 10px; +} +.side-box.newest-side-box .box .item .dot.dot-green { + background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-green.svg); + background-repeat: no-repeat; +} +.side-box.newest-side-box .box .item .text { + font-size: 14px; + color: #555555; + cursor: pointer; + flex: 1; +} +.side-box.newest-side-box .box .item .text:hover { + color: #000; +} +.side-box.essence-side-box { + padding: 20px 6px 14px !important; +} +.side-box.essence-side-box .box { + background: #ffffff; +} +.side-box.essence-side-box .bounding { + width: 42px; + height: 41px; + position: absolute; + top: 0; + right: 0; +} +.side-box.essence-side-box .side-header { + margin-bottom: 21px !important; +} +.side-box.essence-side-box .box .item { + margin-bottom: 12px; +} +.side-box.essence-side-box .box .item .dot { + width: 6px; + height: 6px; + margin-right: 10px; + background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-blue.svg); + background-repeat: no-repeat; +} +.side-box.essence-side-box .box .item .text { + font-size: 14px; + color: #555555; + cursor: pointer; + flex: 1; +} +.side-box.essence-side-box .box .item .text:hover { + color: #000; +} +.side-box.vote-side-box .box .item { + padding-top: 19px; + margin-left: 27px; + flex-direction: column; + position: relative; +} +.side-box.vote-side-box .box .item::after { + content: ""; + width: 6px; + height: 12px; + background-color: #48d88a; + border-radius: 3px; + display: block; + position: absolute; + top: 23px; + left: -16px; +} +.side-box.vote-side-box .box .item:not(:nth-last-child(2)) { + border-bottom: 1px solid #ebebeb; +} +.side-box.vote-side-box .box .item .name { + font-size: 14px; + color: #000000; + line-height: 20px; + margin-bottom: 8px; + padding-left: 17px; + position: relative; + padding-right: 10px; +} +.side-box.vote-side-box .box .item .name, +.side-box.vote-side-box .box .item .brief { + padding-left: 0; +} +.side-box.vote-side-box .box .item .brief { + font-size: 13px; + color: #555555; + line-height: 20px; + margin-bottom: 20px; + padding-left: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 10px; +} +.main-new { + width: 1200px; + display: flex; + margin: 0 auto; +} +.main-new .wp { + width: 890px; + min-width: 890px; + margin-right: 19px; +} +.main-new .wp #modmenu { + border-bottom: 1px solid #d4d4d4 !important; +} +.main-new .page-box { + height: 45px; + padding-bottom: 0 !important; + padding-top: 10px; + box-sizing: border-box; +} +.main-new .page-box .pg { + margin-top: 0px !important; +} +.main-new .page-box .pgb { + margin-top: 0px !important; +} +.main-new .page-box .pgb a { + margin-left: 0; +} +.main-new .rightright { + width: 291px; +} +.main-new .mtw.mbw { + width: 689px; + background-color: #f5fbfb; + border: 1px solid #dcf0f3; + border-radius: 5px 10px 10px 10px; + position: relative; +} +.main-new .mtw.mbw::after { + content: ""; + position: absolute; + top: 0; + left: 0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FJREFUeNrsnF9S2lAUxs/JZAFMK6nAi0uw02mrFUR3gEtgBZYVKDuQFTQraHEFje+dKS7AMTP2pQ+diSug54aIBHLhXv4kN8n5FC8EiMzP73yce0lE0NTw4U+HhjYiHNJ4hvQD6Sv6DhWOGG593TbZOHd7siW6a+b5OHP/y+Nxbv+ve8O5/cX3n/z6EKfPHdEQhCPiM75cT3rNKoB+PDxVaPhKT7uksbLqhRgKyqebIxrvaX8eXfc/OG98HaPYqx7w/eHpmoZL+qUVlb+YQaDIHSGUO7p4H9+9DWBD2UsgiTL7Rr/0UNXamYOilKDhlkbv8/6eD1uWLQF1JqoPRcmZDyoEJOL0qLYXwA5lJ4DqRKDAYFDCNQMB6Li2fQfJhAml99NgR4kMGpzUq0PIQDgDSgT4b9pwYCAoFyeQRpChZsvwykBQLl3rN+tVHwwQRn3UAQ2PBoHyaEuvmbGTZM66MgSUcFC3VXc8MFBI0xeRVY8GdOb9VsO5BoMlnNXJGJQXuqnh+GC47GhSnBWo3mnDuYGcyI5WD9IGJYK7S6BGkCNZEM790gMleia6nOcN1MRZ6YLqthuOCzmVnRIoMcE9b+fQTfEy3D0oAeh93kFNy3DHoISjAiiALAal66ztg3IJUhcKJotBacDaQen1oKCyOKN0A35zUH7RQU2ctZ2G86LooCJnbTyFuShCw7lGZmmD6hEoD0oiawNQw3aO1qK2tZ61znqUCPQulEzWGqAgWrgLSgdrDVA3pyXKqcWAVwclyq8PJZWl83FVWcsvYT1r5ed6bquk5bcY8MtBBUWeIOsF/KpjDwAGrRKXX0KfJQGF4LfqZn+snnIZSkEJ3/UZ08LcMBGU36xXXcYUmxtKj7hjV8WcJQfFrpKWYRxUeLwU45EFfByUaBOGjEc6N8TZFsI9qVcDxjPXZ0nOXBgwGkkHPwdq9KVmxqHUxmbWzIopu2pZZs2dXcXBLu+z4qCOd3xmVQHKcJpbt4xk2apD/MwKj5GsnBtO3gWP9tM7dy/nmcWuUp/uAN4xjpWZNQ14dpZSwCOMPm3hVP7ilyFO/2sGS2nVAeCeUagHPDtLRb/+/hszBeU+CznYNcqQS1Aj4NlZGs7id0LN1oGl1pQiZxZnFpdh9h08S7kpZQgazmJaOpnF74aKwvGY59Gq+i/AANckqSkymazNAAAAAElFTkSuQmCC); + background-repeat: no-repeat; + width: 18px; + height: 18px; + display: inline-block; + background-size: cover; +} +.main-new .mtw.mbw h3.bbda { + height: 40px; + font-weight: 650; + font-style: normal; + color: #000000; + line-height: 22px; + font-size: 13px; + border-bottom: 1px solid #dcf0f3; + display: flex; + align-items: center; + padding-left: 16px; + box-sizing: border-box; + padding-bottom: 0 !important; +} +.main-new .mtw.mbw .xl.xl2.cl { + padding: 0 16px 10px; +} +.main-new .mtw.mbw .xl2 li { + display: inline-flex; + align-items: center; + margin: 0; + height: 22px; + float: none; +} +.main-new .mtw.mbw .xl2 li:not(:nth-last-child(1)):not(:nth-last-child(2)) { + margin-bottom: 6px; +} +.main-new .mtw.mbw .xl2 li a { + line-height: 22px; + font-size: 13px; + color: #333333; + width: 294px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + margin: 0; + display: inline-block; + margin-left: 10px; +} +.box-box.box-thread { + background: -webkit-linear-gradient(297.35551882deg, #f9e6a3 1%, #f9f2d8 100%); + background: -moz-linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); + background: linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); +} +.box-box.box-offer { + background: -webkit-linear-gradient(295.87227768deg, #c7edf2 1%, #d3f2f5 100%); + background: -moz-linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); + background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); +} +.box-box.box-interviewexperience { + background: -webkit-linear-gradient(291.35671123deg, #d3e1fb 1%, #dee6f9 100%); + background: -moz-linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); + background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); +} +.box-box.box-vote { + background: -webkit-linear-gradient(298.22437861deg, #c6f4d9 1%, #d9f7e5 100%); + background: -moz-linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); + background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); +} +.slideshow-box { + padding: 17px 10px 0px; +} +.slideshow-box .tab-list { + padding-top: 2px; + padding-bottom: 18px; +} +.slideshow-box .tab-list .tab-item { + font-size: 16px; + color: #555555; + margin-right: 25px; + position: relative; + cursor: pointer; +} +.slideshow-box .tab-list .tab-item:not(:last-of-type):after { + content: ""; + position: absolute; + right: -12px; + top: 3px; + width: 1px; + height: 16px; + background-color: #c3cad7; +} +.slideshow-box .tab-list .tab-item.pitch { + font-weight: 650; + font-size: 16px; + color: #000000; +} +.slideshow-box .tab-list .tab-item.pitch::before { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 4px; + border-radius: 95px; + background-color: #f6c106; +} +.box-ask .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #f6c106; +} +.box-offer .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #04e1fe; +} +.box-vote .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #48d88a; +} +.box-interviewexperience .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #789feb; +} +.box-newest .slideshow-box .tab-list .tab-item.pitch::before { + background: linear-gradient(to right, #6ac83e, #6ad2cb); +} +.box-essence .slideshow-box .tab-list .tab-item.pitch::before { + background: #3ea1e0; +} +.slideshow-content { + overflow: hidden; + align-items: flex-start; +} +.posts-box, +.box-box { + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 20px; + border-radius: 10px; + transition: all 0.3s; + width: 291px; +} +.box-box .side-box { + padding-top: 11px; +} +.posts-box { + background: #ffffff; + position: relative; + margin-bottom: 12px; +} +.box-essence .newest-side-box .bounding, +.box-newest .essence-side-box .bounding { + display: none; +} +.slideshow-content { + margin: 0 10px; +} +.posts-box .slideshow-box { + border-bottom: 1px solid #ebebeb; + padding-bottom: 10px; +} +.side-box.newest-side-box .box, +.side-box.essence-side-box .box { + width: 260px; + overflow: hidden; +} +.offer-side-box.side-box .box { + width: 271px; +} diff --git a/css/public.less b/css/public.less index 382734c..a8bd483 100644 --- a/css/public.less +++ b/css/public.less @@ -66,6 +66,7 @@ body { .item-head { margin-bottom: 14px; + position: relative; .avatar { width: 28px; height: 28px; @@ -107,12 +108,67 @@ body { height: 16px; background-color: rgba(242, 242, 242, 1); border-radius: 150px; + cursor: pointer; .icon { width: 18px; height: 18px; } } + + .mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2; + background-color: rgba(0, 0, 0, 0.1); + } + + .operate { + position: absolute; + top: 23px; + right: 0; + width: 100px; + background-color: rgba(242, 242, 242, 1); + border-radius: 8px; + padding: 5px; + z-index: 2; + + &::after { + content: ""; + width: calc(100% - 10px); + height: calc(100% - 10px); + position: absolute; + top: 50%; + left: 50%; + display: block; + transform: translate(-50%, -50%); + background-color: rgba(251, 251, 251, 1); + z-index: -1; + } + + .item { + text-align: center; + font-size: 18px; + color: #333333; + padding: 14px 0; + cursor: pointer; + + &:first-of-type { + padding-top: 24px; + } + + &:last-of-type { + padding-bottom: 24px; + } + + &:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; + } + } + } } .label { @@ -127,6 +183,7 @@ body { background-color: rgba(242, 242, 242, 1); border-radius: 6px; margin-bottom: 10px; + cursor: pointer; &.icon { padding: 0; @@ -625,3 +682,803 @@ body { .results.r6 { background-color: rgba(128, 128, 255, 1); } + +.alert-form { + display: block; + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + .reports { + height: 440px; + .radio-area { + margin-bottom: 40px; + + .radio-area-item { + color: #606266; + font-size: 14px; + margin-right: 10px; + cursor: pointer; + + &.pitch { + .radio-area-frame { + background-color: #50e3c2; + border-color: #50e3c2; + + &::after { + -webkit-transform: rotate(45deg) scaleY(1); + transform: rotate(45deg) scaleY(1); + } + } + } + + .radio-area-frame { + border: 1px solid #dcdfe6; + border-radius: 2px; + width: 14px; + height: 14px; + -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + + position: relative; + margin-right: 10px; + + &::after { + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ""; + border: 1px solid #fff; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + -webkit-transform: rotate(45deg) scaleY(0); + transform: rotate(45deg) scaleY(0); + width: 3px; + -webkit-transition: -webkit-transform 0.15s ease-in 0.05s; + transition: -webkit-transform 0.15s ease-in 0.05s; + transition: transform 0.15s ease-in 0.05s; + transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s; + -webkit-transform-origin: center; + transform-origin: center; + } + + // } + } + } + } + } + + .el-checkbox-group { + font-size: 0; + } + + .comments { + display: block; + position: fixed; + z-index: 11; + left: 50%; + top: 50%; + width: 740px; + height: 440px; + max-width: 90vw; + max-height: 90vh; + transform: translate(-50%, -50%); + background-color: #ffffff; + border: none; + border-radius: 8px 8px 6px 6px; + .text-box { + position: relative; + } + .text-num { + position: absolute; + right: 10px; + bottom: 10px; + color: #999; + font-size: 12px; + } + .form { + display: block; + width: 100%; + padding: 34px 30px 40px; + textarea { + height: 172px; + margin-bottom: 30px; + display: block; + width: 100%; + background: #f7f7f7; + padding: 18px; + font-size: 14px; + border: 1px solid #f7f7f7; + border-radius: 5px; + outline: none; + resize: none; + line-height: 22px; + } + } + } + + .head { + padding: 0 18px 0 30px; + display: flex; + height: 56px; + align-items: center; + justify-content: space-between; + background: #333333; + color: #fff; + font-size: 17px; + border-radius: 6px 6px 0 0; + .close { + color: #b3b3b3; + font-size: 14px; + cursor: pointer; + } + } + + .footer { + display: flex; + justify-content: center; + align-items: center; + button[type="button"] { + margin-right: 20px; + } + + button { + border: 1px #999999 solid; + border-radius: 5px; + background-color: #ffffff; + width: 128px; + height: 38px; + color: #333; + font-size: 14px; + outline: none; + cursor: pointer; + } + button[type="submit"] { + background-color: #50e3c2; + border-color: #50e3c2; + color: #fff; + } + } +} + +.side-box { + width: 100%; + padding: 17px 0px 10px; + margin-bottom: 12px; + width: 272px; + border-radius: 10px; + box-sizing: border-box; +} + +.side-box * { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + text-decoration: none !important; +} + +.side-box a { + text-decoration: none; +} + +.side-box .side-header { + justify-content: space-between; + margin-bottom: 11px; +} + +.side-box .side-header .left .title { + font-weight: 650; + font-size: 16px; + color: #000000; + padding: 0; + height: auto; + line-height: normal; +} + +.side-box .side-header .left .header-icon { + width: 22px; + height: 22px; + margin-right: 8px; +} + +.side-box .side-header .more { + color: #333; + font-size: 13px; + cursor: pointer; +} + +.side-box .side-header .more .more-icon { + width: 5px; + height: 8px; + margin-left: 8px; +} + +.side-box .box .add-btn { + cursor: pointer; + height: 62px; + border-top: 1px solid #ebebeb; + font-size: 13px; + color: #333; +} + +.side-box .box .add-btn:hover { + color: #000000; +} + +.side-box .box .add-btn:hover .add-icon { + transform: rotate(90deg); +} + +.side-box .box .add-btn .add-icon { + width: 16px; + height: 16px; + margin-right: 10px; + transition: all 0.3s; +} + +.side-box .box { + width: 272px; + background-color: #ffffff; + border-radius: 8px; +} + +.side-box.thread-side-box .box .item { + padding-top: 16px; + padding-left: 11px; + cursor: pointer; + display: block; +} + +.side-box.thread-side-box .box .item:not(:nth-last-child(2)) .answer .text { + border-bottom: 1px solid #ebebeb; +} + +.side-box.thread-side-box .box .item .dot { + width: 18px; + height: 18px; + border-radius: 3px; + font-weight: 650; + font-size: 14px; + margin-top: 2px; + margin-right: 11px; +} + +.side-box.thread-side-box .box .item .text { + line-height: 22px; + font-size: 14px; + padding-right: 11px; +} + +.side-box.thread-side-box .box .item .question { + margin-bottom: 9px; + align-items: flex-start; +} + +.side-box.thread-side-box .box .item .question .dot { + background-color: #333333; + color: #ffffff; +} + +.side-box.thread-side-box .box .item .question .text { + color: #000000; +} + +.side-box.thread-side-box .box .item .answer { + align-items: flex-start; +} + +.side-box.thread-side-box .box .item .answer .dot { + background-color: #fddf6d; + color: #333333; +} + +.side-box.thread-side-box .box .item .answer .text { + font-weight: 400; + color: #555555; + padding-bottom: 16px; +} + +.side-box.thread-side-box .box .item .answer .text .texttext { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.side-box.offer-side-box .box .item { + padding-top: 19px; + padding-left: 10px; +} + +.side-box.offer-side-box .box .item:not(:nth-last-child(2)) .school-detail .school-offer { + border-bottom: 1px solid #ebebeb; +} + +.side-box.offer-side-box .box .item .school-img { + height: 24px; + margin-right: 7px; +} + +.side-box.offer-side-box .box .item .school-detail { + flex-direction: column; +} + +.side-box.offer-side-box .box .item .school-detail .school-name { + font-weight: 650; + font-size: 14px; + color: #000000; + margin-bottom: 7px; + width: 215px; +} + +.side-box.offer-side-box .box .item .school-detail .school-brief { + font-size: 14px; + color: #333333; + margin-bottom: 7px; + width: 215px; +} + +.side-box.offer-side-box .box .item .school-detail .school-offer { + font-size: 14px; + color: #7f7f7f; + padding-bottom: 19px; +} + +.side-box.offer-side-box .box .item .school-detail .school-offer .long-string { + color: #d7d7d7; + margin: 0 10px; +} + +.side-box.interviewexperience-side-box .box { + padding-top: 22px; + padding-bottom: 1px; +} + +.side-box.interviewexperience-side-box .box .item { + margin: 0 0 20px; + padding: 0 10px; + flex-direction: column; +} + +.side-box.interviewexperience-side-box .box .item:not(:nth-last-child(2)) { + border-bottom: 1px dotted #ebebeb; + padding-bottom: 24px; +} + +.side-box.interviewexperience-side-box .box .item .school { + font-weight: 650; + font-size: 14px; + color: #000000; + margin-bottom: 6px; +} + +.side-box.interviewexperience-side-box .box .item .major { + font-size: 14px; + color: #333333; + margin-bottom: 8px; +} + +.side-box.interviewexperience-side-box .box .item .info { + background-color: #f7f7f7; + border-radius: 6px; + padding: 10px; + position: relative; +} + +.side-box.interviewexperience-side-box .box .item .info .icon { + width: 20px; + height: 20px; + vertical-align: bottom; + position: absolute; + border-radius: 50%; +} + +.side-box.interviewexperience-side-box .box .item .info .text { + font-weight: 400; + color: #555555; + line-height: 20px; + font-size: 13px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + text-indent: 32px; +} + +.side-box.newest-side-box { + padding: 20px 6px 14px !important; +} + +.side-box.newest-side-box .box { + background: #ffffff; +} + +.side-box.newest-side-box .bounding { + width: 42px; + height: 41px; + position: absolute; + top: 0; + right: 0; +} + +.side-box.newest-side-box .side-header { + margin-bottom: 21px !important; +} + +.side-box.newest-side-box .box .item { + margin-bottom: 12px; +} + +.side-box.newest-side-box .box .item .dot { + width: 6px; + height: 6px; + margin-right: 10px; +} + +.side-box.newest-side-box .box .item .dot.dot-green { + background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-green.svg); + background-repeat: no-repeat; +} + +.side-box.newest-side-box .box .item .text { + font-size: 14px; + color: #555555; + cursor: pointer; + flex: 1; +} + +.side-box.newest-side-box .box .item .text:hover { + color: #000; +} + +.side-box.essence-side-box { + padding: 20px 6px 14px !important; +} + +.side-box.essence-side-box .box { + background: #ffffff; +} + +.side-box.essence-side-box .bounding { + width: 42px; + height: 41px; + position: absolute; + top: 0; + right: 0; +} + +.side-box.essence-side-box .side-header { + margin-bottom: 21px !important; +} + +.side-box.essence-side-box .box .item { + margin-bottom: 12px; +} + +.side-box.essence-side-box .box .item .dot { + width: 6px; + height: 6px; + margin-right: 10px; + background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-blue.svg); + background-repeat: no-repeat; +} + +.side-box.essence-side-box .box .item .text { + font-size: 14px; + color: #555555; + cursor: pointer; + flex: 1; +} + +.side-box.essence-side-box .box .item .text:hover { + color: #000; +} + +.side-box.vote-side-box .box .item { + padding-top: 19px; + margin-left: 27px; + flex-direction: column; + position: relative; +} + +.side-box.vote-side-box .box .item::after { + content: ""; + width: 6px; + height: 12px; + background-color: #48d88a; + border-radius: 3px; + display: block; + position: absolute; + top: 23px; + left: -16px; +} + +.side-box.vote-side-box .box .item:not(:nth-last-child(2)) { + border-bottom: 1px solid #ebebeb; +} + +.side-box.vote-side-box .box .item .name { + font-size: 14px; + color: #000000; + line-height: 20px; + margin-bottom: 8px; + padding-left: 17px; + position: relative; + padding-right: 10px; +} + +.side-box.vote-side-box .box .item .name, +.side-box.vote-side-box .box .item .brief { + padding-left: 0; +} + +.side-box.vote-side-box .box .item .brief { + font-size: 13px; + color: #555555; + line-height: 20px; + margin-bottom: 20px; + padding-left: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 10px; +} + +.main-new { + width: 1200px; + display: flex; + margin: 0 auto; +} + +.main-new .wp { + width: 890px; + min-width: 890px; + margin-right: 19px; +} + +.main-new .wp #modmenu { + border-bottom: 1px solid #d4d4d4 !important; +} + +.main-new .page-box { + height: 45px; + padding-bottom: 0 !important; + padding-top: 10px; + box-sizing: border-box; +} + +.main-new .page-box .pg { + margin-top: 0px !important; +} + +.main-new .page-box .pgb { + margin-top: 0px !important; +} + +.main-new .page-box .pgb a { + margin-left: 0; +} + +.main-new .rightright { + width: 291px; +} + +.main-new .mtw.mbw { + width: 689px; + background-color: #f5fbfb; + border: 1px solid #dcf0f3; + border-radius: 5px 10px 10px 10px; + position: relative; +} + +.main-new .mtw.mbw::after { + content: ""; + position: absolute; + top: 0; + left: 0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FJREFUeNrsnF9S2lAUxs/JZAFMK6nAi0uw02mrFUR3gEtgBZYVKDuQFTQraHEFje+dKS7AMTP2pQ+diSug54aIBHLhXv4kN8n5FC8EiMzP73yce0lE0NTw4U+HhjYiHNJ4hvQD6Sv6DhWOGG593TbZOHd7siW6a+b5OHP/y+Nxbv+ve8O5/cX3n/z6EKfPHdEQhCPiM75cT3rNKoB+PDxVaPhKT7uksbLqhRgKyqebIxrvaX8eXfc/OG98HaPYqx7w/eHpmoZL+qUVlb+YQaDIHSGUO7p4H9+9DWBD2UsgiTL7Rr/0UNXamYOilKDhlkbv8/6eD1uWLQF1JqoPRcmZDyoEJOL0qLYXwA5lJ4DqRKDAYFDCNQMB6Li2fQfJhAml99NgR4kMGpzUq0PIQDgDSgT4b9pwYCAoFyeQRpChZsvwykBQLl3rN+tVHwwQRn3UAQ2PBoHyaEuvmbGTZM66MgSUcFC3VXc8MFBI0xeRVY8GdOb9VsO5BoMlnNXJGJQXuqnh+GC47GhSnBWo3mnDuYGcyI5WD9IGJYK7S6BGkCNZEM790gMleia6nOcN1MRZ6YLqthuOCzmVnRIoMcE9b+fQTfEy3D0oAeh93kFNy3DHoISjAiiALAal66ztg3IJUhcKJotBacDaQen1oKCyOKN0A35zUH7RQU2ctZ2G86LooCJnbTyFuShCw7lGZmmD6hEoD0oiawNQw3aO1qK2tZ61znqUCPQulEzWGqAgWrgLSgdrDVA3pyXKqcWAVwclyq8PJZWl83FVWcsvYT1r5ed6bquk5bcY8MtBBUWeIOsF/KpjDwAGrRKXX0KfJQGF4LfqZn+snnIZSkEJ3/UZ08LcMBGU36xXXcYUmxtKj7hjV8WcJQfFrpKWYRxUeLwU45EFfByUaBOGjEc6N8TZFsI9qVcDxjPXZ0nOXBgwGkkHPwdq9KVmxqHUxmbWzIopu2pZZs2dXcXBLu+z4qCOd3xmVQHKcJpbt4xk2apD/MwKj5GsnBtO3gWP9tM7dy/nmcWuUp/uAN4xjpWZNQ14dpZSwCOMPm3hVP7ilyFO/2sGS2nVAeCeUagHPDtLRb/+/hszBeU+CznYNcqQS1Aj4NlZGs7id0LN1oGl1pQiZxZnFpdh9h08S7kpZQgazmJaOpnF74aKwvGY59Gq+i/AANckqSkymazNAAAAAElFTkSuQmCC); + background-repeat: no-repeat; + width: 18px; + height: 18px; + display: inline-block; + background-size: cover; +} + +.main-new .mtw.mbw h3.bbda { + height: 40px; + font-weight: 650; + font-style: normal; + color: #000000; + line-height: 22px; + font-size: 13px; + border-bottom: 1px solid #dcf0f3; + display: flex; + align-items: center; + padding-left: 16px; + box-sizing: border-box; + padding-bottom: 0 !important; +} + +.main-new .mtw.mbw .xl.xl2.cl { + padding: 0 16px 10px; +} + +.main-new .mtw.mbw .xl2 li { + display: inline-flex; + align-items: center; + margin: 0; + height: 22px; + float: none; +} + +.main-new .mtw.mbw .xl2 li:not(:nth-last-child(1)):not(:nth-last-child(2)) { + margin-bottom: 6px; +} + +.main-new .mtw.mbw .xl2 li a { + line-height: 22px; + font-size: 13px; + color: #333333; + width: 294px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + margin: 0; + display: inline-block; + margin-left: 10px; +} + +.box-box.box-thread { + background: -webkit-linear-gradient(297.35551882deg, #f9e6a3 1%, #f9f2d8 100%); + background: -moz-linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); + background: linear-gradient(152.64448118deg, #f9e6a3 1%, #f9f2d8 100%); +} + +.box-box.box-offer { + background: -webkit-linear-gradient(295.87227768deg, #c7edf2 1%, #d3f2f5 100%); + background: -moz-linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); + background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); +} + +.box-box.box-interviewexperience { + background: -webkit-linear-gradient(291.35671123deg, #d3e1fb 1%, #dee6f9 100%); + background: -moz-linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); + background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); +} + +.box-box.box-vote { + background: -webkit-linear-gradient(298.224378605559deg, rgba(198, 244, 217, 1) 1%, rgba(217, 247, 229, 1) 100%); + background: -moz-linear-gradient(151.775621394441deg, rgba(198, 244, 217, 1) 1%, rgba(217, 247, 229, 1) 100%); + background: linear-gradient(151.775621394441deg, rgba(198, 244, 217, 1) 1%, rgba(217, 247, 229, 1) 100%); +} + +.slideshow-box { + padding: 17px 10px 0px; +} + +.slideshow-box .tab-list { + padding-top: 2px; + padding-bottom: 18px; +} + +.slideshow-box .tab-list .tab-item { + font-size: 16px; + color: #555555; + margin-right: 25px; + position: relative; + cursor: pointer; +} + +.slideshow-box .tab-list .tab-item:not(:last-of-type):after { + content: ""; + position: absolute; + right: -12px; + top: 3px; + width: 1px; + height: 16px; + background-color: #c3cad7; +} + +.slideshow-box .tab-list .tab-item.pitch { + font-weight: 650; + font-size: 16px; + color: #000000; +} + +.slideshow-box .tab-list .tab-item.pitch::before { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 4px; + border-radius: 95px; + background-color: #f6c106; +} + +.box-ask .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #f6c106; +} + +.box-offer .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #04e1fe; +} + +.box-vote .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #48d88a; +} + +.box-interviewexperience .slideshow-box .tab-list .tab-item.pitch::before { + background-color: #789feb; +} + +.box-newest .slideshow-box .tab-list .tab-item.pitch::before { + background: linear-gradient(to right, #6ac83e, #6ad2cb); +} + +.box-essence .slideshow-box .tab-list .tab-item.pitch::before { + background: #3ea1e0; +} + +.slideshow-content { + overflow: hidden; + align-items: flex-start; +} + +.posts-box, +.box-box { + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 20px; + border-radius: 10px; + transition: all 0.3s; + width: 291px; +} + +.box-box .side-box { + padding-top: 11px; +} + +.posts-box { + background: #ffffff; + position: relative; + margin-bottom: 12px; +} + +.box-essence .newest-side-box .bounding, +.box-newest .essence-side-box .bounding { + display: none; +} + +.slideshow-content { + margin: 0 10px; +} + +.posts-box .slideshow-box { + border-bottom: 1px solid #ebebeb; + padding-bottom: 10px; +} + +.side-box.newest-side-box .box, +.side-box.essence-side-box .box { + width: 260px; + overflow: hidden; +} + +.offer-side-box.side-box .box { + width: 271px; +} diff --git a/css/section-index.css b/css/section-index.css index add6738..a3218e5 100644 --- a/css/section-index.css +++ b/css/section-index.css @@ -135,9 +135,9 @@ padding: 0 5px; font-size: 14px; color: #000000; - cursor: pointer; + text-decoration: none; } -#sectionIndex .head-navigation .text:hover { +#sectionIndex .head-navigation .text.textA:hover { text-decoration: underline; } #sectionIndex .matter { @@ -294,7 +294,6 @@ } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box { width: 100%; - height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; diff --git a/css/section-index.less b/css/section-index.less index 11c7a48..46523c1 100644 --- a/css/section-index.less +++ b/css/section-index.less @@ -151,8 +151,9 @@ padding: 0 5px; font-size: 14px; color: #000000; - cursor: pointer; - &:hover { + text-decoration: none; + + &.textA:hover { text-decoration: underline; } } @@ -327,7 +328,6 @@ .selectives-box { width: 100%; - height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; diff --git a/details.html b/details.html index 7d00ff5..d1fec6d 100644 --- a/details.html +++ b/details.html @@ -36,27 +36,29 @@
-
首页
+ 首页 -
GTSuperstar 的个人主页
+ +
{{ info.title || info.content }}
- +
-
{{ authorInfo.nickname || '匿名用户' }}
- +
{{ authorInfo.nickname || '匿名用户' }}
{{ authorInfo.group?.image }} +
{{ timestamp }}
-
3016
+
{{ info.views || 0 }}
@@ -65,54 +67,303 @@
-
- - -
香港
-
香港
+
+ + +
{{ item }}
+
{{ item }}
-
[申请定位] 港理工各专业申请难度分析
+
{{ info.title }}
最后编辑：{{ updatedTime || timestamp }}
-
-