<template> <div class="mypage"> <div class="flex justify-between mb30" style="gap: 30px;"> <div> <div class="title-box flex justify-between mb20"> <p class="title">입장하기</p> <div class="flex align-center look-btn"><p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div> </div> <div class="wrap " style="width: 82rem;"> <section class="flex" style="gap: 20px;"> <div class="class flex justify-between"> <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')"> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> </div> <div class="text mt10"> <p class="title1 mb10">A반</p> <span class="member">20명</span> </div> </div> <div class="class flex justify-between"> <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')"> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> </div> <div class="text mt10"> <p class="title1 mb10">A반</p> <span class="member">20명</span> </div> </div> <div class="class flex justify-between"> <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')"> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> <div><img src="../../../resources/img/img176_82t.png" alt=""></div> </div> <div class="text mt10"> <p class="title1 mb10">A반</p> <span class="member">20명</span> </div> </div> </section> </div> </div> <div > <div class="title-box flex justify-between mb20"> <p class="title">사진첩</p> </div> <div class="photobook"> <div class="flex justify-between"> <div class="box" style="gap: 5px;" > <div><img src="../../../resources/img/img198_12p.png" alt=""></div> </div> <div class="text mt10"> <p class="title1 mb10">나의 사진첩</p> <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기" class="new-btn"> 바로가기 </button> </div> </div> </div> </div> </div> <div class="title-box flex justify-between mb20"> <p class="title">가나다학생 랭킹</p> </div> <div class=" mb30"> <div class=" flex " style="gap: 50px;"> <div class="textbook book-red"> <div class="text "> <p class="title1" style="color: #fff;">포토북 랭킹</p> </div> <div class="box " style="gap: 10px;"> <div><img src="../../../resources/img/img196_12p.png" alt=""></div> <P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P> </div> </div> <div class="textbook "> <div class="text "> <p class="title1" style="color: #fff;">포토북 랭킹</p> </div> <div class="box " style="gap: 10px;"> <div><img src="../../../resources/img/img196_12p.png" alt=""></div> <P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P> </div> </div> <div class="textbook book-blue"> <div class="text "> <p class="title1" style="color: #fff;">포토북 랭킹</p> </div> <div class="box " style="gap: 10px;"> <div><img src="../../../resources/img/img196_12p.png" alt=""></div> <P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P> </div> </div> <div class="textbook book-navy"> <div class="text "> <p class="title1" style="color: #fff;">포토북 랭킹</p> </div> <div class="box " style="gap: 10px;"> <div><img src="../../../resources/img/img196_12p.png" alt=""></div> <P class="title2 mt10">현재 30명 중 <em class="navy">2등</em>입니다.</P> </div> </div> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, } from '@mdi/js'; import { mdilArrowRight } from '@mdi/light-js'; import ProgressBar from '../../component/ProgressBar.vue'; export default { data() { return { mdiMagnify: mdiMagnify, mdilArrowRight: mdilArrowRight, timer: "00:00", progress: 20 } }, methods: { goToPage(page) { this.$router.push({ name: page }); }, increaseProgress() { if (this.progress < 100) { this.progress += 10; } }, showConfirm(type) { let message = ''; if (type === 'cancel') { message = '삭제하시겠습니까?'; } else if (type === 'reset') { message = '초기화하시겠습니까?'; } else if (type === 'save') { message = '등록하시겠습니까?'; } if (confirm(message)) { this.goBack(); } }, }, watch: { }, computed: { }, components: { SvgIcon, ProgressBar }, mounted() { console.log('Main2 mounted'); } } </script> <style scoped> </style>