<template>
	<!--考试记录，如果有课程id就是显示指定课程的考试，如果没有，就需要显示全部-->
	<view>
		<page-title :showBack="true">考试记录</page-title>
		<view class="course-title">XXXX课程的考试记录</view>
		<view>
			<view class="endurance" v-for="(item,idx) in list" :key="idx">
				<view class="exam">{{item.time}}</view>
				<view class="endurance-center">
					<view>
						<view style="display: flex;margin-top: 9px;">
							<view class="grade">{{item.score}}</view>
							<view class="result">{{item.mark}}</view>
						</view>
						<view style="display: flex;margin-top: 6px;">
							<view class="testt">{{item.test}}</view>
							<view class="examt">{{item.duration}}</view>
						</view>
					</view>
					<view class="query" @click="toExamDetail(item)">
						查看试卷
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
    	data() {
    		return {
                list:[
                    {time:"考试时间 :2022-12-25  08:36",score:"考试成绩",mark:"80分",test:"考试时长",duration:"30分钟"},
                    {time:"考试时间 :2022-12-25  08:36",score:"考试成绩",mark:"80分",test:"考试时长",duration:"30分钟"},
                    {time:"考试时间 :2022-12-25  08:36",score:"考试成绩",mark:"80分",test:"考试时长",duration:"30分钟"}
                ]
            }
        },
		methods:{
			toExamDetail(item){
				uni.navigateTo({
					url:'/pages/study/examDetail'
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
	.course-title{
		text-align: center;
		padding: 15px;
	}
    .endurance{
        height: 90px;
        background: #FFFFFF;
        margin-top: 10px;
        
        .exam{
            font-size: 15px;
            color: #5EB6A4;
            padding-top: 15px;
            margin-left: 15px;
        }
        
        .endurance-center{
            display: flex;
            justify-content: space-between;
            margin-right: 11px;
            
            .grade{
                font-size: 12px;
                color: #868686;
                margin-left: 16px;
            }
            
            .relust{
                font-size: 2px;
                color: #000000;
                margin-left: 13px;
            }
            
            .testt{
                font-size: 12px;
                color: #868686;
                margin-left: 16px;
            }
            
            .examt{
                font-size: 2px;
                color: #000000;
                margin-left: 13px;
            }
        }
        
        .query{
            width: 71px;
            height: 27px;
            background: #FFB30F;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 27px;
            margin-top: 18px;
        }
    }
</style>
