微信文章html特效,实现微信小程序文章正文页面简洁完整布局的功能方法

swiper{

width:100%;

height:500rpx;

}

swiper image{

width:100%;

height:500rpx;

}

.content{

/* display: flex; */

flex-direction: colum;

margin-top: 30rpx;

margin-bottom: 30rpx;

background-color: #fff;

/* border-bottom: 1px solid #ededed; */

border-top: 1px solid #ededed;

padding-bottom: 5px;

}

.author-date{

/* margin-top: 10rpx;

margin-bottom: 20rpx;

margin-left: 10rpx; */

margin: 10rpx 0 20rpx 10rpx;

}

.author{

width: 60rpx;

height: 60rpx;

vertical-align: middle;

}

.date{

margin-left: 20rpx;

vertical-align: middle;

margin-bottom: 5px;

font-size: 26rpx;

}

.title{

font-size: 34rpx;

font-weight: 600;

color:#333;

margin-bottom: 20px;

}

.image{

margin-left: 16px;

width: 100%;

height: 200px;

margin: auto 0;

margin-top: 10px;

margin-bottom: 10px;

}

.article-content{

color: #666;

font-size: 28rpx;

margin-bottom: 20rpx;

margin-left: 30rpx;

line-height: 40rpx;

letter-spacing: 2rpx;

}

.article-images{

width: 16px;

height: 16px;

margin-right: 8px;

vertical-align: middle;

}

.article-text{

vertical-align: middle;

}