feat: 新增编辑页面和分享功能，优化链接跳转和样式
- 添加edit.html编辑页面及相关CSS样式 - 实现内容编辑区的富文本功能 - 为item-bottom组件添加分享功能，包括复制链接和微信转发 - 更新多个组件的链接跳转地址 - 优化CSS样式，包括圆角、阴影和hover效果 - 修复部分样式问题和布局错位 - 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
@@ -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>`,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user