cbz/page_index/pages/index/newDetail.vue

<template>
	<view class="content">
		<view class="tile">{{pageData.title}}</view>
		<view class="hflex acenter " style="box-sizing: border-box;padding: 0 30rpx;">
			<view class="img_box">
				<image :src="pageData.src" mode="aspectFill" class="avatar"></image>
				<view class="type">V</view>
			</view>
			<view class="text_style1">{{pageData.name}}</view>
		</view>
		<image :src="pageData.img" class="img" v-if="pageData.image"></image>
		<u-parse :content="pageData.content" style="box-sizing: border-box;padding: 0 30rpx;"></u-parse>
		<video :src="pageData.video" play-btn-position="center" class="video" v-if="pageData.video"></video>
		<view class="date">发布于{{pageData.date}}</view>
		<view class="comment">
			<view class="comment_title">评论{{pageData.comment.num?pageData.comment.num:''}}</view>
			<view v-if="pageData.comment.length == 0" class="hflex acenter jcenter comment_none">暂无评论</view>
			<view v-else>
				<block v-for="(item,index) in pageData.comment" :key="index">
					<view class="hflex">
						<image :src="item.headimg" class="headimg"></image>
						<view class="comment_right">
							<view class="comment_name">{{item.name}}</view>
							<view class="comment_content">{{item.content}}</view>
							<view class="comment_date">{{item.date}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view class="hflex acenter">
				<image src="/static/images/comment/dianzan1.png" class="dianzan" v-if="!pageData.is_dz"></image>
				<image src="/static/images/comment/dianzan2.png" class="dianzan" v-else></image>
				<view class="dz_text">{{!pageData.is_dz?'点赞':pageData.dzNum}}</view>
			</view>
			<view class="hflex acenter ">
				<u-input v-model="comment" border="none" placeholder="我来说两句" shape="circle"></u-input>
				<image src="/static/images/comment/comment.png" class="comment_icon"></image>
				<view class="dz_text">{{pageData.comment.num?'评论':pageData.comment.num}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
					title: '在高质量发展中扎实推动共同富裕！',
					src: '/static/images/mine/avatar1.jpg',
					name: '船百知官方账号',
					content: `洗脸，是我们日常生活中每天都要进行的活动。俗话说得好:勤梳头，勤洗脸，有点儿倒霉也不显。光洁的脸庞不仅透露出积极向上的精神面貌。也是外在美最直接的表现形式。网络疯传的洗脸教育帖转发率之高，书店里出售的洗脸书销量之大，都反映出人们对于洗脸的重`,
					date: '2021年09月05日',
					video: '',
					img: '',
					code: '',
					comment: [],
					is_dz: false,
					dzNum: 12
				},
				comment:''
			}
		},
		onLoad() {
			that = this
			
		},
		
		methods: {
			
			
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		position: relative;
		background: url('../../../static/images/comment/background.png') no-repeat;
		background-size: 100%;
		.tile {
			box-sizing: border-box;
			padding: 24rpx 30rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
			line-height: 56rpx;
		}
		.img_box {
			width: 56rpx;
			height: 56rpx;
			position: relative;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}
			.type {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				width: 28rpx;
				height: 28rpx;
				background: #506DFF;
				border-radius: 12rpx 4rpx 12rpx 4rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 28rpx;
			}
		}
		.text_style1 {
			margin-left: 16rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			line-height: 36rpx;
		}
		.box {
			margin: 24rpx 30rpx;
			height: 116rpx;
			background: #F4F4F4;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 28rpx;
			.box_icon {
				width: 56rpx;
				height: 68rpx;
			}
			.down {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #506DFF;
			}
		}
		.date {
			// margin-bottom: 186rpx;
			box-sizing: border-box;
			padding: 0 30rpx 40rpx;
			border-bottom: 1rpx solid #F5F5F5;
			font-size: 26rpx;
			font-weight: 400;
			color: #989898;
			line-height: 18px;
		}
		.comment {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			.comment_title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				padding-bottom: 24rpx;
			}
			.comment_none {
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #AFAFAF;
				line-height: 44rpx;
				// padding-top: 24rpx;
			}
			.headimg {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}
			.comment_right {
				width: calc(100% - 88rpx);
				margin-left: 20rpx;
				padding: 0 0 20rpx;
				border-bottom: 1rpx solid #F2F2F2;
			}
			.comment_name {
				font-size: 24rpx;
				font-weight: 500;
				color: #222222;
				line-height: 34rpx;
			}
			.comment_content {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				padding: 16rpx 0 12rpx;
			}
			.comment_date {
				font-size: 20rpx;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			.dianzan {
				width: 48rpx;
				height: 48rpx;
			}
			.u-input {
				background: #F4F4F4 !important;
				width: 410rpx;
				height: 72rpx;
				margin-right: 16rpx;
				padding: 0 32rpx !important;
			}
			.dz_text {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
				padding-left: 8rpx;
			}
			.comment_icon {
				width: 48rpx;
				height: 48rpx;
			}
			.btn {
				width: 510rpx;
				height: 80rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		.cCanvas {
			position: absolute;
			top: 188rpx;
			left: 50rpx;
			background-color: #fff;
			z-index: 100;
			border-radius: 20rpx;
		}
		.share_content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			.share_box {
				margin: 148rpx auto;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 40rpx;
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			.canvas {
				position: absolute;
				top: 188rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					
					
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
		.img {
			width: 100%;
			height: 320rpx;
			border-radius: 24rpx;
			margin: 40rpx 0 32rpx;
		}
		.video {
			width: 100%;
			height: 400rpx;
			border-radius: 28rpx;
			margin: 20rpx 0;
		}
	}
</style>