Commit @7f75fa22b138cded67ac8ac83bb3b47b3f922c2c

[jichoi] 2024-08-07

240807 최정임

@7f75fa22b138cded67ac8ac83bb3b47b3f922c2c

c4cce0f

7f75fa2

client/resources/css/common.css

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

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

...	...	@@ -1165,4 +1165,6 @@
1165	1165	.cs-pt{cursor: pointer;}
1166	1166	.cs-pt-clicked {
1167	1167	background-color: lightblue; /* Change to your desired background color */
1168		- } (No newline at end of file)
	1168	+ }
	1169	+
	1170	+ .row-bd{border-right: 1px solid #C6C6C6; height: 40px;} (No newline at end of file)

c4cce0f

7f75fa2

client/resources/css/style.css

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

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


     position: relative;
     border-radius: 10px;
 }
-.myplan .yellow-btn{
+.yellow-btn{
   background-image: url('../img/btn08_s.png');
   width: 181px;
   height: 60px;

 .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 {
+.myplan table tr {
   border-top: #C6C6C6 1px solid;
   border-bottom: #C6C6C6 1px solid;
 }

 
 .listen-btn{cursor: pointer;}
 
-
+/* 퀴즈 결과 */
+.result-box{
+  max-height: 400px;
+  overflow: auto;
+  padding-right: 10px;
+}
 
 /* ------------------------학생 --------------------- */
 

   padding: 2rem;
   position: relative;
   border-radius: 10px;
-  
-
+  background-color: #fff;
 }
 .mypage .wrap{overflow-x: auto;}
 .wrap section {width: max-content;}

c4cce0f

7f75fa2

client/views/layout/Side.vue

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

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


             <div class="flex justify-end"><button>질문하기</button></div>
         </div>
         <div class="btn-wrap flex justify-between">
-            <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오답노트</p></button>
-            <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
+            <button class="login-btn" @click="handleClick" >
+                <img  src="../../resources/img/btn07_s.png" alt="">
+                <p>{{ buttonText }}</p>
+            </button>
+            
+            <button  class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
         </div>
     </div>
 </template>

 export default {
     data () {
         return {
+            buttonText: '오답노트',
             progress: 20
         }
     },
     methods: {
+        handleClick() {
+            this.toggleText();
+            this.goToPage('PreviewNote');
+        },
+        handleClick() {
+            this.toggleTextAndNavigate();
+        },
+        toggleTextAndNavigate() {
+            if (this.buttonText === '오답노트') {
+                this.buttonText = '학습 코스';
+                this.goToPage('PreviewNote');
+                 // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
+            } else {
+                this.buttonText = '오답노트';
+                this.goToPage('Dashboard');
+                 // 버튼 텍스트가 '오답노트'일 때 이동할 경로
+            }
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
         increaseProgress() {
       if (this.progress < 100) {
         this.progress += 10;

c4cce0f

7f75fa2

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 PreviewNote from './main/PreviewNote.vue';
 import Main from "./main/Main.vue";
 import Chapter1 from "./main/Chapter/Chapter1.vue";
 import Chapter1_1 from "./main/Chapter/Chapter1_1.vue";

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

     { path: '/Chapter3_13.page', name: 'Chapter3_13', component: Chapter3_13 },
     { path: '/Chapter3_14.page', name: 'Chapter3_14', component: Chapter3_14 },
     { path: '/Chapter3_15.page', name: 'Chapter3_15', component: Chapter3_15 },
+    /* 설문 조사 페이지*/
     { path: '/Chapter3_16.page', name: 'Chapter3_16', component: Chapter3_16 },
-
+/* 평가 결과 페이지*/
     { path: '/Chapter4.page', name: 'Chapter4', component: Chapter4 },
+
     { path: '/Chapter5.page', name: 'Chapter5', component: Chapter5 },
     { path: '/Chapter6.page', name: 'Chapter6', component: Chapter6 },
     { path: '/Chapter7.page', name: 'Chapter7', component: Chapter7 },

c4cce0f

7f75fa2

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

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

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


           </div>
           <div class="imgGroup  mt20">
             <img src="../../../../resources/img/img116_59s.png" alt="">
-            <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
+            <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
             <div class=" mt20">
               <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
 

c4cce0f

7f75fa2

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">중간 평가 설문 조사</p>
         <div class="flex align-center mb30">
-               <p class="subtitle2 mr20"></p>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+          <p class="subtitle2 mr20"></p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-            </div>
+        </div>
 
-        <div class="text-ct">
-          
+        <div class="text-ct " >
+          <div class="table-wrap myplan">
+            <table>
+              <colgroup>
+                <col style="width: 5%;">
+                <col style="width: 70%;">
+                <col style="width: 25%;">
+              </colgroup>
+              <tr>
+                <td>
+                  <p class="title1 mr20">1.</p>
+                </td>
+                <td class="text-lf">
+                  <p class="title1">2교시</p>
+                </td>
+                <td>
+                  <div class="flex justify-center" style="gap: 60px;">
+                    <article>
+                      <div class="flex align-center">
+                        <p class="title1 mr20">네</p>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                    <img :src="item.imgSrc1" >
+                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                 </button>
+                      </div>
+                    </article>
+                    <article>
+                      <div class="flex align-center">
+                        <p class="title1 mr20">아니요</p>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                    <img :src="item.imgSrc1" >
+                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                 </button>
+                      </div>
+                    </article>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p class="title1 mr20">1.</p>
+                </td>
+                <td class="text-lf">
+                  <p class="title1">2교시</p>
+                </td>
+                <td>
+                  <div class="flex justify-center" style="gap: 60px;">
+                    <article>
+                      <div class="flex align-center">
+                        <p class="title1 mr20">네</p>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                    <img :src="item.imgSrc1" >
+                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                 </button>
+                      </div>
+                    </article>
+                    <article>
+                      <div class="flex align-center">
+                        <p class="title1 mr20">아니요</p>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                    <img :src="item.imgSrc1" >
+                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                 </button>
+                      </div>
+                    </article>
+                  </div>
+                </td>
+              </tr>
+            </table>
+            <div class="flex justify-end">
+              <button type="button" title="제출하기" class="yellow-btn mt30">
+                제출하기
+              </button>
+            </div>
+          </div>
 
         </div>
       </div>

 export default {
   data() {
     return {
+      items: [
+            { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
+           
+         ],
       timer: '00',
       showButton1: false,
       showButton2: false,

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

 }
 </script>
 <style scoped>
-.textbox {height: 60px;}
-.textbox p{font-size: 28px; font-weight: bold;     line-height: 65px;}
+.textbox {
+  height: 60px;
+}
+
+.textbox p {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
+}
+
 .dropGroup button {
   position: relative;
 }

 .dragGroup button p {
   font-size: 48px;
 }
+.myplan{width: 150rem; margin: 0 auto;}
 </style>

c4cce0f

7f75fa2

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

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

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


           </div>
           <div class="imgGroup flex align-center justify-center mt50">
             <img src="../../../../resources/img/img114_57s.png" alt="">
-               <input class="yellow-bd ml50" type="text" name="" id="" placeholder="답을 입력하세요.">
+               <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
              
           </div>
           <div class="flex justify-center mt40 " >

c4cce0f

7f75fa2

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

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

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

...	...	@@ -1,0 +1,199 @@
	1	+<template>
	2	+ <div id="Chapter1_1" 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="subtitle">my name is dd</span>
	6	+ </div>
	7	+ <div class="flex justify-between align-center">
	8	+ <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt="">
	9	+ </div>
	10	+ <div class="content title-box">
	11	+ <p class="title mt25 title-bg">Quiz Result</p>
	12	+ <!-- <div class="flex align-center mb30">
	13	+ <p class="subtitle2 mr20"></p>
	14	+ <button><img src="../../../../resources/img/btn10_s.png" alt="">
	15	+ </button>
	16	+ </div> -->
	17	+
	18	+ <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto;">
	19	+ <div class="wrap-bg ">
	20	+ <div class="title-box flex mb10 justify-between">
	21	+ <p class="title mb20">최종 점수</p>
	22	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	23	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	24	+ </button>
	25	+ </div>
	26	+ <div style="width: 100%;" class="flex mt30">
	27	+ <p class="title5"><em class="yellow">93</em></p>
	28	+ <p class="title4 ml10 mr10">/</p>
	29	+ <p class="title4">100</p>
	30	+ </div>
	31	+ </div>
	32	+ <div class="bg-gray " style="width: 980px;">
	33	+ <div class="title-box flex mb10 justify-between">
	34	+ <p class="title mb20">오답 문제 리스트</p>
	35	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	36	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	37	+ </button>
	38	+ </div>
	39	+ <article class=" mb20 flex-column result-box" style="gap: 20px;">
	40	+ <div class="flex justify-between wrap">
	41	+ <div class="flex align-center">
	42	+ <div><p class="title1 mr20">1.</p></div>
	43	+ <div class="text-lf">
	44	+ <p class="title1">2교시</p>
	45	+ </div>
	46	+ </div>
	47	+ <div>
	48	+ <div class="flex align-center " style="gap: 10px;"><button type="button"
	49	+ title="정답 확인" class="yellow-btn">
	50	+ 정답 확인
	51	+ </button>
	52	+ </div>
	53	+ </div>
	54	+ </div>
	55	+ <div class="flex justify-between wrap">
	56	+ <div class="flex align-center">
	57	+ <div><p class="title1 mr20">1.</p></div>
	58	+ <div class="text-lf">
	59	+ <p class="title1">2교시</p>
	60	+ </div>
	61	+ </div>
	62	+ <div>
	63	+ <div class="flex align-center " style="gap: 10px;"><button type="button"
	64	+ title="정답 확인" class="yellow-btn">
	65	+ 정답 확인
	66	+ </button>
	67	+ </div>
	68	+ </div>
	69	+ </div>
	70	+ <div class="flex justify-between wrap">
	71	+ <div class="flex align-center">
	72	+ <div><p class="title1 mr20">1.</p></div>
	73	+ <div class="text-lf">
	74	+ <p class="title1">2교시</p>
	75	+ </div>
	76	+ </div>
	77	+ <div>
	78	+ <div class="flex align-center " style="gap: 10px;"><button type="button"
	79	+ title="정답 확인" class="yellow-btn">
	80	+ 정답 확인
	81	+ </button>
	82	+ </div>
	83	+ </div>
	84	+ </div>
	85	+ <div class="flex justify-between wrap">
	86	+ <div class="flex align-center">
	87	+ <div><p class="title1 mr20">1.</p></div>
	88	+ <div class="text-lf">
	89	+ <p class="title1">2교시</p>
	90	+ </div>
	91	+ </div>
	92	+ <div>
	93	+ <div class="flex align-center " style="gap: 10px;"><button type="button"
	94	+ title="정답 확인" class="yellow-btn">
	95	+ 정답 확인
	96	+ </button>
	97	+ </div>
	98	+ </div>
	99	+ </div>
	100	+ </article>
	101	+ </div>
	102	+
	103	+ </div>
	104	+ </div>
	105	+ <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
	106	+ </div>
	107	+ </div>
	108	+ </div>
	109	+</template>
	110	+
	111	+<script>
	112	+export default {
	113	+ data() {
	114	+ return {
	115	+ timer: '00',
	116	+ showButton1: false,
	117	+ showButton2: false,
	118	+ showButton3: false,
	119	+ showButton4: false,
	120	+ }
	121	+ },
	122	+ methods: {
	123	+ goToPage(page) {
	124	+ this.$router.push({ name: page });
	125	+ },
	126	+ handleDrag(dragNumber) {
	127	+ // Drag 버튼 숨기기
	128	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	129	+ if (dragNumber === 1) {
	130	+ this.showButton1 = false;
	131	+ } else if (dragNumber === 2) {
	132	+ this.showButton2 = false;
	133	+ } else if (dragNumber === 3) {
	134	+ this.showButton3 = false;
	135	+ }
	136	+ },
	137	+ showButton(dropNumber) {
	138	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	139	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	140	+ if (dropNumber === 1) {
	141	+ this.showButton1 = true;
	142	+ } else if (dropNumber === 2) {
	143	+ this.showButton2 = true;
	144	+ } else if (dropNumber === 3) {
	145	+ this.showButton3 = true;
	146	+ } else if (dropNumber === 4) {
	147	+ this.showButton4 = true;
	148	+ }
	149	+ },
	150	+ startTimer() {
	151	+ if (this.intervalId) {
	152	+ clearInterval(this.intervalId);
	153	+ }
	154	+ this.timer = 5;
	155	+ this.intervalId = setInterval(() => {
	156	+ if (this.timer > 0) {
	157	+ this.timer--;
	158	+ } else {
	159	+ clearInterval(this.intervalId);
	160	+ }
	161	+ }, 1000);
	162	+ }
	163	+ },
	164	+ watch: {
	165	+
	166	+ },
	167	+ computed: {
	168	+
	169	+ },
	170	+ components: {
	171	+ },
	172	+ mounted() {
	173	+
	174	+ }
	175	+}
	176	+</script>
	177	+<style scoped>
	178	+.textbox {
	179	+ height: 60px;
	180	+}
	181	+
	182	+.textbox p {
	183	+ font-size: 28px;
	184	+ font-weight: bold;
	185	+ line-height: 65px;
	186	+}
	187	+
	188	+.dropGroup button {
	189	+ position: relative;
	190	+}
	191	+
	192	+.dropGroup button p {
	193	+ font-size: 48px;
	194	+}
	195	+
	196	+.dragGroup button p {
	197	+ font-size: 48px;
	198	+}
	199	+</style> (No newline at end of file)

c4cce0f

7f75fa2

client/views/pages/main/Dashboard.vue

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

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


                     <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 class="flex justify-between mt20">
+                        <div class="text  flex">
+                            <p class="title2 date ml30">2024-08-06</p>
+                            <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
+                        </div>
+                        <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart" style="color: #FFBA08;"></svg-icon><p><em class="yellow">1</em></p></div>
+                   </div>
                 </div>
             </article>
         </div>

     data() {
         return {
             mdiWindowClose: mdiWindowClose,
+            mdiHeart: mdiHeart,
             showModal: false,
             searchOpen: false,
             searchOpen2: false,

7f75fa2

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

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

...	...	@@ -0,0 +1,154 @@
	1	+<template>
	2	+ <div class="main myplan">
	3	+ <div class="yellow-box mt30">
	4	+ <div class="title-box flex justify-between align-center">
	5	+ <div class="flex justify-between align-center" style="gap: 20px;">
	6	+ <p class="title">단원</p>
	7	+ <div class="row-bd"></div>
	8	+ <div>
	9	+ <p class="title mr40 mb10">1. Hello WORLD</p>
	10	+ <p class="subtitle">my name is dd</p>
	11	+ </div>
	12	+ </div>
	13	+ <!-- <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
	14	+ 바로가기
	15	+ </button> -->
	16	+ </div>
	17	+ </div>
	18	+ <div class="title-box flex justify-between mb20 mt30">
	19	+ <p class="title">오답노트</p>
	20	+ <!-- <select name="" id="">
	21	+ <option value="">A반</option>
	22	+ </select> -->
	23	+ </div>
	24	+ <div class="wrap" style="border-radius: 0;">
	25	+
	26	+ <div class="table-wrap">
	27	+ <table>
	28	+ <colgroup>
	29	+ <col style="width: 10%;">
	30	+ <col style="width: 70%;">
	31	+ <col style="width: 15%;">
	32	+ </colgroup>
	33	+ <tr>
	34	+
	35	+ <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
	36	+ <td class="text-lf">
	37	+ <p class="title1">중간평가</p>
	38	+ <p class="title2">wirte a</p>
	39	+ </td>
	40	+ <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
	41	+ View Detail
	42	+ </button></td>
	43	+ </tr>
	44	+ <tr>
	45	+
	46	+ <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
	47	+ <td class="text-lf">
	48	+ <p class="title1">중간평가</p>
	49	+ <p class="title2">wirte a</p>
	50	+ </td>
	51	+ <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
	52	+ View Detail
	53	+ </button></td>
	54	+ </tr>
	55	+ </table>
	56	+ <div class="flex justify-end">
	57	+ <button type="button" title="선택하기" class="yellow-btn mt30">
	58	+ 선택하기
	59	+ </button>
	60	+ </div>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+</template>
	65	+
	66	+<script>
	67	+export default {
	68	+ data() {
	69	+ return {
	70	+ timer: '00',
	71	+ showButton1: false,
	72	+ showButton2: false,
	73	+ showButton3: false,
	74	+ showButton4: false,
	75	+ }
	76	+ },
	77	+ methods: {
	78	+ goToPage(page) {
	79	+ this.$router.push({ name: page });
	80	+ },
	81	+ handleDrag(dragNumber) {
	82	+ // Drag 버튼 숨기기
	83	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	84	+ if (dragNumber === 1) {
	85	+ this.showButton1 = false;
	86	+ } else if (dragNumber === 2) {
	87	+ this.showButton2 = false;
	88	+ } else if (dragNumber === 3) {
	89	+ this.showButton3 = false;
	90	+ }
	91	+ },
	92	+ showButton(dropNumber) {
	93	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	94	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	95	+ if (dropNumber === 1) {
	96	+ this.showButton1 = true;
	97	+ } else if (dropNumber === 2) {
	98	+ this.showButton2 = true;
	99	+ } else if (dropNumber === 3) {
	100	+ this.showButton3 = true;
	101	+ } else if (dropNumber === 4) {
	102	+ this.showButton4 = true;
	103	+ }
	104	+ },
	105	+ startTimer() {
	106	+ if (this.intervalId) {
	107	+ clearInterval(this.intervalId);
	108	+ }
	109	+ this.timer = 5;
	110	+ this.intervalId = setInterval(() => {
	111	+ if (this.timer > 0) {
	112	+ this.timer--;
	113	+ } else {
	114	+ clearInterval(this.intervalId);
	115	+ }
	116	+ }, 1000);
	117	+ }
	118	+ },
	119	+ watch: {
	120	+
	121	+ },
	122	+ computed: {
	123	+
	124	+ },
	125	+ components: {
	126	+ },
	127	+ mounted() {
	128	+
	129	+ }
	130	+}
	131	+</script>
	132	+<style scoped>
	133	+.textbox {
	134	+ height: 60px;
	135	+}
	136	+
	137	+.textbox p {
	138	+ font-size: 28px;
	139	+ font-weight: bold;
	140	+ line-height: 65px;
	141	+}
	142	+
	143	+.dropGroup button {
	144	+ position: relative;
	145	+}
	146	+
	147	+.dropGroup button p {
	148	+ font-size: 48px;
	149	+}
	150	+
	151	+.dragGroup button p {
	152	+ font-size: 48px;
	153	+}
	154	+</style>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -362,7 +362,7 @@
362	362	position: relative;
363	363	border-radius: 10px;
364	364	}
365		-.myplan .yellow-btn{
	365	+.yellow-btn{
366	366	background-image: url('../img/btn08_s.png');
367	367	width: 181px;
368	368	height: 60px;
...	...	@@ -373,7 +373,7 @@
373	373	.myplan .table-wrap .title2{color: #464749;}
374	374	.myplan input[type="checkbox"]{width: 30px; height: 30px;}
375	375	.myplan .ui-checkbox::before {width: 11px; height: 14px;}
376		-.myplan .table-wrap tr {
	376	+.myplan table tr {
377	377	border-top: #C6C6C6 1px solid;
378	378	border-bottom: #C6C6C6 1px solid;
379	379	}
...	...	@@ -794,7 +794,12 @@
794	794
795	795	.listen-btn{cursor: pointer;}
796	796
797		-
	797	+/* 퀴즈 결과 */
	798	+.result-box{
	799	+ max-height: 400px;
	800	+ overflow: auto;
	801	+ padding-right: 10px;
	802	+}
798	803
799	804	/* ------------------------학생 --------------------- */
800	805
...	...	@@ -961,8 +966,7 @@
961	966	padding: 2rem;
962	967	position: relative;
963	968	border-radius: 10px;
964		-
965		-
	969	+ background-color: #fff;
966	970	}
967	971	.mypage .wrap{overflow-x: auto;}
968	972	.wrap section {width: max-content;}

...	...	@@ -26,8 +26,12 @@
26	26	<div class="flex justify-end"><button>질문하기</button></div>
27	27	</div>
28	28	<div class="btn-wrap flex justify-between">
29		- <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오답노트</p></button>
30		- <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
	29	+ <button class="login-btn" @click="handleClick" >
	30	+ <img src="../../resources/img/btn07_s.png" alt="">
	31	+ <p>{{ buttonText }}</p>
	32	+ </button>
	33	+
	34	+ <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
31	35	</div>
32	36	</div>
33	37	</template>
...	...	@@ -38,10 +42,32 @@
38	42	export default {
39	43	data () {
40	44	return {
	45	+ buttonText: '오답노트',
41	46	progress: 20
42	47	}
43	48	},
44	49	methods: {
	50	+ handleClick() {
	51	+ this.toggleText();
	52	+ this.goToPage('PreviewNote');
	53	+ },
	54	+ handleClick() {
	55	+ this.toggleTextAndNavigate();
	56	+ },
	57	+ toggleTextAndNavigate() {
	58	+ if (this.buttonText === '오답노트') {
	59	+ this.buttonText = '학습 코스';
	60	+ this.goToPage('PreviewNote');
	61	+ // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
	62	+ } else {
	63	+ this.buttonText = '오답노트';
	64	+ this.goToPage('Dashboard');
	65	+ // 버튼 텍스트가 '오답노트'일 때 이동할 경로
	66	+ }
	67	+ },
	68	+ goToPage(page) {
	69	+ this.$router.push({ name: page });
	70	+ },
45	71	increaseProgress() {
46	72	if (this.progress < 100) {
47	73	this.progress += 10;

...	...	@@ -8,6 +8,7 @@
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 PreviewNote from './main/PreviewNote.vue';
11	12	import Main from "./main/Main.vue";
12	13	import Chapter1 from "./main/Chapter/Chapter1.vue";
13	14	import Chapter1_1 from "./main/Chapter/Chapter1_1.vue";
...	...	@@ -92,6 +93,7 @@
92	93	{ path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
93	94	{ path: '/MyPlan2.page', name: 'MyPlan2', component: MyPlan2 },
94	95	{ path: '/PhotoBook.page', name: 'PhotoBook', component: PhotoBook },
	96	+ { path: '/PreviewNote.page', name: 'PreviewNote', component: PreviewNote },
95	97	]
96	98	},
97	99
...	...	@@ -134,9 +136,11 @@
134	136	{ path: '/Chapter3_13.page', name: 'Chapter3_13', component: Chapter3_13 },
135	137	{ path: '/Chapter3_14.page', name: 'Chapter3_14', component: Chapter3_14 },
136	138	{ path: '/Chapter3_15.page', name: 'Chapter3_15', component: Chapter3_15 },
	139	+ /* 설문 조사 페이지*/
137	140	{ path: '/Chapter3_16.page', name: 'Chapter3_16', component: Chapter3_16 },
138		-
	141	+/* 평가 결과 페이지*/
139	142	{ path: '/Chapter4.page', name: 'Chapter4', component: Chapter4 },
	143	+
140	144	{ path: '/Chapter5.page', name: 'Chapter5', component: Chapter5 },
141	145	{ path: '/Chapter6.page', name: 'Chapter6', component: Chapter6 },
142	146	{ path: '/Chapter7.page', name: 'Chapter7', component: Chapter7 },

...	...	@@ -25,7 +25,7 @@
25	25	</div>
26	26	<div class="imgGroup mt20">
27	27	<img src="../../../../resources/img/img116_59s.png" alt="">
28		- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
	28	+ <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
29	29	<div class=" mt20">
30	30	<input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
31	31

...	...	@@ -9,13 +9,86 @@
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">중간 평가 설문 조사</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="">
	12	+ <p class="subtitle2 mr20"></p>
	13	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14	14	</button> -->
15		- </div>
	15	+ </div>
16	16
17		- <div class="text-ct">
18		-
	17	+ <div class="text-ct " >
	18	+ <div class="table-wrap myplan">
	19	+ <table>
	20	+ <colgroup>
	21	+ <col style="width: 5%;">
	22	+ <col style="width: 70%;">
	23	+ <col style="width: 25%;">
	24	+ </colgroup>
	25	+ <tr>
	26	+ <td>
	27	+ <p class="title1 mr20">1.</p>
	28	+ </td>
	29	+ <td class="text-lf">
	30	+ <p class="title1">2교시</p>
	31	+ </td>
	32	+ <td>
	33	+ <div class="flex justify-center" style="gap: 60px;">
	34	+ <article>
	35	+ <div class="flex align-center">
	36	+ <p class="title1 mr20">네</p>
	37	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	38	+ <img :src="item.imgSrc1" >
	39	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	40	+ </button>
	41	+ </div>
	42	+ </article>
	43	+ <article>
	44	+ <div class="flex align-center">
	45	+ <p class="title1 mr20">아니요</p>
	46	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	47	+ <img :src="item.imgSrc1" >
	48	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	49	+ </button>
	50	+ </div>
	51	+ </article>
	52	+ </div>
	53	+ </td>
	54	+ </tr>
	55	+ <tr>
	56	+ <td>
	57	+ <p class="title1 mr20">1.</p>
	58	+ </td>
	59	+ <td class="text-lf">
	60	+ <p class="title1">2교시</p>
	61	+ </td>
	62	+ <td>
	63	+ <div class="flex justify-center" style="gap: 60px;">
	64	+ <article>
	65	+ <div class="flex align-center">
	66	+ <p class="title1 mr20">네</p>
	67	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	68	+ <img :src="item.imgSrc1" >
	69	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	70	+ </button>
	71	+ </div>
	72	+ </article>
	73	+ <article>
	74	+ <div class="flex align-center">
	75	+ <p class="title1 mr20">아니요</p>
	76	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	77	+ <img :src="item.imgSrc1" >
	78	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	79	+ </button>
	80	+ </div>
	81	+ </article>
	82	+ </div>
	83	+ </td>
	84	+ </tr>
	85	+ </table>
	86	+ <div class="flex justify-end">
	87	+ <button type="button" title="제출하기" class="yellow-btn mt30">
	88	+ 제출하기
	89	+ </button>
	90	+ </div>
	91	+ </div>
19	92
20	93	</div>
21	94	</div>
...	...	@@ -28,6 +101,10 @@
28	101	export default {
29	102	data() {
30	103	return {
	104	+ items: [
	105	+ { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
	106	+
	107	+ ],
31	108	timer: '00',
32	109	showButton1: false,
33	110	showButton2: false,
...	...	@@ -36,6 +113,9 @@
36	113	}
37	114	},
38	115	methods: {
	116	+ toggleImage(index) {
	117	+ this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
	118	+ },
39	119	goToPage(page) {
40	120	this.$router.push({ name: page });
41	121	},
...	...	@@ -91,8 +171,16 @@
91	171	}
92	172	</script>
93	173	<style scoped>
94		-.textbox {height: 60px;}
95		-.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	174	+.textbox {
	175	+ height: 60px;
	176	+}
	177	+
	178	+.textbox p {
	179	+ font-size: 28px;
	180	+ font-weight: bold;
	181	+ line-height: 65px;
	182	+}
	183	+
96	184	.dropGroup button {
97	185	position: relative;
98	186	}
...	...	@@ -104,4 +192,5 @@
104	192	.dragGroup button p {
105	193	font-size: 48px;
106	194	}
	195	+.myplan{width: 150rem; margin: 0 auto;}
107	196	</style> (No newline at end of file)

...	...	@@ -25,7 +25,7 @@
25	25	</div>
26	26	<div class="imgGroup flex align-center justify-center mt50">
27	27	<img src="../../../../resources/img/img114_57s.png" alt="">
28		- <input class="yellow-bd ml50" type="text" name="" id="" placeholder="답을 입력하세요.">
	28	+ <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
29	29
30	30	</div>
31	31	<div class="flex justify-center mt40 " >

...	...	@@ -77,10 +77,13 @@
77	77	<div class="box">
78	78	<div><img src="../../../resources/img/img184_91t.png" alt=""></div>
79	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>
	80	+ <div class="flex justify-between mt20">
	81	+ <div class="text flex">
	82	+ <p class="title2 date ml30">2024-08-06</p>
	83	+ <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
	84	+ </div>
	85	+ <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart" style="color: #FFBA08;"></svg-icon><p><em class="yellow">1</em></p></div>
	86	+ </div>
84	87	</div>
85	88	</article>
86	89	</div>
...	...	@@ -95,6 +98,7 @@
95	98	data() {
96	99	return {
97	100	mdiWindowClose: mdiWindowClose,
	101	+ mdiHeart: mdiHeart,
98	102	showModal: false,
99	103	searchOpen: false,
100	104	searchOpen2: false,

Delete comment