Commit @8782c099e76eea3c025f99e63ca0e3f06705f1b5

[jichoi] 08-07

240807 최정임

@8782c099e76eea3c025f99e63ca0e3f06705f1b5

b58b810

8782c09

client/resources/css/common.css

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

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


   .title1 {
     font-size: 24px !important;
     font-weight: bold;
-    width: max-content;
   }
   .title2 {
     font-size: 20px !important;

b58b810

8782c09

client/resources/css/style.css

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

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


 .race-btn p.long {
   width: fit-content;
 }
-
+/* 사진촬영 */
+.camera{background-color: #000;}
+.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}
+.camera .body{width: 1435px; height: 810px; margin: 0 auto;}
+.stickers button{margin: 5px; text-align: center;}
+.frame{
+  background-image: url('../img/img142_76s.png');
+  width: 993px;
+  height: 634px;
+  padding: 55px;
+  text-align: center;
+}
+.frame .photo{
+  width: 845px;
+  height: 476px;
+  margin: 0 auto;
+}
+.frame .photo img{
+  width: inherit;
+}
+/* 학습을 마친 친구들 */
 .complete-wrap h2 {
   font-size: 32px;
   color: #331600;

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

 .content {
   position: relative;
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
-  width: 1670px;
+  width: 93%;
   height: 710px;
   background-color: #fff;
   border-radius: 20px;

   }
 
 /* step2_2 */
-.popTxt{position: relative; width: fit-content;}
+.popTxt{position: relative; }
 .popTxt img:last-child{position: absolute; top: 0; left: 0;}
 
 h4{font-size: 20px;}

b58b810

8782c09

client/resources/img/img142_76s.png (Binary)

--- client/resources/img/img142_76s.png

+++ client/resources/img/img142_76s.png

Binary file is not shown

8782c09

client/resources/img/img152_75s_01.png (Binary) (added)

+++ client/resources/img/img152_75s_01.png

Binary file is not shown

b58b810

8782c09

client/views/pages/AppRouter.js

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

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


 import MyPlan2 from './main/MyPlan2.vue';
 import PhotoBook from './main/PhotoBook.vue';
 import Dashboard from './main/Dashboard.vue';
+import Camera from "./main/Camera.vue"
+import PhotoDesign from "./main/PhotoDesign.vue"
+import PhotoEdit from "./main/PhotoEdit.vue"
 import PreviewNote from './main/PreviewNote.vue';
 import Main from "./main/Main.vue";
 import Chapter1 from "./main/Chapter/Chapter1.vue";

 const routes = [
     { path: '/login.page', name: 'login', component: login },
     { path: '/Join.page', name: 'Join', component: Join },
+    
     // { path: '/App.page', name: 'App', component: App,
     //     children:[
     //     ]

             { path: '/PreviewNote.page', name: 'PreviewNote', component: PreviewNote },
         ]
     },
-
+    { path: '/Camera.page', name: 'Camera', component: Camera },
+    { path: '/PhotoDesign.page', name: 'PhotoDesign', component: PhotoDesign },
+    { path: '/PhotoEdit.page', name: 'PhotoEdit', component: PhotoEdit },
     /* 지문 */
     { path: '/Chapter1.page', name: 'Chapter1', component: Chapter1 },
     { path: '/Chapter1_1.page', name: 'Chapter1_1', component: Chapter1_1 },

8782c09

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

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

...	...	@@ -0,0 +1,56 @@
	1	+<template>
	2	+ <div class="camera">
	3	+ <div class="header flex justify-between title-box">
	4	+ <button type="button" class="flex align-center" @click="goToPage('Dashboard')">
	5	+ <svg-icon type="mdi" :path="mdilChevronLeft" style="width: 50px; height: 50px;"></svg-icon>
	6	+ <p class="title"> 이전글</p>
	7	+ </button>
	8	+ <button @click="goToPage('PhotoDesign')" ><img src="../../../resources/img/btn19_74s_normal.png" alt="">
	9	+ </button>
	10	+ </div>
	11	+ <div class="body ">
	12	+<img src="../../../resources/img/img140_747s.png" alt="">
	13	+ </div>
	14	+ </div>
	15	+</template>
	16	+
	17	+<script>
	18	+import SvgIcon from '@jamescoyle/vue-icon';
	19	+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	20	+import { mdilChevronRight, mdilChevronLeft } from '@mdi/light-js';
	21	+
	22	+import axios from "axios";
	23	+
	24	+export default {
	25	+ data() {
	26	+ return {
	27	+ selectedTab: 'tab1',
	28	+ username: '',
	29	+ password: '',
	30	+ mdiWindowClose: mdiWindowClose,
	31	+ mdilChevronLeft: mdilChevronLeft,
	32	+ showModal: false,
	33	+ searchOpen: false,
	34	+ }
	35	+ },
	36	+ methods: {
	37	+
	38	+ goToPage(page) {
	39	+ this.$router.push({ name: page });
	40	+ },
	41	+ closeModal() {
	42	+ this.showModal = false;
	43	+ },
	44	+ buttonSearch() {
	45	+ this.searchOpen = true;
	46	+ },
	47	+ closeBtn() {
	48	+ this.searchOpen = false;
	49	+
	50	+ },
	51	+ },
	52	+ components: {
	53	+ SvgIcon
	54	+ },
	55	+}
	56	+</script>

b58b810

8782c09

client/views/pages/main/Dashboard.vue

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

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


                 <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="1">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="2">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="7">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="6">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="5">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="4">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="3">
+                        <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')">
-                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="8">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="9">
+                        <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')">
-                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="10">
+                        <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" @click="goToPage('Chapter11')">
-                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="11">
+                    <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>

                         </button>
                     </div>
                     <div class="box">
-                        <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
+                        <div><img src="../../../resources/img/img140_747s.png" alt=""></div>
                     </div>
                    <div class="flex justify-between mt20">
                         <div class="text  flex">

 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,

         }
     },
     methods: {
+        toggleImage(index) {
+         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
+      },
         goToPage(page) {
             this.$router.push({ name: page });
         },

8782c09

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

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

...	...	@@ -0,0 +1,167 @@
	1	+<template>
	2	+ <div class="content-wrap">
	3	+ <div class="title-box mb25 flex align-center mt40">
	4	+ <span class="title mr40">1. Hello WORLD</span>
	5	+ <span class="title mr40">기념 사진을 꾸며봅시다.</span>
	6	+ </div>
	7	+ <div class="flex justify-between align-center" style="gap: 40px;">
	8	+ <div class="content " style="padding: 30px;">
	9	+ <div class="tool">
	10	+ <div class="flex justify-center mb20" style="gap: 20px;">
	11	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
	12	+ <img :src="item.imgSrc1" style="display: block;">
	13	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	14	+ </button>
	15	+ </div>
	16	+ </div>
	17	+ <div class="stickers">
	18	+ <button><img src="../../../resources/img/img146_75s.png" alt=""></button>
	19	+ <button><img src="../../../resources/img/img147_75s.png" alt=""></button>
	20	+ <button><img src="../../../resources/img/img148_75s.png" alt=""></button>
	21	+ <button><img src="../../../resources/img/img149_75s.png" alt=""></button>
	22	+ <button><img src="../../../resources/img/img150_75s.png" alt=""></button>
	23	+ <button><img src="../../../resources/img/img151_75s.png" alt=""></button>
	24	+ <button><img src="../../../resources/img/img152_75s.png" alt=""></button>
	25	+ <button><img src="../../../resources/img/img153_75s.png" alt=""></button>
	26	+ <button><img src="../../../resources/img/img154_75s.png" alt=""></button>
	27	+ <button><img src="../../../resources/img/img155_75s.png" alt=""></button>
	28	+ <button><img src="../../../resources/img/img156_75s.png" alt=""></button>
	29	+ <button><img src="../../../resources/img/img157_75s.png" alt=""></button>
	30	+ <button><img src="../../../resources/img/img158_75s.png" alt=""></button>
	31	+ </div>
	32	+ </div>
	33	+ <div>
	34	+ <div class="content " style="height: 549px; width: 973px;">
	35	+ <button><img src="../../../resources/img/img143_75s.png" alt=""></button>
	36	+ </div>
	37	+ <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
	38	+ <button class="login-btn" @click="goToPage('Camera')">
	39	+ <img src="../../../resources/img/btn07_s.png" alt="">
	40	+ <p>재촬영</p>
	41	+ </button>
	42	+
	43	+ <button class="login-btn" type="submit" @click="goToPage('PhotoEdit')"><img
	44	+ src="../../../resources/img/btn07_s.png" alt="">
	45	+ <p>완성</p>
	46	+ </button>
	47	+ </div>
	48	+ </div>
	49	+ <div class="content title-box" style="padding: 30px;">
	50	+ <div class="mb20">
	51	+ <p class="title">랜덤 단어</p>
	52	+ </div>
	53	+ <div class="flex-column" style="gap: 10px;">
	54	+ <button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">
	55	+ <p class="title">a</p>
	56	+ </button>
	57	+ <button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">
	58	+ <p class="title">a</p>
	59	+ </button>
	60	+ <button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">
	61	+ <p class="title" style="color: #fff;">a</p>
	62	+ </button>
	63	+ <button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">
	64	+ <p class="title mt20" style="color: #fff;">a</p>
	65	+ </button>
	66	+ </div>
	67	+ </div>
	68	+
	69	+ </div>
	70	+ </div>
	71	+</template>
	72	+
	73	+<script>
	74	+export default {
	75	+ data() {
	76	+ return {
	77	+ items: [
	78	+ { imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png', },
	79	+ { imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png', },
	80	+ ],
	81	+ timer: '00',
	82	+ selectedIndex: 0,
	83	+ }
	84	+ },
	85	+ methods: {
	86	+ updateContent(index) {
	87	+ this.selectedIndex = index;
	88	+ // this.currentCon = this.items[index].con;
	89	+ },
	90	+ goToPage(page) {
	91	+ this.$router.push({ name: page });
	92	+ },
	93	+ startTimer() {
	94	+ if (this.intervalId) {
	95	+ clearInterval(this.intervalId);
	96	+ }
	97	+ this.timer = 5;
	98	+ this.intervalId = setInterval(() => {
	99	+ if (this.timer > 0) {
	100	+ this.timer--;
	101	+ } else {
	102	+ clearInterval(this.intervalId);
	103	+ }
	104	+ }, 1000);
	105	+ }
	106	+ },
	107	+ watch: {
	108	+
	109	+ },
	110	+ computed: {
	111	+
	112	+ },
	113	+ components: {
	114	+ },
	115	+ mounted() {
	116	+
	117	+ }
	118	+}
	119	+</script>
	120	+<style scoped>
	121	+.imgGroup {
	122	+ width: fit-content;
	123	+}
	124	+
	125	+.imgGroup button {
	126	+ position: relative;
	127	+}
	128	+
	129	+.imgGroup button p,
	130	+.textbox p {
	131	+ position: absolute;
	132	+ top: 50%;
	133	+ left: 50%;
	134	+ transform: translate(-50%, -50%);
	135	+ width: fit-content;
	136	+ height: fit-content;
	137	+ background: #ffffffb8;
	138	+ border-radius: 5px;
	139	+ padding: 10px;
	140	+ font-size: 48px;
	141	+ font-family: 'ONEMobilePOP';
	142	+}
	143	+
	144	+.pickGroup button {
	145	+ position: relative;
	146	+ margin-right: 30px;
	147	+}
	148	+
	149	+.pickGroup button p {
	150	+ font-size: 34px;
	151	+ color: #c6c6c6;
	152	+ position: absolute;
	153	+ top: 50%;
	154	+ left: 50%;
	155	+ transform: translate(-50%, -50%);
	156	+}
	157	+
	158	+.pickGroup article img {
	159	+ object-fit: contain;
	160	+ width: -webkit-fill-available;
	161	+}
	162	+
	163	+.pickGroup article>div>p {
	164	+ font-size: 64px;
	165	+}
	166	+.popTxt{width: 101px;}
	167	+</style>(파일 끝에 줄바꿈 문자 없음)

8782c09

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

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

...	...	@@ -0,0 +1,122 @@
	1	+<template>
	2	+ <div class="content-wrap " >
	3	+ <div class="flex justify-center">
	4	+ <div>
	5	+ <div class="frame title-box">
	6	+ <div class="photo" >
	7	+ <img src="../../../resources/img/img143_75s.png" alt="">
	8	+ </div>
	9	+ <p class="title mt20" style="color: #fff;">2024.07.01 1단원 완료!</p>
	10	+
	11	+ </div>
	12	+ <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
	13	+ <button class="login-btn" @click="goToPage('PhotoDesign')">
	14	+ <img src="../../../resources/img/btn07_s.png" alt="">
	15	+ <p>수정하기</p>
	16	+ </button>
	17	+
	18	+ <button class="login-btn" type="submit" @click="goToPage('Dashboard')"><img
	19	+ src="../../../resources/img/btn07_s.png" alt="">
	20	+ <p>완료</p>
	21	+ </button>
	22	+ </div>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+</template>
	27	+
	28	+<script>
	29	+export default {
	30	+ data() {
	31	+ return {
	32	+ items: [
	33	+ { imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png', },
	34	+ { imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png', },
	35	+ ],
	36	+ timer: '00',
	37	+ selectedIndex: 0,
	38	+ }
	39	+ },
	40	+ methods: {
	41	+ updateContent(index) {
	42	+ this.selectedIndex = index;
	43	+ // this.currentCon = this.items[index].con;
	44	+ },
	45	+ goToPage(page) {
	46	+ this.$router.push({ name: page });
	47	+ },
	48	+ startTimer() {
	49	+ if (this.intervalId) {
	50	+ clearInterval(this.intervalId);
	51	+ }
	52	+ this.timer = 5;
	53	+ this.intervalId = setInterval(() => {
	54	+ if (this.timer > 0) {
	55	+ this.timer--;
	56	+ } else {
	57	+ clearInterval(this.intervalId);
	58	+ }
	59	+ }, 1000);
	60	+ }
	61	+ },
	62	+ watch: {
	63	+
	64	+ },
	65	+ computed: {
	66	+
	67	+ },
	68	+ components: {
	69	+ },
	70	+ mounted() {
	71	+
	72	+ }
	73	+}
	74	+</script>
	75	+<style scoped>
	76	+.imgGroup {
	77	+ width: fit-content;
	78	+}
	79	+
	80	+.imgGroup button {
	81	+ position: relative;
	82	+}
	83	+
	84	+.imgGroup button p,
	85	+.textbox p {
	86	+ position: absolute;
	87	+ top: 50%;
	88	+ left: 50%;
	89	+ transform: translate(-50%, -50%);
	90	+ width: fit-content;
	91	+ height: fit-content;
	92	+ background: #ffffffb8;
	93	+ border-radius: 5px;
	94	+ padding: 10px;
	95	+ font-size: 48px;
	96	+ font-family: 'ONEMobilePOP';
	97	+}
	98	+
	99	+.pickGroup button {
	100	+ position: relative;
	101	+ margin-right: 30px;
	102	+}
	103	+
	104	+.pickGroup button p {
	105	+ font-size: 34px;
	106	+ color: #c6c6c6;
	107	+ position: absolute;
	108	+ top: 50%;
	109	+ left: 50%;
	110	+ transform: translate(-50%, -50%);
	111	+}
	112	+
	113	+.pickGroup article img {
	114	+ object-fit: contain;
	115	+ width: -webkit-fill-available;
	116	+}
	117	+
	118	+.pickGroup article>div>p {
	119	+ font-size: 64px;
	120	+}
	121	+.popTxt{width: 101px;}
	122	+</style>(파일 끝에 줄바꿈 문자 없음)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1101,7 +1101,6 @@
1101	1101	.title1 {
1102	1102	font-size: 24px !important;
1103	1103	font-weight: bold;
1104		- width: max-content;
1105	1104	}
1106	1105	.title2 {
1107	1106	font-size: 20px !important;

...	...	@@ -468,7 +468,27 @@
468	468	.race-btn p.long {
469	469	width: fit-content;
470	470	}
471		-
	471	+/* 사진촬영 */
	472	+.camera{background-color: #000;}
	473	+.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}
	474	+.camera .body{width: 1435px; height: 810px; margin: 0 auto;}
	475	+.stickers button{margin: 5px; text-align: center;}
	476	+.frame{
	477	+ background-image: url('../img/img142_76s.png');
	478	+ width: 993px;
	479	+ height: 634px;
	480	+ padding: 55px;
	481	+ text-align: center;
	482	+}
	483	+.frame .photo{
	484	+ width: 845px;
	485	+ height: 476px;
	486	+ margin: 0 auto;
	487	+}
	488	+.frame .photo img{
	489	+ width: inherit;
	490	+}
	491	+/* 학습을 마친 친구들 */
472	492	.complete-wrap h2 {
473	493	font-size: 32px;
474	494	color: #331600;
...	...	@@ -476,7 +496,7 @@
476	496	font-weight: 100;
477	497	}
478	498	.complete-wrap img{width: inherit;}
479		-.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px;}
	499	+.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; }
480	500	/* 챕터 */
481	501	.content-wrap {
482	502	margin: 90px 60px 0 60px;
...	...	@@ -510,7 +530,7 @@
510	530	.content {
511	531	position: relative;
512	532	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
513		- width: 1670px;
	533	+ width: 93%;
514	534	height: 710px;
515	535	background-color: #fff;
516	536	border-radius: 20px;
...	...	@@ -695,7 +715,7 @@
695	715	}
696	716
697	717	/* step2_2 */
698		-.popTxt{position: relative; width: fit-content;}
	718	+.popTxt{position: relative; }
699	719	.popTxt img:last-child{position: absolute; top: 0; left: 0;}
700	720
701	721	h4{font-size: 20px;}

...	...	@@ -8,6 +8,9 @@
8	8	import MyPlan2 from './main/MyPlan2.vue';
9	9	import PhotoBook from './main/PhotoBook.vue';
10	10	import Dashboard from './main/Dashboard.vue';
	11	+import Camera from "./main/Camera.vue"
	12	+import PhotoDesign from "./main/PhotoDesign.vue"
	13	+import PhotoEdit from "./main/PhotoEdit.vue"
11	14	import PreviewNote from './main/PreviewNote.vue';
12	15	import Main from "./main/Main.vue";
13	16	import Chapter1 from "./main/Chapter/Chapter1.vue";
...	...	@@ -77,6 +80,7 @@
77	80	const routes = [
78	81	{ path: '/login.page', name: 'login', component: login },
79	82	{ path: '/Join.page', name: 'Join', component: Join },
	83	+
80	84	// { path: '/App.page', name: 'App', component: App,
81	85	// children:[
82	86	// ]
...	...	@@ -96,7 +100,9 @@
96	100	{ path: '/PreviewNote.page', name: 'PreviewNote', component: PreviewNote },
97	101	]
98	102	},
99		-
	103	+ { path: '/Camera.page', name: 'Camera', component: Camera },
	104	+ { path: '/PhotoDesign.page', name: 'PhotoDesign', component: PhotoDesign },
	105	+ { path: '/PhotoEdit.page', name: 'PhotoEdit', component: PhotoEdit },
100	106	/* 지문 */
101	107	{ path: '/Chapter1.page', name: 'Chapter1', component: Chapter1 },
102	108	{ path: '/Chapter1_1.page', name: 'Chapter1_1', component: Chapter1_1 },

...	...	@@ -9,52 +9,99 @@
9	9	<div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
10	10	<div class="rcon flex justify-end mb5">
11	11	<div class="race-btn" @click="goToPage('Chapter1')">
12		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="1">
	12	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
	13	+ <img :src="item.imgSrc1" >
	14	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	15	+ </button>
13	16	<p>지문1</p>
14	17	</div>
15	18	<div class="race-btn" @click="goToPage('Chapter2')">
16		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="2">
	19	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
	20	+ <img :src="item.imgSrc1" >
	21	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	22	+ </button>
17	23	<p>단어장</p>
18	24	</div>
19	25	</div>
20	26	<div class="lcon flex justify-between mb5">
21	27	<div class="race-btn" @click="goToPage('Chapter7')">
22		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="7">
	28	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
	29	+ <img :src="item.imgSrc1" >
	30	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	31	+ </button>
23	32	<p>문제1</p>
24	33	</div>
25	34	<div class="race-btn" @click="goToPage('Chapter6')">
26		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="6">
	35	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
	36	+ <img :src="item.imgSrc1" >
	37	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	38	+ </button>
27	39	<p>단어장</p>
28	40	</div>
29	41	<div class="race-btn" @click="goToPage('Chapter5')">
30		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="5">
	42	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
	43	+ <img :src="item.imgSrc1" >
	44	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	45	+ </button>
31	46	<p>지문2</p>
32	47	</div>
33	48	<div class="race-btn" @click="goToPage('Chapter4')">
34		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="4">
	49	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
	50	+ <img :src="item.imgSrc1" >
	51	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	52	+ </button>
35	53	<p>문제2</p>
36	54	</div>
37	55	<div class="race-btn" @click="goToPage('Chapter3')">
38		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="3">
	56	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
	57	+ <img :src="item.imgSrc1" >
	58	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	59	+ </button>
39	60	<p>문제1</p>
40	61	</div>
41	62	</div>
42	63	<div class="rcon flex">
43	64	<div class="race-btn" @click="goToPage('Chapter8')">
44		- <img src="../../../resources/img/img11_2_s.png" alt="" data-num="8">
	65	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
	66	+ <img :src="item.imgSrc3" >
	67	+ <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	68	+ </button>
45	69	<p class="long">중간 평가</p>
46	70	</div>
47	71	<div class="race-btn" @click="goToPage('Chapter9')">
48		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="9">
	72	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
	73	+ <img :src="item.imgSrc1" >
	74	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	75	+ </button>
49	76	<p>지문3</p>
50	77	</div>
51	78	<div class="race-btn" @click="goToPage('Chapter10')">
52		- <img src="../../../resources/img/img11_1_s.png" alt="" data-num="10">
	79	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="10">
	80	+ <img :src="item.imgSrc1" >
	81	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	82	+ </button>
53	83	<p>단어장</p>
54	84	</div>
55		- <div class="race-btn" @click="goToPage('Chapter11')">
56		- <img src="../../../resources/img/img11_2_s.png" alt="" data-num="11">
	85	+ <div class="race-btn" >
	86	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="11">
	87	+ <img :src="item.imgSrc3" >
	88	+ <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	89	+ </button>
57	90	<p class="long">최종 평가</p>
	91	+ </div>
	92	+ </div>
	93	+ </div>
	94	+ <!-- 팝업 -->
	95	+ <div v-show="searchOpen" class="popup-wrap">
	96	+ <div class="popup-box ">
	97	+ <div class=" mb30 text-ct">
	98	+ <p class="title1 mb20">1단원이 끝났습니다! </p>
	99	+ <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>
	100	+ </div>
	101	+ <div class="flex justify-center ">
	102	+ <button type="button" title="사진촬영" class="new-btn" @click="goToPage('Camera')">
	103	+ 사진촬영
	104	+ </button>
58	105	</div>
59	106	</div>
60	107	</div>
...	...	@@ -75,7 +122,7 @@
75	122	</button>
76	123	</div>
77	124	<div class="box">
78		- <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
	125	+ <div><img src="../../../resources/img/img140_747s.png" alt=""></div>
79	126	</div>
80	127	<div class="flex justify-between mt20">
81	128	<div class="text flex">
...	...	@@ -97,6 +144,9 @@
97	144	export default {
98	145	data() {
99	146	return {
	147	+ items: [
	148	+ { 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 },
	149	+ ],
100	150	mdiWindowClose: mdiWindowClose,
101	151	mdiHeart: mdiHeart,
102	152	showModal: false,
...	...	@@ -105,6 +155,9 @@
105	155	}
106	156	},
107	157	methods: {
	158	+ toggleImage(index) {
	159	+ this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
	160	+ },
108	161	goToPage(page) {
109	162	this.$router.push({ name: page });
110	163	},

Delete comment