<template>
	<view class="examList-box">
        <view class="examList-import">
            <van-icon name="plus" />
            <text>导入考试信息</text>
        </view>
		<view class="examList activeOne">
            <view class="examList-center-box" @click="JobDetails">
                <view class="examList-center-line"></view>
                <view class="examList-center flex">
                    <view class="examList-left">
                        <view class="examList-name">化学高考第一次测试</view>
                        <view class="examList-state flex">
                            <van-icon name="clock-o" />
                            <view class="examList-state-text">2022-05-25</view>
                        </view>
                    </view>
                    <view class="examList-right flex">
                        <view class="homework-score flex">
                            <view class="homework-score-title">人数</view>
                            <view class="homework-score-num flex">
                                86
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">平均得分</view>
                            <view class="homework-score-num flex">
                                86
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="noData">暂无数据</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 = {
                JobDetails(){
                    uni.reLaunch({
                        url: '/pages/index/workSituation' 
					});
                }
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
	};
</script>
<style scoped>
    .homework-score-num view:last-child{
        font-size: 23rpx;
        margin-top: 25rpx;
    }
    .homework-score-num view:first-child{
        margin-right: 10rpx;
        font-size: 46rpx;
        font-weight: 800;
    }
    .homework-score-num{
        font-weight: 800;
        font-style: italic;
        font-size: 36rpx;
    }
    .homework-score-title{
        font-size: 20rpx;
        margin-bottom: 0rpx;
        font-weight: 400;
        letter-spacing: 1px;
        margin-bottom: 15rpx;
    }
    .homework-score:last-child{
        margin-right: 0rpx;
    }
    .homework-score{
        margin-right: 16rpx;
        flex-direction: column;
        justify-content: center;
    }
    .examList-right{
        height: 122rpx;
        background: #FCEEEF;
        padding: 23rpx 37rpx 15rpx 37rpx;
        border-radius: 30rpx;
        justify-content: space-between;
        flex-shrink: 0;
        margin-left: 11rpx;
        color: #CE8086;
    }
    .examList.activeOne .examList-state-text{
        color: #BEBEBE;
    }
    .examList-state-text{
        font-size: 20rpx;
        letter-spacing: 2px;
    }
    .examList-state van-icon{
        color: #DADADA;
        font-size: 24rpx;
        margin-right: 10rpx;
    }
    .examList-state{
        margin-top: 35rpx;
        font-size: 20rpx;
    }
    .examList.activeOne .examList-name{
        color: #282828;
    }
    .examList-name{
        height: 70rpx;
        font-size: 26rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 9rpx;
        letter-spacing: 1px;
        font-weight: bold;
    }
    .examList-left{
        flex-grow: 1;
    }
    .examList-center{
        justify-content: space-between;
    }
    .examList-center-line{
        width: 4rpx;
        height: 23rpx;
        background: #282828;
        position: absolute;
        left: 0;
        top: 46rpx;
    }
    .examList.activeOne .examList-center-box{
        background: #FFFFFF; 
    }
    .examList-center-box{
        flex-grow: 1;
        position: relative;
        border-radius: 30rpx;
        padding: 31rpx 40rpx 21rpx 22rpx;
        margin-bottom: 50rpx;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 30px;
    }
	.examList{
        margin: 0 50rpx;
    }
    .examList-import text{
        margin-left: 15rpx;
    }
    .examList-import{
        width: 247rpx;
        border: 1rpx solid #F2A1A8;
        background: #FFFFFF;
        line-height: 54rpx;
        padding: 0 38rpx;
        margin: auto;
        margin-bottom: 48rpx;
        border-radius: 50rpx;
        color: #F2A1A8;
        font-size: 24rpx;
        text-align: center;
    }
    .examList-box{
        
    }
</style>
