Commit @11b0520a146cdb5f7248d67d81569e3134c6e9d1

[jichoi] 2024-08-12

240812 최정임

@11b0520a146cdb5f7248d67d81569e3134c6e9d1

24501d2

11b0520

client/resources/css/style.css

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

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


 .mypage .photobook .title1{font-family: 'ONEMobilePOPOTF'; font-weight: 100;}
 .mypage .textbook .text {border-radius:  12px 12px 0px 0px; height: 68px;
 }
-.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
+.mypage .textbook .box{height: fit-content; text-align: center; padding: 10px;}
 .mypage .book-red .text{background-color: #DB2B39;}
 /* .mypage .textbook:nth-child(2) .text */
 .mypage .book-blue .text{background-color:#2D7DD2;}

 .listenGroup img.bg {
   position: absolute;
   top: 0;
-  width: 1670px;
+  width: 100%;
   height: 710px;
 }
 

   top: 45%;
     left: 31%;
   transform: translate(-50%, -50%);
-  width: 900px;
+  /* width: 900px; */
 }
 
 .listenGroup .textbox p {
   font-size: 28px;
   line-height: 45px;
+  
 }
-
+p.textbox {width: 100%;}
 .listenGroup p.title {
   font-size: 42px;
   text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;

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

24501d2

11b0520

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

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

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

...	...	@@ -45,4 +45,7 @@
45	45	mounted() {
46	46	}
47	47	}
48		-</script> (No newline at end of file)
	48	+</script>
	49	+<style scoped>
	50	+.listenGroup .textbox { width: 900px};
	51	+</style> (No newline at end of file)

24501d2

11b0520

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

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

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


 <template>
-  <div id="Chapter2_2" class="content-wrap">
-     <div class="title-box mb25 flex align-center mt40">
-        <span class="title mr40">1. Hello WORLD</span>
-        <span class="subtitle">my name is dd</span>
-     </div>
-     <div class="flex justify-between align-center">
-        <div class="pre-btn" @click="goToPage('Chapter2_1')"><img src="../../../../resources/img/left.png" alt=""></div>
-        <div class="content title-box">
-           <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+   <div id="Chapter2_2" class="content-wrap">
+      <div class="title-box mb25 flex align-center mt40">
+         <span class="title mr40">1. Hello WORLD</span>
+         <span class="subtitle">my name is dd</span>
+      </div>
+      <div class="flex justify-between align-center">
+         <div class="pre-btn" @click="goToPage('Chapter2_1')"><img src="../../../../resources/img/left.png" alt="">
+         </div>
+         <div class="content title-box">
+            <p class="title mt25 title-bg">step2</p>
+            <div class="flex align-center mb30">
+               <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
+               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
-        </div>
+            </div>
 
-           <div class="imgGroup">
-              <div class="flex justify-center" style="gap: 90px;">
-                 <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>
-           </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
-     </div>
-  </div>
+            <div class="imgGroup">
+               <div class="flex justify-center" style="gap: 90px;">
+                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                     <div class="listenGroup">
+                        <img :src="item.imgSrc1">
+                        <p class="textbox"><img :src="item.imgSrc"></p>
+
+                     </div>
+                     <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                        <img :src="item.imgSrc2">
+                        <p class="title4 textbox">{{ item.title }}</p>
+                     </div>
+                  </button>
+               </div>
+            </div>
+         </div>
+         <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt="">
+         </div>
+      </div>
+   </div>
 </template>
 
 

    data() {
       return {
          items: [
-            { imgSrc1: 'client/resources/img/img49_s_1.png', imgSrc2: 'client/resources/img/img50_s_2.png', isSecondImageVisible: false },
-            { imgSrc1: 'client/resources/img/img49_s_2.png', imgSrc2: 'client/resources/img/img50_s_3.png', isSecondImageVisible: false },
-            { imgSrc1: 'client/resources/img/img49_s_3.png', imgSrc2: 'client/resources/img/img50_s_4.png', isSecondImageVisible: false },
-            { imgSrc1: 'client/resources/img/img49_s_4.png', imgSrc2: 'client/resources/img/img50_s_1.png', isSecondImageVisible: false }
+            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
+            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
+            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
+            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' }
          ]
       };
    },

    }
 }
 
-</script>
+</script>
+<style scoped>
+.popTxt {
+   width: 295px;
+   height: 406px;
+}
+
+.popTxt div:last-child img {
+   position: absolute;
+   top: 0;
+   left: 0;
+}
+
+.listenGroup .textbox {
+   top: 50%;
+    left: 50%;
+}
+</style>

24501d2

