Commit @2b8ad966f53c53a5c8a5ae6dc73c735e08bfab2a

[jichoi] 2024-08-08

240808 최정임

@2b8ad966f53c53a5c8a5ae6dc73c735e08bfab2a

8d47256

2b8ad96

client/resources/css/style.css

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

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


   width: 1063px;
 }
 
-.rabbit {
+.rabbit-start {
   position: absolute;
   top: -45px;
   left: 393px;
+}
+.rabbit-end {
+  position: absolute;
+  bottom: 24px;
+    right: 40px;
 }
 
 .rabbit img {

 .race-btn p.long {
   width: fit-content;
 }
+/* .popup-yellow{
+  background-image: url('../img/img139_72s.png');
+  min-width: 439px !important;
+  min-height: 244px !important;
+  background-color: transparent !important;
+  border: 0 !important;
+} */
 /* 사진촬영 */
 .camera{background-color: #000;}
 .camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}

8d47256

2b8ad96

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


         <div class="profile mb30">
             <div class="flex align-start">
                 <img src="../../resources/img/img16_s.png" alt="">
-                <div class="ml25" style="width: 100%;">
+                <div class="ml25" >
                     <p class="name mb10">학생이름</p>
                     <p class="mb5">xx중학교 3학년 x반</p>
                     <progress-bar :progress="progress"></progress-bar>

8d47256

2b8ad96

client/views/pages/main/Chapter/Chapter3_15.vue

--- client/views/pages/main/Chapter/Chapter3_15.vue

+++ client/views/pages/main/Chapter/Chapter3_15.vue


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button> -->
+               <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
+               <button><img src="../../../../resources/img/btn10_s.png" alt="">
+               </button>
             </div>
 
         <div class="text-ct">

           <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
           
           <div class="dropGroup flex align-center justify-center mt30">
-            <div class="flex" style="gap: 20px;">
-              <div class="bd-bt textbox" @click="showButton(1)">
-                <p v-if="showButton1">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(2)">
-                <p v-if="showButton2">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(3)">
-                <p v-if="showButton3">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(4)">
-                <p v-if="showButton4">A</p></div>
-            </div>
+            <img src="../../../../resources/img/btn18_64s_normal.png" alt="">
 
           </div>
 
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>
 </template>

8d47256

2b8ad96

client/views/pages/main/Chapter/Chapter3_16.vue

--- client/views/pages/main/Chapter/Chapter3_16.vue

+++ client/views/pages/main/Chapter/Chapter3_16.vue


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">중간 평가 설문 조사</p>
         <div class="flex align-center mb30">

8d47256

2b8ad96

client/views/pages/main/Chapter/Chapter4.vue

--- client/views/pages/main/Chapter/Chapter4.vue

+++ client/views/pages/main/Chapter/Chapter4.vue


 
                 </div>
             </div>
-            <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
+            <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
             </div>
         </div>
     </div>

8d47256

2b8ad96

client/views/pages/main/Dashboard.vue

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

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


                 <p class="subtitle">hi my name is dd!</p>
             </div>
             <div class="race-box">
-                <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
+                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
                 <div class="rcon flex justify-end mb5">
                     <div class="race-btn" @click="goToPage('Chapter1')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">

                         <p class="long">최종 평가</p>
                     </div>
                 </div>
+                <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
             </div>
             <!-- 팝업 -->
             <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
+                <div class="popup-box popup-yellow">
+                    <div class="flex justify-end">
+                        <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            </button>
+                    </div>
                     <div class=" mb30 text-ct">
                         <p class="title1 mb20">1단원이 끝났습니다! </p>
                         <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>

             <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 @click="buttonSearch2" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
                 </div>
             </article>
-            <article class="popup-wrap" v-show="searchOpen">
+            <article class="popup-wrap" 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="closeBtn">
+                        <button type="button" class="popup-close-btn" @click="closeBtn2">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                         </button>
                     </div>

             mdiWindowClose: mdiWindowClose,
             mdiHeart: mdiHeart,
             showModal: false,
+            showModal2: false,
             searchOpen: false,
             searchOpen2: false,
         }

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

8d47256

2b8ad96

client/views/pages/main/PhotoDesign.vue

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

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


 }
 </script>
 <style scoped>
