Commit @5fcbcc06fe45a9cef65a6417f687440ab3ac679e

홍아랑 2024-08-12

240812 홍아랑 대시보드 및 웹캠 ui 수정

@5fcbcc06fe45a9cef65a6417f687440ab3ac679e

d4856fa

5fcbcc0

client/views/pages/main/Dashboard.vue

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

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


                     </div>
 
                     <div class="race-btn">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index"
-                            @click="toggleImageAndShowPopup(index, '11')">
+                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+                        data-num="11">
                             <img :src="item.imgSrc3">
                             <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                         </button>
                         <p class="long">최종 평가</p>
                     </div>
-
                 </div>
+                <div class="rabbit-end" @click="ShowPopup"><img src="../../../resources/img/img138_72s.png" alt=""></div>
             </div>
+
             <!-- 팝업 -->
             <div v-show="searchOpen2" class="popup-wrap">
                 <div class="popup-box">

             <h2 class="mb40">이 단원을 끝낸 친구들</h2>
             <article class=" flex-column" style="gap: 5px;">
                 <div class="flex" style="gap: 5px;">
-                    <div @click="buttonSearch2" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
+                    <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
                     <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
                 </div>
             </article>

                 <div class="popup-box ">
                     <div class="flex mb10  justify-between">
                         <p class="popup-title">알림</p>
-                        <button type="button" class="popup-close-btn" @click="closeBtn2">
+                        <button type="button" class="popup-close-btn" @click="closeModal">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                         </button>
                     </div>

                 this.searchOpen2 = true;  // 모달창 열기
             }
         },
+        ShowPopup() {
+            this.searchOpen2 = true;  // 촬영 여부 묻는 모달창 열기
+        },
         updateContent(index) {
             this.selectedIndex = index;
 

                     console.log("error>>>>>>>>", error);
                 });
         },
-        closeModal() {  //웹캠 팝업 닫기
+        closeModal() {  //웹캠 및 모든 팝업 닫기
             // this.showModal = false;
+            this.searchOpen = false;
             this.searchOpen2 = false;
             this.showCameraModal = false;
             this.photoTaken = false;
             this.photo = null;
+            this.showPhotoModal = false;
 
             //스트림 종료
             if (this.stream) {

 .toolbar input {
     margin: 5px;
 }
+
+.rabbit-end {
+    cursor: pointer;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -94,16 +94,17 @@
94	94	</div>
95	95
96	96	<div class="race-btn">
97		- <button class="popTxt" v-for="(item, index) in items" :key="index"
98		- @click="toggleImageAndShowPopup(index, '11')">
	97	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
	98	+ data-num="11">
99	99	<img :src="item.imgSrc3">
100	100	<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
101	101	</button>
102	102	<p class="long">최종 평가</p>
103	103	</div>
104		-
105	104	</div>
	105	+ <div class="rabbit-end" @click="ShowPopup"><img src="../../../resources/img/img138_72s.png" alt=""></div>
106	106	</div>
	107	+
107	108	<!-- 팝업 -->
108	109	<div v-show="searchOpen2" class="popup-wrap">
109	110	<div class="popup-box">
...	...	@@ -262,7 +263,7 @@
262	263	<h2 class="mb40">이 단원을 끝낸 친구들</h2>
263	264	<article class=" flex-column" style="gap: 5px;">
264	265	<div class="flex" style="gap: 5px;">
265		- <div @click="buttonSearch2" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
	266	+ <div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
266	267	<div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png" alt=""></div>
267	268	</div>
268	269	</article>
...	...	@@ -271,7 +272,7 @@
271	272	<div class="popup-box ">
272	273	<div class="flex mb10 justify-between">
273	274	<p class="popup-title">알림</p>
274		- <button type="button" class="popup-close-btn" @click="closeBtn2">
	275	+ <button type="button" class="popup-close-btn" @click="closeModal">
275	276	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
276	277	</button>
277	278	</div>
...	...	@@ -367,6 +368,9 @@
367	368	this.searchOpen2 = true; // 모달창 열기
368	369	}
369	370	},
	371	+ ShowPopup() {
	372	+ this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기
	373	+ },
370	374	updateContent(index) {
371	375	this.selectedIndex = index;
372	376
...	...	@@ -401,12 +405,14 @@
401	405	console.log("error>>>>>>>>", error);
402	406	});
403	407	},
404		- closeModal() { //웹캠 팝업 닫기
	408	+ closeModal() { //웹캠 및 모든 팝업 닫기
405	409	// this.showModal = false;
	410	+ this.searchOpen = false;
406	411	this.searchOpen2 = false;
407	412	this.showCameraModal = false;
408	413	this.photoTaken = false;
409	414	this.photo = null;
	415	+ this.showPhotoModal = false;
410	416
411	417	//스트림 종료
412	418	if (this.stream) {
...	...	@@ -841,4 +847,8 @@
841	847	.toolbar input {
842	848	margin: 5px;
843	849	}
	850	+
	851	+.rabbit-end {
	852	+ cursor: pointer;
	853	+}
844	854	</style> (No newline at end of file)

Delete comment