11b0520

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

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

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


             <div class="imgGroup">
 
                <div class="flex justify-center">
-                  <div class="btnGroup  flex" style="gap: 60px;">
+                  <div class="listenGroup  flex" style="gap: 60px;">
                      <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
                         :class="{ active: selectedIndex === index }">
                         <img :src="item.imgSrc1">
                         <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
+                        <div class="textbox">
+                          <div style="height: 80%; line-height: 200px;"> <img :src="item.imgSrc" alt=""></div>
+                           <p class="subtitle3" style="height: 20%;">{{ item.title }}</p>
+                        </div>
                      </button>
                   </div>
                </div>

    data() {
       return {
          items: [
-            { imgSrc1: 'client/resources/img/img61_36s_1.png', imgSrc2: 'client/resources/img/img61_36s_1_Click.png' },
-            { imgSrc1: 'client/resources/img/img61_36s_2.png', imgSrc2: 'client/resources/img/img61_36s_2_Click.png' },
-            { imgSrc1: 'client/resources/img/img61_36s_3.png', imgSrc2: 'client/resources/img/img61_36s_4_Click.png' },
-            { imgSrc1: 'client/resources/img/img61_36s_4.png', imgSrc2: 'client/resources/img/img61_36s_3_Click.png' },
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'a'},
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'a' },
+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'a' },
          ],
          selectedIndex: 0,
          timer: "00",

 </script>
 
 <style scoped>
+.listenGroup{height: 305px;}
+.listenGroup button{position: relative;}
+.listenGroup .textbox {    
+   width: 184px;
+    height: 206px;
+    left: 46%;
+    top: 43%;} 
 .look-text{bottom: 50px;}
 .btnGroup{width: 1060px; height: 340px;}
