Commit @24347e87003ae7321a532f5237d4090ff2116087

최정임 03-24

250324 최정임 사진기록물 상세페이지 퍼블

@24347e87003ae7321a532f5237d4090ff2116087

4a81122

24347e8

client/resources/css/common/common.css

--- client/resources/css/common/common.css

+++ client/resources/css/common/common.css


 
 
 
-
+.w130{width: 130px;}
 .w1500{width: 1500px; margin: 0 auto;}
 .wfull{width: -webkit-fill-available;}
 

         border: 1px solid #ce3e48;
         color: #ce3e48;
     }
+    &.delete{
+        border: 1px solid #ce3e48;
+        color: #ce3e48;
+    }
     &.update{
         border: 1px solid #275cbd;
         color: #275cbd;
     }
-}
+    &.list{
+        border: 1px solid #636364;
+        background-color: #f9f9f9;
+        color: #000;
+    }
+}

4a81122

24347e8

client/resources/css/user/sub.css

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

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


 
 
 /* 사진기록물 상세페이지 */
-.gallery{
+.gallery-form{
     border: 0;
     dl{
         padding: 30px 0 0 0;

         }
     
     }
-    .main-swiper{
-        .swiper{
-            width: 100%;
-            .swiper-slide{
-                img{
-                    height: 800px;
-                    width: 100%;
-                    object-fit: contain;
+    .gallery{
+        margin-bottom: 107px;
+        position: relative;
+        .main-swiper{
+            .swiper{
+                width: 100%;
+                .swiper-slide{
+                    img{
+                        height: 800px;
+                        width: 100%;
+                        object-fit: contain;
+                        background-color: #ddd;
+                    }
                 }
-            }
-           
-        }
-    }
-    .thumbnail{
-        padding: 30px 95px;
-            background-color: #fff;
-        .swiper{
-            width: 940px;
-            height: 120px;
-            .swiper-slide img {
-                width: -webkit-fill-available;
+               
             }
         }
+        .thumbnail{
+            width: 1127px;
+            padding: 30px 0px;
+                background-color: #fff;
+                border-radius: 90px;
+                position: absolute;
+                z-index: 1;
+                left: 50%;
+            transform: translateX(-50%);
+            bottom: -10%;
+            box-shadow:1px 2px 19px 1px rgba(0, 0, 0, 0.04);
+            .swiper{
+                width:940px;
+                position: initial;
+                height: 120px;
+                margin: 0 auto;
+                .swiper-wrapper{
+                    margin: 0;
+                }
+                .swiper-slide img {
+                    width: -webkit-fill-available;
+                }
+    
+            }
+        }
+        .swiper-button-prev, .swiper-button-next{
+            box-shadow: none ;
+            margin-top: -35px;
+        }
+        .swiper-button-prev{left: 20px;}
+        .swiper-button-next{right: 20px;}
+        
     }
-    .swiper-button-prev, .swiper-button-next{
-        box-shadow: none ;
-    }
-
+    .btn-group{
+        margin-top: 24px;
+        text-align: center;
+        button{
+            width: 160px;
+            height: 46px;
+            font-family: "Pretendard-B";
+            font-size: 16px;
+            padding: 13px 21px;
+            text-align: left;
+            margin: 0 5px;
+        }
+        .select-down{
+            background-image: url(../../images/downbtn_border.png);
+        }
+        .all-down{
+            background-image: url(../../images/downbtn_bg.png);
+            color: #fff;
+        }
+    } 
+    
    
 }
 

24347e8

client/resources/images/downbtn_bg.png (Binary) (added)

+++ client/resources/images/downbtn_bg.png

Binary file is not shown

24347e8

client/resources/images/downbtn_border.png (Binary) (added)

+++ client/resources/images/downbtn_border.png

Binary file is not shown

4a81122

24347e8

client/views/pages/user/PicHistoryDetail.vue

--- client/views/pages/user/PicHistoryDetail.vue

+++ client/views/pages/user/PicHistoryDetail.vue


                 </ul>
             </div>
         </div>
-        <form action="" class="gallery">
+        <form action="" class="gallery-form mb-40">
             <dl class="mb-20">
                 <dd>
                     <p>사진 기록물 제목1

 
             </dl>
             <div>
-             <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-slide v-for="(item, index) in slides" :key="index">
-                            <img :src="item.img" :alt="item.alt" />
-                        </swiper-slide>
-                    </swiper>
-             </div>
-                <div class="thumbnail">
-                    <swiper @swiper="setThumbsSwiper" :spaceBetween="10" :slidesPerView="4" :freeMode="true"
-                        :watchSlidesProgress="true" :modules="modules" class="mySwiper" :navigation="{
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev'
-      }">
-                        <swiper-slide v-for="(item, index) in slides" :key="index" >
-                            <img :src="item.img" :alt="item.alt" />
-                        </swiper-slide>
-                    </swiper>
+                <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-slide v-for="(item, index) in slides" :key="index">
+                                <img :src="item.img" :alt="item.alt" />
+                            </swiper-slide>
+                        </swiper>
+                    </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, index) in slides" :key="index">
+                                <img :src="item.img" :alt="item.alt" />
+                            </swiper-slide>
+                        </swiper>
+                    </div>
                 </div>
-                <div class="swiper-button-next"></div>
-                <div class="swiper-button-prev"></div>
+                <div class="btn-group">
+                    <button class="select-down">선택 다운로드</button>
+                    <button class="all-down">전체 다운로드</button>
+                </div>
             </div>
         </form>
 

 
             </dl>
         </form>
-        <div class="btn-group flex-end">
-            <button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button>
-            <button class="update" type="button" @click="fnUpdateUser">수정</button>
+        <div class="btn-group flex-center">
+            <button class="delete w130" type="button" @click="fnDeleteUser">삭제</button>
+            <button class="update w130" type="button" @click="fnUpdateUser">수정</button>
+            <button class="list w130" type="button" @click="fnUpdateUser">목록</button>
         </div>
     </div>
 </template>

                 { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
                 { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                 { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                 // Add more slides as needed
             ],
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -719,7 +719,7 @@
719	719
720	720
721	721	/* 사진기록물 상세페이지 */
722		-.gallery{
	722	+.gallery-form{
723	723	border: 0;
724	724	dl{
725	725	padding: 30px 0 0 0;
...	...	@@ -745,34 +745,77 @@
745	745	}
746	746
747	747	}
748		- .main-swiper{
749		- .swiper{
750		- width: 100%;
751		- .swiper-slide{
752		- img{
753		- height: 800px;
754		- width: 100%;
755		- object-fit: contain;
	748	+ .gallery{
	749	+ margin-bottom: 107px;
	750	+ position: relative;
	751	+ .main-swiper{
	752	+ .swiper{
	753	+ width: 100%;
	754	+ .swiper-slide{
	755	+ img{
	756	+ height: 800px;
	757	+ width: 100%;
	758	+ object-fit: contain;
	759	+ background-color: #ddd;
	760	+ }
756	761	}
757		- }
758		-
759		- }
760		- }
761		- .thumbnail{
762		- padding: 30px 95px;
763		- background-color: #fff;
764		- .swiper{
765		- width: 940px;
766		- height: 120px;
767		- .swiper-slide img {
768		- width: -webkit-fill-available;
	762	+
769	763	}
770	764	}
	765	+ .thumbnail{
	766	+ width: 1127px;
	767	+ padding: 30px 0px;
	768	+ background-color: #fff;
	769	+ border-radius: 90px;
	770	+ position: absolute;
	771	+ z-index: 1;
	772	+ left: 50%;
	773	+ transform: translateX(-50%);
	774	+ bottom: -10%;
	775	+ box-shadow:1px 2px 19px 1px rgba(0, 0, 0, 0.04);
	776	+ .swiper{
	777	+ width:940px;
	778	+ position: initial;
	779	+ height: 120px;
	780	+ margin: 0 auto;
	781	+ .swiper-wrapper{
	782	+ margin: 0;
	783	+ }
	784	+ .swiper-slide img {
	785	+ width: -webkit-fill-available;
	786	+ }
	787	+
	788	+ }
	789	+ }
	790	+ .swiper-button-prev, .swiper-button-next{
	791	+ box-shadow: none ;
	792	+ margin-top: -35px;
	793	+ }
	794	+ .swiper-button-prev{left: 20px;}
	795	+ .swiper-button-next{right: 20px;}
	796	+
771	797	}
772		- .swiper-button-prev, .swiper-button-next{
773		- box-shadow: none ;
774		- }
775		-
	798	+ .btn-group{
	799	+ margin-top: 24px;
	800	+ text-align: center;
	801	+ button{
	802	+ width: 160px;
	803	+ height: 46px;
	804	+ font-family: "Pretendard-B";
	805	+ font-size: 16px;
	806	+ padding: 13px 21px;
	807	+ text-align: left;
	808	+ margin: 0 5px;
	809	+ }
	810	+ .select-down{
	811	+ background-image: url(../../images/downbtn_border.png);
	812	+ }
	813	+ .all-down{
	814	+ background-image: url(../../images/downbtn_bg.png);
	815	+ color: #fff;
	816	+ }
	817	+ }
	818	+
776	819
777	820	}
778	821

...	...	@@ -23,7 +23,7 @@
23	23
24	24
25	25
26		-
	26	+.w130{width: 130px;}
27	27	.w1500{width: 1500px; margin: 0 auto;}
28	28	.wfull{width: -webkit-fill-available;}
29	29
...	...	@@ -66,8 +66,17 @@
66	66	border: 1px solid #ce3e48;
67	67	color: #ce3e48;
68	68	}
	69	+ &.delete{
	70	+ border: 1px solid #ce3e48;
	71	+ color: #ce3e48;
	72	+ }
69	73	&.update{
70	74	border: 1px solid #275cbd;
71	75	color: #275cbd;
72	76	}
73		-} (파일 끝에 줄바꿈 문자 없음)
	77	+ &.list{
	78	+ border: 1px solid #636364;
	79	+ background-color: #f9f9f9;
	80	+ color: #000;
	81	+ }
	82	+}

...	...	@@ -12,7 +12,7 @@
12	12	</ul>
13	13	</div>
14	14	</div>
15		- <form action="" class="gallery">
	15	+ <form action="" class="gallery-form mb-40">
16	16	<dl class="mb-20">
17	17	<dd>
18	18	<p>사진 기록물 제목1
...	...	@@ -25,30 +25,31 @@
25	25
26	26	</dl>
27	27	<div>
28		- <div class="main-swiper">
29		- <swiper :style="{
30		- '--swiper-navigation-color': '#fff',
31		- '--swiper-pagination-color': '#fff',
32		- }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules"
33		- class="mySwiper2">
34		- <swiper-slide v-for="(item, index) in slides" :key="index">
35		- <img :src="item.img" :alt="item.alt" />
36		- </swiper-slide>
37		- </swiper>
38		- </div>
39		- <div class="thumbnail">
40		- <swiper @swiper="setThumbsSwiper" :spaceBetween="10" :slidesPerView="4" :freeMode="true"
41		- :watchSlidesProgress="true" :modules="modules" class="mySwiper" :navigation="{
42		- nextEl: '.swiper-button-next',
43		- prevEl: '.swiper-button-prev'
44		- }">
45		- <swiper-slide v-for="(item, index) in slides" :key="index" >
46		- <img :src="item.img" :alt="item.alt" />
47		- </swiper-slide>
48		- </swiper>
	28	+ <div class="gallery">
	29	+ <div class="main-swiper">
	30	+ <swiper :style="{
	31	+ '--swiper-navigation-color': '#fff',
	32	+ '--swiper-pagination-color': '#fff',
	33	+ }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules"
	34	+ class="mySwiper2">
	35	+ <swiper-slide v-for="(item, index) in slides" :key="index">
	36	+ <img :src="item.img" :alt="item.alt" />
	37	+ </swiper-slide>
	38	+ </swiper>
	39	+ </div>
	40	+ <div class="thumbnail">
	41	+ <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true"
	42	+ :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
	43	+ <swiper-slide v-for="(item, index) in slides" :key="index">
	44	+ <img :src="item.img" :alt="item.alt" />
	45	+ </swiper-slide>
	46	+ </swiper>
	47	+ </div>
49	48	</div>
50		- <div class="swiper-button-next"></div>
51		- <div class="swiper-button-prev"></div>
	49	+ <div class="btn-group">
	50	+ <button class="select-down">선택 다운로드</button>
	51	+ <button class="all-down">전체 다운로드</button>
	52	+ </div>
52	53	</div>
53	54	</form>
54	55
...	...	@@ -89,9 +90,10 @@
89	90
90	91	</dl>
91	92	</form>
92		- <div class="btn-group flex-end">
93		- <button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button>
94		- <button class="update" type="button" @click="fnUpdateUser">수정</button>
	93	+ <div class="btn-group flex-center">
	94	+ <button class="delete w130" type="button" @click="fnDeleteUser">삭제</button>
	95	+ <button class="update w130" type="button" @click="fnUpdateUser">수정</button>
	96	+ <button class="list w130" type="button" @click="fnUpdateUser">목록</button>
95	97	</div>
96	98	</div>
97	99	</template>
...	...	@@ -152,6 +154,8 @@
152	154	{ img: 'client/resources/images/visual.png', alt: 'Slide 2' },
153	155	{ img: 'client/resources/images/visual.png', alt: 'Slide 3' },
154	156	{ img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	157	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	158	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
155	159	// Add more slides as needed
156	160	],
157	161

Delete comment