feat: 新增编辑页面和分享功能，优化链接跳转和样式
- 添加edit.html编辑页面及相关CSS样式 - 实现内容编辑区的富文本功能 - 为item-bottom组件添加分享功能，包括复制链接和微信转发 - 更新多个组件的链接跳转地址 - 优化CSS样式，包括圆角、阴影和hover效果 - 修复部分样式问题和布局错位 - 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
@@ -17,14 +17,13 @@ export const slideshowBox = defineComponent({
|
||||
|
||||
onMounted(() => getTopicLatest());
|
||||
|
||||
let tabPitch = ref("offer"); // offer vote interviewexperience
|
||||
let tabPitch = ref("thread"); // thread offer vote interviewexperience
|
||||
|
||||
let latestList = ref({});
|
||||
const getTopicLatest = () => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
|
||||
const data = res.data || [];
|
||||
|
||||
data.vote.forEach((item) => {
|
||||
(data.vote || []).forEach((item) => {
|
||||
if (!item.title) {
|
||||
item.title = item.content;
|
||||
item.content = "";
|
||||
@@ -41,7 +40,7 @@ export const slideshowBox = defineComponent({
|
||||
|
||||
const tabArr = ["thread", "offer", "vote", "interviewexperience"];
|
||||
|
||||
const tabItem = (key) => {
|
||||
const tabItem = (key) => {
|
||||
if (key == tabPitch.value) return;
|
||||
|
||||
const boxbox = document.querySelector(`.box-box`);
|
||||
@@ -67,6 +66,7 @@ export const slideshowBox = defineComponent({
|
||||
boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
|
||||
let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
|
||||
slideshowContent.scrollTo({
|
||||
left: 272 * index,
|
||||
behavior: "smooth",
|
||||
@@ -78,5 +78,5 @@ export const slideshowBox = defineComponent({
|
||||
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="./img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.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="./img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.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="./img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="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="./img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'https://offer.gter.net/details/' + item.uniqid" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'https://vote.gter.net/details/' + item.uniqid"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'https://interviewexperience.gter.net/details/' + item.uniqid" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!-- 问答 -->
|
||||
<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">
|
||||
<a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid">
|
||||
<div class="question flexacenter">
|
||||
<div class="text flex1 ellipsis">{{ item.title }}</div>
|
||||
</div>
|
||||
@@ -31,7 +31,7 @@
|
||||
<!-- 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">
|
||||
<a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'https://offer.gter.net/details/' + item.uniqid" target="_blank">
|
||||
<img class="school-img" :src="item.data.schoollogo" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data.schoolname }}</div>
|
||||
@@ -56,7 +56,7 @@
|
||||
<!-- 投票 -->
|
||||
<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 }}">
|
||||
<a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'https://vote.gter.net/details/' + item.uniqid">
|
||||
<div class="name one-line-display">{{ item.title }}</div>
|
||||
<div class="brief">{{ item.content }}</div>
|
||||
</a>
|
||||
@@ -71,7 +71,7 @@
|
||||
<!-- 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">
|
||||
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'https://interviewexperience.gter.net/details/' + item.uniqid" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data.schoolname }}</div>
|
||||
<div class="major one-line-display"></div>
|
||||
<div class="info">
|
||||
|
||||
Reference in New Issue
Block a user