文章详细页面的样式调整

This commit is contained in:
daihh
2022-09-28 14:55:58 +08:00
parent 1fc3b2e5d1
commit d6ff7e3fd6
2 changed files with 26 additions and 41 deletions

View File

@@ -39,16 +39,25 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.xpage-detail-content{
padding: 54px;
background-color: #fff;
}
// 详细页面的面包屑 // 详细页面的面包屑
.xpage-detail-crumbs{ .xpage-detail-crumbs{
margin-top: 54px;
margin-left: 54px;
.crumbs-first{ .crumbs-first{
color:#cccccc; color:#cccccc;
} }
.crumbs-last{ .crumbs-item{
color:#999999; color:#999999;
} }
.crumbs-line{
margin: 0px 5px;
color:#999999;
}
.crumbs-last{
color:#3d3d3d;
}
} }
@media screen and (max-width: 1366px){ @media screen and (max-width: 1366px){

View File

@@ -13,10 +13,11 @@
<!-- <div v-else>我四娘娘</div> --> <!-- <div v-else>我四娘娘</div> -->
<!-- <el-card :body-style="{ padding: '0px',background: '#f6f7fb' }" class="detail"> --> <!-- <el-card :body-style="{ padding: '0px',background: '#f6f7fb' }" class="detail"> -->
<div class="detail"> <div class="detail">
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav"> <div class="xpage-detail-crumbs">
<el-breadcrumb-item :to="{ path: '/article' }">文章列表</el-breadcrumb-item> <router-link to="/article"><span class="crumbs-first">文章列表</span></router-link>
<el-breadcrumb-item>文章详情</el-breadcrumb-item> <span class="crumbs-line">/</span>
</el-breadcrumb> <span class="crumbs-last">文章详情</span>
</div>
<div class="title">{{articleDetailData.title}}</div> <div class="title">{{articleDetailData.title}}</div>
<div class="label"> <div class="label">
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
@@ -333,14 +334,14 @@ export default {
} }
.detail { .detail {
background-color: #fff; background-color: #fff;
padding: 5px 20px 10px 20px; padding: 54px;
.title { .title {
font-size: 22px; font-size: 22px;
text-align: center; text-align: center;
line-height: 33px; line-height: 33px;
color: #121212 ; color: #121212 ;
font-weight: 500; font-weight: 500;
margin-top: 20px; margin-top: 30px;
word-break:break-all; word-break:break-all;
} }
.label { .label {
@@ -413,29 +414,4 @@ export default {
color: #999999; color: #999999;
} }
} }
// .ref-article-div {
// background-color: #fff;
// .change {
// float: right;
// }
// .list-item {
// padding: 5px 10px;
// }
// .list-item:not(:last-child) {
// border-bottom: 1px solid #dfdfdf;
// }
// img {
// width: 120px;
// border: 1px solid #eee;
// border-radius: 5px;
// vertical-align: middle;
// }
// .an-div {
// text-align: left;
// .tip {
// line-height: 35px;
// color: #666;
// }
// }
// }
</style> </style>