File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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 myphoto">
<h2 class="mb40">이 단원을 끝낸 친구들</h2>
<article class=" flex-column" style="gap: 5px;">
<div class="flex" style="gap: 5px;">
<div @click="buttonSearch" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
</div>
</article>
<article class="popup-wrap" v-show="searchOpen">
<div class="popup-box ">
<div class="flex mb10 justify-between">
<p class="popup-title">알림</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="box">
<div><img src="../../../resources/img/img184_91t.png" alt=""></div>
</div>
<div class="flex justify-between mt20">
<div class="text flex">
<p class="title2 date ml30">2024-08-06</p>
<span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
</div>
<div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart" style="color: #FFBA08;"></svg-icon><p><em class="yellow">1</em></p></div>
</div>
</div>
</article>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
export default {
data() {
return {
mdiWindowClose: mdiWindowClose,
mdiHeart: mdiHeart,
showModal: false,
searchOpen: false,
searchOpen2: false,
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
},
watch: {
},
computed: {
},
components: {
SvgIcon,
},
mounted() {
console.log('main mounted');
}
}
</script>