优化编辑器和前端内容页显示
This commit is contained in:
parent
bcfef1f4c9
commit
4150203bd3
7159
src/assets/css/bootstrap.min.css
vendored
7159
src/assets/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +1,6 @@
|
||||
/* Main styles */
|
||||
:root{
|
||||
--primary-color:#409eff;
|
||||
--tw-bg-opacity:#272727;
|
||||
--header-bg-color:#fff;
|
||||
--footer-color:#999;
|
||||
|
||||
@ -1,10 +1,66 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="detail">
|
||||
<div class="backimage"></div>
|
||||
<!-- <div class="backimage"></div> -->
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<div class="detail-header">
|
||||
<div class="top-container">
|
||||
<div class="inner-container">
|
||||
<div class="left-container">
|
||||
<div class="avatar-container">
|
||||
<span
|
||||
style="
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
"
|
||||
class="ant-avatar ant-avatar-circle"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="
|
||||
line-height: 50px;
|
||||
transform: scale(1) translateX(-50%);
|
||||
"
|
||||
>
|
||||
{{ article.author ? article.author.charAt(0) : '' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<div class="username-container">
|
||||
<p class="username">{{ article.author }}</p>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span>{{ article.publish_date }}</span>
|
||||
<span class="description-reading-item">
|
||||
阅读：{{ article.views }}
|
||||
</span>
|
||||
<span class="description-reading-item">
|
||||
点赞：{{ article.likes }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="follow-container">
|
||||
<button type="button" class="ant-btn">
|
||||
<span>点 赞</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<div class="title">
|
||||
<h1>{{ article.title }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="desc-container">
|
||||
<span class="desc-item">{{ article.desc }}</span>
|
||||
</div>
|
||||
<!--
|
||||
<h1>{{ article.title }}</h1>
|
||||
<el-divider></el-divider>
|
||||
<div class="detail-meta">
|
||||
@ -33,6 +89,7 @@
|
||||
{{ article.views }}
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="detail-content" ref="contentRef">
|
||||
<div v-html="article.content" class="content-html"></div>
|
||||
@ -306,6 +363,135 @@ onMounted(async () => {
|
||||
font-size: 14px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
display: flex;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
|
||||
.inner-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.left-container {
|
||||
display: flex;
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 15px;
|
||||
|
||||
.ant-avatar {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #ccc;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 50%;
|
||||
|
||||
.ant-avatar-string {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform-origin: 0 center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-container {
|
||||
.username-container {
|
||||
display: flex;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
padding-top: 3px;
|
||||
|
||||
.username {
|
||||
margin: 0px 5px 0px 0px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
margin: 0px;
|
||||
padding-top: 3px;
|
||||
font-size: 13px;
|
||||
|
||||
.description-reading-item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-container {
|
||||
.ant-btn {
|
||||
line-height: 1.5715;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
background: #fff;
|
||||
border-color: #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
color: #536f8a;
|
||||
border-color: #536f8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.desc-container {
|
||||
margin: 20px 0;
|
||||
padding: 20px 0 20px 30px;
|
||||
border-left: rgb(239, 112, 96) 4px solid;
|
||||
background-color: #fff9f9;
|
||||
|
||||
.desc-item {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
@ -380,7 +566,7 @@ onMounted(async () => {
|
||||
code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
// padding-left: 10px;
|
||||
color: #cdd6f4;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
|
||||
@ -137,7 +137,7 @@ const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const error = ref('')
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(6) // 每次加载6条
|
||||
const pageSize = ref(8) // 每次加载8条
|
||||
const total = ref(0)
|
||||
|
||||
// 计算是否还有更多数据
|
||||
|
||||
Loading…
Reference in New Issue
Block a user