fanghuayuexuan/pages_shopping/live/article.vue

<template>
	<view class="content">
		<view class="status_bar" :style="{height: statusBarHeight}"></view>
		<view class="top-block">
			<view class="left">
				<image class="w64 h64 " src="/static/images/back_black.png"></image>
				<image class="head" src="/static/images/img.png"></image>
				<text class="name">芳华悦选</text>
			</view>
			<view class="right">
				<view class="icon-bg">
					<image class="w40 h40" src="/static/images/share-icon.png"></image>
				</view>
				<view class="icon-bg">
					<image class="w40 h40" src="/static/images/shopping_car.png"></image>
				</view>
			</view>
		</view>

		<!-- 文章 -->
		<view class="article">
			<image class="photo" src="/static/images/img.png"></image>
			<view class="article-main">
				<view class="title">秋季常见问题儿科专家直播</view>
				<view class="txt">
					<text>秋意渐浓,凉爽的秋风不仅带来了宜人的景色,也悄然引发了儿童鼻炎的高发期。鼻塞、流涕、打喷嚏……这些看似不起眼的症状,却可能严重影响孩子们的日常生活和学习。#儿童鼻炎的高发期</text>
					<text class="lable">#儿童鼻炎的高发期</text>
				</view>
				<view class="card">
					<view class="card-item">
						<image class="card-icon" src="/static/images/jinbang_font.png"></image>
						<text class="ranking">24小时热门榜</text>
						<text class="top">TOP.3</text>
					</view>
					<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
				</view>
				<view class="place">5天前 重庆</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-num">
				<text>共 124 条评论</text>
				<image class="w24 h24 ml10" src="/static/images/comment-icon.png"></image>
			</view>
			<!--可评论输入框 -->
			<view class="my-input">
				<image class="head" src="/static/images/img.png"></image>
				<view class="input-item">
					<input class="input" placeholder="说点什么..." />
					<image class="w40 h40" src="/static/images/emoticon_icon.png"></image>
				</view>
			</view>

			<!-- 消息 -->
			<view class="message">
				<view class="message-item">
					<view class="left">
						<image class="head" src="/static/images/img.png"></image>
						<view class="column">
							<view class="chat">
								<view class="name">
									<text>爱吃土豆</text>
								</view>
								<view class="flex-wrap">
									<view class="txt">孩子鼻炎很严重，能不能治好呀？</view>
									<view class="info">
										<text class="time">1小时前 重庆</text>
										<view class="reply">回复</view>
									</view>
								</view>
							</view>
							<view class="left mt26">
								<image class="head-little" src="/static/images/img.png"></image>
								<view class="chat">
									<view class="name">
										<text>爱吃土豆</text>
										<view class="author-lable">作者</view>
									</view>
									<view class="flex-wrap">
										<view class="txt">请告诉一下具体症状</view>
										<view class="info">
											<text class="time">1小时前 重庆</text>
											<view class="reply">回复</view>
										</view>
									</view>
								</view>
							</view>
							<view class="expand">展开 2 条回复</view>
						</view>
					</view>
					<view class="right">
						<image v-if="isLike" class="w40 h40" src="/static/images/like_red_icon.png" @click="onLike">
						</image>
						<image v-else class="w40 h40" src="/static/images/like_icon.png" @click="onLike"></image>
						<view class="">20</view>
					</view>
				</view>

				<view class="message-item">
					<view class="left">
						<image class="head" src="/static/images/img.png"></image>
						<view class="column">
							<view class="chat">
								<view class="name">
									<text>爱吃土豆</text>
								</view>
								<view class="flex-wrap">
									<view class="txt">孩子鼻炎很严重，能不能治好呀？</view>
									<view class="info">
										<text class="time">1小时前 重庆</text>
										<view class="reply">回复</view>
									</view>
								</view>
							</view>
							<view class="left mt26">
								<image class="head-little" src="/static/images/img.png"></image>
								<view class="chat">
									<view class="name">
										<text>爱吃土豆</text>
										<view class="author-lable">作者</view>
									</view>
									<view class="flex-wrap">
										<view class="txt">请告诉一下具体症状</view>
										<view class="info">
											<text class="time">1小时前 重庆</text>
											<view class="reply">回复</view>
										</view>
									</view>
								</view>
							</view>
							<view class="expand">展开 2 条回复</view>
						</view>
					</view>
					<view class="right">
						<image v-if="isLike" class="w40 h40" src="/static/images/like_red_icon.png" @click="onLike">
						</image>
						<image v-else class="w40 h40" src="/static/images/like_icon.png" @click="onLike"></image>
						<view class="">20</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 输入框 -->
		<view class="chat-input-container">
			<view class=" input-container">
				<input id="txgMsg" placeholder="说点什么..." v-model="inputValue" placeholder-style="color:#999999;"
					class="ml20 input-native input-field" cursor-spacing="100" :adjust-position="false" />
			</view>
			<view class="icon-container">
				<view class="icon-item">
					<image class="icon" src="/static/images/comment.png" />
					<text>8</text>
				</view>
				<view class="icon-item">
					<image class="icon" src="/static/images/comment.png" />
					<text>10</text>
				</view>
				<view class="icon-item">
					<image class="icon" src="/static/images/comment.png" />
					<text>200</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Task from '@/pages_shopping/live/components/task.vue'
	import {
		liveList
	} from '@/api/living.js'
	export default {
		data() {
			return {
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				isLike: false

			}
		},
		onLoad() {

		},
		onUnload() {

		},
		methods: {
			onLike() {
				this.isLike = !this.isLike;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #ffffff;
		position: relative;

		.top-block {
			padding-left: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.head {
					width: 68rpx;
					height: 68rpx;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					margin: 0 16rpx;
				}

				.name {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.right {
				display: flex;
				align-items: center;
				margin-right: 210rpx;

				.icon-bg {
					width: 64rpx;
					height: 64rpx;
					padding: 12rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 1rpx solid #E9E9E9;
					box-sizing: border-box;
					background: #FFFFFF;
					margin-left: 24rpx;
				}
			}

			.title-box {
				position: relative;

				.title {
					font-weight: 600;
					font-size: 40rpx;
					color: #333333;
				}
			}
		}

		// 文章
		.article {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			.photo {
				width: 100%;
				height: 416rpx;
			}

			.article-main {
				padding: 0 24rpx;

				.title {
					margin: 18rpx 0 32rpx;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
				}

				.txt {
					font-size: 30rpx;
					color: #333333;

					.lable {
						color: #153868;
						margin-left: 8rpx;
					}
				}

				.card {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #FFF5EB;
					width: 100%;
					height: 64rpx;
					border-radius: 8rpx;
					border: 1rpx solid #F3E2D0;
					padding: 16rpx;
					box-sizing: border-box;
					margin: 22rpx 0 32rpx; // 添加边距

					.card-item {
						display: flex;
						align-items: center;
						color: #D46C0D;

						.card-icon {
							width: 60rpx;
							height: 32rpx;
							margin-right: 24rpx;
						}

						.ranking {
							font-size: 24rpx;
						}

						.top {
							font-family: Roboto Flex, Roboto Flex;
							font-weight: normal;
							font-size: 24rpx;
							transform: skewX(-8deg);
							display: inline-block;
							margin-left: 8rpx;
						}
					}

					.go {
						width: 16rpx;
						height: 16rpx;
					}
				}

				.place {
					font-size: 24rpx;
					color: #999999;
				}

			}
		}

		.line {
			margin: 32rpx 0;
			width: 100%;
			height: 0rpx;
			border: 1rpx solid #EEEEEE;
		}

		// 评论
		.comment {
			display: flex;
			flex-direction: column;
			padding: 0 24rpx 120rpx;

			.comment-num {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.my-input {
				display: flex;
				margin-bottom: 40rpx;

				.head {
					width: 68rpx;
					height: 68rpx;
					margin-right: 24rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.input-item {
					flex: 1;
					display: flex;
					align-items: center;
					background: #F5F7FA;
					padding: 0 24rpx;
					border-radius: 34rpx;

					.input {
						flex: 1;
					}
				}
			}

			.message {
				display: flex;
				flex-direction: column;

				.message-item {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;

						.head {
							width: 68rpx;
							height: 68rpx;
							margin-right: 24rpx;
							border-radius: 50%;
							flex-shrink: 0;
						}

						.head-little {
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
							border-radius: 50%;
							flex-shrink: 0;
						}

						.chat {
							.name {
								font-size: 26rpx;
								color: #999999;
								display: flex;

								.author-lable {
									width: 62rpx;
									height: 32rpx;
									background: #E0FFF4;
									border-radius: 16rpx;
									text-align: center;
									line-height: 32rpx;
									font-weight: 500;
									font-size: 18rpx;
									color: #02B176;
									margin-left: 14rpx;
								}
							}

							.flex-wrap {
								display: flex;
								flex-wrap: wrap;
								align-items: center;


								.txt {
									font-size: 28rpx;
									color: #333333;
									margin: 12rpx 24rpx 12rpx 0;
								}

								.info {
									font-size: 24rpx;
									display: flex;

									.time {
										color: #999999;
									}

									.reply {
										color: #666666;
										margin-left: 22rpx;
									}
								}
							}
						}
					}

					.expand {
						font-size: 26rpx;
						color: #153868;
						padding: 0 64rpx;
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		// 输入框
		.chat-input-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			box-sizing: border-box;
			padding: 20rpx 24rpx;
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
			border-top: 1rpx solid #EEEEEE;
			.input-container {
				background: #F5F7FA;
				height: 68rpx;
				box-sizing: border-box;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				margin-right: 20rpx;


			}

			.icon-container {
				display: flex;
				align-items: center;

				.icon-item {
					display: flex;
					align-items: center;
					margin-right: 42rpx;

					&:last-child {
						margin-right: 0rpx;
					}

					.icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

	}
</style>