<template>
	<view class="jobDetailsComponents-box">
		<view class="jobDetailsComponents activeTwo flex">
            <view class="jobDetailsComponents-time-box flex">
                <view class="jobDetailsComponents-time flex">
                    <view>周</view>
                    <text>潇潇</text>
                </view>
                <view class="jobDetailsComponents-line">
                    <view class="jobDetailsComponents-point"></view>
                </view>
            </view>
            <view class="jobDetailsComponents-center-box">
                <view class="jobDetailsComponents-center flex">
                    <view class="jobDetailsComponents-left flex">
                        <view class="operation-state flex">
                            <view class="operation-state-img"></view>
                            <view class="operation-state-text">未批阅</view>
                        </view>
                        <view class="operation-name">2022-05-22</view>
                    </view>
                    <view class="jobDetailsComponents-right flex">
                        <view class="homework-score flex">
                            <view class="homework-score-title">
                                得分 <text>86</text> 分
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">
                                得分率 <text>86</text> 分
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="jobDetailsComponents activeOne flex">
            <view class="jobDetailsComponents-time-box flex">
                <view class="jobDetailsComponents-time flex">
                    <view>周</view>
                    <text>潇潇</text>
                </view>
                <view class="jobDetailsComponents-line">
                    <view class="jobDetailsComponents-point"></view>
                </view>
            </view>
            <view class="jobDetailsComponents-center-box">
                <view class="jobDetailsComponents-center flex">
                    <view class="jobDetailsComponents-left flex">
                        <view class="operation-state flex">
                            <view class="operation-state-img"></view>
                            <view class="operation-state-text">批阅</view>
                        </view>
                        <view class="operation-name">2022-05-22</view>
                    </view>
                    <view class="jobDetailsComponents-right flex">
                        <view class="homework-score flex">
                            <view class="homework-score-title">
                                得分 <text>86</text> 分
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">
                                得分率 <text>86</text> 分
                            </view>
                        </view>
                    </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, //多次点击
			});
            let methods = {
                
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
	};
</script>
<style scoped>
    .homework-score-title text{
        font-size: 46rpx;
        font-weight: 800;
        font-style: italic;
        padding: 0 10rpx 0 17rpx;
    }
    .homework-score-title{
        color: #282828;
        font-size: 20rpx;
        font-weight: 400;
        letter-spacing: 1px;
    }
    .homework-score:first-child{
        margin-right: 16rpx;
    }
    .homework-score{
        align-items: center;
        justify-content: space-between;
    }
    .jobDetailsComponents-right{
        height: 88rpx;
        background: #FCEEEF;
        padding: 0 22rpx;
        border-radius: 25rpx;
        justify-content: space-between;
        flex-shrink: 0;
    }
    .operation-state-text{
        font-size: 20rpx;
        letter-spacing: 2px;
    }
    .jobDetailsComponents.activeThree .operation-state-img{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_480.png')no-repeat;
        background-size: 22rpx 22rpx;
    }
    .jobDetailsComponents.activeTwo .operation-state-img{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_781.png')no-repeat;
        background-size: 22rpx 22rpx;
    }
    .jobDetailsComponents.activeOne .operation-state-img{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_44.png')no-repeat;
        background-size: 22rpx 22rpx;
    }
    .operation-state-img{
        width: 22rpx;
        height: 22rpx; 
        margin-right: 9rpx;
        margin-top: 4rpx;
    }
    .operation-state{
        font-size: 20rpx;
        white-space: nowrap;
        color: #282828;
    }
    .operation-name{
        font-size: 16rpx;
        letter-spacing: 1px;
        font-weight: 500;
        color: #C2BCBA;
    }
    .jobDetailsComponents-left{
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17rpx;
    }
    .jobDetailsComponents-center{
        flex-direction: column;
    }
    .jobDetailsComponents-center-box{
        flex-grow: 1;
        border-radius: 30rpx;
        padding: 17rpx 26rpx 23rpx 21rpx;
        margin-bottom: 40rpx;
        background: #FFFFFF;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 20px;
    }
    .jobDetailsComponents.activeThree .jobDetailsComponents-point{
        background: #C1C1C1;
    }
    .jobDetailsComponents.activeTwo .jobDetailsComponents-point{
        background: #282828;
        
    }
    .jobDetailsComponents.activeOne .jobDetailsComponents-point{
        background: #C81727;
        box-shadow: 0px 0px 12px 0px rgba(200, 23, 39, 0.46);
    }
    .jobDetailsComponents .jobDetailsComponents-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);
    }
    .jobDetailsComponents-line{
        width: 4rpx;
        height: 100%;
        background: #F1F1F1;
        margin-left: 46rpx;
        margin-right: 46rpx;
        position: relative;
    }
    .jobDetailsComponents-time text{
        font-size: 20rpx;
        font-weight: bold;
        white-space: nowrap;
        margin-top: 18rpx;
        margin-left: 4rpx;
    }
    .jobDetailsComponents-time{
        color: #282828;
        font-size: 36rpx;
        font-weight: bold;
        letter-spacing: 1rpx;
    }
    .jobDetailsComponents-time-box{
        
    }
	.jobDetailsComponents{
        justify-content: space-between;
        padding: 0 50rpx;
    }
</style>
