<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')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>지문1</p> </div> <div class="race-btn" @click="goToPage('Chapter2')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>단어장</p> </div> </div> <div class="lcon flex justify-between mb5"> <div class="race-btn" @click="goToPage('Chapter7')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>문제1</p> </div> <div class="race-btn" @click="goToPage('Chapter6')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>단어장</p> </div> <div class="race-btn" @click="goToPage('Chapter5')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>지문2</p> </div> <div class="race-btn" @click="goToPage('Chapter4')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>문제2</p> </div> <div class="race-btn" @click="goToPage('Chapter3')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>문제1</p> </div> </div> <div class="rcon flex"> <div class="race-btn" @click="goToPage('Chapter8')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8"> <img :src="item.imgSrc3" > <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p class="long">중간 평가</p> </div> <div class="race-btn" @click="goToPage('Chapter9')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>지문3</p> </div> <div class="race-btn" @click="goToPage('Chapter10')"> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="10"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p>단어장</p> </div> <div class="race-btn" > <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="11"> <img :src="item.imgSrc3" > <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> <p class="long">최종 평가</p> </div> </div> </div> <!-- 팝업 --> <div v-show="searchOpen" class="popup-wrap"> <div class="popup-box "> <div class=" mb30 text-ct"> <p class="title1 mb20">1단원이 끝났습니다! </p> <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p> </div> <div class="flex justify-center "> <button type="button" title="사진촬영" class="new-btn" @click="goToPage('Camera')"> 사진촬영 </button> </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 style="width: 910px;"><img src="../../../resources/img/img140_747s.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 { items: [ { imgSrc1: 'client/resources/img/img11_1_s.png', imgSrc2: 'client/resources/img/img12_1_s.png', imgSrc3: 'client/resources/img/img11_2_s.png', imgSrc4: 'client/resources/img/img12_2_s.png', isSecondImageVisible: false }, ], mdiWindowClose: mdiWindowClose, mdiHeart: mdiHeart, showModal: false, searchOpen: false, searchOpen2: false, } }, methods: { toggleImage(index) { this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; }, 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>