File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="header flex justify-end">
<img src="../../resources/img/setting.png" alt="">
<div class="notice" @click="buttonSearch"><img src="../../resources/img/icon2.png" alt="">
<p>1</p>
</div>
<img src="../../resources/img/img03.png" alt="">
<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>
<article class="flex justify-between mt20">
<img style="width: fit-content;" src="../../resources/img/img200_13p.png" alt="">
<p class="title1 ml20" style="width: 60%;">1반친구들</p>
<button @click="buttonSearch2" type="button" title="글쓰기" class="new-btn">
자세히 보기
</button>
</article>
</div>
</div>
<div class="popup-wrap popup2" v-show="searchOpen2">
<div class="popup-box ">
<div class="flex mb10 justify-between">
<p class="popup-title">알림 자세히 보기</p>
<button type="button" class="popup-close-btn" @click="closeBtn2">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="board-wrap">
<div class="flex align-center">
<label for="" class="title2">제목</label>
<input type="text" class="data-wrap">
</div>
<hr>
<textarea name="" id=""></textarea>
</div>
<div class="flex justify-center mt20">
<button type="button" title="확인" class="new-btn">
확인
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
export default {
data() {
return {
mdiWindowClose: mdiWindowClose,
showModal: false,
searchOpen: false,
searchOpen2: false,
}
},
methods: {
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
buttonSearch2() {
this.searchOpen2 = true;
},
closeBtn() {
this.searchOpen = false;
},
closeBtn2() {
this.searchOpen2 = false;
},
},
watch: {
},
computed: {
},
components: {
SvgIcon
},
mounted() {
console.log('Header mounted');
}
}
</script>
<style scoped>
.popup-wrap {
position: fixed;
background-color: transparent;
width: fit-content;
height: fit-content;
z-index: 10;
}
.popup-box {
top: 164px;
left: 62%;
}
.popup2 .popup-box {
top: 450px;
left: 38%;
}
</style>