Commit @329dcd5d73031f4ce51351debbc29eca4096245e

박정하 04-16

250416 박정하 썸네일 체크박스 수정

@329dcd5d73031f4ce51351debbc29eca4096245e

e74a7cb

329dcd5

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


         p,
         li {
             font-family: "Pretendard-L";
-            
+
         }
 
         .text {

             font-family: "Pretendard-B";
             font-size: 25px;
             margin-bottom: 20px;
-            
+
         }
 
         .address {

         padding: 60px 0;
         border-bottom: 1px solid #ddd;
         border-top: 1px solid #ddd;
-       
+
     }
     .no-results p:first-of-type {
         font-size: 32px;
         font-family: "Pretendard-B";
         margin-top: 45px;
     }
-    
+
     .no-results p:last-of-type {
         font-size: 18px;
         line-height: 30px;

                     background-clip: content-box, border-box;
                     border: 3px solid transparent;
                 }
-                .swiper-slide:hover{
+                .swiper-slide:hover,
+                .active-thumb {
                     background-image: linear-gradient(#fff, #fff),
                     linear-gradient(-45deg, #ca3e49, #3d355d);
                 }

         .swiper-button-next {
             right: 20px;
         }
-        
+
 
     }
 

e74a7cb

329dcd5

client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

--- client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

+++ client/views/pages/bbsDcry/photo/PicHistoryDetail.vue


       <div>
         <div class="gallery">
           <div class="main-swiper">
-            <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
+            <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2" @slideChange="handleMainSlideChange">
               <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
                 <img :src="item.filePath" :alt="item.fileNm" />
               </swiper-slide>

           </div>
           <div class="thumbnail">
             <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
-              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
-                <div class="thumbnail-wrapper">
-                  <div class="checkbox-container" @click.stop>
-                    <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" />
-                    <label :for="'photo_' + idx"></label>
-                  </div>
-                  <img :src="item.filePath" :alt="item.fileNm" />
-                </div>
+              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx" :class="{ 'active-thumb': activeIndex === idx }">
+                <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
+                <img :src="item.filePath" :alt="item.fileNm" />
               </swiper-slide>
             </swiper>
           </div>

   </div>
 </template>
 <script>
-// Swiper
 import { ref } from 'vue';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
+// Import Swiper Vue components
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+// Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/navigation';
 import 'swiper/css/thumbs';
+// import required modules
+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 // COMPONENT
 import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
 // API

 
 export default {
   components: {
-    Swiper,
-    SwiperSlide,
     PauseOutlined,
     CaretRightOutlined,
+    Swiper,
+    SwiperSlide,
     ViewerComponent,
   },
 

     };
 
     return {
-      modules: [FreeMode, Navigation, Thumbs],
       thumbsSwiper,
       setThumbsSwiper,
+      modules: [FreeMode, Navigation, Thumbs],
     };
   },
 

       findResult: {},
       selectedFiles: [],
       loading: false,
+
+      activeIndex: 0,
     };
   },
 

   },
 
   methods: {
+    handleMainSlideChange(swiper) {
+      this.activeIndex = swiper.realIndex;
+    },
+
     // 상세 조회
     async fnFindDcry() {
       try {

Add a comment

Open 0
Closed 0

List

...	...	@@ -485,7 +485,7 @@
485	485	p,
486	486	li {
487	487	font-family: "Pretendard-L";
488		-
	488	+
489	489	}
490	490
491	491	.text {
...	...	@@ -507,7 +507,7 @@
507	507	font-family: "Pretendard-B";
508	508	font-size: 25px;
509	509	margin-bottom: 20px;
510		-
	510	+
511	511	}
512	512
513	513	.address {
...	...	@@ -615,14 +615,14 @@
615	615	padding: 60px 0;
616	616	border-bottom: 1px solid #ddd;
617	617	border-top: 1px solid #ddd;
618		-
	618	+
619	619	}
620	620	.no-results p:first-of-type {
621	621	font-size: 32px;
622	622	font-family: "Pretendard-B";
623	623	margin-top: 45px;
624	624	}
625		-
	625	+
626	626	.no-results p:last-of-type {
627	627	font-size: 18px;
628	628	line-height: 30px;
...	...	@@ -949,7 +949,8 @@
949	949	background-clip: content-box, border-box;
950	950	border: 3px solid transparent;
951	951	}
952		- .swiper-slide:hover{
	952	+ .swiper-slide:hover,
	953	+ .active-thumb {
953	954	background-image: linear-gradient(#fff, #fff),
954	955	linear-gradient(-45deg, #ca3e49, #3d355d);
955	956	}
...	...	@@ -980,7 +981,7 @@
980	981	.swiper-button-next {
981	982	right: 20px;
982	983	}
983		-
	984	+
984	985
985	986	}
986	987

...	...	@@ -26,7 +26,7 @@
26	26	<div>
27	27	<div class="gallery">
28	28	<div class="main-swiper">
29		- <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
	29	+ <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2" @slideChange="handleMainSlideChange">
30	30	<swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
31	31	<img :src="item.filePath" :alt="item.fileNm" />
32	32	</swiper-slide>
...	...	@@ -34,14 +34,9 @@
34	34	</div>
35	35	<div class="thumbnail">
36	36	<swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
37		- <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
38		- <div class="thumbnail-wrapper">
39		- <div class="checkbox-container" @click.stop>
40		- <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" />
41		- <label :for="'photo_' + idx"></label>
42		- </div>
43		- <img :src="item.filePath" :alt="item.fileNm" />
44		- </div>
	37	+ <swiper-slide v-for="(item, idx) of findResult.files" :key="idx" :class="{ 'active-thumb': activeIndex === idx }">
	38	+ <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
	39	+ <img :src="item.filePath" :alt="item.fileNm" />
45	40	</swiper-slide>
46	41	</swiper>
47	42	</div>
...	...	@@ -97,15 +92,17 @@
97	92	</div>
98	93	</template>
99	94	<script>
100		-// Swiper
101	95	import { ref } from 'vue';
102		-import { Swiper, SwiperSlide } from 'swiper/vue';
103		-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
	96	+// Import Swiper Vue components
104	97	import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
	98	+import { Swiper, SwiperSlide } from 'swiper/vue';
	99	+// Import Swiper styles
105	100	import 'swiper/css';
106	101	import 'swiper/css/free-mode';
107	102	import 'swiper/css/navigation';
108	103	import 'swiper/css/thumbs';
	104	+// import required modules
	105	+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
109	106	// COMPONENT
110	107	import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
111	108	// API
...	...	@@ -114,10 +111,10 @@
114	111
115	112	export default {
116	113	components: {
117		- Swiper,
118		- SwiperSlide,
119	114	PauseOutlined,
120	115	CaretRightOutlined,
	116	+ Swiper,
	117	+ SwiperSlide,
121	118	ViewerComponent,
122	119	},
123	120
...	...	@@ -129,9 +126,9 @@
129	126	};
130	127
131	128	return {
132		- modules: [FreeMode, Navigation, Thumbs],
133	129	thumbsSwiper,
134	130	setThumbsSwiper,
	131	+ modules: [FreeMode, Navigation, Thumbs],
135	132	};
136	133	},
137	134
...	...	@@ -150,6 +147,8 @@
150	147	findResult: {},
151	148	selectedFiles: [],
152	149	loading: false,
	150	+
	151	+ activeIndex: 0,
153	152	};
154	153	},
155	154
...	...	@@ -166,6 +165,10 @@
166	165	},
167	166
168	167	methods: {
	168	+ handleMainSlideChange(swiper) {
	169	+ this.activeIndex = swiper.realIndex;
	170	+ },
	171	+
169	172	// 상세 조회
170	173	async fnFindDcry() {
171	174	try {

Delete comment