Commit @fdf76b9bedca70b3d641ab76948df4901c767c66

류윤주 2023-11-16

231116 류윤주 홍보뉴스 커밋

@fdf76b9bedca70b3d641ab76948df4901c767c66

94de0be

fdf76b9

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


   height: 100%;
   padding: 60px;
 }
-.swiper-slide div img {
-  border: 1px solid red;
+.swiper-slide .modal-img img {
+  width: 100%;
 }
+
 .main-puzzle-container {
   margin: 0 auto;
   display: grid;

 .main-wrap-news {
   width: 100%;
   height: 100%;
-  padding: 30px;
 }
 
 .main-wrap-news-hidden {
   width: 100%;
   margin: 0 auto;
+}
+
+.main-wrap-news-hidden .swiper{
+  padding: 0 50px;
 }
 
 .main-wrap-news h3 {

   box-shadow: 2px 2px 5px #8484847c;
 }
 
-.modal-img {
-  width: 100%;
-  height: 180px;
-  margin-bottom: 30px;
-}
+
 
 .news-bos-box div h3 {
   font-size: 1.7rem;

   color: aliceblue;
 }
 
-.swiper {
+.main-benner .swiper {
   height: 260px;
-
-  /* text-align: center; */
   padding: 0px 50px 50px 50px;
 }
 

   /* box-shadow: 0px 0px 5px rgb(209, 209, 209);/ */
 }
 
-.swiper-div {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.swiper-div embed {
-  height: 230px;
-  width: 350px;
-}
 
 .swiper-div p {
   text-align: center;

 .swiper-slide {
   cursor: pointer;
 }
-.main-wrap-news-hidden .swiper-slide img {
+/* .main-wrap-news-hidden .swiper-slide img {
   width: 77%;
   padding: 1rem;
   margin-left: 4rem;
-}
+} */
 
 .swiper-notice {
   border-radius: 0.5rem;

94de0be

fdf76b9

client/views/pages/user/main/Main.vue

--- client/views/pages/user/main/Main.vue

+++ client/views/pages/user/main/Main.vue


                             <!-- 공지사항 배너 -->
                             <div class="main-notice">
                                 <h2> <i class="fa-solid fa-volume-high" style="color: #ffffff;"></i>공지사항</h2>
-                                <swiper :direction="'vertical'" :loop="true" :spaceBetween="8" :slidesPerView="1" :centeredSlides="false"
-                                    :navigation="false" :modules="modules" class="mySwiper swiper-notice" :autoplay="{
+                                <swiper :direction="'vertical'" :loop="true" :spaceBetween="8" :slidesPerView="1"
+                                    :centeredSlides="false" :navigation="false" :modules="modules"
+                                    class="mySwiper swiper-notice" :autoplay="{
                                         delay: 1000,
                                         disableOnInteraction: false,
                                     }">

 
                             <h3>홍보/뉴스</h3>
                             <div class="main-wrap-news-hidden">
-
                                 <swiper ref="mySwiper" :navigation="true" :pagination="false" :slidesPerView="3"
                                     :mousewheel="true" :initialSlide="2" :centeredSlides="false" :spaceBetween="55"
                                     :loop="true" :breakpoints="{

                                         1023: { slidesPerView: 3 }
                                     }" :modules="modules" class="mySwiper">
                                     <swiper-slide v-for="(item, idx) in postList" :key="idx">
-                                        <div class="swiper-div">
                                             <div class="modal-img" @click="openModal(item)">
                                                 <img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
                                                     alt="thumbnail" />
                                                 <p>{{ item.post_title }}</p>
                                             </div>
-                                        </div>
                                     </swiper-slide>
                                 </swiper>
-
-
                             </div>
                         </div>
-
-
                     </div>
                 </div>
 

             this.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
         },
 
-        swiperInit:function() {
-      this.$nextTick(() => {
-        if (this.swiper) {
-          this.swiper.destroy();
-        }
-        this.swiper = new Swiper('.swiper-notice', {
-          direction: 'vertical',
-          pagination: {
-            clickable: true,
-          },
-          loop: true,
-          spaceBetween: 8,
-          slidesPerView: 1,
-          centeredSlides: false,
-          navigation: false,
-          autoplay: {
-            delay: 1000,
-            disableOnInteraction: false,
-          }
-        });
-      });
-    },
+        swiperInit: function () {
+            console.log("2::::::")
+            this.$nextTick(() => {
+                if (this.swiper) {
+                    this.swiper.destroy();
+                }
+                this.swiper = new Swiper('.swiper-notice', {
+                    direction: 'vertical',
+                    pagination: {
+                        clickable: true,
+                    },
+                    loop: true,
+                    spaceBetween: 8,
+                    slidesPerView: 1,
+                    centeredSlides: false,
+                    navigation: false,
+                    autoplay: {
+                        delay: 1000,
+                        disableOnInteraction: false,
+                    }
+                });
+            });
+        },
     },
     watch: {
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -90,9 +90,10 @@
90	90	height: 100%;
91	91	padding: 60px;
92	92	}
93		-.swiper-slide div img {
94		- border: 1px solid red;
	93	+.swiper-slide .modal-img img {
	94	+ width: 100%;
95	95	}
	96	+
96	97	.main-puzzle-container {
97	98	margin: 0 auto;
98	99	display: grid;
...	...	@@ -270,12 +271,15 @@
270	271	.main-wrap-news {
271	272	width: 100%;
272	273	height: 100%;
273		- padding: 30px;
274	274	}
275	275
276	276	.main-wrap-news-hidden {
277	277	width: 100%;
278	278	margin: 0 auto;
	279	+}
	280	+
	281	+.main-wrap-news-hidden .swiper{
	282	+ padding: 0 50px;
279	283	}
280	284
281	285	.main-wrap-news h3 {
...	...	@@ -1094,11 +1098,7 @@
1094	1098	box-shadow: 2px 2px 5px #8484847c;
1095	1099	}
1096	1100
1097		-.modal-img {
1098		- width: 100%;
1099		- height: 180px;
1100		- margin-bottom: 30px;
1101		-}
	1101	+
1102	1102
1103	1103	.news-bos-box div h3 {
1104	1104	font-size: 1.7rem;
...	...	@@ -2442,10 +2442,8 @@
2442	2442	color: aliceblue;
2443	2443	}
2444	2444
2445		-.swiper {
	2445	+.main-benner .swiper {
2446	2446	height: 260px;
2447		-
2448		- /* text-align: center; */
2449	2447	padding: 0px 50px 50px 50px;
2450	2448	}
2451	2449
...	...	@@ -2456,16 +2454,6 @@
2456	2454	/* box-shadow: 0px 0px 5px rgb(209, 209, 209);/ */
2457	2455	}
2458	2456
2459		-.swiper-div {
2460		- display: flex;
2461		- align-items: center;
2462		- flex-direction: column;
2463		-}
2464		-
2465		-.swiper-div embed {
2466		- height: 230px;
2467		- width: 350px;
2468		-}
2469	2457
2470	2458	.swiper-div p {
2471	2459	text-align: center;
...	...	@@ -2476,11 +2464,11 @@
2476	2464	.swiper-slide {
2477	2465	cursor: pointer;
2478	2466	}
2479		-.main-wrap-news-hidden .swiper-slide img {
	2467	+/* .main-wrap-news-hidden .swiper-slide img {
2480	2468	width: 77%;
2481	2469	padding: 1rem;
2482	2470	margin-left: 4rem;
2483		-}
	2471	+} */
2484	2472
2485	2473	.swiper-notice {
2486	2474	border-radius: 0.5rem;

...	...	@@ -10,8 +10,9 @@
10	10	<!-- 공지사항 배너 -->
11	11	<div class="main-notice">
12	12	<h2> <i class="fa-solid fa-volume-high" style="color: #ffffff;"></i>공지사항</h2>
13		- <swiper :direction="'vertical'" :loop="true" :spaceBetween="8" :slidesPerView="1" :centeredSlides="false"
14		- :navigation="false" :modules="modules" class="mySwiper swiper-notice" :autoplay="{
	13	+ <swiper :direction="'vertical'" :loop="true" :spaceBetween="8" :slidesPerView="1"
	14	+ :centeredSlides="false" :navigation="false" :modules="modules"
	15	+ class="mySwiper swiper-notice" :autoplay="{
15	16	delay: 1000,
16	17	disableOnInteraction: false,
17	18	}">
...	...	@@ -138,7 +139,6 @@
138	139
139	140	<h3>홍보/뉴스</h3>
140	141	<div class="main-wrap-news-hidden">
141		-
142	142	<swiper ref="mySwiper" :navigation="true" :pagination="false" :slidesPerView="3"
143	143	:mousewheel="true" :initialSlide="2" :centeredSlides="false" :spaceBetween="55"
144	144	:loop="true" :breakpoints="{
...	...	@@ -149,21 +149,15 @@
149	149	1023: { slidesPerView: 3 }
150	150	}" :modules="modules" class="mySwiper">
151	151	<swiper-slide v-for="(item, idx) in postList" :key="idx">
152		- <div class="swiper-div">
153	152	<div class="modal-img" @click="openModal(item)">
154	153	<img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
155	154	alt="thumbnail" />
156	155	<p>{{ item.post_title }}</p>
157	156	</div>
158		- </div>
159	157	</swiper-slide>
160	158	</swiper>
161		-
162		-
163	159	</div>
164	160	</div>
165		-
166		-
167	161	</div>
168	162	</div>
169	163
...	...	@@ -462,28 +456,29 @@
462	456	this.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
463	457	},
464	458
465		- swiperInit:function() {
466		- this.$nextTick(() => {
467		- if (this.swiper) {
468		- this.swiper.destroy();
469		- }
470		- this.swiper = new Swiper('.swiper-notice', {
471		- direction: 'vertical',
472		- pagination: {
473		- clickable: true,
474		- },
475		- loop: true,
476		- spaceBetween: 8,
477		- slidesPerView: 1,
478		- centeredSlides: false,
479		- navigation: false,
480		- autoplay: {
481		- delay: 1000,
482		- disableOnInteraction: false,
483		- }
484		- });
485		- });
486		- },
	459	+ swiperInit: function () {
	460	+ console.log("2::::::")
	461	+ this.$nextTick(() => {
	462	+ if (this.swiper) {
	463	+ this.swiper.destroy();
	464	+ }
	465	+ this.swiper = new Swiper('.swiper-notice', {
	466	+ direction: 'vertical',
	467	+ pagination: {
	468	+ clickable: true,
	469	+ },
	470	+ loop: true,
	471	+ spaceBetween: 8,
	472	+ slidesPerView: 1,
	473	+ centeredSlides: false,
	474	+ navigation: false,
	475	+ autoplay: {
	476	+ delay: 1000,
	477	+ disableOnInteraction: false,
	478	+ }
	479	+ });
	480	+ });
	481	+ },
487	482	},
488	483	watch: {
489	484

Delete comment