64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
||
<div class="article-preview">
|
||
<!-- 标题 -->
|
||
<h2>{{ data.title }}</h2>
|
||
<!-- 信息 -->
|
||
<ul class="article-information">
|
||
<li>
|
||
<label>发布时间：</label>
|
||
{{ data.updatedAt || data.createdAt }}
|
||
</li>
|
||
</ul>
|
||
<!-- 内容 -->
|
||
<article v-html="data.content"></article>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
|
||
export default {
|
||
name: 'ArticlePreview',
|
||
props: {
|
||
data: {
|
||
required: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.article-preview {
|
||
--article-title: 30px;
|
||
--article-content-font-size: 16px;
|
||
--article-content-font-color: #555;
|
||
// 标题
|
||
h2 {
|
||
text-align: center;
|
||
color: var(--primary-color);
|
||
font-size: var(--article-title);
|
||
line-height: 50px;
|
||
font-weight: bold;
|
||
padding: 0 20px;
|
||
word-break: break-all;
|
||
}
|
||
// 文章信息
|
||
.article-information {
|
||
color: var(--color-gray);
|
||
line-height: 36px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 0 20px;
|
||
}
|
||
// 文章内容
|
||
article {
|
||
padding: 0 30px;
|
||
overflow: hidden;
|
||
font-size: var(--article-content-font-size);
|
||
color: var(--article-content-font-color);
|
||
line-height: 1.8;
|
||
:deep(img) {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|