<template>
    <div class="main">
        <div class="race-wrap">
            <div class="title-box">
                <p class="title">hello world!</p>
                <p class="subtitle">hi my name is dd!</p>
            </div>
            <div class="race-box">
                <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
                <div class="rcon flex justify-end mb5">
                    <div class="race-btn" @click="goToPage('Chapter1')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="1">
                        <p>지문1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter2')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="2">
                        <p>단어장</p>
                    </div>
                </div>
                <div class="lcon flex justify-between mb5">
                    <div class="race-btn" @click="goToPage('Chapter7')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="7">
                        <p>문제1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter6')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="6">
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter5')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="5">
                        <p>지문2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter4')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="4">
                        <p>문제2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter3')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="3">
                        <p>문제1</p>
                    </div>
                </div>
                <div class="rcon flex">
                    <div class="race-btn" @click="goToPage('Chapter8')">
                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="8">
                        <p class="long">중간 평가</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter9')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="9">
                        <p>지문3</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter10')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="10">
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter11')">
                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="11">
                        <p class="long">최종 평가</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="complete-wrap mt90 ">
            <h2 class="mb40">전체 진행률</h2>
        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {
        console.log('main mounted');
    }
}
</script>