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="title-box flex justify-between mb20">
<p class="title">내 사진첩</p>
</div>
<div class="myphoto mb30">
<div>
<div class="title-box flex justify-end mb40">
<select name="" id="">
<option value="">A반</option>
</select>
</div>
<div class="btnGroup">
<button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
<img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
<img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
<p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
</button>
</div>
<div v-if="selectedTab === 'tab1'" class="tab-box">
<div class="flex justify-between">
<div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
<div class="class ">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
<div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
<div class="class photo">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
<div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
<div class="class ">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
</div>
<div class="flex justify-between mt50">
<div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
<div class="class ">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
<div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
<div class="class ">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
<div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
<div class="class ">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">20</span>
<p class="title2">1단원</p>
</div>
</div>
</div>
</div>
</div>
<div 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="text flex justify-between mt20">
<span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
<p class="title2 date">2024-08-06</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
import { mdilArrowRight } from '@mdi/light-js';
import ProgressBar from '../../component/ProgressBar.vue';
export default {
data() {
return {
mdiWindowClose: mdiWindowClose,
selectedTab: 'tab1',
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
showModal: false,
searchOpen: false,
searchOpen2: false,
}
},
methods: {
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
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>