Commit @7b34d9cb39fdf3deed9690efa73447fbf4b9d0a9

[jichoi] 2024-08-07

240807 최정임

@7b34d9cb39fdf3deed9690efa73447fbf4b9d0a9

2b00c16

7b34d9c

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


   em.green{color: #00B204; }
   em.gray{color: #75767A; }
   em.yellow-bg{background-color: #FFBA08; }
+  em.gray-bd{background-color: #EEF0F6; border: 1px solid #8C8E92; border-radius: 20px; padding: 5px 10px;}
   input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
   
   .blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}

     border-radius: 50%;
     border: 3px solid #ffffff;
     accent-color: #ffba08;
-}
+}
+
+
+.bg-gray {
+    background-color: #F8F9FB;
+    border-radius: 10px;
+    padding: 20px;
+  }
+
+  .cs-pt{cursor: pointer;}
+  .cs-pt-clicked {
+    background-color: lightblue; /* Change to your desired background color */
+  }

2b00c16

7b34d9c

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


   color: #DB2B39;
 }
 
-.myphoto{
+.myphoto >div{
   
   background-image: url('../img/img207_15s.png');
   width: 1011px;
   height: 558px;
-  padding: 30px;
+  padding: 30px 60px;
   margin: 0 auto;
 }
 .tab-btn{position: relative; color: #568BFA;}

     right: 45px;
     z-index: -1;
 }
-.tab-box{
-  margin: 80px 60px 20px 60px;
+.myphoto .class{border-radius: 0px; padding: 10px;}
+.myphoto .class .box {
+  background-color: transparent;
+  border-radius: 0px;
+  padding: 0;
 }
-
-
+.myphoto .class .member::before{content: ""; background-image: url('../img/btn47_15s_normal.png'); width: 16px; height: 14px; position: absolute; left: -28px; top: 4px;}
+.myphoto .photo{cursor: pointer; }
+.myphoto .photo .title2{color: #8C8E92;}
+.myphoto .tab-box{
+  margin: 40px 0px 20px 50px;
+}
+.myphoto .photo:hover .class {transform: rotate(2deg);} 
+.myphoto  .popup-wrap .date{position: relative;}
+.myphoto  .popup-wrap .date::before{content: ""; background-image: url('../img/img183_91t.png'); width: 20px; height: 22px; position: absolute; left: -28px;   
+}
+/* 학습일정계획 */
+.myplan  .popup-wrap article{max-height: 400px; overflow-x: auto;}
+.myplan{padding-right: 10px;}
+.myplan .yellow-box{
+  background-color: #FFF8E9;
+  border: 1px solid #FFBA08;
+    padding: 4rem;
+    position: relative;
+    border-radius: 10px;
+}
+.myplan .yellow-btn{
+  background-image: url('../img/btn08_s.png');
+  width: 181px;
+  height: 60px;
+  padding: 5px 20px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOP';
+}
+.myplan .table-wrap  .title2{color: #464749;}
+.myplan  input[type="checkbox"]{width: 30px; height: 30px;}
+.myplan .ui-checkbox::before {width: 11px; height: 14px;}
+.myplan .table-wrap tr {
+  border-top: #C6C6C6 1px solid;
+  border-bottom: #C6C6C6 1px solid;
+}
+.myplan .imgGroup img{width: 349px; height: 312px;}
 /* 대시보드 */
 .main {
   max-height: 600px;

   font-family: 'ONEMobilePOPOTF';
   font-weight: 100;
 }
-
-
+.complete-wrap img{width: inherit;}
+.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px;}
 /* 챕터 */
 .content-wrap {
   margin: 90px 60px 0 60px;

 select option{font-size: 20px; font-weight: bold;}
 
 
-.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px;}
+.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px;     width: max-content;}
 .class .title1, .textbook .title1{font-family: 'ONEMobilePOP';     font-weight: 100;}
 .class .box{background-color: #EAEDF4; border-radius: 10px;
   padding: 10px;

 .search-wrap button{
   position: absolute;
   right: 1rem;
-  top: 6px;
+  top: 9px;
 }
 .input-icon{
 display: block;

 
 .popup-box {
     position: fixed;
-    width: 670px;
+    min-width: 670px;
     /* min-height: 219px; */
     background-color: var(--color-white);
-    top: 50%;
+    top:23%;
     left: 37%;
     transform: translateY(-50%);
     border: 1px solid var(--color-gray);

2b00c16

7b34d9c

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 <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="">
+        <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>
+                    <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>    
+                        <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 type="button" title="글쓰기" class="new-btn">
-                  자세히 보기
-               </button>
+                    <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>

             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+            searchOpen2: false,
         }
     },
     methods: {

         buttonSearch() {
             this.searchOpen = true;
         },
+        buttonSearch2() {
+            this.searchOpen2 = true;
+        },
         closeBtn() {
             this.searchOpen = false;
+
+        },
+        closeBtn2() {
+            this.searchOpen2 = false;
 
         },
     },

     height: fit-content;
     z-index: 10;
 }
-.popup-box{
-    top: 8%;
-    right: 58px;
+
+.popup-box {
+    top: 164px;
     left: 62%;
 }
+
+.popup2 .popup-box {
+    top: 450px;
+    left: 38%;
+}
 </style>

2b00c16

7b34d9c

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Join from "../Join.vue"
 import MyPage from './main/MyPage.vue';
 import MyPlan from './main/MyPlan.vue';
+import MyPlan2 from './main/MyPlan2.vue';
 import PhotoBook from './main/PhotoBook.vue';
 import Dashboard from './main/Dashboard.vue';
 import Main from "./main/Main.vue";

             { path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
             { path: '/MyPage.page', name: 'MyPage', component: MyPage },
             { path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
+            { path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },
             { path: '/PhotoBook.page', name: 'PhotoBook', component: PhotoBook },
         ]
     },

2b00c16

7b34d9c

client/views/pages/main/Dashboard.vue

--- client/views/pages/main/Dashboard.vue

+++ client/views/pages/main/Dashboard.vue


                 </div>
             </div>
         </div>
-        <div class="complete-wrap mt90 ">
-            <h2 class="mb40">전체 진행률</h2>
+        <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="text flex justify-between mt20">
+                        <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
+                        <p class="title2 date">2024-08-06</p>
+                    </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,
+            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: {
 

 
     },
     components: {
+        SvgIcon,
     },
     mounted() {
         console.log('main mounted');

2b00c16

7b34d9c

client/views/pages/main/MyPlan.vue

--- client/views/pages/main/MyPlan.vue

+++ client/views/pages/main/MyPlan.vue


 <template>
-    <div>학습일정계획</div>
+    <div class="myplan">
+        <div class="title-box flex justify-between mb40">
+            <p class="title">오늘 공부할 내용을 확인해봅시다.</p>
+            <!-- <select name="" id="">
+                <option value="">A반</option>
+            </select> -->
+        </div>
+        <div class="wrap" style="border-radius: 0; min-height: 197px;">
+           <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
+        </div>
+        <div class="yellow-box mt30">
+            <div class="title-box flex justify-between align-center">
+                <div >
+                    <p class="title">오늘 공부를 계획해봅시다.</p>
+                    <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
+                </div>
+                <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
+                    바로가기
+                </button>
+            </div>
+        </div>
+    </div>
+
+    
 </template>
 
 <script>
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+
+
 export default {
-    data () {
+    data() {
         return {
+            mdiMagnify: mdiMagnify,
+            mdiWindowClose: mdiWindowClose,
+            showModal: false,
+            searchOpen: false,
         }
     },
     methods: {
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        showConfirm(type) {
+            let message = '';
+            if (type === 'cancel') {
+                message = '삭제하시겠습니까?';
+            } else if (type === 'reset') {
+                message = '초기화하시겠습니까?';
+            } else if (type === 'save') {
+                message = '등록하시겠습니까?';
+            }
+
+            if (confirm(message)) {
+                this.goBack();
+            }
+        },
+        closeModal() {
+            this.showModal = false;
+        },
+        buttonSearch() {
+            this.searchOpen = true;
+        },
+        closeBtn() {
+            this.searchOpen = false;
+
+        },
 
     },
     watch: {

     computed: {
 
     },
+    components: {
+        SvgIcon
+    },
     mounted() {
         console.log('Main2 mounted');
     }

7b34d9c

client/views/pages/main/MyPlan2.vue (added)

+++ client/views/pages/main/MyPlan2.vue

...	...	@@ -0,0 +1,269 @@
	1	+<template>
	2	+ <div class=" main">
	3	+ <div class="myplan">
	4	+ <div class="title-box flex justify-between mb40">
	5	+ <p class="title">오늘 공부를 계획해봅시다.</p>
	6	+ <!-- <select name="" id="">
	7	+ <option value="">A반</option>
	8	+ </select> -->
	9	+ </div>
	10	+ <div class="wrap">
	11	+ <p class="title1"> 학습 교재를 선택합시다.</p>
	12	+ <div class="search-wrap flex justify-end mb20 mt20">
	13	+ <!-- <select name="" id="" class="mr10 data-wrap">
	14	+ <option value="">전체</option>
	15	+ </select> -->
	16	+ <input class="data-wrap" type="text" placeholder="검색하세요.">
	17	+ <button type="button" title="위원회 검색">
	18	+ <img src="../../../resources/img/look_t.png" alt="">
	19	+ </button>
	20	+ </div>
	21	+ <div class="table-wrap">
	22	+ <table>
	23	+ <colgroup>
	24	+ <col style="width: 5%;">
	25	+ <col style="width: 10%;">
	26	+ <col style="width: 70%;">
	27	+ <col style="width: 15%;">
	28	+ </colgroup>
	29	+ <tr>
	30	+ <td><input type="checkbox" class="ui-checkbox mr10"></td>
	31	+ <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
	32	+ <td class="text-lf">
	33	+ <p class="title1">the best</p>
	34	+ <p class="title2">wirte a</p>
	35	+ </td>
	36	+ <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch">
	37	+ 시간입력
	38	+ </button></td>
	39	+ </tr>
	40	+ <tr>
	41	+ <td><input type="checkbox" class="ui-checkbox mr10"></td>
	42	+ <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
	43	+ <td class="text-lf">
	44	+ <p class="title1">the best</p>
	45	+ <p class="title2">wirte a</p>
	46	+ </td>
	47	+ <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch">
	48	+ 시간입력
	49	+ </button></td>
	50	+ </tr>
	51	+ </table>
	52	+ <div class="flex justify-end">
	53	+ <button type="button" title="선택하기" class="yellow-btn mt30">
	54	+ 선택하기
	55	+ </button>
	56	+ </div>
	57	+ </div>
	58	+ </div>
	59	+ <div class="wrap mt30">
	60	+ <p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p>
	61	+ <div class="imgGroup flex justify-between">
	62	+ <div class="text-lf">
	63	+ <img src="../../../resources/img/img215_22s.png" alt="">
	64	+ <p class="title2 mt10">추천 학습 단원</p>
	65	+ </div>
	66	+ <div class="text-lf">
	67	+ <img src="../../../resources/img/img215_22s.png" alt="">
	68	+ <p class="title2 mt10">추천 학습 단원</p>
	69	+ </div>
	70	+ <div class="text-lf">
	71	+ <img src="../../../resources/img/img215_22s.png" alt="">
	72	+ <p class="title2 mt10">추천 학습 단원</p>
	73	+ </div>
	74	+ </div>
	75	+ </div>
	76	+ <div class="wrap mt30">
	77	+ <p class="title1 mb20">학습일정을 확인해봅시다. </p>
	78	+ <div class="flex-column" style="gap: 20px;">
	79	+ <div class=" flex justify-between align-center " style="gap: 70px;">
	80	+ <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
	81	+ <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" @click="toggleClicked" style="width: 100%;">
	82	+ <div class="text-lf flex justify-between align-center ">
	83	+ <div>
	84	+ <div class="flex align-center mb10" style="gap: 10px;">
	85	+ <p class="title2"><em class="gray-bd">1교시</em></p>
	86	+ <p class="title1">9:00</p>
	87	+ <p class="title1">~</p>
	88	+ <p class="title1">10:00</p>
	89	+ </div>
	90	+ <div class="title-box mb10"> <span class="title">the best</span></div>
	91	+ <p class="title2">wirte a</p>
	92	+ </div>
	93	+ <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""></div>
	94	+ </div>
	95	+ </div>
	96	+ </div>
	97	+
	98	+ </div>
	99	+ <div class="flex justify-end">
	100	+ <button type="button" title="선택하기" class="yellow-btn mt30">
	101	+ 선택하기
	102	+ </button>
	103	+ </div>
	104	+ </div>
	105	+ <!-- <div class="yellow-box mt30">
	106	+ <div class="title-box flex justify-between align-center">
	107	+ <div>
	108	+ <p class="title">학습 일정 변경</p>
	109	+ <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
	110	+ </div>
	111	+ <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
	112	+ 바로가기
	113	+ </button>
	114	+ </div>
	115	+ </div> -->
	116	+ <div class="popup-wrap" v-show="searchOpen">
	117	+ <div class="popup-box ">
	118	+ <div class="flex mb10 justify-between">
	119	+ <p class="popup-title mb20">시간 선택</p>
	120	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	121	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	122	+ </button>
	123	+ </div>
	124	+ <article class=" mb20 flex-column " style="gap: 20px;">
	125	+ <div class="flex justify-between bg-gray">
	126	+ <div class="flex align-center">
	127	+ <div><input type="checkbox" class="ui-checkbox mr20"></div>
	128	+ <div class="text-lf">
	129	+ <p class="title1">2교시</p>
	130	+ </div>
	131	+ </div>
	132	+ <div>
	133	+ <div class="flex align-center " style="gap: 10px;"><img
	134	+ src="../../../resources/img/img215_20s.png" alt="">
	135	+ <p class="title1">9:00</p>
	136	+ <p class="title1">~</p>
	137	+ <p class="title1">10:00</p>
	138	+ </div>
	139	+ </div>
	140	+ </div>
	141	+ <div class="flex justify-between bg-gray">
	142	+ <div class="flex align-center">
	143	+ <div><input type="checkbox" class="ui-checkbox mr20"></div>
	144	+ <div class="text-lf">
	145	+ <p class="title1">2교시</p>
	146	+ </div>
	147	+ </div>
	148	+ <div>
	149	+ <div class="flex align-center " style="gap: 10px;"><img
	150	+ src="../../../resources/img/img215_20s.png" alt="">
	151	+ <p class="title1">9:00</p>
	152	+ <p class="title1">~</p>
	153	+ <p class="title1">10:00</p>
	154	+ </div>
	155	+ </div>
	156	+ </div>
	157	+ <div class="flex justify-between bg-gray">
	158	+ <div class="flex align-center">
	159	+ <div><input type="checkbox" class="ui-checkbox mr20"></div>
	160	+ <div class="text-lf">
	161	+ <p class="title1">2교시</p>
	162	+ </div>
	163	+ </div>
	164	+ <div>
	165	+ <div class="flex align-center " style="gap: 10px;"><img
	166	+ src="../../../resources/img/img215_20s.png" alt="">
	167	+ <p class="title1">9:00</p>
	168	+ <p class="title1">~</p>
	169	+ <p class="title1">10:00</p>
	170	+ </div>
	171	+ </div>
	172	+ </div>
	173	+ <div class="flex justify-between bg-gray">
	174	+ <div class="flex align-center">
	175	+ <div><input type="checkbox" class="ui-checkbox mr20"></div>
	176	+ <div class="text-lf">
	177	+ <p class="title1">2교시</p>
	178	+ </div>
	179	+ </div>
	180	+ <div>
	181	+ <div class="flex align-center " style="gap: 10px;"><img
	182	+ src="../../../resources/img/img215_20s.png" alt="">
	183	+ <p class="title1">9:00</p>
	184	+ <p class="title1">~</p>
	185	+ <p class="title1">10:00</p>
	186	+ </div>
	187	+ </div>
	188	+ </div>
	189	+ </article>
	190	+ <div class="flex justify-center mt20">
	191	+ <button type="button" title="선택" class="new-btn">
	192	+ 선택
	193	+ </button>
	194	+ </div>
	195	+ </div>
	196	+ </div>
	197	+ </div>
	198	+ </div>
	199	+
	200	+</template>
	201	+
	202	+<script>
	203	+import SvgIcon from '@jamescoyle/vue-icon';
	204	+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	205	+
	206	+
	207	+export default {
	208	+ data() {
	209	+ return {
	210	+ isClicked: false,
	211	+ mdiMagnify: mdiMagnify,
	212	+ mdiWindowClose: mdiWindowClose,
	213	+ showModal: false,
	214	+ searchOpen: false,
	215	+ }
	216	+ },
	217	+ methods: {
	218	+ toggleClicked() {
	219	+ this.isClicked = !this.isClicked;
	220	+ },
	221	+ goToPage(page) {
	222	+ this.$router.push({ name: page });
	223	+ },
	224	+ showConfirm(type) {
	225	+ let message = '';
	226	+ if (type === 'cancel') {
	227	+ message = '삭제하시겠습니까?';
	228	+ } else if (type === 'reset') {
	229	+ message = '초기화하시겠습니까?';
	230	+ } else if (type === 'save') {
	231	+ message = '등록하시겠습니까?';
	232	+ }
	233	+
	234	+ if (confirm(message)) {
	235	+ this.goBack();
	236	+ }
	237	+ },
	238	+ closeModal() {
	239	+ this.showModal = false;
	240	+ },
	241	+ buttonSearch() {
	242	+ this.searchOpen = true;
	243	+ },
	244	+ closeBtn() {
	245	+ this.searchOpen = false;
	246	+
	247	+ },
	248	+
	249	+ },
	250	+ watch: {
	251	+
	252	+ },
	253	+ computed: {
	254	+
	255	+ },
	256	+ components: {
	257	+ SvgIcon
	258	+ },
	259	+ mounted() {
	260	+ console.log('Main2 mounted');
	261	+ }
	262	+}
	263	+</script>
	264	+<style scoped>
	265	+.popup-box {
	266	+ width: 750px;
	267	+
	268	+}
	269	+</style>(No newline at end of file)

2b00c16

7b34d9c

client/views/pages/main/PhotoBook.vue

--- client/views/pages/main/PhotoBook.vue

+++ client/views/pages/main/PhotoBook.vue


         <p class="title">내 사진첩</p>
     </div>
     <div class="myphoto mb30">
-        <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="class photo">
-                <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')">
-                    <div><img src="../../../resources/img/img210_15s.png" alt=""></div>
-                </div>
-                <div class="text flex justify-between mt20">
-                    <p class="title1">A반</p>
-                    <span class="member">20명</span>
-                </div>
-               
+       <div>
+            <div class="title-box flex justify-end mb40">
+                <select name="" id="">
+                    <option value="">A반</option>
+                </select>
             </div>
-
-        </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, } from '@mdi/js';
+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
+            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 });
         },

Add a comment

Open 0
Closed 0

List

...	...	@@ -1084,6 +1084,7 @@
1084	1084	em.green{color: #00B204; }
1085	1085	em.gray{color: #75767A; }
1086	1086	em.yellow-bg{background-color: #FFBA08; }
	1087	+ em.gray-bd{background-color: #EEF0F6; border: 1px solid #8C8E92; border-radius: 20px; padding: 5px 10px;}
1087	1088	input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
1088	1089
1089	1090	.blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}
...	...	@@ -1152,4 +1153,16 @@
1152	1153	border-radius: 50%;
1153	1154	border: 3px solid #ffffff;
1154	1155	accent-color: #ffba08;
1155		-} (No newline at end of file)
	1156	+}
	1157	+
	1158	+
	1159	+.bg-gray {
	1160	+ background-color: #F8F9FB;
	1161	+ border-radius: 10px;
	1162	+ padding: 20px;
	1163	+ }
	1164	+
	1165	+ .cs-pt{cursor: pointer;}
	1166	+ .cs-pt-clicked {
	1167	+ background-color: lightblue; /* Change to your desired background color */
	1168	+ } (No newline at end of file)

...	...	@@ -310,12 +310,12 @@
310	310	color: #DB2B39;
311	311	}
312	312
313		-.myphoto{
	313	+.myphoto >div{
314	314
315	315	background-image: url('../img/img207_15s.png');
316	316	width: 1011px;
317	317	height: 558px;
318		- padding: 30px;
	318	+ padding: 30px 60px;
319	319	margin: 0 auto;
320	320	}
321	321	.tab-btn{position: relative; color: #568BFA;}
...	...	@@ -336,11 +336,48 @@
336	336	right: 45px;
337	337	z-index: -1;
338	338	}
339		-.tab-box{
340		- margin: 80px 60px 20px 60px;
	339	+.myphoto .class{border-radius: 0px; padding: 10px;}
	340	+.myphoto .class .box {
	341	+ background-color: transparent;
	342	+ border-radius: 0px;
	343	+ padding: 0;
341	344	}
342		-
343		-
	345	+.myphoto .class .member::before{content: ""; background-image: url('../img/btn47_15s_normal.png'); width: 16px; height: 14px; position: absolute; left: -28px; top: 4px;}
	346	+.myphoto .photo{cursor: pointer; }
	347	+.myphoto .photo .title2{color: #8C8E92;}
	348	+.myphoto .tab-box{
	349	+ margin: 40px 0px 20px 50px;
	350	+}
	351	+.myphoto .photo:hover .class {transform: rotate(2deg);}
	352	+.myphoto .popup-wrap .date{position: relative;}
	353	+.myphoto .popup-wrap .date::before{content: ""; background-image: url('../img/img183_91t.png'); width: 20px; height: 22px; position: absolute; left: -28px;
	354	+}
	355	+/* 학습일정계획 */
	356	+.myplan .popup-wrap article{max-height: 400px; overflow-x: auto;}
	357	+.myplan{padding-right: 10px;}
	358	+.myplan .yellow-box{
	359	+ background-color: #FFF8E9;
	360	+ border: 1px solid #FFBA08;
	361	+ padding: 4rem;
	362	+ position: relative;
	363	+ border-radius: 10px;
	364	+}
	365	+.myplan .yellow-btn{
	366	+ background-image: url('../img/btn08_s.png');
	367	+ width: 181px;
	368	+ height: 60px;
	369	+ padding: 5px 20px;
	370	+ font-size: 28px;
	371	+ font-family: 'ONEMobilePOP';
	372	+}
	373	+.myplan .table-wrap .title2{color: #464749;}
	374	+.myplan input[type="checkbox"]{width: 30px; height: 30px;}
	375	+.myplan .ui-checkbox::before {width: 11px; height: 14px;}
	376	+.myplan .table-wrap tr {
	377	+ border-top: #C6C6C6 1px solid;
	378	+ border-bottom: #C6C6C6 1px solid;
	379	+}
	380	+.myplan .imgGroup img{width: 349px; height: 312px;}
344	381	/* 대시보드 */
345	382	.main {
346	383	max-height: 600px;
...	...	@@ -438,8 +475,8 @@
438	475	font-family: 'ONEMobilePOPOTF';
439	476	font-weight: 100;
440	477	}
441		-
442		-
	478	+.complete-wrap img{width: inherit;}
	479	+.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px;}
443	480	/* 챕터 */
444	481	.content-wrap {
445	482	margin: 90px 60px 0 60px;
...	...	@@ -789,7 +826,7 @@
789	826	select option{font-size: 20px; font-weight: bold;}
790	827
791	828
792		-.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px;}
	829	+.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px; width: max-content;}
793	830	.class .title1, .textbook .title1{font-family: 'ONEMobilePOP'; font-weight: 100;}
794	831	.class .box{background-color: #EAEDF4; border-radius: 10px;
795	832	padding: 10px;
...	...	@@ -824,7 +861,7 @@
824	861	.search-wrap button{
825	862	position: absolute;
826	863	right: 1rem;
827		- top: 6px;
	864	+ top: 9px;
828	865	}
829	866	.input-icon{
830	867	display: block;
...	...	@@ -874,10 +911,10 @@
874	911
875	912	.popup-box {
876	913	position: fixed;
877		- width: 670px;
	914	+ min-width: 670px;
878	915	/* min-height: 219px; */
879	916	background-color: var(--color-white);
880		- top: 50%;
	917	+ top:23%;
881	918	left: 37%;
882	919	transform: translateY(-50%);
883	920	border: 1px solid var(--color-gray);

...	...	@@ -5,6 +5,7 @@
5	5	import Join from "../Join.vue"
6	6	import MyPage from './main/MyPage.vue';
7	7	import MyPlan from './main/MyPlan.vue';
	8	+import MyPlan2 from './main/MyPlan2.vue';
8	9	import PhotoBook from './main/PhotoBook.vue';
9	10	import Dashboard from './main/Dashboard.vue';
10	11	import Main from "./main/Main.vue";
...	...	@@ -89,6 +90,7 @@
89	90	{ path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
90	91	{ path: '/MyPage.page', name: 'MyPage', component: MyPage },
91	92	{ path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
	93	+ { path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },
92	94	{ path: '/PhotoBook.page', name: 'PhotoBook', component: PhotoBook },
93	95	]
94	96	},

...	...	@@ -59,24 +59,61 @@
59	59	</div>
60	60	</div>
61	61	</div>
62		- <div class="complete-wrap mt90 ">
63		- <h2 class="mb40">전체 진행률</h2>
	62	+ <div class="complete-wrap mt90 myphoto">
	63	+ <h2 class="mb40">이 단원을 끝낸 친구들</h2>
	64	+ <article class=" flex-column" style="gap: 5px;">
	65	+ <div class="flex" style="gap: 5px;">
	66	+ <div @click="buttonSearch" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
	67	+ </div>
	68	+ </article>
	69	+ <article class="popup-wrap" v-show="searchOpen">
	70	+ <div class="popup-box ">
	71	+ <div class="flex mb10 justify-between">
	72	+ <p class="popup-title">알림</p>
	73	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	74	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	75	+ </button>
	76	+ </div>
	77	+ <div class="box">
	78	+ <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
	79	+ </div>
	80	+ <div class="text flex justify-between mt20">
	81	+ <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
	82	+ <p class="title2 date">2024-08-06</p>
	83	+ </div>
	84	+ </div>
	85	+ </article>
64	86	</div>
65	87
66	88	</div>
67	89	</template>
68	90
69	91	<script>
70		-
	92	+import SvgIcon from '@jamescoyle/vue-icon';
	93	+import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
71	94	export default {
72	95	data() {
73	96	return {
	97	+ mdiWindowClose: mdiWindowClose,
	98	+ showModal: false,
	99	+ searchOpen: false,
	100	+ searchOpen2: false,
74	101	}
75	102	},
76	103	methods: {
77	104	goToPage(page) {
78	105	this.$router.push({ name: page });
79		- }
	106	+ },
	107	+ closeModal() {
	108	+ this.showModal = false;
	109	+ },
	110	+ buttonSearch() {
	111	+ this.searchOpen = true;
	112	+ },
	113	+ closeBtn() {
	114	+ this.searchOpen = false;
	115	+
	116	+ },
80	117	},
81	118	watch: {
82	119
...	...	@@ -85,6 +122,7 @@
85	122
86	123	},
87	124	components: {
	125	+ SvgIcon,
88	126	},
89	127	mounted() {
90	128	console.log('main mounted');

...	...	@@ -1,14 +1,72 @@
1	1	<template>
2		- <div>학습일정계획</div>
	2	+ <div class="myplan">
	3	+ <div class="title-box flex justify-between mb40">
	4	+ <p class="title">오늘 공부할 내용을 확인해봅시다.</p>
	5	+ <!-- <select name="" id="">
	6	+ <option value="">A반</option>
	7	+ </select> -->
	8	+ </div>
	9	+ <div class="wrap" style="border-radius: 0; min-height: 197px;">
	10	+ <p class="title1"> 오늘 학습할 내용이 없습니다.</p>
	11	+ </div>
	12	+ <div class="yellow-box mt30">
	13	+ <div class="title-box flex justify-between align-center">
	14	+ <div >
	15	+ <p class="title">오늘 공부를 계획해봅시다.</p>
	16	+ <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
	17	+ </div>
	18	+ <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
	19	+ 바로가기
	20	+ </button>
	21	+ </div>
	22	+ </div>
	23	+ </div>
	24	+
	25	+
3	26	</template>
4	27
5	28	<script>
	29	+import SvgIcon from '@jamescoyle/vue-icon';
	30	+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	31	+
	32	+
6	33	export default {
7		- data () {
	34	+ data() {
8	35	return {
	36	+ mdiMagnify: mdiMagnify,
	37	+ mdiWindowClose: mdiWindowClose,
	38	+ showModal: false,
	39	+ searchOpen: false,
9	40	}
10	41	},
11	42	methods: {
	43	+ goToPage(page) {
	44	+ this.$router.push({ name: page });
	45	+ },
	46	+ showConfirm(type) {
	47	+ let message = '';
	48	+ if (type === 'cancel') {
	49	+ message = '삭제하시겠습니까?';
	50	+ } else if (type === 'reset') {
	51	+ message = '초기화하시겠습니까?';
	52	+ } else if (type === 'save') {
	53	+ message = '등록하시겠습니까?';
	54	+ }
	55	+
	56	+ if (confirm(message)) {
	57	+ this.goBack();
	58	+ }
	59	+ },
	60	+ closeModal() {
	61	+ this.showModal = false;
	62	+ },
	63	+ buttonSearch() {
	64	+ this.searchOpen = true;
	65	+ },
	66	+ closeBtn() {
	67	+ this.searchOpen = false;
	68	+
	69	+ },
12	70
13	71	},
14	72	watch: {
...	...	@@ -17,6 +75,9 @@
17	75	computed: {
18	76
19	77	},
	78	+ components: {
	79	+ SvgIcon
	80	+ },
20	81	mounted() {
21	82	console.log('Main2 mounted');
22	83	}

...	...	@@ -3,37 +3,120 @@
3	3	<p class="title">내 사진첩</p>
4	4	</div>
5	5	<div class="myphoto mb30">
6		- <div class="title-box flex justify-end mb40">
7		- <select name="" id="">
8		- <option value="">A반</option>
9		- </select>
10		- </div>
11		- <div class="btnGroup">
12		- <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
13		- <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
14		- <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
15		- <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
16		- </button>
17		- </div>
18		- <div v-if="selectedTab === 'tab1'" class="tab-box">
19		- <div class="class photo">
20		- <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')">
21		- <div><img src="../../../resources/img/img210_15s.png" alt=""></div>
22		- </div>
23		- <div class="text flex justify-between mt20">
24		- <p class="title1">A반</p>
25		- <span class="member">20명</span>
26		- </div>
27		-
	6	+ <div>
	7	+ <div class="title-box flex justify-end mb40">
	8	+ <select name="" id="">
	9	+ <option value="">A반</option>
	10	+ </select>
28	11	</div>
29		-
30		- </div>
	12	+ <div class="btnGroup">
	13	+ <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
	14	+ <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
	15	+ <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
	16	+ <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
	17	+ </button>
	18	+ </div>
	19	+ <div v-if="selectedTab === 'tab1'" class="tab-box">
	20	+ <div class="flex justify-between">
	21	+ <div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
	22	+ <div class="class ">
	23	+ <div class="box">
	24	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	25	+ </div>
	26	+ <div class="text flex justify-between mt20">
	27	+ <span class="member ml30">20</span>
	28	+ <p class="title2">1단원</p>
	29	+ </div>
	30	+ </div>
	31	+ </div>
	32	+ <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
	33	+ <div class="class photo">
	34	+ <div class="box">
	35	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	36	+ </div>
	37	+ <div class="text flex justify-between mt20">
	38	+ <span class="member ml30">20</span>
	39	+ <p class="title2">1단원</p>
	40	+ </div>
	41	+
	42	+ </div>
	43	+ </div>
	44	+ <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
	45	+ <div class="class ">
	46	+ <div class="box">
	47	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	48	+ </div>
	49	+ <div class="text flex justify-between mt20">
	50	+ <span class="member ml30">20</span>
	51	+ <p class="title2">1단원</p>
	52	+ </div>
	53	+
	54	+ </div>
	55	+ </div>
	56	+ </div>
	57	+ <div class="flex justify-between mt50">
	58	+ <div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
	59	+ <div class="class ">
	60	+ <div class="box">
	61	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	62	+ </div>
	63	+ <div class="text flex justify-between mt20">
	64	+ <span class="member ml30">20</span>
	65	+ <p class="title2">1단원</p>
	66	+ </div>
	67	+
	68	+ </div>
	69	+ </div>
	70	+ <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
	71	+ <div class="class ">
	72	+ <div class="box">
	73	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	74	+ </div>
	75	+ <div class="text flex justify-between mt20">
	76	+ <span class="member ml30">20</span>
	77	+ <p class="title2">1단원</p>
	78	+ </div>
	79	+
	80	+ </div>
	81	+ </div>
	82	+ <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
	83	+ <div class="class ">
	84	+ <div class="box">
	85	+ <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	86	+ </div>
	87	+ <div class="text flex justify-between mt20">
	88	+ <span class="member ml30">20</span>
	89	+ <p class="title2">1단원</p>
	90	+ </div>
	91	+ </div>
	92	+ </div>
	93	+ </div>
	94	+
	95	+ </div>
	96	+ <div class="popup-wrap" v-show="searchOpen">
	97	+ <div class="popup-box ">
	98	+ <div class="flex mb10 justify-between">
	99	+ <p class="popup-title">알림</p>
	100	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	101	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	102	+ </button>
	103	+ </div>
	104	+ <div class="box">
	105	+ <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
	106	+ </div>
	107	+ <div class="text flex justify-between mt20">
	108	+ <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
	109	+ <p class="title2 date">2024-08-06</p>
	110	+ </div>
	111	+ </div>
	112	+ </div>
	113	+ </div>
31	114	</div>
32	115	</template>
33	116
34	117	<script>
35	118	import SvgIcon from '@jamescoyle/vue-icon';
36		-import { mdiMagnify, } from '@mdi/js';
	119	+import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
37	120	import { mdilArrowRight } from '@mdi/light-js';
38	121	import ProgressBar from '../../component/ProgressBar.vue';
39	122
...	...	@@ -41,14 +124,28 @@
41	124	export default {
42	125	data() {
43	126	return {
	127	+ mdiWindowClose: mdiWindowClose,
44	128	selectedTab: 'tab1',
45	129	mdiMagnify: mdiMagnify,
46	130	mdilArrowRight: mdilArrowRight,
47	131	timer: "00:00",
48		- progress: 20
	132	+ progress: 20,
	133	+ showModal: false,
	134	+ searchOpen: false,
	135	+ searchOpen2: false,
49	136	}
50	137	},
51	138	methods: {
	139	+ closeModal() {
	140	+ this.showModal = false;
	141	+ },
	142	+ buttonSearch() {
	143	+ this.searchOpen = true;
	144	+ },
	145	+ closeBtn() {
	146	+ this.searchOpen = false;
	147	+
	148	+ },
52	149	goToPage(page) {
53	150	this.$router.push({ name: page });
54	151	},

Delete comment