tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构 BlogContent tailwind

Browse Source
This commit is contained in:
tone
2024-09-29 22:51:17 +08:00
parent 4eb427108e
commit 6ef31e7b3a
3 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tonecn/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="./src/assets/logo.jpg"> <link rel="icon" href="./src/assets/logo.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/assets/tailwind.css">
<title>特恩(TONE)</title> <title>特恩(TONE)</title>
</head> </head>
<body> <body>

70
tonecn/src/views/BlogContent.vue
View File

@@ -72,14 +72,14 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="bcc"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
<div class="content-container"> <div class="flex flex-col max-w-[600px] my-[50px] mx-auto px-[20px]">
<div class="status" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="mx-auto" v-if="loadStatus == 0">加载中，请稍后...</div>
<el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" /> <el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" />
<div v-if="loadStatus == 1"> <div v-if="loadStatus == 1">
<div> <div>
<h1 style="margin: 0 auto;text-align: center;">{{ blogInfo.title }}</h1> <h1 class="text-center text-[28px] font-semibold">{{ blogInfo.title }}</h1>
<p style="margin: 15px auto;text-align: center;color: #888;font-size: 14px;">发布于 {{ <p class="my-[15px] mx-auto text-[14px] text-[#888] text-center">发布于 {{
timestampToString(blogInfo.publish_time) }}</p> timestampToString(blogInfo.publish_time) }}</p>
</div> </div>
<div v-html="blogContent" id="blogContentContainer"></div> <div v-html="blogContent" id="blogContentContainer"></div>
@@ -89,29 +89,6 @@ onUnmounted(() => {
</div> </div>
<BlogContentToolBar v-if="loadStatus == 1" @comment-success="blogCommentReload = true;" /> <BlogContentToolBar v-if="loadStatus == 1" @comment-success="blogCommentReload = true;" />
</template> </template>
<style scoped>
.bcc {
position: fixed;
z-index: -1;
background-color: #f6f8f9;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.content-container {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 50px auto;
padding: 0 20px;
}
.content-container .status {
margin: 0 auto;
}
</style>
<style> <style>
/* markdown CSS */ /* markdown CSS */
#blogContentContainer img { #blogContentContainer img {
@@ -137,6 +114,11 @@ onUnmounted(() => {
color: #888; color: #888;
} }
#blogContentContainer p {
margin-top: 10px;
margin-bottom: 10px;
}
#blogContentContainer pre { #blogContentContainer pre {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
@@ -152,6 +134,38 @@ onUnmounted(() => {
#blogContentContainer h4, #blogContentContainer h4,
#blogContentContainer h5, #blogContentContainer h5,
#blogContentContainer h6 { #blogContentContainer h6 {
font-weight: 600;
}
#blogContentContainer h1 {
font-size: 28px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
#blogContentContainer h2 {
font-size: 24px;
border-bottom: 1px solid #ddd;
}
#blogContentContainer h3 {
font-size: 22px;
}
#blogContentContainer h4 {
font-size: 20px;
}
#blogContentContainer h5 {
font-size: 18px;
}
#blogContentContainer h6 {
font-size: 16px;
}
#blogContentContainer pre {
font-size: 12px;
border-radius: 8px;
box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
}
</style> </style>

5
tonecn/tailwind.config.js
View File

@@ -1,14 +1,17 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: [ content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}",
"./index.html",
], ],
theme: { theme: {
extend: { extend: {
colors: { colors: {
'default-bg': '#fafafa', 'default-bg': '#fafafa',
'dark-bg': '#1a1a1a', 'dark-bg': '#1a1a1a',
},
screens: {
'xs': '440px'
} }
}, },
}, },