+.content{width: 19%;}
 .imgGroup {
   width: fit-content;
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -441,10 +441,15 @@
441	441	width: 1063px;
442	442	}
443	443
444		-.rabbit {
	444	+.rabbit-start {
445	445	position: absolute;
446	446	top: -45px;
447	447	left: 393px;
	448	+}
	449	+.rabbit-end {
	450	+ position: absolute;
	451	+ bottom: 24px;
	452	+ right: 40px;
448	453	}
449	454
450	455	.rabbit img {
...	...	@@ -470,6 +475,13 @@
470	475	.race-btn p.long {
471	476	width: fit-content;
472	477	}
	478	+/* .popup-yellow{
	479	+ background-image: url('../img/img139_72s.png');
	480	+ min-width: 439px !important;
	481	+ min-height: 244px !important;
	482	+ background-color: transparent !important;
	483	+ border: 0 !important;
	484	+} */
473	485	/* 사진촬영 */
474	486	.camera{background-color: #000;}
475	487	.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}

...	...	@@ -102,7 +102,7 @@
102	102
103	103	</div>
104	104	</div>
105		- <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
	105	+ <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
106	106	</div>
107	107	</div>
108	108	</div>

...	...	@@ -6,7 +6,7 @@
6	6	<p class="subtitle">hi my name is dd!</p>
7	7	</div>
8	8	<div class="race-box">
9		- <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
	9	+ <div class="rabbit-start"><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	12	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
...	...	@@ -90,10 +90,16 @@
90	90	<p class="long">최종 평가</p>
91	91	</div>
92	92	</div>
	93	+ <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
93	94	</div>
94	95	<!-- 팝업 -->
95	96	<div v-show="searchOpen" class="popup-wrap">
96		- <div class="popup-box ">
	97	+ <div class="popup-box popup-yellow">
	98	+ <div class="flex justify-end">
	99	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	100	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	101	+ </button>
	102	+ </div>
97	103	<div class=" mb30 text-ct">
98	104	<p class="title1 mb20">1단원이 끝났습니다! </p>
99	105	<p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>
...	...	@@ -110,14 +116,14 @@
110	116	<h2 class="mb40">이 단원을 끝낸 친구들</h2>
111	117	<article class=" flex-column" style="gap: 5px;">
112	118	<div class="flex" style="gap: 5px;">
113		- <div @click="buttonSearch" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
	119	+ <div @click="buttonSearch2" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
114	120	</div>
115	121	</article>
116		- <article class="popup-wrap" v-show="searchOpen">
	122	+ <article class="popup-wrap" v-show="searchOpen2">
117	123	<div class="popup-box ">
118	124	<div class="flex mb10 justify-between">
119	125	<p class="popup-title">알림</p>
120		- <button type="button" class="popup-close-btn" @click="closeBtn">
	126	+ <button type="button" class="popup-close-btn" @click="closeBtn2">
121	127	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
122	128	</button>
123	129	</div>
...	...	@@ -150,6 +156,7 @@
150	156	mdiWindowClose: mdiWindowClose,
151	157	mdiHeart: mdiHeart,
152	158	showModal: false,
	159	+ showModal2: false,
153	160	searchOpen: false,
154	161	searchOpen2: false,
155	162	}
...	...	@@ -167,10 +174,17 @@
167	174	buttonSearch() {
168	175	this.searchOpen = true;
169	176	},
	177	+ buttonSearch2() {
	178	+ this.searchOpen2 = true;
	179	+ },
170	180	closeBtn() {
171	181	this.searchOpen = false;
172	182
173	183	},
	184	+ closeBtn2() {
	185	+ this.searchOpen2 = false;
	186	+
	187	+ },
174	188	},
175	189	watch: {
176	190

...	...	@@ -118,6 +118,7 @@
118	118	}
119	119	</script>
120	120	<style scoped>
	121	+.content{width: 19%;}
121	122	.imgGroup {
122	123	width: fit-content;
123	124	}

...	...	@@ -4,7 +4,7 @@
4	4	<div class="profile mb30">
5	5	<div class="flex align-start">
6	6	<img src="../../resources/img/img16_s.png" alt="">
7		- <div class="ml25" style="width: 100%;">
	7	+ <div class="ml25" >
8	8	<p class="name mb10">학생이름</p>
9	9	<p class="mb5">xx중학교 3학년 x반</p>
10	10	<progress-bar :progress="progress"></progress-bar>

...	...	@@ -9,9 +9,9 @@
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step3</p>
11	11	<div class="flex align-center mb30">
12		- <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14		- </button> -->
	12	+ <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
	13	+ <button><img src="../../../../resources/img/btn10_s.png" alt="">
	14	+ </button>
15	15	</div>
16	16
17	17	<div class="text-ct">
...	...	@@ -29,22 +29,13 @@
29	29	<div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
30	30
31	31	<div class="dropGroup flex align-center justify-center mt30">
32		- <div class="flex" style="gap: 20px;">
33		- <div class="bd-bt textbox" @click="showButton(1)">
34		- <p v-if="showButton1">A</p></div>
35		- <div class="bd-bt textbox" @click="showButton(2)">
36		- <p v-if="showButton2">A</p></div>
37		- <div class="bd-bt textbox" @click="showButton(3)">
38		- <p v-if="showButton3">A</p></div>
39		- <div class="bd-bt textbox" @click="showButton(4)">
40		- <p v-if="showButton4">A</p></div>
41		- </div>
	32	+ <img src="../../../../resources/img/btn18_64s_normal.png" alt="">
42	33
43	34	</div>
44	35
45	36	</div>
46	37	</div>
47		- <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div>
	38	+ <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div>
48	39	</div>
49	40	</div>
50	41	</template>

...	...	@@ -5,7 +5,7 @@
5	5	<span class="subtitle">my name is dd</span>
6	6	</div>
7	7	<div class="flex justify-between align-center">
8		- <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div>
	8	+ <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">중간 평가 설문 조사</p>
11	11	<div class="flex align-center mb30">

Delete comment