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 20:45:08 +08:00
parent d0ff39d5da
commit d858172ddf
1 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/News.vue
View File

@@ -148,10 +148,10 @@ 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.body.style.padding = "12%";
postHtml.querySelectorAll("img").forEach(img => { postHtml.querySelectorAll("img").forEach(img => {
img.style.width = "75%"; img.style.width = "100%";
}); });
// 将 html 转为能够通过 window.open 打开的 url // 将 html 转为能够通过 window.open 打开的 url
const postUrl = URL.createObjectURL( const postUrl = URL.createObjectURL(
@@ -188,9 +188,7 @@ export default defineComponent({
<style lang="css"> <style lang="css">
.cards-grid { .cards-grid {
display: grid; display: grid;
/* 卡片大小固定，自动填充 */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
/* 卡片间距 */
grid-gap: 20px; grid-gap: 20px;
} }
</style> </style>