文章详情页面-结构样式处理

demo

一、基本结构

​

<template>
	<view class="article-detail-container">
		<view class="detail-title">
			ssr基本介绍以及API的使用
		</view>
		<view class="detail-header">
			<view class="detail-logo">
				<image src="../../static/img/logo.jpeg" mode="aspectFill"></image>
			</view>
			<view class="detail-header-content">
				<view class="detail-header-content-title">
					WEB讲师
				</view>
				<view class="detail-header-content-info">
					<text>2020.03.16 17:50</text>
					<text>173 浏览</text>
					<text>6 赞</text>
				</view>
			</view>
			<button type="default" class="detail-header-button">取消关注</button>
		</view>
		<view class="detail-content-container">
			<view class="detail-html">
				文本内容
			</view>
		</view>

		<!-- 评论组件 -->
		<view class="detail-bottom">
			<view class="input-container">
				<text>谈谈你的看法</text>
				<uni-icons type="compose" size="16" color="#f07373"></uni-icons>
			</view>
			<view class="detail-bottom-icons">
				<view class="detail-bottom-icon-box">
					<uni-icons type="chat" size="22" color="#f07373"></uni-icons>
				</view>
				<view class="detail-bottom-icon-box">
					<uni-icons type="heart" size="22" color="#f07373"></uni-icons>
				</view>
				<view class="detail-bottom-icon-box">
					<uni-icons type="hand-thumbsup" size="22" color="#f07373"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

二、初始化样式

​

.article-detail-container {
	padding: 30rpx 0 108rpx;
}

.detail-title {
	padding: 0 30rpx;
	font-size: 36rpx;
	font-weight: bold;
}

.detail-header {
	@include flex(flex-start);
	margin-top:20rpx;
	padding: 0 30rpx;
	.detail-logo {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.detail-header-content {
		width: 100%;
		padding-left: 20rpx;
		@include flex(space-between,column);
		font-size: 24rpx;
		align-items: flex-start;
		.detail-header-content-title {
			font-size: 28rpx;
			color: #333;
		}
		.detail-header-content-info {
			color: $c-9;
			text {
				margin-right: 20rpx;
			}
		}
	}
	.detail-header-button {
		padding: 0 30rpx;
		flex-shrink: 0;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: $base-color;
	}
}

.detail-content-container {
	margin-top: 40rpx;
	// min-height: 1000rpx;
	.detail-html {
		padding: 0 30rpx;
	}
}

.detail-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	@include flex(flex-start);
	width: 100%;
	height: 88rpx;
	border-top: 1px #f5f5f5 solid;
	background-color: #FFFFFF;
	box-sizing: border-box;
	.input-container {
		@include flex();
		margin-left: 20rpx;
		padding: 0 20rpx;
		flex-grow: 1;
		height: 60rpx;
		border: 1px solid #ddd;
		border-radius: 5px;
		text {
			font-size: 28rpx;
			color: $c-9;
		}
	}
	.detail-bottom-icons {
		display: flex;
		flex-shrink: 0;
		padding: 0 20rpx;
	}
	.detail-bottom-icon-box {
		position: relative;
		@include flex(center);
		width: 88rpx;
	}
}