<template>
	<view class="CommentsComponents-box">
		<view class="CommentsComponents activeOne flex">
			<view class="CommentsComponents-time-box flex">
				<view class="CommentsComponents-time">
					<view>{{jobData.CreateTime}}</view>
				</view>
				<view class="CommentsComponents-line">
					<view class="CommentsComponents-point"></view>
				</view>
			</view>
			<view class="CommentsComponents-center-box">
				<view class="CommentsComponents-center-line"></view>
				<view class="CommentsComponents-center flex">
					<view class="CommentsComponents-left flex">
						<van-image width="38rpx" height="38rpx" fit="cover" class="operation-img" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_713.png" />
						<view class="operation-name">{{jobData.Title}}</view>
					</view>
					<view class="CommentsComponents-right">
						{{jobData.DataObj.Comment}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: ["jobData"],
		components: {},
		setup() {
			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
<style scoped>
	.CommentsComponents-right {
		color: #FFFFFF;
		font-size: 20rpx;
		line-height: 35rpx;
		letter-spacing: 1rpx;
	}

	.CommentsComponents.activeThree .operation-name {
		color: #282828;
	}

	.CommentsComponents.activeTwo .operation-name {
		color: #282828;
	}

	.CommentsComponents.activeOne .operation-name {
		color: #FFFFFF;
	}

	.operation-name {
		font-size: 26rpx;
		letter-spacing: 1px;
		font-weight: 500;
		flex-grow: 1;
	}

	.operation-img {
		margin-right: 12rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.CommentsComponents-left {
		flex: 1;
		flex-grow: 1;
		margin-top: -5rpx;
		margin-bottom: 10rpx;
	}

	.CommentsComponents-center {
		flex-direction: column;
	}

	.CommentsComponents-center-line {
		width: 4rpx;
		height: 23rpx;
		background: #FEFEFE;
		position: absolute;
		left: 0;
		top: 33rpx;
	}

	.CommentsComponents.activeOne .CommentsComponents-center-box {
		background: #52C1CA;
	}

	.CommentsComponents-center-box {
		flex-grow: 1;
		position: relative;
		border-radius: 30rpx;
		padding: 31rpx 18rpx 21rpx 24rpx;
		margin-bottom: 50rpx;
	}

	.CommentsComponents.activeOne .CommentsComponents-point {
		background: #1E7BF5;
		box-shadow: 0px 0px 12px 0px rgba(30, 123, 245, 0.46);
	}

	.CommentsComponents-point {
		width: 19rpx;
		height: 19rpx;
		position: absolute;
		top: 20rpx;
		left: -13rpx;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.46);
	}

	.CommentsComponents-line {
		width: 4rpx;
		height: 100%;
		background: #F1F1F1;
		margin-left: 46rpx;
		margin-right: 46rpx;
		position: relative;
	}

	.CommentsComponents-time {
		width: 61rpx;
		height: 55rpx;
		color: #CCC8C6;
		font-size: 20rpx;
		border-radius: 20rpx;
		padding: 14rpx 13rpx;
		background: #F6F6F6;
	}

	.CommentsComponents {
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.CommentsComponents-box {
		
	}
</style>
