<template>
	<view class="CommentsComponents-box">
		<view class="CommentsComponents activeOne flex">
            
            <view class="CommentsComponents-time-box flex">
                <view class="CommentsComponents-time">
                    <view>05/25 17:13</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">周老师的评语</view>
                    </view>
                    <view class="CommentsComponents-right">
                        你是个做事小心翼翼，感情细腻丰富的女孩
                        ，每次看你认真的样子老师都很感动。你也是幸运的，周
                        边有很多人都在关爱着你，所以，对他们，尤其是父母，记得不要
                        太莽撞，不要太任性，要学着体谅，学着换位思考
                        ，学着懂事。另外，今后要多运动、多锻炼，有健康才能成就美好未来！
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			
		},
		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{
        background: #FFFFFF;
    }
</style>
