feat: 新增编辑页面和分享功能，优化链接跳转和样式
- 添加edit.html编辑页面及相关CSS样式 - 实现内容编辑区的富文本功能 - 为item-bottom组件添加分享功能，包括复制链接和微信转发 - 更新多个组件的链接跳转地址 - 优化CSS样式，包括圆角、阴影和hover效果 - 修复部分样式问题和布局错位 - 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
@@ -19,5 +19,5 @@ export const headTop = defineComponent({
|
||||
return { signInAlreadyState };
|
||||
},
|
||||
|
||||
template: `<div class="head-top flexacenter"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> <div class="flex1"></div> <div class="input-box flexacenter"> <input class="input flex1" type="text" placeholder="大家都在搜：屯特" /> <img class="icon" /> </div> <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"> <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" /> <span>已签到，明天再来</span> </div> <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak> <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" /> <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" /> <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" /> GO </div> <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" /> <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" /> <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" /> </div></div>`,
|
||||
template: `<div class="head-top flexacenter"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> <div class="flex1"></div> <div class="input-box flexacenter"> <input class="input flex1" type="text" placeholder="大家都在搜：屯特" /> <img class="icon" src="./img/search-icon.svg" /> </div> <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"> <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" /> <span>已签到，明天再来</span> </div> <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak> <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" /> <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" /> <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" /> GO </div> <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" /> <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" /> <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" /> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box flexacenter">
|
||||
<input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
<img class="icon" src="./img/search-icon.svg" />
|
||||
</div>
|
||||
|
||||
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
|
||||
|
||||
@@ -25,5 +25,5 @@ export const hotSearch = defineComponent({
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-violet.svg" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-violet.svg" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search&kw=' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
热门搜索
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
|
||||
<a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search&kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,5 +25,5 @@ export const hotTag = defineComponent({
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
热门标签
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
|
||||
<a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,12 +98,16 @@ export const itemBottom = defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
return { collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
const copyLinkClick = () => {
|
||||
copyUid(`http://14.22.79.19:9551/?tpl=forum/details&uniqid=${item.value.uniqid}`);
|
||||
}
|
||||
|
||||
return { copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
},
|
||||
|
||||
components: {
|
||||
like,
|
||||
},
|
||||
|
||||
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></div> <template v-if="item.comment_list?.length != 0"> <div class="comment flexacenter" style="margin-bottom: 15px;" v-for="(item, index) in item.comment_list" :key="index"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </div></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <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>`,
|
||||
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></div><template v-if="item.comment_list?.length != 0"> <div class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </div></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item share flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> <div class="share-box flexcenter"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="./img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <div class="share-item wenxin flexcenter"> <img class="share-icon" src="./img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter"> <img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" /> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)">
|
||||
<img class="icon" :src="item?.commentreviews?.avatar" />
|
||||
<div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.comment_list?.length != 0">
|
||||
<div class="comment flexacenter" style="margin-bottom: 15px;" v-for="(item, index) in item.comment_list" :key="index">
|
||||
<div class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index">
|
||||
<img class="icon" :src="item.avatar" />
|
||||
<div class="text one-line-display">{{ item.content || "[图]" }}</div>
|
||||
</div>
|
||||
@@ -31,9 +31,24 @@
|
||||
<div class="text">{{ item.coins || "投币" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item flexacenter">
|
||||
<div class="bottom-item share flexacenter">
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">转发</div>
|
||||
<div class="share-box flexcenter">
|
||||
<div class="share-item flexcenter" @click="copyLinkClick()">
|
||||
<img class="share-icon" src="./img/copy-black-icon.png" />
|
||||
<div class="text">复制链接</div>
|
||||
</div>
|
||||
<div class="share-item wenxin flexcenter">
|
||||
<img class="share-icon" src="./img/weixin-icon.png" />
|
||||
<div class="text">微信转发</div>
|
||||
|
||||
<div class="QRcode-box flexcenter">
|
||||
<img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
|
||||
<div class="text">微信扫码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -29,5 +29,5 @@ export const itemForum = defineComponent({
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-forum"> <item-head :itemdata="item"></item-head> <div v-if="item.title" class="title">{{ item.title }}</div> <div class="message two-line-display">{{ item.content }}</div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
template: `<div class="item-box item-forum"> <item-head :itemdata="item"></item-head> <a v-if="item.title" class="title" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.title }}</a> <a class="message two-line-display" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.content }}</a> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<div class="item-box item-forum">
|
||||
<item-head :itemdata="item"></item-head>
|
||||
|
||||
<div v-if="item.title" class="title">{{ item.title }}</div>
|
||||
|
||||
<div class="message two-line-display">{{ item.content }}</div>
|
||||
<a v-if="item.title" class="title" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.title }}</a>
|
||||
<a class="message two-line-display" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.content }}</a>
|
||||
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
</div>
|
||||
@@ -33,9 +33,7 @@ export const itemHead = defineComponent({
|
||||
let show = ref(false);
|
||||
|
||||
const cutShow = () => {
|
||||
console.log(show.value);
|
||||
show.value = !show.value; // 修改为切换显示状态
|
||||
console.log("show.value", show.value);
|
||||
};
|
||||
|
||||
let reportState = ref(false);
|
||||
@@ -96,5 +94,5 @@ export const itemHead = defineComponent({
|
||||
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="sectionn?.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 sectionn" :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>`,
|
||||
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="sectionn?.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" /> <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a> <a class="item" v-for="(item, index) in tags" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
});
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="label flexflex" v-if="sectionn?.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 sectionn" :key="item">{{ item }}</div>
|
||||
<div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div>
|
||||
<a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a>
|
||||
<a class="item" v-for="(item, index) in tags" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a>
|
||||
</div>
|
||||
|
||||
<report v-if="reportState" :itemdata="item"></report>
|
||||
|
||||
@@ -8,6 +8,10 @@ import { itemHead } from "../item-head/item-head.js";
|
||||
export const latestList = defineComponent({
|
||||
name: "latestList",
|
||||
props: {
|
||||
boxtype: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
@@ -18,9 +22,19 @@ export const latestList = defineComponent({
|
||||
let item = ref({ ...props.itemdata });
|
||||
let postsTab = ref("newest"); // newest essence
|
||||
|
||||
let boxtype = ref(props.boxtype);
|
||||
console.log(boxtype.value);
|
||||
onMounted(() => {
|
||||
getTopicLatest();
|
||||
topicHandpicked();
|
||||
if (props.boxtype == "newest") {
|
||||
// boxtype.value = "newest";
|
||||
getTopicLatest();
|
||||
} else if (props.boxtype == "essence") {
|
||||
// boxtype.value = "essence";
|
||||
topicHandpicked();
|
||||
} else {
|
||||
getTopicLatest();
|
||||
topicHandpicked();
|
||||
}
|
||||
});
|
||||
|
||||
let count = 0;
|
||||
@@ -35,18 +49,24 @@ export const latestList = defineComponent({
|
||||
nextTick(() => {
|
||||
count += 1;
|
||||
examineCount();
|
||||
if (props.boxtype == "newest") {
|
||||
tabPostsItem("newest");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
let topList = ref([]);
|
||||
const topicHandpicked = () => {
|
||||
ajaxget(`/v2/api/forum/topicHandpicked`).then((res) => {
|
||||
ajaxget(`/v2/api/forum/topicLists?simple=1&best=1`).then((res) => {
|
||||
const data = res.data;
|
||||
topList.value = data;
|
||||
topList.value = data.data;
|
||||
nextTick(() => {
|
||||
count += 1;
|
||||
examineCount();
|
||||
if (props.boxtype == "essence") {
|
||||
tabPostsItem("essence");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -59,39 +79,38 @@ export const latestList = defineComponent({
|
||||
const tabPostsArr = ["newest", "essence"];
|
||||
const tabPostsItem = (key) => {
|
||||
if (key == postsTab.value) return;
|
||||
|
||||
const boxbox = document.querySelector(`.posts-box`);
|
||||
const boxbox = document.querySelector(`.posts-box.boxtype-${boxtype.value}`);
|
||||
boxbox.classList.add(`box-${key}`);
|
||||
boxbox.classList.remove(`box-${postsTab.value}`);
|
||||
|
||||
let index = tabPostsArr.indexOf(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}`);
|
||||
}
|
||||
// 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 targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`);
|
||||
// targetTabNode.classList.toggle("pitch");
|
||||
|
||||
// 修改全局背景状态的
|
||||
let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
|
||||
let targetContentHeight = targetContentNode.offsetHeight;
|
||||
// // 修改全局背景状态的
|
||||
// let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
|
||||
// let targetContentHeight = targetContentNode.offsetHeight;
|
||||
|
||||
boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
// boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
|
||||
let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
slideshowContent.scrollTo({
|
||||
left: 290 * index,
|
||||
behavior: "smooth",
|
||||
});
|
||||
// let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
// slideshowContent.scrollTo({
|
||||
// left: 290 * index,
|
||||
// behavior: "smooth",
|
||||
// });
|
||||
|
||||
postsTab.value = key;
|
||||
};
|
||||
|
||||
return { tabPostsItem, postsTab, topList, latestList, item };
|
||||
return { boxtype, tabPostsItem, postsTab, topList, latestList, item };
|
||||
},
|
||||
|
||||
components: {
|
||||
@@ -99,5 +118,5 @@ export const latestList = defineComponent({
|
||||
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>`,
|
||||
template: `<div class="posts-box box-newest " :class="['boxtype-' + boxtype]"> <div v-if="boxtype == 'newest'" class="box-newest-head flexacenter"> <img class="icon" src="./img/newest-icon.png" alt="" /> 最新 </div> <div v-else-if="boxtype == 'essence'" class="box-newest-head flexacenter"> <img class="icon" src="./img/essence.png" alt="" /> 精华阅读 </div> <div v-else 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="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" 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="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
<div class="posts-box box-newest">
|
||||
<div class="slideshow-box">
|
||||
<div class="posts-box box-newest " :class="['boxtype-' + boxtype]">
|
||||
<div v-if="boxtype == 'newest'" class="box-newest-head flexacenter">
|
||||
<img class="icon" src="./img/newest-icon.png" alt="" />
|
||||
最新
|
||||
</div>
|
||||
<div v-else-if="boxtype == 'essence'" class="box-newest-head flexacenter">
|
||||
<img class="icon" src="./img/essence.png" alt="" />
|
||||
精华阅读
|
||||
</div>
|
||||
<div v-else 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 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="">
|
||||
<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">
|
||||
<a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot dot-green"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
@@ -20,14 +27,13 @@
|
||||
|
||||
<!-- 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="">
|
||||
<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">
|
||||
<a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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