Commit @4e18b4dd7c0caab861995df0713cc2f7e0d884f7

woals 2024-08-23

240823 권민수 단어장 css 형식 통일

@4e18b4dd7c0caab861995df0713cc2f7e0d884f7

dc9188c

4e18b4d

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

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

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


         </div>
 
         <div class="flex justify-center">
-          <div class="vocaGroup" style="display: flex; flex-wrap: wrap;">
+          <div class="vocaGroup">
             <div
               v-for="(word) in wordList"
               :key="word.wdId"
-              class="flex justify-between mb80"
-              style="width: 49%;"
+              class="flex justify-between mb80 word-item"
             >
               <article class="flex align-center">
                 <div class="imgGroup mr30">

 </script>
 
 <style scoped>
+.vocaGroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.word-item {
+  width: 49%;
+}
+
 .grid-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

dc9188c

4e18b4d

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

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

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


 export default {
   data() {
     return {
-      // items: [
-      //   {
-      //     imgSrc1: "client/resources/img/img49_s.png",
-      //     imgSrc2: "client/resources/img/img50_s.png",
-      //     imgSrc: "client/resources/img/img77_41s.png",
-      //     isSecondImageVisible: false,
-      //     title: "america",
-      //   },
-      //   {
-      //     imgSrc1: "client/resources/img/img49_s.png",
-      //     imgSrc2: "client/resources/img/img50_s.png",
-      //     imgSrc: "client/resources/img/img47_s.png",
-      //     isSecondImageVisible: false,
-      //     title: "airplane",
-      //   },
-      //   {
-      //     imgSrc1: "client/resources/img/img49_s.png",
-      //     imgSrc2: "client/resources/img/img50_s.png",
-      //     imgSrc: "client/resources/img/img75_41s.png",
-      //     isSecondImageVisible: false,
-      //     title: "cat",
-      //   },
-      //   {
-      //     imgSrc1: "client/resources/img/img49_s.png",
-      //     imgSrc2: "client/resources/img/img50_s.png",
-      //     imgSrc: "client/resources/img/img74_41s.png",
-      //     isSecondImageVisible: false,
-      //     title: "mountain",
-      //   },
-      // ],
       items: [],
       timer: 0,
       intervalId: null,

dc9188c

4e18b4d

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

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

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


 export default {
   data() {
     return {
-      // items: [
-      //   {
-      //     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/img2_4.png",
-      //     title: "bank",
-      //   },
-      //   {
-      //     imgSrc1: "client/resources/img/img61_36s.png",
-      //     imgSrc2: "client/resources/img/img62_36s.png",
-      //     imgSrc: "client/resources/img/img57_36s.png",
-      //     title: "car",
-      //   },
-      //   {
-      //     imgSrc1: "client/resources/img/img61_36s.png",
-      //     imgSrc2: "client/resources/img/img62_36s.png",
-      //     imgSrc: "client/resources/img/img56_36s.png",
-      //     title: "guitar",
-      //   },
-      // ],
       items: [],
       selectedIndex: 0,
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -29,12 +29,11 @@
29	29	</div>
30	30
31	31	<div class="flex justify-center">
32		- <div class="vocaGroup" style="display: flex; flex-wrap: wrap;">
	32	+ <div class="vocaGroup">
33	33	<div
34	34	v-for="(word) in wordList"
35	35	:key="word.wdId"
36		- class="flex justify-between mb80"
37		- style="width: 49%;"
	36	+ class="flex justify-between mb80 word-item"
38	37	>
39	38	<article class="flex align-center">
40	39	<div class="imgGroup mr30">
...	...	@@ -244,6 +243,15 @@
244	243	</script>
245	244
246	245	<style scoped>
	246	+.vocaGroup {
	247	+ display: flex;
	248	+ flex-wrap: wrap;
	249	+}
	250	+
	251	+.word-item {
	252	+ width: 49%;
	253	+}
	254	+
247	255	.grid-container {
248	256	display: grid;
249	257	grid-template-columns: repeat(2, 1fr);

...	...	@@ -73,36 +73,6 @@
73	73	export default {
74	74	data() {
75	75	return {
76		- // items: [
77		- // {
78		- // imgSrc1: "client/resources/img/img49_s.png",
79		- // imgSrc2: "client/resources/img/img50_s.png",
80		- // imgSrc: "client/resources/img/img77_41s.png",
81		- // isSecondImageVisible: false,
82		- // title: "america",
83		- // },
84		- // {
85		- // imgSrc1: "client/resources/img/img49_s.png",
86		- // imgSrc2: "client/resources/img/img50_s.png",
87		- // imgSrc: "client/resources/img/img47_s.png",
88		- // isSecondImageVisible: false,
89		- // title: "airplane",
90		- // },
91		- // {
92		- // imgSrc1: "client/resources/img/img49_s.png",
93		- // imgSrc2: "client/resources/img/img50_s.png",
94		- // imgSrc: "client/resources/img/img75_41s.png",
95		- // isSecondImageVisible: false,
96		- // title: "cat",
97		- // },
98		- // {
99		- // imgSrc1: "client/resources/img/img49_s.png",
100		- // imgSrc2: "client/resources/img/img50_s.png",
101		- // imgSrc: "client/resources/img/img74_41s.png",
102		- // isSecondImageVisible: false,
103		- // title: "mountain",
104		- // },
105		- // ],
106	76	items: [],
107	77	timer: 0,
108	78	intervalId: null,

...	...	@@ -82,32 +82,6 @@
82	82	export default {
83	83	data() {
84	84	return {
85		- // items: [
86		- // {
87		- // imgSrc1: "client/resources/img/img61_36s.png",
88		- // imgSrc2: "client/resources/img/img62_36s.png",
89		- // imgSrc: "client/resources/img/img59_36s.png",
90		- // title: "apple",
91		- // },
92		- // {
93		- // imgSrc1: "client/resources/img/img61_36s.png",
94		- // imgSrc2: "client/resources/img/img62_36s.png",
95		- // imgSrc: "client/resources/img/img2_4.png",
96		- // title: "bank",
97		- // },
98		- // {
99		- // imgSrc1: "client/resources/img/img61_36s.png",
100		- // imgSrc2: "client/resources/img/img62_36s.png",
101		- // imgSrc: "client/resources/img/img57_36s.png",
102		- // title: "car",
103		- // },
104		- // {
105		- // imgSrc1: "client/resources/img/img61_36s.png",
106		- // imgSrc2: "client/resources/img/img62_36s.png",
107		- // imgSrc: "client/resources/img/img56_36s.png",
108		- // title: "guitar",
109		- // },
110		- // ],
111	85	items: [],
112	86	selectedIndex: 0,
113	87

Delete comment