Commit @8e10b4507fee758fe0ce665d77661bf02f2c8d15

이은진 2024-08-22

240822 이은진 대시보드 css 수정

@8e10b4507fee758fe0ce665d77661bf02f2c8d15

6f4372c

8e10b45

client/views/pages/main/Dashboard.vue

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

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


                                 :style="{ display: rabbitPos[1] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="1">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
+                            <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
+                            <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[0].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="2">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
+                            <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
+                            <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[1].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[7] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="7">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
+                            <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
+                            <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[6].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[6] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="6">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
+                            <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
+                            <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[5].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[5] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="5">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
+                            <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
+                            <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[4].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[4] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="4">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
+                            <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
+                            <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[3].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[3] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="3">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
+                            <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
+                            <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[2].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[8] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="8">
-                            <img :src="item.imgSrc3" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc4" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
+                            <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
+                            <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
                         </button>
                         <p class="long">{{ labeledItems[7].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[9] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="9">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
+                            <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
+                            <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[8].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[10] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="10">
-                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
+                            <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
+                            <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
                         </button>
                         <p>{{ labeledItems[9].label }}</p>
                     </div>

                                 :style="{ display: rabbitPos[11] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index"
                             @click="toggleImageAndShowPopup(index, '11')" data-num="11">
-                            <img :src="item.imgSrc3" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
-                            <img :src="item.imgSrc4" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
+                            <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
+                                :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
+                            <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
+                                :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
                         </button>
                         <p class="long">{{ labeledItems[10].label }}</p>
                     </div>

         <div class="complete-wrap  myphoto">
             <button class="login-btn mt10" type="submit" style="width: 100%;" @click="finishSchedule"><img
                     src="../../../resources/img/btn07_s.png" alt="" style="width: 100%; height: 100px;">
-                <p>학습 종료하기</p>
+                <p>학습 종료하기</p>np
             </button>
             <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>
 

     bottom: 0;
     width: 40%;
 }
+
+.race-btn p {
+    width: auto;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -20,8 +20,10 @@
20	20	:style="{ display: rabbitPos[1] ? 'block' : 'none' }"></div>
21	21	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
22	22	data-num="1">
23		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
24		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
	23	+ <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	24	+ :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }">
	25	+ <img :src="labeledItems[0].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	26	+ :style="{ display: rabbitCompl[1] ? 'block' : 'none' }">
25	27	</button>
26	28	<p>{{ labeledItems[0].label }}</p>
27	29	</div>
...	...	@@ -30,8 +32,10 @@
30	32	:style="{ display: rabbitPos[2] ? 'block' : 'none' }"></div>
31	33	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
32	34	data-num="2">
33		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
34		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
	35	+ <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	36	+ :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }">
	37	+ <img :src="labeledItems[1].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	38	+ :style="{ display: rabbitCompl[2] ? 'block' : 'none' }">
35	39	</button>
36	40	<p>{{ labeledItems[1].label }}</p>
37	41	</div>
...	...	@@ -43,8 +47,10 @@
43	47	:style="{ display: rabbitPos[7] ? 'block' : 'none' }"></div>
44	48	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
45	49	data-num="7">
46		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
47		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
	50	+ <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	51	+ :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
	52	+ <img :src="labeledItems[6].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	53	+ :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
48	54	</button>
49	55	<p>{{ labeledItems[6].label }}</p>
50	56	</div>
...	...	@@ -53,8 +59,10 @@
53	59	:style="{ display: rabbitPos[6] ? 'block' : 'none' }"></div>
54	60	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
55	61	data-num="6">
56		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
57		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
	62	+ <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	63	+ :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
	64	+ <img :src="labeledItems[5].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	65	+ :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
58	66	</button>
59	67	<p>{{ labeledItems[5].label }}</p>
60	68	</div>
...	...	@@ -64,8 +72,10 @@
64	72	:style="{ display: rabbitPos[5] ? 'block' : 'none' }"></div>
65	73	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
66	74	data-num="5">
67		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
68		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
	75	+ <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	76	+ :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
	77	+ <img :src="labeledItems[4].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	78	+ :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
