92 lines
1.8 KiB
Vue
92 lines
1.8 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">
|
|||
|
|
@import "@/assets/style/variables";
|
|||
|
|
.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 var(--gap);
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
// 文章信息
|
|||
|
|
.article-information {
|
|||
|
|
color: var(--color-gray);
|
|||
|
|
line-height: 36px;
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
padding: 0 var(--gap);
|
|||
|
|
}
|
|||
|
|
// 文章内容
|
|||
|
|
article {
|
|||
|
|
padding: 0 var(--gap-midele);
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: var(--article-content-font-size);
|
|||
|
|
color: var(--article-content-font-color);
|
|||
|
|
line-height: 1.8;
|
|||
|
|
:deep(img) {
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: $--mobile-max-width) {
|
|||
|
|
.article-preview {
|
|||
|
|
--article-title: 20px;
|
|||
|
|
// 标题
|
|||
|
|
h2 {
|
|||
|
|
font-size: var(--article-title);
|
|||
|
|
line-height: 25px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
// 文章信息
|
|||
|
|
.article-information {
|
|||
|
|
line-height: 25px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
// 文章内容
|
|||
|
|
article {
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: var(--article-content-font-size);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
:deep(iframe) {
|
|||
|
|
width: 100%!important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|