Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(news): 优化咨讯页，能用了

Browse Source
This commit is contained in:
BTMuli
2023-03-06 18:46:38 +08:00
parent 5e5c84f596
commit 7d14f8e74b
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/News.vue
View File

@@ -13,7 +13,7 @@
class="justify-space-between flex-nowrap" class="justify-space-between flex-nowrap"
width="320" width="320"
> >
<v-img :src="item.cover" class="post-cover"></v-img> <v-img :src="item.cover" cover style="height: 150px"></v-img>
<v-card-title>{{ item.title }}</v-card-title> <v-card-title>{{ item.title }}</v-card-title>
<v-card-actions> <v-card-actions>
<v-btn <v-btn
@@ -35,7 +35,7 @@
class="justify-space-between flex-nowrap" class="justify-space-between flex-nowrap"
width="320" width="320"
> >
<v-img :src="item.cover" class="post-cover"></v-img> <v-img :src="item.cover" cover style="height: 150px"></v-img>
<v-card-title>{{ item.title }}</v-card-title> <v-card-title>{{ item.title }}</v-card-title>
<v-card-actions> <v-card-actions>
<v-btn <v-btn
@@ -50,15 +50,14 @@
</div> </div>
</v-window-item> </v-window-item>
<v-window-item value="notice"> <v-window-item value="notice">
<div v-show="postData.news === {}">暂无新闻</div> <div v-show="postData.notice === {}">暂无公告</div>
<div class="cards-grid" v-show="postData.news !== {}"> <div class="cards-grid" v-show="postData.notice !== {}">
<v-card <v-card
v-for="item in postData.notice" v-for="item in postData.notice"
class="justify-space-between flex-nowrap" class="justify-space-between flex-nowrap"
width="320" width="320"
> >
<!-- todo: 优化图片显示 --> <v-img :src="item.cover" cover style="height: 150px"></v-img>
<v-img :src="item.cover" class="post-cover"></v-img>
<v-card-title>{{ item.title }}</v-card-title> <v-card-title>{{ item.title }}</v-card-title>
<v-card-actions> <v-card-actions>
<v-btn <v-btn
@@ -149,16 +148,25 @@ export default defineComponent({
const postHtml = new DOMParser().parseFromString(post.content, "text/html"); const postHtml = new DOMParser().parseFromString(post.content, "text/html");
// 用帖子标题替换 html 中的标题 // 用帖子标题替换 html 中的标题
postHtml.title = post.subject; postHtml.title = post.subject;
// html 两侧添加 12% 的空白
postHtml.body.style.margin = "0 12%";
postHtml.querySelectorAll("img").forEach(img => {
img.style.width = "75%";
});
// 将 html 转为能够通过 window.open 打开的 url // 将 html 转为能够通过 window.open 打开的 url
const postUrl = URL.createObjectURL( const postUrl = URL.createObjectURL(
new Blob([postHtml.documentElement.outerHTML], { type: "text/html;charset=utf-8" }) new Blob([postHtml.documentElement.outerHTML], { type: "text/html;charset=utf-8" })
); );
// 调用 tauri 打开无边框窗口 // 打开新窗口，窗口位置居中
window.open( // 获取窗口宽度
postUrl, const width = window.screen.width;
"_blank", // 获取窗口高度
"height=720, width=960, toolbar=no, menubar=no, scrollbars=no,status=no" const height = window.screen.height;
); // 计算窗口位置
const left = width / 2 - 480;
const top = height / 2 - 360;
// 打开窗口
window.open(postUrl, "_blank", `width=960,height=720,left=${left},top=${top}`);
}, },
getPost(post_id: number) { getPost(post_id: number) {
const postUrl = `https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=${post_id}`; const postUrl = `https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=${post_id}`;
@@ -178,7 +186,6 @@ export default defineComponent({
</script> </script>
<style lang="css"> <style lang="css">
/* todo 样式优化 */
.cards-grid { .cards-grid {
display: grid; display: grid;
/* 卡片大小固定，自动填充 */ /* 卡片大小固定，自动填充 */
@@ -186,10 +193,4 @@ export default defineComponent({
/* 卡片间距 */ /* 卡片间距 */
grid-gap: 20px; grid-gap: 20px;
} }
.post-cover {
object-fit: cover;
width: 100%;
min-height: 150px;
}
</style> </style>