<template>
    <el-dialog title="选择做题模式" visible="visible" :before-close="handleClose" width="750px">
        <div class="exam-sort">
            <div class="exam-sort__box1" @click="getExam(0)">
                <div class="exam-sort__box1-img"></div>
                <p>顺序练习</p>
            </div>
            <div class="exam-sort__box2" @click="getExam(1)">
                <div class="exam-sort__box2-img"></div>
                <p>随机练习</p>
            </div>
        </div>
</el-dialog>
</template>
<script>
    export default {
         props: {
        sort: Boolean
    },
    data: function() {
        return {
            /**窗口开关 */
            visible: true,
        }
    },
    methods: {
        getExam: function(isrand) {
            this.$emit('openExam', isrand)
        },
        handleClose: function() {
            this.$emit('close')
            this.visible = true
        }
    },
    mounted: function() {

    },
    }
</script>
<style scoped>
    /*  */

.exam-sort {
    height: 300px;
    position: relative;
}

.exam-sort__box1 {
    width: 188px;
    height: 100px;
    border-radius: 6px;
    border: solid 1px #ccc;
    color: #333;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 80px;
    left: 120px;
}

.exam-sort__box1:hover {
    border: solid 1px #488BFF;
    color: #488BFF;
}

.exam-sort__box1:hover .exam-sort__box1-img {
    background: url(/ks_inc/member-center/images/exam/me_test_btn_order.png) no-repeat center;
}

.exam-sort__box1-img {
    width: 40px;
    height: 40px;
    background: url(/ks_inc/member-center/images/exam/me_test_btn_order_n.png) no-repeat center;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

.exam-sort__box1 p {
    margin-top: 68px;
}

.exam-sort__box2 {
    width: 188px;
    height: 100px;
    border-radius: 6px;
    border: solid 1px #ccc;
    color: #333;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 80px;
    right: 120px;
}

.exam-sort__box2:hover {
    border: solid 1px #488BFF;
    color: #488BFF;
}

.exam-sort__box2:hover .exam-sort__box2-img {
    background: url(/ks_inc/member-center/images/exam/me_test_btn_random.png) no-repeat center;
}

.exam-sort__box2-img {
    width: 40px;
    height: 40px;
    background: url(/ks_inc/member-center/images/exam/me_test_btn_random_n.png) no-repeat center;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

.exam-sort__box2 p {
    margin-top: 68px;
}

</style>