69	79	</button>
70	80	<p>{{ labeledItems[4].label }}</p>
71	81	</div>
...	...	@@ -75,8 +85,10 @@
75	85	:style="{ display: rabbitPos[4] ? 'block' : 'none' }"></div>
76	86	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
77	87	data-num="4">
78		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
79		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
	88	+ <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	89	+ :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
	90	+ <img :src="labeledItems[3].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	91	+ :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
80	92	</button>
81	93	<p>{{ labeledItems[3].label }}</p>
82	94	</div>
...	...	@@ -86,8 +98,10 @@
86	98	:style="{ display: rabbitPos[3] ? 'block' : 'none' }"></div>
87	99	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
88	100	data-num="3">
89		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
90		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
	101	+ <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	102	+ :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
	103	+ <img :src="labeledItems[2].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	104	+ :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
91	105	</button>
92	106	<p>{{ labeledItems[2].label }}</p>
93	107	</div>
...	...	@@ -98,8 +112,10 @@
98	112	:style="{ display: rabbitPos[8] ? 'block' : 'none' }"></div>
99	113	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
100	114	data-num="8">
101		- <img :src="item.imgSrc3" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
102		- <img :src="item.imgSrc4" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
	115	+ <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	116	+ :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
	117	+ <img :src="labeledItems[7].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	118	+ :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
103	119	</button>
104	120	<p class="long">{{ labeledItems[7].label }}</p>
105	121	</div>
...	...	@@ -109,8 +125,10 @@
109	125	:style="{ display: rabbitPos[9] ? 'block' : 'none' }"></div>
110	126	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
111	127	data-num="9">
112		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
113		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
	128	+ <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	129	+ :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
	130	+ <img :src="labeledItems[8].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	131	+ :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
114	132	</button>
115	133	<p>{{ labeledItems[8].label }}</p>
116	134	</div>
...	...	@@ -120,8 +138,10 @@
120	138	:style="{ display: rabbitPos[10] ? 'block' : 'none' }"></div>
121	139	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
122	140	data-num="10">
123		- <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
124		- <img :src="item.imgSrc2" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
	141	+ <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	142	+ :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
	143	+ <img :src="labeledItems[9].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	144	+ :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
125	145	</button>
126	146	<p>{{ labeledItems[9].label }}</p>
127	147	</div>
...	...	@@ -132,8 +152,10 @@
132	152	:style="{ display: rabbitPos[11] ? 'block' : 'none' }"></div>
133	153	<button class="popTxt" v-for="(item, index) in items" :key="index"
134	154	@click="toggleImageAndShowPopup(index, '11')" data-num="11">
135		- <img :src="item.imgSrc3" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
136		- <img :src="item.imgSrc4" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
	155	+ <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc3 : item.imgSrc1"
	156	+ :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
	157	+ <img :src="labeledItems[10].label.length >= 4 ? item.imgSrc4 : item.imgSrc2"
	158	+ :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
137	159	</button>
138	160	<p class="long">{{ labeledItems[10].label }}</p>
139	161	</div>
...	...	@@ -200,7 +222,7 @@
200	222	<div class="complete-wrap myphoto">
201	223	<button class="login-btn mt10" type="submit" style="width: 100%;" @click="finishSchedule"><img
202	224	src="../../../resources/img/btn07_s.png" alt="" style="width: 100%; height: 100px;">
203		- <p>학습 종료하기</p>
	225	+ <p>학습 종료하기</p>np
204	226	</button>
205	227	<h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>
206	228
...	...	@@ -805,4 +827,8 @@
805	827	bottom: 0;
806	828	width: 40%;
807	829	}
	830	+
	831	+.race-btn p {
	832	+ width: auto;
	833	+}
808	834	</style> (No newline at end of file)

Delete comment