-.popTxt{width: 216px;}
-.popTxt img {
+.popTxt{width: 216px; }
+.popTxt > img {
    position: absolute;
    top: 0;
    left: 0;

Add a comment

Open 0
Closed 0

List

...	...	@@ -284,7 +284,7 @@
284	284	.mypage .photobook .title1{font-family: 'ONEMobilePOPOTF'; font-weight: 100;}
285	285	.mypage .textbook .text {border-radius: 12px 12px 0px 0px; height: 68px;
286	286	}
287		-.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
	287	+.mypage .textbook .box{height: fit-content; text-align: center; padding: 10px;}
288	288	.mypage .book-red .text{background-color: #DB2B39;}
289	289	/* .mypage .textbook:nth-child(2) .text */
290	290	.mypage .book-blue .text{background-color:#2D7DD2;}
...	...	@@ -674,7 +674,7 @@
674	674	.listenGroup img.bg {
675	675	position: absolute;
676	676	top: 0;
677		- width: 1670px;
	677	+ width: 100%;
678	678	height: 710px;
679	679	}
680	680
...	...	@@ -690,14 +690,15 @@
690	690	top: 45%;
691	691	left: 31%;
692	692	transform: translate(-50%, -50%);
693		- width: 900px;
	693	+ /* width: 900px; */
694	694	}
695	695
696	696	.listenGroup .textbox p {
697	697	font-size: 28px;
698	698	line-height: 45px;
	699	+
699	700	}
700		-
	701	+p.textbox {width: 100%;}
701	702	.listenGroup p.title {
702	703	font-size: 42px;
703	704	text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;
...	...	@@ -744,7 +745,7 @@
744	745
745	746	/* step2_2 */
746	747	.popTxt{position: relative; }
747		-.popTxt img:last-child{position: absolute; top: 0; left: 0;}
	748	+
748	749
749	750	h4{font-size: 20px;}
750	751

...	...	@@ -1,31 +1,40 @@
1	1	<template>
2		- <div id="Chapter2_2" 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('Chapter2_1')"><img src="../../../../resources/img/left.png" alt=""></div>
9		- <div class="content title-box">
10		- <p class="title mt25 title-bg">step2</p>
11		- <div class="flex align-center mb30">
12		- <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	2	+ <div id="Chapter2_2" 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('Chapter2_1')"><img src="../../../../resources/img/left.png" alt="">
	9	+ </div>
	10	+ <div class="content title-box">
	11	+ <p class="title mt25 title-bg">step2</p>
	12	+ <div class="flex align-center mb30">
	13	+ <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
	14	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14	15	</button> -->
15		- </div>
	16	+ </div>
16	17
17		- <div class="imgGroup">
18		- <div class="flex justify-center" style="gap: 90px;">
19		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
20		- <img :src="item.imgSrc1" >
21		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
22		- </button>
23		- </div>
24		- </div>
25		- </div>
26		- <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
27		- </div>
28		- </div>
	18	+ <div class="imgGroup">
	19	+ <div class="flex justify-center" style="gap: 90px;">
	20	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	21	+ <div class="listenGroup">
	22	+ <img :src="item.imgSrc1">
	23	+ <p class="textbox"><img :src="item.imgSrc"></p>
	24	+
	25	+ </div>
	26	+ <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	27	+ <img :src="item.imgSrc2">
	28	+ <p class="title4 textbox">{{ item.title }}</p>
	29	+ </div>
	30	+ </button>
	31	+ </div>
	32	+ </div>
	33	+ </div>
	34	+ <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt="">
	35	+ </div>
	36	+ </div>
	37	+ </div>
29	38	</template>
30	39
31	40
...	...	@@ -34,10 +43,10 @@
34	43	data() {
35	44	return {
36	45	items: [
37		- { imgSrc1: 'client/resources/img/img49_s_1.png', imgSrc2: 'client/resources/img/img50_s_2.png', isSecondImageVisible: false },
38		- { imgSrc1: 'client/resources/img/img49_s_2.png', imgSrc2: 'client/resources/img/img50_s_3.png', isSecondImageVisible: false },
39		- { imgSrc1: 'client/resources/img/img49_s_3.png', imgSrc2: 'client/resources/img/img50_s_4.png', isSecondImageVisible: false },
40		- { imgSrc1: 'client/resources/img/img49_s_4.png', imgSrc2: 'client/resources/img/img50_s_1.png', isSecondImageVisible: false }
	46	+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
	47	+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
	48	+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
	49	+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' }
41	50	]
42	51	};
43	52	},
...	...	@@ -51,4 +60,21 @@
51	60	}
52	61	}
53	62
54		-</script> (No newline at end of file)
	63	+</script>
	64	+<style scoped>
	65	+.popTxt {
	66	+ width: 295px;
	67	+ height: 406px;
	68	+}
	69	+
	70	+.popTxt div:last-child img {
	71	+ position: absolute;
	72	+ top: 0;
	73	+ left: 0;
	74	+}
	75	+
	76	+.listenGroup .textbox {
	77	+ top: 50%;
	78	+ left: 50%;
	79	+}
	80	+</style> (No newline at end of file)

...	...	@@ -19,11 +19,15 @@
19	19	<div class="imgGroup">
20	20
21	21	<div class="flex justify-center">
22		- <div class="btnGroup flex" style="gap: 60px;">
	22	+ <div class="listenGroup flex" style="gap: 60px;">
23	23	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
24	24	:class="{ active: selectedIndex === index }">
25	25	<img :src="item.imgSrc1">
26	26	<img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	27	+ <div class="textbox">
	28	+ <div style="height: 80%; line-height: 200px;"> <img :src="item.imgSrc" alt=""></div>
	29	+ <p class="subtitle3" style="height: 20%;">{{ item.title }}</p>
	30	+ </div>
27	31	</button>
28	32	</div>
29	33	</div>
...	...	@@ -43,10 +47,10 @@
43	47	data() {
44	48	return {
45	49	items: [
46		- { imgSrc1: 'client/resources/img/img61_36s_1.png', imgSrc2: 'client/resources/img/img61_36s_1_Click.png' },
47		- { imgSrc1: 'client/resources/img/img61_36s_2.png', imgSrc2: 'client/resources/img/img61_36s_2_Click.png' },
48		- { imgSrc1: 'client/resources/img/img61_36s_3.png', imgSrc2: 'client/resources/img/img61_36s_4_Click.png' },
49		- { imgSrc1: 'client/resources/img/img61_36s_4.png', imgSrc2: 'client/resources/img/img61_36s_3_Click.png' },
	50	+ { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img59_36s.png', title: 'apple' },
	51	+ { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'a'},
	52	+ { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'a' },
	53	+ { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'a' },
50	54	],
51	55	selectedIndex: 0,
52	56	timer: "00",
...	...	@@ -68,10 +72,17 @@
68	72	</script>
69	73
70	74	<style scoped>
	75	+.listenGroup{height: 305px;}
	76	+.listenGroup button{position: relative;}
	77	+.listenGroup .textbox {
	78	+ width: 184px;
	79	+ height: 206px;
	80	+ left: 46%;
	81	+ top: 43%;}
71	82	.look-text{bottom: 50px;}
72	83	.btnGroup{width: 1060px; height: 340px;}
73		-.popTxt{width: 216px;}
74		-.popTxt img {
	84	+.popTxt{width: 216px; }
	85	+.popTxt > img {
75	86	position: absolute;
76	87	top: 0;
77	88	left: 0;

Delete comment