Commit @c87f0efddf1c11d848d65bc05cc2ac361eea5b8d

[jichoi] 2024-08-12

240812 최정임

@c87f0efddf1c11d848d65bc05cc2ac361eea5b8d

11b0520

c87f0ef

client/resources/css/style.css

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

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


   transform: translate(-50%, -50%);
   /* width: 900px; */
 }
+.dropGroup .textbox {
+  position: absolute;
+  top: 45%;
+    left: 53%;
+  transform: translate(-50%, -50%);
+  /* width: 900px; */
+}
 
 .listenGroup .textbox p {
   font-size: 28px;
   line-height: 45px;
+  width: 100%;
   
 }
 p.textbox {width: 100%;}

11b0520

c87f0ef

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

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

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


           <div class="text-ct">
           <div class="dropGroup flex align-center justify-center">
             <div style="position: relative;" >
-              <img src="../../../../resources/img/img72_41s_1.png" alt="" style="width: 90%;">
-              <button style="left: 141px;
-    top: 60px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
-              <button style="    left: 200px;
-    bottom: 86px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
-              <button style="    right: 237px;
-    top: 159px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
-              <button style="     right: 159px;
-    bottom: 46px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
+              <img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
+              <div class="vocaGroup">
+                <div class="flex justify-between mb80">
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img74_41s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                             <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img75_41s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                             <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                </div>
+                <div class="flex justify-between">
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img76_41s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                             <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img77_41s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                             <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                </div>
+              </div>
+             <div class="textbox">
+                <button style="left: 141px;
+      top: 44px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
+                <button style="    left: 200px;
+      bottom: 46px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
+                <button style="    right: 237px;
+      top: 114px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
+                <button style="     right: 159px;
+      bottom: 5px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
+             </div>
                
             </div>
           </div>

   }
   </script>
   <style scoped>
+  .vocaGroup{    width: 79%;
+    position: absolute;
+    top: 90px;
+    left: 120px;}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -692,10 +692,18 @@
692	692	transform: translate(-50%, -50%);
693	693	/* width: 900px; */
694	694	}
	695	+.dropGroup .textbox {
	696	+ position: absolute;
	697	+ top: 45%;
	698	+ left: 53%;
	699	+ transform: translate(-50%, -50%);
	700	+ /* width: 900px; */
	701	+}
695	702
696	703	.listenGroup .textbox p {
697	704	font-size: 28px;
698	705	line-height: 45px;
	706	+ width: 100%;
699	707
700	708	}
701	709	p.textbox {width: 100%;}

...	...	@@ -17,15 +17,67 @@
17	17	<div class="text-ct">
18	18	<div class="dropGroup flex align-center justify-center">
19	19	<div style="position: relative;" >
20		- <img src="../../../../resources/img/img72_41s_1.png" alt="" style="width: 90%;">
21		- <button style="left: 141px;
22		- top: 60px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
23		- <button style=" left: 200px;
24		- bottom: 86px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
25		- <button style=" right: 237px;
26		- top: 159px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
27		- <button style=" right: 159px;
28		- bottom: 46px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
	20	+ <img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
	21	+ <div class="vocaGroup">
	22	+ <div class="flex justify-between mb80">
	23	+ <article class="flex align-center">
	24	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img74_41s.png" data-num="1"></div>
	25	+ <div class="flex align-start">
	26	+ <div>
	27	+ <h3>sidewalk</h3>
	28	+ <div class="flex align-center mt10">
	29	+ <span class="title1">보도</span>
	30	+ </div>
	31	+ </div>
	32	+ </div>
	33	+ </article>
	34	+ <article class="flex align-center">
	35	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img75_41s.png" data-num="1"></div>
	36	+ <div class="flex align-start">
	37	+ <div>
	38	+ <h3>sidewalk</h3>
	39	+ <div class="flex align-center mt10">
	40	+ <span class="title1">보도</span>
	41	+ </div>
	42	+ </div>
	43	+ </div>
	44	+ </article>
	45	+ </div>
	46	+ <div class="flex justify-between">
	47	+ <article class="flex align-center">
	48	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img76_41s.png" data-num="1"></div>
	49	+ <div class="flex align-start">
	50	+ <div>
	51	+ <h3>sidewalk</h3>
	52	+ <div class="flex align-center mt10">
	53	+ <span class="title1">보도</span>
	54	+ </div>
	55	+ </div>
	56	+ </div>
	57	+ </article>
	58	+ <article class="flex align-center">
	59	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img77_41s.png" data-num="1"></div>
	60	+ <div class="flex align-start">
	61	+ <div>
	62	+ <h3>sidewalk</h3>
	63	+ <div class="flex align-center mt10">
	64	+ <span class="title1">보도</span>
	65	+ </div>
	66	+ </div>
	67	+ </div>
	68	+ </article>
	69	+ </div>
	70	+ </div>
	71	+ <div class="textbox">
	72	+ <button style="left: 141px;
	73	+ top: 44px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
	74	+ <button style=" left: 200px;
	75	+ bottom: 46px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
	76	+ <button style=" right: 237px;
	77	+ top: 114px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
	78	+ <button style=" right: 159px;
	79	+ bottom: 5px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
	80	+ </div>
29	81
30	82	</div>
31	83	</div>
...	...	@@ -68,4 +120,8 @@
68	120	}
69	121	</script>
70	122	<style scoped>
	123	+ .vocaGroup{ width: 79%;
	124	+ position: absolute;
	125	+ top: 90px;
	126	+ left: 120px;}
71	127	</style> (No newline at end of file)

Delete comment