feat: 新增图片资源及组件功能优化
style: 调整CSS样式及修复链接样式问题 refactor: 重构item-head和item-bottom组件逻辑 fix: 修复section-index页面导航链接问题 perf: 优化滚动加载及URL参数处理 docs: 更新组件文档及注释 test: 添加组件测试用例 build: 更新依赖配置 chore: 清理无用代码及资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -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: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick(item)"> <image wx:if="{{ item.is_like }}" class="icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/like-red.png"></image> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/collect-golden.svg" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div>`,
|
||||
components: {
|
||||
like,
|
||||
},
|
||||
|
||||
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
});
|
||||
|
||||
@@ -3,16 +3,14 @@
|
||||
<div class="text one-line-display">{{ item?.commentreviews?.content }}</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter" @click="likeClick(item)">
|
||||
<image wx:if="{{ item.is_like }}" class="icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/like-red.png"></image>
|
||||
|
||||
<div class="bottom-item like flexacenter" @click="likeClick()">
|
||||
<img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" />
|
||||
<img v-else class="icon" src="./img/like-icon.png" />
|
||||
|
||||
<div class="text">{{ item.likes || "赞" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-golden.svg" />
|
||||
<div class="bottom-item flexacenter" @click="collectClick()">
|
||||
<img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" />
|
||||
<img v-else class="icon" src="./img/collect-gray.png" />
|
||||
<div class="text">{{ item.collections || "收藏" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item flexacenter">
|
||||
@@ -29,4 +27,6 @@
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">转发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<like v-if="isLikeGif"></like>
|
||||
@@ -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: `<div class="item-head flexacenter"> <img class="avatar" :src="item.user.avatar || item.avatar" /> <div class="name">{{ item.user.nickname || item.nickname || '匿名用户' }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <!-- <template v-if="show"> <div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div> <div class="operate" catch:tap="true"> <div class="item" bind:tap="report">举报</div> <template v-if="ismanager"> <div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </template> --></div><div class="label flexflex" v-if="sectionn.length || tags.length"> <img class="item icon" src="./img/recommend-icon.png" /> <img class="item icon" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div>`,
|
||||
components: {
|
||||
report,
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item.user.avatar || item.avatar" /> <div class="name">{{ item.user.nickname || item.nickname || '匿名用户' }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="section.length || tags.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in section" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
});
|
||||
|
||||
@@ -10,26 +10,28 @@
|
||||
<div class="text">{{ item.views }}</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter">
|
||||
<div class="btn flexcenter" @click.stop="cutShow">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
|
||||
</div>
|
||||
|
||||
<!-- <template v-if="show">
|
||||
<div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
|
||||
<div class="operate" catch:tap="true">
|
||||
<div class="item" bind:tap="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
<div v-if="show">
|
||||
<div class="mask" @click.stop="cutShow"></div>
|
||||
<div class="operate">
|
||||
<div class="item" @click.stop="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" @click.stop="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" @click.stop="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" @click.stop="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label flexflex" v-if="sectionn.length || tags.length">
|
||||
<img class="item icon" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div>
|
||||
<div class="label flexflex" v-if="section.length || tags.length || item.recommend == 1 || item.best == 1">
|
||||
<img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in section" :key="item">{{ item }}</div>
|
||||
<div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<report v-if="reportState" :itemdata="item"></report>
|
||||
103
component/latest-list/latest-list.js
Normal file
103
component/latest-list/latest-list.js
Normal file
@@ -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: `<div class="posts-box box-newest"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item newest " :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新</div> <div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华</div> </div> </div> <div class="slideshow-content flexflex"> <!-- newest 最新 --> <div class="newest-side-box side-box"> <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt=""> <div class="box"> <a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2646177-1-1.html" target="_blank"> <div class="dot dot-green"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> <!-- essence 精选 --> <div class="essence-side-box side-box"> <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt=""> <div class="box"> <a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2640196-1-1.html" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
33
component/latest-list/latest-list.txt
Normal file
33
component/latest-list/latest-list.txt
Normal file
@@ -0,0 +1,33 @@
|
||||
<div class="posts-box box-newest">
|
||||
<div class="slideshow-box">
|
||||
<div class="tab-list flexacenter">
|
||||
<div class="tab-item newest " :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新</div>
|
||||
<div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slideshow-content flexflex">
|
||||
|
||||
<!-- newest 最新 -->
|
||||
<div class="newest-side-box side-box">
|
||||
<img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt="">
|
||||
<div class="box">
|
||||
<a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2646177-1-1.html" target="_blank">
|
||||
<div class="dot dot-green"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- essence 精选 -->
|
||||
<div class="essence-side-box side-box">
|
||||
<img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt="">
|
||||
<div class="box">
|
||||
<a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2640196-1-1.html" target="_blank">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
40
component/like/like.js
Normal file
40
component/like/like.js
Normal file
File diff suppressed because one or more lines are too long
78
component/report/report.js
Normal file
78
component/report/report.js
Normal file
@@ -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: `<div class="alert-form">
|
||||
<div class="comments reports">
|
||||
<div class="head">
|
||||
<span style="display: flex; align-items: center;"> <img style="width: 25px; margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png" />举报投诉 </span>
|
||||
<div class="close icon-close iconfont" @click="alertShow = false"></div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="radio-area flexacenter">
|
||||
<div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
|
||||
<div class="radio-area-frame"></div>
|
||||
{{ s }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
||||
<div class="text-num">{{ 200 - alertText.length }}</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button type="button" @click="cancel()">取消</button>
|
||||
<button type="submit" @click="alertSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
});
|
||||
82
component/slideshow-box/slideshow-box.js
Normal file
82
component/slideshow-box/slideshow-box.js
Normal file
@@ -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: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
90
component/slideshow-box/slideshow-box.txt
Normal file
90
component/slideshow-box/slideshow-box.txt
Normal file
@@ -0,0 +1,90 @@
|
||||
<div class="box-box" :class="['box-' + tabPitch]">
|
||||
<div class="slideshow-box">
|
||||
<div class="tab-list flexacenter">
|
||||
<div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div>
|
||||
<div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div>
|
||||
<div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div>
|
||||
<div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slideshow-content flexflex">
|
||||
<!-- 问答 -->
|
||||
<div class="thread-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf">
|
||||
<div class="question flexacenter">
|
||||
<div class="text flex1 ellipsis">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="answer flexacenter">
|
||||
<div class="text flex1">
|
||||
<div class="texttext">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- offer -->
|
||||
<div class="offer-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank">
|
||||
<img class="school-img" :src="item.data.schoollogo" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data.schoolname }}</div>
|
||||
<div class="school-brief one-line-display">{{ item.data.professional }}</div>
|
||||
<div class="school-offer flexacenter">
|
||||
<span>{{ item.data.degree }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data.semester }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data.apply_results_text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 投票 -->
|
||||
<div class="vote-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}">
|
||||
<div class="name one-line-display">{{ item.title }}</div>
|
||||
<div class="brief">{{ item.content }}</div>
|
||||
</a>
|
||||
|
||||
<a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mj -->
|
||||
<div class="interviewexperience-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data.schoolname }}</div>
|
||||
<div class="major one-line-display"></div>
|
||||
<div class="info">
|
||||
<img class="icon" :src="item.user.avatar" />
|
||||
<span class="text">{{ item.title || item.content }} </span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
657
css/details.css
657
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);
|
||||
}
|
||||
|
||||
743
css/details.less
743
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);
|
||||
}
|
||||
|
||||
731
css/public.css
731
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;
|
||||
}
|
||||
|
||||
857
css/public.less
857
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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
354
details.html
354
details.html
@@ -36,27 +36,29 @@
|
||||
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<div class="text">首页</div>
|
||||
<a class="text textA" target="_blank" href="./">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">GTSuperstar 的个人主页</div>
|
||||
<!-- <a class="text textA" target="_blank" href="./">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" /> -->
|
||||
<div class="text one-line-display">{{ info.title || info.content }}</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<div class="matter-left">
|
||||
<div class="block">
|
||||
<div class="matter-head flexacenter">
|
||||
<img class="avatar" src="https://axure-file.lanhuapp.com/md5__663dd09989ed49b33933982521ac4655.svg" alt="" />
|
||||
<img class="avatar" :src="authorInfo?.avatar" alt="" />
|
||||
<div class="content flex1 flexflex">
|
||||
<div class="name flexacenter" bind:tap="goPersonalHomepage">
|
||||
<div>{{ authorInfo.nickname || '匿名用户' }}</div>
|
||||
<img v-if="authorInfo?.group?.title" class="icon" :src="authorInfo.group.title" />
|
||||
<div>{{ authorInfo.nickname || '匿名用户' }}</div>{{ authorInfo.group?.image }}
|
||||
<img v-if="authorInfo.group?.image" class="icon" :src="authorInfo.group?.image" />
|
||||
</div>
|
||||
<div class="time">{{ timestamp }}</div>
|
||||
</div>
|
||||
<div class="operate flexacenter">
|
||||
<div class="view flexacenter">
|
||||
<img class="icon" src="./img/eye-icon.svg">
|
||||
<div class="text">3016</div>
|
||||
<div class="text">{{ info.views || 0 }}</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter" bind:tap="cutShow">
|
||||
@@ -65,54 +67,303 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label flexflex">
|
||||
<img class="item icon" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" src="./img/essence-icon.png" />
|
||||
<div class="item blue">香港</div>
|
||||
<div class="item">香港</div>
|
||||
<div class="label flexflex" v-if="sectionn.length || tags.length || info.recommend == 1 || info.best == 1">
|
||||
<img class="item icon" v-if="info.recommend == 1 && info.best != 1" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" v-if="info.best == 1" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div>
|
||||
<div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
|
||||
<div class="title">[申请定位] 港理工各专业申请难度分析</div>
|
||||
<div class="title" v-if="info.title">{{ info.title }}</div>
|
||||
|
||||
<div class="html" v-html="info.content"></div>
|
||||
|
||||
<div class="last-time">最后编辑：{{ updatedTime || timestamp }}</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/like-black-icon.png" />
|
||||
<div class="action-bar flexacenter">
|
||||
<div class="action-bar-item flexacenter" @click="likeClick()">
|
||||
<img v-if="islike" class="icon" src="./img/like-red-icon.png" />
|
||||
<img v-else class="icon" src="./img/like-black-icon.png" />
|
||||
<div class="text">{{ info.likes || "赞" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-black-icon.png" />
|
||||
<div class="action-bar-item flexacenter" @click="collectClick()">
|
||||
<img v-if="iscollect" class="icon" src="./img/collect-golden.svg" />
|
||||
<img v-else class="icon" src="./img/collect-black-icon.png" />
|
||||
<div class="text">{{ info.collections || "收藏" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<div class="action-bar-item flexacenter">
|
||||
<img class="icon" src="./img/discuss-black-icon.png" />
|
||||
<div class="text">{{ info.comments || "讨论" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<div class="action-bar-item flexacenter" @click="openCoinBox">
|
||||
<img class="icon" src="./img/bi-black-icon.png" />
|
||||
<div class="text">{{ info.coins || "投币" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<div class="action-bar-item flexacenter">
|
||||
<img class="icon" src="./img/share-black-icon.png" />
|
||||
<div class="text">转发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block related">
|
||||
<div class="block related" v-if="relatedList.length > 0">
|
||||
<div class="related-head flexacenter">
|
||||
<div class="text">相关帖子</div>
|
||||
<div class="time">Updated by 2025.10.13</div>
|
||||
<div class="time">Updated by {{ relatedTime }}</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="item in 8">
|
||||
<div class="item flexacenter" v-for="item in relatedList" :key="item.id">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER</div>
|
||||
<div class="text one-line-display">{{ item.title || '无标题' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="answer-discuss">
|
||||
<!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
|
||||
<span>确定删除该讨论吗？</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmCommentDelete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
<div v-if="emojiMaskState" class="emoji-box-mask" @click="closeEmoji()"></div>
|
||||
|
||||
<!-- 大图 -->
|
||||
<div class="detail-image-mask flexcenter" v-if="dialogSrc" @click="dialogSrc = ''">
|
||||
<div class="detail-image flexcenter">
|
||||
<img class="detail-img" :src="dialogSrc" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑评论 -->
|
||||
<div v-if="editCommentState" class="edit-comment flexcenter">
|
||||
<div class="box">
|
||||
<div class="text">编辑评论</div>
|
||||
<div class="input-box">
|
||||
<div class="top flexflex">
|
||||
<textarea ref="editInputRef" class="input-textarea flex1" maxlength="500" v-model="editInput" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="editPicture.url">
|
||||
<div class="picture">
|
||||
<img class="close" @click="closeEditFileUpload()" src="./img/close-icon.png" />
|
||||
<img class="img" @click="handleAnswerText" :src="editPicture.base64 || editPicture.url" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': editEmojiState }" style="z-index: 2;">
|
||||
<img class="icon" src="./img/smiling-face.png" @click="openEditEmoji()" alt="" />
|
||||
<div v-if="editEmojiState" class="emoji-edit-box-mask" @click="closeEditEmoji()"></div>
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="handleEditFile()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" style="border-radius: 0;" src="./img/picture-icon.png" alt="" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-list flexacenter">
|
||||
<div class="btn" @click="closeEdit()">取消</div>
|
||||
<div class="btn send" @click="postEditComment()">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header flexacenter">
|
||||
讨论
|
||||
<span class="num">{{ commentTotalCount || "" }}</span>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="top flexflex">
|
||||
<img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
|
||||
<textarea ref="input-textarea" class="input-textarea flex1" maxlength="500" @focus="judgeLogin" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="picture.url">
|
||||
<div class="picture">
|
||||
<img class="close" @click="closeFileUpload()" src="./img/close-icon.png" />
|
||||
<img class="img" @click="handleAnswerText" :src="picture.base64 || picture.url" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': emojiState }" style="z-index: 2;">
|
||||
<img class="icon" src="./img/smiling-face.png" @click="openEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" style="border-radius: 0;" src="./img/picture-icon.png" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submitAnswerComments()">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-box" v-if="commentTotalCount != 0">
|
||||
<div class="comments-item" v-for="(item, index) in commentList" :key="index">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" @click="openUserInfo(index)" :src="item['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index)">{{ item["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ item["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="item['groupimage']" :src="item.groupimage" :alt="item.grouptitle" style="height: 18px;" />
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<!-- <div class="report-box flexcenter">举报</div> -->
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(item['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(item['token'], index)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
<div class="comments-text" v-if="item['content']" v-html="item['content']"></div>
|
||||
<img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
|
||||
<div class="input-box" v-if="item['childState']">
|
||||
<img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
|
||||
<div class="top flexflex">
|
||||
<textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的看法…" @focus="judgeLogin" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="item.picture?.url">
|
||||
<div class="picture">
|
||||
<img class="close" @click="closeFileUpload(index)" src="./img/close-icon.png" />
|
||||
<img class="img" @click="handleAnswerText" :src="item.picture.base64 || item.picture.url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': item.emojiState }" style="z-index: 2;">
|
||||
<img class="icon" src="./img/smiling-face.png" @click="openEmoji(index)" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" style="border-radius: 0;" src="./img/picture-icon.png" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submitAnswerComments(index)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-comments" v-if="item['child'].length != 0">
|
||||
<div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index, i)">{{ ite["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ ite["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="ite['groupimage']" :src="ite.groupimage" :alt="ite.grouptitle" style="height: 18px;" />
|
||||
<div class="avatar-box flexflex" v-if="ite['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(ite['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(ite['token'], index, i)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
<div class="comments-text" v-if="ite['content']">
|
||||
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite["reply"]["nickname"] || "匿名用户" }}</div><span v-html="ite['content']"></span>
|
||||
</div>
|
||||
<img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" />
|
||||
<div class="input-box" v-if="ite['childState']">
|
||||
<img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
|
||||
<div class="top flexflex">
|
||||
<textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" @focus="judgeLogin" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="ite.picture?.url">
|
||||
<div class="picture">
|
||||
<img class="close" @click="closeFileUpload(index, i)" src="./img/close-icon.png" />
|
||||
<img class="img" @click="handleAnswerText" :src="ite.picture.base64 || ite.picture.url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': ite.emojiState }" style="z-index: 2;">
|
||||
<img class="icon" src="./img/smiling-face.png" @click="openEmoji(index, i)" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" style="border-radius: 0;" src="./img/picture-icon.png" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submitAnswerComments(index, i)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index, i)">
|
||||
<div class>还有{{ item["childnum"] - item.child.length }}条回复</div>
|
||||
<img class="also-icon" src="./img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-discussion-box flexcenter" v-else>
|
||||
<img src="./img/no-discussion.png" class="no-discussion-icon" />
|
||||
<div class="no-discussion-text">缺少你的留言，我的世界是黑白的</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-box">
|
||||
<a class="adv">
|
||||
@@ -124,7 +375,7 @@
|
||||
<div class="sidebar-content flexcenter">
|
||||
<img src="https://o.x-php.com/qrcode/eunKLTiKLX4O" class="sidebar-QRCode">
|
||||
<div class="hint flexacenter">
|
||||
<img class="saoma-icon" src="//framework.x-php.com/gter/image/gter/offer/imgdetails/u161.png?v=5.2.91_282044242">
|
||||
<img class="saoma-icon" src="./img/u161.png">
|
||||
微信扫一扫
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,68 +385,79 @@
|
||||
<div class="sidebar-header">关于作者</div>
|
||||
<div class="sidebar-content flexcenter">
|
||||
<div class="author-box flexacenter">
|
||||
<img class="avatar" src="./img/avatar.png">
|
||||
<img class="avatar" :src="authorInfo?.avatar" alt="">
|
||||
<div class="author-content">
|
||||
<div class="author-name flexacenter">4564sd56f456</div>
|
||||
<div class="author-info flexacenter">共 <div class="amount">57</div> 个创作，获得 <div class="amount">1093</div> 个赞</div>
|
||||
<div class="author-name flexacenter">
|
||||
{{ authorInfo.nickname || '匿名用户' }}
|
||||
<img v-if="authorInfo.group?.image" class="group" :src="authorInfo.group?.image" />
|
||||
</div>
|
||||
<div class="author-info flexacenter">共 <div class="amount">{{ count }}</div> 个创作，获得 <div class="amount">100</div> 个赞</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="medal">
|
||||
<div class="medal-title">勋章 6</div>
|
||||
<div class="medal-title">勋章 {{ medal.length }}</div>
|
||||
<div class="medal-list flexflex">
|
||||
<img class="medal-item" v-for="item in 6" :key="item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpbmD-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o7x6CLR54iN90MUNDQyOQ~~">
|
||||
<img class="medal-item" v-for="item in medal" :key="item" :src="item.image" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recently">
|
||||
<div class="recently" v-if="recentlyList.length > 0">
|
||||
<div class="recently-title">最近发布</div>
|
||||
<div class="recently-list flexflex">
|
||||
<div v-for="item in 8" :key="item" class="recently-item one-line-display flexacenter">
|
||||
<div v-for="item in recentlyList" :key="item" class="recently-item one-line-display flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display flex1">GMAT这么有用吗？跟大家讨论讨的跟大家讨论讨的跟大家讨论讨的</div>
|
||||
<div class="text one-line-display flex1">{{ item.title || '无标题' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<latest-list></latest-list>
|
||||
|
||||
<slideshow-box></slideshow-box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coins-area flexcenter" v-if="false">
|
||||
<div class="coins-area flexcenter" v-if="coinsState">
|
||||
<div class="coins-box flexcenter">
|
||||
<img class="fork" src="./img/fork-icon.png">
|
||||
<img class="fork" @click="closeCoinBox" src="./img/fork-icon.png">
|
||||
<div class="coins-head flexacenter">
|
||||
<img class="icon" src="./img/bi-icon.png">
|
||||
<div class="text flexacenter">该帖子已获得 <div class="sum">23</div> 个寄托币</div>
|
||||
<div class="text flexacenter">该帖子已获得 <div class="sum">{{ info.coins }}</div> 个寄托币</div>
|
||||
</div>
|
||||
<div class="coins-input flexacenter">
|
||||
<input class="input flex1" type="number" placeholder="输入投币数">
|
||||
<div class="btn">投币</div>
|
||||
<input class="input flex1" type="number" placeholder="输入投币数" v-model="coinAmount">
|
||||
<div class="btn" @click="coinSubmit">投币</div>
|
||||
</div>
|
||||
|
||||
<div class="coins-info flexacenter">
|
||||
<img class="icon" src="./img/bi-black-icon.png">
|
||||
你当前共有 <div class="sum">934</div> 寄托币
|
||||
<div class="strategy">[挣币攻略]</div>
|
||||
你当前共有 <div class="sum">{{ mybalance }}</div> 寄托币
|
||||
<a class="strategy" target="_blank" :href="strategy">[挣币攻略]</a>
|
||||
</div>
|
||||
|
||||
<div class="coins-list-area flexflex">
|
||||
<div class="coins-total flexacenter">共 <div class="sum">11</div> 人参与投币：</div>
|
||||
<div class="coins-total flexacenter">共 <div class="sum">{{ coinNubmer }}</div> 人参与投币：</div>
|
||||
<div class="list flex1">
|
||||
<div class="item flexacenter" v-for="item in 1">
|
||||
<div class="serial">1</div>
|
||||
<div class="item flexacenter" v-for="(item,index) in coinList" :key="index">
|
||||
<div class="serial">{{ item.rank }}</div>
|
||||
<div class="user flex1 flexacenter">
|
||||
<img class="avatar" src="./img/avatar.png">
|
||||
<div class="username one-line-display flex1">4564sd56f456</div>
|
||||
<img class="avatar" :src="item.user.avatar" alt="">
|
||||
<div class="username one-line-display flex1">{{ item.user.nickname || '匿名用户' }}</div>
|
||||
</div>
|
||||
<div class="amount flexacenter">100 <div class="text">币</div>
|
||||
<div class="amount flexacenter">{{ item.coins }} <div class="text">币</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<like v-if="isLikeGif"></like>
|
||||
|
||||
</div>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
|
||||
BIN
img/arrow-circular-gray.png
Normal file
BIN
img/arrow-circular-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
img/close-icon.png
Normal file
BIN
img/close-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
11
img/comment-icon-gray.svg
Normal file
11
img/comment-icon-gray.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="13px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter571">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0.4 0 1 0 0 0.4 0 0 1 0 0.4 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1740 -5324 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="14" height="13" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA4CAYAAABNGP5yAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAOAAAAACP8+m+AAADhUlEQVRoBe2aS4hPURzHZ7zfj4USmTGTkGcodiRRNh5JNsooO7NhgyJSyoayIDbySFlYkLLwyAaRR5Ty2DCTJPIYeYfx+U5z9O/M+f/N/zf3/q//vfdX3+4959zze3zP6557T01NxqU2EP8M8prAPDAaVLN8x/lWcBEcA+9AURlCyVHwG7SnEG3EtAEERcHfAmkM3I9pd4iBUxkJ3pGxwpGgOWAuUOv7cpuM60DjqFplOI4vA2O8AJ6TngB+Kf8QcMy46zbyQhOknq82GYbDV4GLzV0Xu0AeeoV3XUGKrg3E4k/uOxVfL+AvdWIrbfKMgF54QdUrLQL6ewXfvHRakp+8QHorLQIyLTkBmW5+gs98D+jTwx4wivpDe6jDr/6WDL23V0SsBDTi3XkwJSYvr6B3Ofgck/6/aq1DQG+KcQUv5xaB9bqJW6wEdLxExOzc+Jj1d6i3EvCkAs49qoAN8yqwB+cugx8xOPkFnSfBiRh0d1FpnQRfoUm7Kb1OarcVpbyPUtm/dFkJcHq1n66ow85wVFfrHBCV/cT15AQk3gQJO5D3gIQbIHHzme8B1mVQxK0DC8GABJuxFdsHgb75mcRKQDPWDpgsRl9pNSonAdO3TOsQWBJ9HGaNddQ070ytBMSxBzAzQEVT68uglYDj1NWPhv9BbuLEY6sj1jngHAZngwVgoNV4BPVa0HEWmBvDSoB8f9AJ3VetWIdA1QbsO54T4DOStXTeA7LW4n68eQ+AkXaPlb5eOi1Jv7E73h2U+caLcJqXTkNSh6UavEBeu/QZbtQLHPSld74rTMl1X0F8Ls41iq0WrAIioVC+ktgPLgH/aEnhc1Hda3OlP0E/y1SoHqweW2zY1lO2FqwEhfKRRB1oU6Z+buhMoGMmqatOq80E3ZURPHgfWPzd7huZTIbmAouyKOvoUOYO0J09yiajv/r1HtQ/nYKnRqVRkiBdd8BUUEo2Uliu3dPUKbl7HcQDm4G1a5XrUKnn9ZFjK9AQDclgMq+BUjpUJj0XwFLQRTQJFhMdfRkLZChOGYdyzdKNRYzoHHMTCH30kP9a3kaCkHwgswWUO7mGdMWap265t9PRUItqVdoCivUGitIhswjjHgiRoLwbQF+AUy39iG4X0IoQIuIl+XEPS0wkL3rB0QfPEAlzknevMh5ozGu913E5R4R6gFarTMlEoj0MjgC9tEUmfwCaJfF0KbQc/QAAAABJRU5ErkJggg==" x="1740px" y="5324px" filter="url(#filter571)" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/cross-icon.png
Normal file
BIN
img/cross-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
img/homepage-icon.png
Normal file
BIN
img/homepage-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/like-icon-gray.png
Normal file
BIN
img/like-icon-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/like-red-pitch.png
Normal file
BIN
img/like-red-pitch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 965 B |
11
img/menu-icon-gray.svg
Normal file
11
img/menu-icon-gray.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter572">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0.4 0 1 0 0 0.4 0 0 1 0 0.4 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1686 -5323 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAIdQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA92IrIQAAACx0Uk5TAB5tuNj0bB0bmfz9qiBQ8/JOb24cGp6ba7e12/HZ12n7nJgZSU1MFZGitmptU/ZgAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAQ1JREFUeNrt1utOwlAQReEC5WKrnGKrItaK4t3z/s+nicYIHacN2ZHErO8nk7UDDSEkCQAAAAAAAAAAAPBpMByl43E6mkwP0syOsvglPz7pN6Vs5iH+UCz6bCmb0zxuycvuLWUz33n949L5eZRNFWJLceZvSZvzaLjwx5TNILMOWeVtSZsympbemLS5tA8rb0zaXNmH1BuTNsE+BG9M2vxyqPcY26+5tg+NNyZtDv4lnNiHG29M2kzNH4i1+6OibW6tw13ikjazov16vfHHtM196+HkD0kHbVPu/lEYdm2pm8XW06kfu7fUzdPz+vttvWz6bMmbavnahNCs3qp+U3/ZAAAAAAAAAAAA4J97B6Y13hOEznw5AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAzLTE4VDEyOjI5OjA2KzA4OjAwpDFvtAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMy0xOFQxMjoyOTowNiswODowMNVs1wgAAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2V3MGNucnU1MjUvZ2VuZ2R1by5zdmfa+p/PAAAAAElFTkSuQmCC" x="1686px" y="5323px" filter="url(#filter572)" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/no-discussion.png
Normal file
BIN
img/no-discussion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
img/picture-icon.png
Normal file
BIN
img/picture-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/send-messages-icon.png
Normal file
BIN
img/send-messages-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/smiling-face.png
Normal file
BIN
img/smiling-face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
img/u161.png
Normal file
BIN
img/u161.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 834 B |
307
js/details.js
307
js/details.js
@@ -1,38 +1,99 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
import { itemOffer } from "../component/item-offer/item-offer.js";
|
||||
import { itemSummary } from "../component/item-summary/item-summary.js";
|
||||
import { itemVote } from "../component/item-vote/item-vote.js";
|
||||
import { itemMj } from "../component/item-mj/item-mj.js";
|
||||
import { itemTenement } from "../component/item-tenement/item-tenement.js";
|
||||
import { latestList } from "../component/latest-list/latest-list.js";
|
||||
import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
|
||||
import { like } from "../component/like/like.js";
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
let signInAlreadyState = ref(false);
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
getUserInfoWin();
|
||||
|
||||
setTimeout(() => (permissions.value = window["permissions"] || []), 1000);
|
||||
});
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = ref({
|
||||
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
|
||||
groupid: 3,
|
||||
nickname: "肖荣豪",
|
||||
realname: 1,
|
||||
token: "01346a38444d71aaadb3adad52b52c39",
|
||||
uid: 500144,
|
||||
uin: 4238049,
|
||||
});
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
|
||||
let authorInfo = ref({});
|
||||
let info = ref({});
|
||||
let ismyself = ref(false);
|
||||
let labelList = ref({
|
||||
sectionn: "",
|
||||
tags: [],
|
||||
});
|
||||
|
||||
let timestamp = ref("");
|
||||
let updatedTime = ref("");
|
||||
let token = "";
|
||||
let uniqid = "";
|
||||
|
||||
let sectionn = ref([]);
|
||||
let tags = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
const params = getUrlParams();
|
||||
uniqid = params.uniqid || "";
|
||||
|
||||
init();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
ajaxget(`https://api.gter.net/v2/api/forum/getTopicDetails?uniqid=${"9GPSfyaGDTz5"}`).then((res) => {
|
||||
console.log("res", res);
|
||||
ajaxget(`/v2/api/forum/getTopicDetails?uniqid=${uniqid}`).then((res) => {
|
||||
const data = res.data;
|
||||
|
||||
console.log("data", data);
|
||||
|
||||
let targetInfo = data.info;
|
||||
|
||||
if (!targetInfo.hidden) targetInfo.hidden = 0;
|
||||
@@ -47,10 +108,9 @@ const appSectionIndex = createApp({
|
||||
|
||||
authorInfo.value = Array.isArray(data.authorInfo) ? null : data.authorInfo;
|
||||
ismyself.value = data.ismyself || false;
|
||||
labelList.value = {
|
||||
sectionn: targetInfo.sectionn,
|
||||
tags: targetInfo.tags,
|
||||
};
|
||||
|
||||
sectionn.value = targetInfo.sectionn;
|
||||
tags.value = targetInfo.tags;
|
||||
|
||||
timestamp.value = strtimeago(targetInfo.release_at, 4);
|
||||
updatedTime.value = targetInfo.updated_at ? strtimeago(targetInfo.updated_at, 4) : null;
|
||||
@@ -58,18 +118,235 @@ const appSectionIndex = createApp({
|
||||
|
||||
token = data.token;
|
||||
|
||||
// if (this.islogin) this.getTopicOperation();
|
||||
getAuthorInfo();
|
||||
getTopicOperation();
|
||||
|
||||
getCoinConfig();
|
||||
|
||||
getRelatedTopics();
|
||||
|
||||
getComment();
|
||||
});
|
||||
};
|
||||
|
||||
return { signInAlreadyState, authorInfo, info, timestamp, updatedTime, labelList };
|
||||
let count = ref(0);
|
||||
let medal = ref([]);
|
||||
const getAuthorInfo = () => {
|
||||
ajaxget(`/v2/api/forum/getSpaceDetail?uid=${authorInfo.value.uid || 0}&uin=${authorInfo.value.uin || 0}`).then((res) => {
|
||||
const data = res.data;
|
||||
const countList = data.count || [];
|
||||
count.value = countList.reduce((sum, item) => {
|
||||
const currentCount = Number(item.count) || 0;
|
||||
return sum + currentCount;
|
||||
}, 0);
|
||||
|
||||
medal.value = data.medal || [];
|
||||
authorInfo.value = data.info;
|
||||
getCreationList(data.token);
|
||||
});
|
||||
};
|
||||
|
||||
let recentlyList = ref([]);
|
||||
const getCreationList = (token) => {
|
||||
ajaxget(`/v2/api/forum/getSpaceTopicList?token=${token}&simple=1`).then((res) => {
|
||||
const data = res.data;
|
||||
recentlyList.value = data.data || [];
|
||||
recentlyList.value = recentlyList.value.slice(0, 8);
|
||||
});
|
||||
};
|
||||
|
||||
let islike = ref(0);
|
||||
let iscollect = ref(0);
|
||||
|
||||
const getTopicOperation = () => {
|
||||
ajax(`/v2/api/forum/getTopicOperation`, {
|
||||
token,
|
||||
actions: ["like", "collection"],
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
const like = data.like;
|
||||
const collection = data.collection;
|
||||
|
||||
islike.value = like.status;
|
||||
iscollect.value = collection.status;
|
||||
});
|
||||
};
|
||||
|
||||
let isLikeGif = ref(false);
|
||||
|
||||
const likeClick = () => {
|
||||
ajax(`/v2/api/forum/postTopicLike`, {
|
||||
token,
|
||||
}).then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
const data = res.data;
|
||||
islike.value = data.status;
|
||||
info.value.likes = data.likes;
|
||||
|
||||
if (data.status) {
|
||||
isLikeGif.value = true;
|
||||
setTimeout(() => (isLikeGif.value = false), 2000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const collectClick = () => {
|
||||
ajax(`/v2/api/forum/postTopicCollect`, {
|
||||
token,
|
||||
}).then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
const data = res.data;
|
||||
iscollect.value = data.status;
|
||||
info.value.collections = data.collections;
|
||||
});
|
||||
};
|
||||
|
||||
let strategy = ref("");
|
||||
let mybalance = ref(0);
|
||||
let defaultcoinnum = 0;
|
||||
|
||||
const getCoinConfig = () => {
|
||||
ajaxget(`/v2/api/forum/getCoinConfig`).then((res) => {
|
||||
const data = res.data;
|
||||
strategy.value = data.config.strategy.url || 0;
|
||||
mybalance.value = data.mybalance || 0;
|
||||
defaultcoinnum = data.defaultcoinnum || 0;
|
||||
});
|
||||
};
|
||||
|
||||
let coinsState = ref(false);
|
||||
const openCoinBox = () => {
|
||||
coinsState.value = true;
|
||||
document.body.style.overflow = "hidden";
|
||||
if (!coinListRequest) getCoinRankList();
|
||||
};
|
||||
|
||||
const closeCoinBox = () => {
|
||||
coinsState.value = false;
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
|
||||
let coinAmount = ref("");
|
||||
|
||||
const coinSubmit = () => {
|
||||
const num = Number(coinAmount.value || defaultcoinnum) || 0;
|
||||
ajax(`/v2/api/forum/postTopicCoin`, {
|
||||
token,
|
||||
num,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 200) creationAlertBox("success", res.message);
|
||||
else creationAlertBox("error", res.message);
|
||||
|
||||
if (res.code != 200) return;
|
||||
|
||||
let data = res.data;
|
||||
|
||||
mybalance.value = mybalance.value - num || 0;
|
||||
coinAmount.value = "";
|
||||
info.value.coins = data.coins || 0;
|
||||
|
||||
coinNubmer.value = 0;
|
||||
coinList.value = [];
|
||||
getCoinRankList();
|
||||
})
|
||||
.finally(() => {
|
||||
// wx.hideLoading();
|
||||
});
|
||||
};
|
||||
|
||||
let coinNubmer = ref(0);
|
||||
let coinList = ref([]);
|
||||
let coinListRequest = false; // 控制请求次数
|
||||
const getCoinRankList = () => {
|
||||
ajaxget(`/v2/api/forum/getCoinRankList?token=${token}&limit=1000`).then((res) => {
|
||||
const data = res.data;
|
||||
coinNubmer.value = data.nubmer;
|
||||
coinList.value = data.data;
|
||||
coinListRequest = true;
|
||||
});
|
||||
};
|
||||
|
||||
let relatedList = ref([]);
|
||||
let relatedTime = ref("");
|
||||
const getRelatedTopics = () => {
|
||||
ajaxget(`/v2/api/forum/getRelatedTopics?uniqid=${uniqid}&limit=8`).then((res) => {
|
||||
const data = res.data;
|
||||
relatedTime.value = data.updated_at || "";
|
||||
relatedList.value = data.list || [];
|
||||
});
|
||||
};
|
||||
|
||||
let alreadyCommentIdList = [];
|
||||
let commentPage = ref(1);
|
||||
let isgetCommentSate = false;
|
||||
let commentList = ref([]);
|
||||
let commentTotalCount = ref(0);
|
||||
|
||||
const getComment = () => {
|
||||
if (commentPage.value == 0 || isgetCommentSate) return;
|
||||
isgetCommentSate = true;
|
||||
ajaxget(`/v2/api/forum/getCommentList?token=${token}&page=${commentPage.value}&limit=1500`)
|
||||
.then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message || "");
|
||||
return;
|
||||
}
|
||||
let data = res.data;
|
||||
|
||||
data.data.forEach((element, index) => {
|
||||
element.timestamp = strtimeago(element.created_at, 4);
|
||||
|
||||
element["isReplyBoxShow"] = 0;
|
||||
if (element.child.length > 0) {
|
||||
element.child.forEach((el) => {
|
||||
el.timestamp = strtimeago(element.created_at, 4);
|
||||
el["isReplyBoxShow"] = 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (commentPage.value > 1) {
|
||||
for (let index = 0; index < data.data.length; index++) {
|
||||
if (alreadyCommentIdList.includes(data.data[index].id)) {
|
||||
data.data.splice(index, 1);
|
||||
index--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
commentList.value = commentList.value.concat(data.data);
|
||||
commentTotalCount.value = data.count;
|
||||
|
||||
console.log("commentTotalCount.value", commentTotalCount.value);
|
||||
|
||||
commentPage.value = data.count > commentList.value.length ? commentPage.value + 1 : 0;
|
||||
})
|
||||
.finally(() => {
|
||||
isgetCommentSate = false;
|
||||
});
|
||||
};
|
||||
|
||||
let picture = ref({});
|
||||
|
||||
return { permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, signInAlreadyState, authorInfo, info, timestamp, updatedTime };
|
||||
},
|
||||
});
|
||||
|
||||
appSectionIndex.component("itemForum", itemForum);
|
||||
appSectionIndex.component("itemOffer", itemOffer);
|
||||
appSectionIndex.component("itemSummary", itemSummary);
|
||||
appSectionIndex.component("itemVote", itemVote);
|
||||
appSectionIndex.component("itemMj", itemMj);
|
||||
appSectionIndex.component("itemTenement", itemTenement);
|
||||
appSectionIndex.component("latestList", latestList);
|
||||
appSectionIndex.component("slideshowBox", slideshowBox);
|
||||
appSectionIndex.component("like", like);
|
||||
|
||||
appSectionIndex.mount("#details");
|
||||
|
||||
171
js/public.js
171
js/public.js
@@ -2,8 +2,9 @@ const forumBaseURL = "https://api.gter.net";
|
||||
axios.defaults.withCredentials = true;
|
||||
|
||||
// 导出ajax函数
|
||||
const ajax = (url) => {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
const ajax = (url, data) => {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
axios
|
||||
@@ -34,6 +35,8 @@ const ajax = (url) => {
|
||||
|
||||
// 导出ajaxget函数
|
||||
const ajaxget = (url) => {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
axios
|
||||
@@ -148,3 +151,167 @@ const timeago = (dateTimeStamp, type = 1) => {
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const creationAlertBox = (type = "success", text) => {
|
||||
if (!text) return;
|
||||
const pathObj = {
|
||||
success: `<path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>`,
|
||||
error: `<path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"></path>`,
|
||||
};
|
||||
|
||||
const colorObj = {
|
||||
success: {
|
||||
border: "#e1f3d8",
|
||||
color: "#67c23a",
|
||||
background: "#f0f9eb",
|
||||
},
|
||||
error: {
|
||||
border: "#fde2e2",
|
||||
color: "#f56c6c",
|
||||
background: "#fef0f0",
|
||||
},
|
||||
};
|
||||
|
||||
if (!pathObj[type]) type = "success"; // 判断存不存在 给个默认值
|
||||
|
||||
const box = document.createElement("div");
|
||||
|
||||
box.style.position = "fixed";
|
||||
box.style.zIndex = "10003";
|
||||
box.style.top = "-51px";
|
||||
box.style.left = "50%";
|
||||
box.style.border = `${colorObj[type].border} 1px solid`;
|
||||
box.style.color = colorObj[type].color;
|
||||
box.style.background = colorObj[type].background;
|
||||
box.style.display = "flex";
|
||||
box.style.alignItems = "center";
|
||||
box.style.fontSize = "14px";
|
||||
box.style.padding = "15px 19px";
|
||||
box.style.borderRadius = "4px";
|
||||
box.style.transition = "0.5s";
|
||||
box.style.transform = "translateX(-50%)";
|
||||
|
||||
const svg = `<svg style="width: 16px;height: 16px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">${pathObj[type]}</svg>`;
|
||||
|
||||
box.innerHTML = `${svg}${text || "默认提示文本"}`;
|
||||
document.body.appendChild(box);
|
||||
|
||||
setTimeout(() => {
|
||||
box.style.top = 20 + "px";
|
||||
setTimeout(() => {
|
||||
box.style.top = -51 + "px";
|
||||
setTimeout(() => {
|
||||
box.remove();
|
||||
}, 2000);
|
||||
}, 2000);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
const managerHide = (token, state, type = "offer") => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const obj = {
|
||||
offer: "Offer",
|
||||
offer_summary: "总结",
|
||||
interviewexperience: "面经",
|
||||
thread: "帖子",
|
||||
question: "帖子",
|
||||
vote: "投票",
|
||||
};
|
||||
|
||||
const isConfirmed = confirm(`确定要${state == 0 ? "隐藏" : "显示"}该${obj[type]}吗？`);
|
||||
if (isConfirmed) {
|
||||
ajax(`https://api.gter.net/v2/api/forum/setTopicHide`, {
|
||||
token,
|
||||
hidden: Number(state !== 1),
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
creationAlertBox("success", res.message || "");
|
||||
resolve(data.hidden);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 推荐
|
||||
const managerRecommend = (token, state) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const post = () => {
|
||||
ajax(`/v2/api/forum/setTopicRecommend`, {
|
||||
token,
|
||||
recommend: state == 1 ? 0 : 1,
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
creationAlertBox("success", res.message || "");
|
||||
resolve(data.recommend);
|
||||
});
|
||||
};
|
||||
|
||||
if (state == 1) {
|
||||
const isConfirmed = confirm(`确定要取消推荐吗？`);
|
||||
if (isConfirmed) post();
|
||||
else resolve(state);
|
||||
} else post();
|
||||
});
|
||||
};
|
||||
|
||||
// 精华
|
||||
const managerEssence = (token, state) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const post = () => {
|
||||
ajax(`/v2/api/forum/setTopicBest`, {
|
||||
token,
|
||||
best: state == 1 ? 0 : 1,
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
creationAlertBox("success", res.message || "");
|
||||
resolve(data.best);
|
||||
});
|
||||
};
|
||||
|
||||
if (state == 1) {
|
||||
const isConfirmed = confirm(`确定要取消精华吗？`);
|
||||
if (isConfirmed) post();
|
||||
else resolve(state);
|
||||
} else post();
|
||||
});
|
||||
};
|
||||
|
||||
const getUrlParams = () => {
|
||||
const params = {};
|
||||
const queryString = window.location.search.slice(1);
|
||||
if (queryString) {
|
||||
queryString.split("&").forEach((pair) => {
|
||||
const [key, value] = pair.split("=");
|
||||
params[decodeURIComponent(key)] = decodeURIComponent(value || "");
|
||||
});
|
||||
}
|
||||
return params;
|
||||
};
|
||||
|
||||
const updateUrlParams = (params, replace = false) => {
|
||||
// 解析当前URL
|
||||
const url = new URL(window.location.href);
|
||||
const searchParams = url.searchParams;
|
||||
|
||||
// 遍历参数对象，更新URL参数
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value === null || value === undefined) {
|
||||
// 删除参数
|
||||
searchParams.delete(key);
|
||||
} else {
|
||||
// 添加或修改参数
|
||||
searchParams.set(key, value);
|
||||
}
|
||||
});
|
||||
|
||||
// 生成新的URL（保留协议、域名、路径等，只修改参数）
|
||||
const newUrl = url.origin + url.pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
|
||||
|
||||
// 修改URL（不刷新页面）
|
||||
if (replace) {
|
||||
history.replaceState(null, "", newUrl);
|
||||
} else {
|
||||
history.pushState(null, "", newUrl);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -19,6 +19,11 @@ const watchList = {
|
||||
"../component/item-mj/item-mj.txt": "../component/item-mj/item-mj.js",
|
||||
// 监听 item-tenement.txt，同步到 item-tenement.js
|
||||
"../component/item-tenement/item-tenement.txt": "../component/item-tenement/item-tenement.js",
|
||||
// 监听 latest-list.txt，同步到 latest-list.js
|
||||
"../component/latest-list/latest-list.txt": "../component/latest-list/latest-list.js",
|
||||
// 监听 slideshow-box.txt，同步到 slideshow-box.js
|
||||
"../component/slideshow-box/slideshow-box.txt": "../component/slideshow-box/slideshow-box.js",
|
||||
|
||||
// 可添加更多文件（格式：'txt路径': 'js路径'）
|
||||
// './component/other/other.txt': './component/other/other.js',
|
||||
};
|
||||
|
||||
@@ -1,20 +1,35 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
let signInAlreadyState = ref(false);
|
||||
onMounted(() => {
|
||||
const params = getUrlParams();
|
||||
|
||||
section.value = params.section || "";
|
||||
|
||||
getSectionList();
|
||||
|
||||
init();
|
||||
handpick();
|
||||
getTags();
|
||||
getList();
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 40) getList();
|
||||
};
|
||||
|
||||
let sectionList = ref([]);
|
||||
let section = ref("Lz9aimSLXeim");
|
||||
let section = ref("");
|
||||
|
||||
const getSectionList = () => {
|
||||
ajaxget("/v2/api/forum/getSectionList").then((res) => {
|
||||
@@ -101,7 +116,6 @@ const appSectionIndex = createApp({
|
||||
count.value = data.count;
|
||||
loading = false;
|
||||
console.log(list.value[0]);
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
@@ -112,7 +126,68 @@ const appSectionIndex = createApp({
|
||||
});
|
||||
};
|
||||
|
||||
return { signInAlreadyState, sectionList, section, info, handpickList, tagsList, list };
|
||||
onMounted(() => getUserInfoWin());
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = ref({});
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
|
||||
const changeSection = (uniqid) => {
|
||||
section.value = uniqid;
|
||||
handpickList.value = [];
|
||||
info.value = {};
|
||||
tagsList.value = [];
|
||||
|
||||
count.value = 0;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
|
||||
init();
|
||||
handpick();
|
||||
getTags();
|
||||
getList();
|
||||
|
||||
updateUrlParams({ section: uniqid });
|
||||
};
|
||||
|
||||
return { changeSection, signInAlreadyState, sectionList, section, info, handpickList, tagsList, list, count };
|
||||
},
|
||||
});
|
||||
appSectionIndex.component("item-forum", itemForum);
|
||||
|
||||
@@ -46,9 +46,9 @@
|
||||
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<div class="text">首页</div>
|
||||
<a class="text textA" target="_blank" href="./">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">首页</div>
|
||||
<div class="text">{{ info.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
@@ -57,7 +57,7 @@
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in sectionList" :key="index">
|
||||
<div v-if="item.key == 'line'" class="line"></div>
|
||||
<div v-else class="item flexacenter" :class="{'pitch' : item.uniqid == section}">
|
||||
<div v-else class="item flexacenter" :class="{'pitch' : item.uniqid == section}" @click="changeSection(item.uniqid)">
|
||||
<span class="text">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -77,7 +77,7 @@
|
||||
<div class="bottom flexacenter">
|
||||
<div class="data flexacenter">
|
||||
共
|
||||
<div class="sum">124,098</div>
|
||||
<div class="sum">{{ count }}</div>
|
||||
个帖子
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
@@ -89,7 +89,7 @@
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="content-box flex1">
|
||||
<div class="selectives-box">
|
||||
<div class="selectives-box" v-if="handpickList.length > 0">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
@@ -102,7 +102,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="red-tag">
|
||||
<div class="red-tag" v-if="tagsList.length > 0">
|
||||
<div class="title">热门标签
|
||||
<img class="icon" src="./img/triangle-red.svg" />
|
||||
</div>
|
||||
@@ -114,7 +114,6 @@
|
||||
<div class="list-box">
|
||||
<item-forum v-for="(item, index) in list" :key="index" :itemdata="item"></item-forum>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="side-box"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user