Commit @7596fbda9f67bd40e3e382e62a613d1e26faa105

최정임 03-19

250319 최정임 퍼블리싱

@7596fbda9f67bd40e3e382e62a613d1e26faa105

cdaa6b6

7596fbd

client/resources/css/common/common.css

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

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


 *{
-    padding: 0; margin: 0;  color: #333;
+    padding: 0; margin: 0;  color: #000;
     font-family: "Pretendard-R";
 }
 

     width: 15px;
     height: 15px;
 }
+
+
 input[readonly] {
     background-color: #f6f6f6 !important; 
     color: #999;

 .w1500{width: 1500px; margin: 0 auto;}
 .wfull{width: -webkit-fill-available;}
 
+.flex{display: flex;}
 .flex-end{
     display: flex;
     justify-content: end;
+}
+.flex-sp-bw{
+    display: flex;
+    justify-content: space-between;
 }
 
 .mt-5{margin-top: 5px;}
 
 .mb-10{margin-bottom: 10px;}
 .mb-25{margin-bottom: 25px;}
+.mb-30{margin-bottom: 30px;}
 .mb-50{margin-bottom: 50px;}
 .mb-60{margin-bottom: 60px;}
 .mb-110{margin-bottom: 110px;}

cdaa6b6

7596fbd

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


     color: #fff;
     font-size: 20px;
     position: absolute;
-
+    bottom: 10.5rem;
+    right: 58rem;
+    z-index: 50;
+    display: flex;
+    .page-count{color: #fff;}
+    button .anticon {
+        font-size: 20px;  color: #fff;
+    }
 }
 .search-wrap{
     position: absolute;

     }
     input{font-size: 20px; font-family: "Pretendard-L";}
     input::placeholder{color: #555;}
-    .total-btn{
-        font-family: "Pretendard-B";
-        color: #fff;
-        font-size: 20px;
+    .total-btn{        
         border-radius: 37.5px;
         width: 150px;
         height: 75px;
-        background: linear-gradient(-45deg,#1865c8, #4037aa )
+        background: linear-gradient(-45deg,#1865c8, #4037aa );
+        a{
+        font-family: "Pretendard-B";
+        color: #fff;
+        font-size: 20px;
+        }
     }
 
 }

             
     }
 }
+.new-update{
+    .title{
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        h4{font-family: "HAPPINESS-SANS-title";; font-size: 26px;}
+    }
 
+    .info{
+        padding: 24px;
+        display: flex;
+        justify-content: space-between;
+        p{
+            width: 250px;
+            font-family: "Pretendard-M";
+            font-size: 20px;
+            white-space: nowrap;      
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+        }
+        span{
+            width: 89px;
+            font-family: "Pretendard-L";
+            font-size: 16px;
+            color: #666666;
+            padding-left: 25px;
+            position: relative;
+        }
+        span::before{
+            content: '';
+            background-image: url(../../images/icon/date.png);
+            display: block;
+            width: 19px;
+            height: 19px;
+            position: absolute;
+            left: 0;
+        }
+    }
+    .gopage{
+        font-family: "Pretendard-M";
+        font-size: 18px;
+        text-align: right;
+        
+    }
+    .gopage::after{
+        content: '\002B';
+        font-size: 18px;
+    }
+   .new-pic, .new-video{
+    display: flex; justify-content: space-between;
+    margin-top: 50px;
+    
+   }
+   .media-wrap{
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+   }
+   .media-box{
+    width: 420px;
+    border: 1px solid #eeeeee;
+    border-radius: 22px;
+    .media-image{
+        width: 100%;
+        height: 231px;
+        border-radius: 22px;
+    }
+   }
+   .new-bodo{
+    width: 560px;
+    margin-left: 70px;
+    .info{
+        padding: 18px 7px;
+        border-top: 1px solid #eeeeee;
+        align-items: center;
+        &:last-child{ border-bottom: 1px solid #eeeeee;}
+        p{width: 412px;}
+        span::before{
+            background-image:none;
+        }
+    }
+   }
+}
 .tabs{
     ul{display: flex;
         justify-content: center;

        
     }
     .tab-title.active p{
-        color: #000;
         b{
             color: #ff4141;
         }
+        
+    }
+    .tab-content{
+        .content-wrap{
+            margin-top: -23px;
+        }
+        .box-wrap{
+            width: 454px;
+            height: 370px;
+            .box { 
+                background-image: linear-gradient(#fff, #fff), 
+                linear-gradient(-45deg, #fff, #fff);
+                background-origin: border-box;
+                background-clip: content-box, border-box;
+                border: 3px solid transparent;
+                border-radius: 32px;
+            }
+        
+            .box:hover {
+                background-image: linear-gradient(#fff, #fff), 
+                linear-gradient(-45deg, #ca3e49, #3d355d);
+            }
+            .tab-image{
+                width: 100%;
+                height: 297px;
+                object-fit: cover;
+                border-radius: 30px;
+            }
+           
+        }
+        
     }
 
 }
 
 
+
+
 /* swiper */
 
 .swiper {

cdaa6b6

7596fbd

client/resources/css/user/sub.css

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

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


-.content{    
+.content {
     width: 1500px;
     margin: 0 auto;
     padding-top: 56px;
-    h2{ font-family: "HAPPINESSSANSVF"; font-size: 40px;}
-    h3{ font-family: "Pretendard-B"; font-size: 25px;
+
+    h2 {
+        font-family: "HAPPINESSSANSVF";
+        font-size: 40px;
+    }
+
+    h3 {
+        font-family: "Pretendard-B";
+        font-size: 25px;
         position: relative;
         padding-left: 20px;
         margin-bottom: 20px;
-        &::before{
+
+        &::before {
             content: '';
             background: url(../../images/icon/subtitle.png);
             width: 7px;

     }
 }
 
-.sub-title-area{display: flex; justify-content: space-between; align-items: flex-end;}
-.breadcrumb-list{
-    ul{display: flex; align-items: center; gap: 15px;}
-    li{font-size: 16px; font-family: "Pretendard-SB"; color: #000;}
+.sub-title-area {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
 }
-form{
+
+.breadcrumb-list {
+    ul {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    li {
+        font-size: 16px;
+        font-family: "Pretendard-SB";
+        color: #000;
+    }
+}
+
+form {
     margin: 0 auto;
     border: 1px solid #dddddd;
     border-radius: 20px;
-    input{padding: 15px; border: 1px solid #dddddd; border-radius: 5px; 
-        font-size: 16px; 
+
+    input {
+        padding: 15px;
+        border: 1px solid #dddddd;
+        border-radius: 5px;
+        font-size: 16px;
     }
 }
-.login-form{
-    width: 600px;    
+
+/* 로그인 */
+.login-form {
+    width: 600px;
     padding: 50px 60px;
-    label{
+
+    label {
         color: #666;
         font-size: 16px;
         display: block;
         margin-bottom: 6px;
     }
-   
-    button{font-size: 22px; font-family: "Pretendard-B"; background: linear-gradient(132deg,#3e355c, #763954 );
-        width: 100%; padding: 19px 0; border-radius: 15px; margin-top: 10px;
-        img{margin: 0 12px 0 0;}
-        span{color: #fff;}
+
+    button {
+        font-size: 22px;
+        font-family: "Pretendard-B";
+        background: linear-gradient(132deg, #3e355c, #763954);
+        width: 100%;
+        padding: 19px 0;
+        border-radius: 15px;
+        margin-top: 10px;
+
+        img {
+            margin: 0 12px 0 0;
+        }
+
+        span {
+            color: #fff;
+        }
     }
-    .check-area{
-        input{margin-right: 5px;}
+
+    .check-area {
+        input {
+            margin-right: 5px;
+        }
     }
 }
 
-.info-form, .pwchange-form{
-    dd{display: flex; align-items: center;}
+/* 내정보 */
+.info-form,
+.pwchange-form {
+    dd {
+        display: flex;
+        align-items: center;
+    }
+
     padding: 30px 50px;
-    label{
+
+    label {
         position: relative;
         width: 200px;
         display: block;
-        color: #000;
         font-size: 18px;
+
         &.require::after {
             position: absolute;
             top: 5px;
             padding-left: 3px;
             content: "*";
             color: #df2d2d;
-          }
+        }
     }
-    .hr{background-color: #eeeeee; margin: 10px 0;
+
+    .hr {
+        background-color: #eeeeee;
+        margin: 10px 0;
         width: 100%;
         height: 1px;
     }
-   
+
 }
-.pwchange-form{
-    input{
-        width:40%;
-     }
+
+.pwchange-form {
+    input {
+        width: 40%;
+    }
 }
+
 .invalid-feedback {
-    display: flex; align-items: center; gap: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
     background-color: #fbf1f2;
     border: 1px solid #ce3e48;
     border-radius: 20px;
     padding: 8px 24px;
     margin-left: 20px;
-    span{font-size: 14px; color: #e22d2d; font-family: "Pretendard-EL"; }
+
+    span {
+        font-size: 14px;
+        color: #e22d2d;
+        font-family: "Pretendard-EL";
+    }
 }
 
-.btn-group{
+.btn-group {
     gap: 10px;
-}
+}
+
+/* 통합검색 */
+.search-form {
+    background-image: linear-gradient(#fff, #fff),
+        linear-gradient(-45deg, #ca3e49, #3f355c);
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    border: 3px solid transparent;
+    border-radius: 32px;
+
+    label {
+        font-size: 18px;
+        font-family: "Pretendard-SB";
+    }
+
+    input[type="checkbox"] {
+        position: relative;
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        accent-color: #544483;
+        /* This will change the checkbox color when checked */
+        border: 1px solid #cccccc;
+        /* This controls the border color */
+        border-radius: 4px;
+        /* Optional: rounded corners */
+        background-color: #fff;
+        /* Default background */
+        appearance: none;
+        /* Remove the default checkbox appearance */
+        cursor: pointer;
+        /* Optional: cursor pointer to indicate it is clickable */
+    }
+
+    /* Checked state of the checkbox */
+    input[type="checkbox"]:checked {
+        background-color: #544483;
+        /* Custom background when checked */
+        border-color: #544483;
+        /* Custom border color when checked */
+    }
+    input[type="checkbox"]:checked::before {
+        content: '';
+        background-image: url(../../images/check.png);
+        background-repeat: no-repeat;
+        position: absolute;
+        left: 2px;
+        top: 5px;
+        width: 15px;
+        height: 11px;
+    }
+}
+

cdaa6b6

7596fbd

client/resources/images/check.png (Binary) (Renamed from client/resources/images/video-btn.png (Binary))

--- client/resources/images/video-btn.png

+++ client/resources/images/check.png

Binary file is not shown

cdaa6b6

7596fbd

client/resources/images/icon/date.png (Binary) (copied from client/resources/images/video-btn.png (Binary))

--- client/resources/images/video-btn.png

+++ client/resources/images/icon/date.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/img1.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/img2.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/img3.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/img4.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/img5.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/mCont_ico1_off.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/mCont_ico1_on.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/mCont_ico2_off.png

Binary file is not shown

7596fbd

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

+++ client/resources/images/mCont_ico2_on.png

Binary file is not shown

cdaa6b6

client/resources/images/pic-btn-click.png (Binary) (deleted)

--- client/resources/images/pic-btn-click.png

Binary file is not shown

cdaa6b6

7596fbd

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Main from "./main/Main.vue";
 import NotFound from "./etc/NotFound.vue";
 
+import TotalSearch from "./user/TotalSearch.vue";
+
 const routes = [
   { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
   { path: "/Login.page", name: "Login", component: Login },
   { path: "/MyInfo.page", name: "MyInfo", component: MyInfo, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
   { path: "/notFound.page", name: "NotFoundPage", component: NotFound },
+
+  { path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
+
+
 ];
 
 const AppRouter = createRouter({

cdaa6b6

7596fbd

client/views/pages/main/Main.vue

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

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


 <template>
   <div class="visual mb-50">
-    <swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
+    
+    <swiper 
+    ref="swiper"
+    :loop="true" 
+    :spaceBetween="30" 
+    :centeredSlides="true" 
+    :autoplay="{
+      delay: 2500,
+      disableOnInteraction: false,
+    }"
+    :pagination="{
       type: 'progressbar',
-    }" :navigation="true" :modules="modules" class="mySwiper ">
-      <swiper-slide v-for="(item, index) in slides" :key="index" >
+    }" :navigation="true" :modules="modules"  @slideChange="onSlideChange" class="mySwiper ">
+      <swiper-slide v-for="(item, index) in slides" :key="index">
         <img :src="item.img" :alt="item.alt" />
       </swiper-slide>
       <div class="pagination">
-        <div class="page-count">1/3</div>
-
+      <div class="page-count">{{ currentSlide }} / {{ totalSlides }}</div>
+      <div class="btn-control">
+        <button @click="play"><CaretRightOutlined /></button>
+        <button @click="stop"><PauseOutlined /></button>
       </div>
+    </div>
     </swiper>
     <div class="search-wrap">
 
       <div class="search-area">
         <select name="" id="">
-          <option value="" selected>전체</option>
-          <option value="">사진</option>
-          <option value="">영상</option>
-          <option value="">미디어 영상</option>
-          <option value="">보도자료</option>
+          <option value="all" selected>전체</option>
+          <option value="pic">사진</option>
+          <option value="video">영상</option>
+          <option value="media">미디어 영상</option>
+          <option value="bodo">보도자료</option>
         </select>
         <div class="line"></div>
         <input type="text" placeholder="검색어를 입력하세요">
         <button class="search-btn"><img :src="search" alt=""></button>
       </div>
       <div class="total-search">
-        <button class="total-btn">상세검색</button>
+        <button class="total-btn"><router-link :to="{path : '/TotalSearch.page'}" >상세검색</router-link></button>
       </div>
     </div>
   </div>

       <div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
     </div>
   </div>
-  <div class="new-update w1500">
+  <div class="new-update w1500 mb-50">
     <div class="tabs">
-        <ul>
-          <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
-            @click="selectTab(index)">
-            <img
-            :src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
-            :alt="tab.title"
-            class="tab-icon"
-          />
-            <p><b>{{ tab.title }}</b>&nbsp;기록물</p>
-          </li>
-        </ul>
+      <ul class="">
+        <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
+          @click="selectTab(index)">
+          <img :src="selectedTab === index ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
+          <p><b>{{ tab.title }}</b>&nbsp;기록물</p>
+        </li>
+      </ul>
+
       <div class="tab-content">
-        <div v-if="selectedTab === 0" class="new-pic">
-          <p>{{ tabs[0].content }}</p>
+        <div v-if="selectedTab === 0" class="content-wrap">
+          <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+          <div class="new-pic">
+            <div v-for="(contentItem, index) in tabs[0].contentArray" :key="index" class="box-wrap">
+              <div class="box">
+                <img :src="contentItem.image" :alt="tabs[0].title" class="tab-image" />
+                <div class="info">
+                  <p>{{ contentItem.content }}</p>
+                  <span>{{ contentItem.date }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div v-if="selectedTab === 1" class="new-video">
-          <p>{{ tabs[1].content }}</p>
+        <div v-if="selectedTab === 1" class="content-wrap">
+          <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+          <div class="new-video">
+            <div v-for="(contentItem, index) in tabs[1].contentArray" :key="index" class="box-wrap">
+              <div class="box">
+                <img :src="contentItem.image" :alt="tabs[1].title" class="tab-image" />
+                <div class="info">
+                  <p>{{ contentItem.content }}</p>
+                  <span>{{ contentItem.date }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+
+
+    </div>
+  </div>
+  <div class="new-update w1500 mb-50 flex-sp-bw">
+    <div class="new-media">
+      <div class="title mb-30">
+        <h4>신규 미디어 영상</h4>
+        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+      </div>
+      <div class="media-wrap">
+        <div v-for="(mediacontent, index) in mediacontent" :key="index" class="media-box">
+          <img :src="mediacontent.image" :alt="mediacontent.title" class="media-image" />
+          <div class="info">
+            <p>{{ mediacontent.content }}</p>
+            <span>{{ mediacontent.date }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="new-bodo">
+      <div class="title mb-30">
+        <h4>신규 미디어 영상</h4>
+        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
+      </div>
+      <ul>
+        <li v-for="(bodocontent, index) in bodocontent" :key="index" class="info">
+            <p>{{ bodocontent.content }}</p>
+            <span>{{ bodocontent.date }}</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>

 
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
 
 
 // import required modules

   components: {
     Swiper,
     SwiperSlide,
+    PauseOutlined,
+    CaretRightOutlined,
   },
   setup() {
     return {

     return {
       selectedTab: 0, // Set initial tab index to 0 (first tab)
       tabs: [
-        { title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
-        inactiveImage: "client/resources/images/pic-btn-click.png"},
-        { title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
-        inactiveImage: "client/resources/images/video-btn.png"},
+        {
+          title: "신규 사진", activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
+          inactiveImage: "client/resources/images/mCont_ico1_off.png",
+          contentArray: [
+            { content: '문수사', date: '2025-03-18', image: 'client/resources/images/img1.png' },
+            { content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img2.png' },
+            { content: '박정희대통령역사자료관', date: '2025-03-20', image: 'client/resources/images/img3.png' }
+          ],
+        },
+        {
+          title: "신규 영상", activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
+          inactiveImage: "client/resources/images/mCont_ico2_off.png",
+          contentArray: [
+            { content: '제목1', date: '2025-03-18', image: 'client/resources/images/img1.png' },
+            { content: '제목2', date: '2025-03-19', image: 'client/resources/images/img2.png' },
+            { content: '제목3', date: '2025-03-20', image: 'client/resources/images/img3.png' }
+          ],
+        },
+      ],
+      mediacontent: [
+        { content: '문수사', date: '2025-03-18', image: 'client/resources/images/img4.png' },
+        { content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img5.png' },
+      ],
+      bodocontent: [
+        { content: '구미시장 우리동네 온(溫)데이', date: '2025-03-18',  },
+        { content: "구미 청년 창업, 지난해 성과 '쏠쏠'…올해도 새 도전자", date: '2025-03-19', },
+        { content: "구미시여성단체협의회 신경은 회장 부부, 1,000만 원", date: '2025-03-19', },
+        { content: "초보 기술 공무원도 전문가로! 구미시, 실무 역량 향상", date: '2025-03-19', },
+        { content: "구미시, 청렴도 1등급 목표…반부패·청렴 시책 강화", date: '2025-03-19', },
       ],
       direct: 'client/resources/images/direct-btn.png',
       search: 'client/resources/images/icon/search.png',

         { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
         // Add more slides as needed
       ],
-      autoplay: {
-        delay: 2500, // Delay in milliseconds
-        disableOnInteraction: false, // Autoplay won't stop when interacting
-      },
-      pagination: {
-        clickable: true, // Allow clicking pagination
-      },
+      currentSlide: 1,   // To track the current slide
+      totalSlides: 3,
+      
       navigation: true, // Enable navigation buttons (prev/next)
     };
+  },
+  mounted() {
+    // Store the swiper instance when it's ready
+    this.totalSlides = this.slides.length;
   },
   methods: {
     selectTab(index) {
       this.selectedTab = index; // Update the selected tab index
     },
+    play() {
+      const swiper = this.$refs.swiper.swiper;
+      if (swiper && swiper.autoplay) {
+        swiper.autoplay.start(); // Start autoplay
+      } else {
+        console.warn('Swiper instance or autoplay is not available');
+      }
+    },
+    // Method to stop autoplay
+    stop() {
+      const swiper = this.$refs.swiper.swiper;
+      if (swiper && swiper.autoplay) {
+        swiper.autoplay.stop();  // Stop autoplay
+      } else {
+        console.warn('Swiper instance or autoplay is not available');
+      }
+    },
+    // Method to update the current slide and total slides
+    onSlideChange() {
+      const swiper = this.$refs.swiper.swiper;
+      if (swiper) {
+        this.currentSlide = swiper.realIndex + 1; // Get current slide (1-based index)
+      }
+    },
   },
 };
 </script>

cdaa6b6

7596fbd

client/views/pages/user/TotalSearch.vue

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

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


                 </ul>
             </div>
       </div>
-        <form action="login" class="login-form">
+        <form action="search" class="search-form">
             <dl>
                 <dd class="mb-25">
-                    <label for="id">아이디</label>
-                    <input type="text" id="id" class="wfull" placeholder="아이디를 입력하세요.">
+                    
+                    <input type="checkbox" id="check_button" name="">
+                    <label for="check_button">선택1</label>
+
                 </dd>
                 
-                <dd class="mb-10">
-                    <label for="pw">비밀번호</label>
-                    <input type="text" id="pw" class="wfull" placeholder="비밀번호를 입력하세요.">
-                </dd>
-                <dd class="check-area flex-end mb-25">
-                    <input type="checkbox" class="margin-top">
-                    <label for="save">아이디 저장</label>
-                </dd>
+              
             </dl>
             <!-- Bind the image source dynamically for loginicon -->
             <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>

cdaa6b6

7596fbd

package.json

--- package.json

+++ package.json

...	...	@@ -1,5 +1,7 @@
1	1	{
2	2	"dependencies": {
	3	+ "@ant-design/icons": "^5.6.1",
	4	+ "@ant-design/icons-vue": "^7.0.1",
3	5	"@babel/cli": "^7.22.10",
4	6	"@babel/core": "^7.22.10",
5	7	"axios": "^1.6.8",

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,5 +1,5 @@
1	1	*{
2		- padding: 0; margin: 0; color: #333;
	2	+ padding: 0; margin: 0; color: #000;
3	3	font-family: "Pretendard-R";
4	4	}
5	5
...	...	@@ -14,6 +14,8 @@
14	14	width: 15px;
15	15	height: 15px;
16	16	}
	17	+
	18	+
17	19	input[readonly] {
18	20	background-color: #f6f6f6 !important;
19	21	color: #999;
...	...	@@ -37,15 +39,21 @@
37	39	.w1500{width: 1500px; margin: 0 auto;}
38	40	.wfull{width: -webkit-fill-available;}
39	41
	42	+.flex{display: flex;}
40	43	.flex-end{
41	44	display: flex;
42	45	justify-content: end;
	46	+}
	47	+.flex-sp-bw{
	48	+ display: flex;
	49	+ justify-content: space-between;
43	50	}
44	51
45	52	.mt-5{margin-top: 5px;}
46	53
47	54	.mb-10{margin-bottom: 10px;}
48	55	.mb-25{margin-bottom: 25px;}
	56	+.mb-30{margin-bottom: 30px;}
49	57	.mb-50{margin-bottom: 50px;}
50	58	.mb-60{margin-bottom: 60px;}
51	59	.mb-110{margin-bottom: 110px;}

...	...	@@ -3,7 +3,14 @@
3	3	color: #fff;
4	4	font-size: 20px;
5	5	position: absolute;
6		-
	6	+ bottom: 10.5rem;
	7	+ right: 58rem;
	8	+ z-index: 50;
	9	+ display: flex;
	10	+ .page-count{color: #fff;}
	11	+ button .anticon {
	12	+ font-size: 20px; color: #fff;
	13	+ }
7	14	}
8	15	.search-wrap{
9	16	position: absolute;
...	...	@@ -36,14 +43,16 @@
36	43	}
37	44	input{font-size: 20px; font-family: "Pretendard-L";}
38	45	input::placeholder{color: #555;}
39		- .total-btn{
40		- font-family: "Pretendard-B";
41		- color: #fff;
42		- font-size: 20px;
	46	+ .total-btn{
43	47	border-radius: 37.5px;
44	48	width: 150px;
45	49	height: 75px;
46		- background: linear-gradient(-45deg,#1865c8, #4037aa )
	50	+ background: linear-gradient(-45deg,#1865c8, #4037aa );
	51	+ a{
	52	+ font-family: "Pretendard-B";
	53	+ color: #fff;
	54	+ font-size: 20px;
	55	+ }
47	56	}
48	57
49	58	}
...	...	@@ -109,7 +118,89 @@
109	118
110	119	}
111	120	}
	121	+.new-update{
	122	+ .title{
	123	+ display: flex;
	124	+ align-items: flex-end;
	125	+ justify-content: space-between;
	126	+ h4{font-family: "HAPPINESS-SANS-title";; font-size: 26px;}
	127	+ }
112	128
	129	+ .info{
	130	+ padding: 24px;
	131	+ display: flex;
	132	+ justify-content: space-between;
	133	+ p{
	134	+ width: 250px;
	135	+ font-family: "Pretendard-M";
	136	+ font-size: 20px;
	137	+ white-space: nowrap;
	138	+ overflow: hidden;
	139	+ text-overflow: ellipsis;
	140	+ }
	141	+ span{
	142	+ width: 89px;
	143	+ font-family: "Pretendard-L";
	144	+ font-size: 16px;
	145	+ color: #666666;
	146	+ padding-left: 25px;
	147	+ position: relative;
	148	+ }
	149	+ span::before{
	150	+ content: '';
	151	+ background-image: url(../../images/icon/date.png);
	152	+ display: block;
	153	+ width: 19px;
	154	+ height: 19px;
	155	+ position: absolute;
	156	+ left: 0;
	157	+ }
	158	+ }
	159	+ .gopage{
	160	+ font-family: "Pretendard-M";
	161	+ font-size: 18px;
	162	+ text-align: right;
	163	+
	164	+ }
	165	+ .gopage::after{
	166	+ content: '\002B';
	167	+ font-size: 18px;
	168	+ }
	169	+ .new-pic, .new-video{
	170	+ display: flex; justify-content: space-between;
	171	+ margin-top: 50px;
	172	+
	173	+ }
	174	+ .media-wrap{
	175	+ display: flex;
	176	+ justify-content: space-between;
	177	+ gap: 30px;
	178	+ }
	179	+ .media-box{
	180	+ width: 420px;
	181	+ border: 1px solid #eeeeee;
	182	+ border-radius: 22px;
	183	+ .media-image{
	184	+ width: 100%;
	185	+ height: 231px;
	186	+ border-radius: 22px;
	187	+ }
	188	+ }
	189	+ .new-bodo{
	190	+ width: 560px;
	191	+ margin-left: 70px;
	192	+ .info{
	193	+ padding: 18px 7px;
	194	+ border-top: 1px solid #eeeeee;
	195	+ align-items: center;
	196	+ &:last-child{ border-bottom: 1px solid #eeeeee;}
	197	+ p{width: 412px;}
	198	+ span::before{
	199	+ background-image:none;
	200	+ }
	201	+ }
	202	+ }
	203	+}
113	204	.tabs{
114	205	ul{display: flex;
115	206	justify-content: center;
...	...	@@ -135,15 +226,47 @@
135	226
136	227	}
137	228	.tab-title.active p{
138		- color: #000;
139	229	b{
140	230	color: #ff4141;
141	231	}
	232	+
	233	+ }
	234	+ .tab-content{
	235	+ .content-wrap{
	236	+ margin-top: -23px;
	237	+ }
	238	+ .box-wrap{
	239	+ width: 454px;
	240	+ height: 370px;
	241	+ .box {
	242	+ background-image: linear-gradient(#fff, #fff),
	243	+ linear-gradient(-45deg, #fff, #fff);
	244	+ background-origin: border-box;
	245	+ background-clip: content-box, border-box;
	246	+ border: 3px solid transparent;
	247	+ border-radius: 32px;
	248	+ }
	249	+
	250	+ .box:hover {
	251	+ background-image: linear-gradient(#fff, #fff),
	252	+ linear-gradient(-45deg, #ca3e49, #3d355d);
	253	+ }
	254	+ .tab-image{
	255	+ width: 100%;
	256	+ height: 297px;
	257	+ object-fit: cover;
	258	+ border-radius: 30px;
	259	+ }
	260	+
	261	+ }
	262	+
142	263	}
143	264
144	265	}
145	266
146	267
	268	+
	269	+
147	270	/* swiper */
148	271
149	272	.swiper {

...	...	@@ -1,13 +1,21 @@
1		-.content{
	1	+.content {
2	2	width: 1500px;
3	3	margin: 0 auto;
4	4	padding-top: 56px;
5		- h2{ font-family: "HAPPINESSSANSVF"; font-size: 40px;}
6		- h3{ font-family: "Pretendard-B"; font-size: 25px;
	5	+
	6	+ h2 {
	7	+ font-family: "HAPPINESSSANSVF";
	8	+ font-size: 40px;
	9	+ }
	10	+
	11	+ h3 {
	12	+ font-family: "Pretendard-B";
	13	+ font-size: 25px;
7	14	position: relative;
8	15	padding-left: 20px;
9	16	margin-bottom: 20px;
10		- &::before{
	17	+
	18	+ &::before {
11	19	content: '';
12	20	background: url(../../images/icon/subtitle.png);
13	21	width: 7px;
...	...	@@ -20,77 +28,186 @@
20	28	}
21	29	}
22	30
23		-.sub-title-area{display: flex; justify-content: space-between; align-items: flex-end;}
24		-.breadcrumb-list{
25		- ul{display: flex; align-items: center; gap: 15px;}
26		- li{font-size: 16px; font-family: "Pretendard-SB"; color: #000;}
	31	+.sub-title-area {
	32	+ display: flex;
	33	+ justify-content: space-between;
	34	+ align-items: flex-end;
27	35	}
28		-form{
	36	+
	37	+.breadcrumb-list {
	38	+ ul {
	39	+ display: flex;
	40	+ align-items: center;
	41	+ gap: 15px;
	42	+ }
	43	+
	44	+ li {
	45	+ font-size: 16px;
	46	+ font-family: "Pretendard-SB";
	47	+ color: #000;
	48	+ }
	49	+}
	50	+
	51	+form {
29	52	margin: 0 auto;
30	53	border: 1px solid #dddddd;
31	54	border-radius: 20px;
32		- input{padding: 15px; border: 1px solid #dddddd; border-radius: 5px;
33		- font-size: 16px;
	55	+
	56	+ input {
	57	+ padding: 15px;
	58	+ border: 1px solid #dddddd;
	59	+ border-radius: 5px;
	60	+ font-size: 16px;
34	61	}
35	62	}
36		-.login-form{
37		- width: 600px;
	63	+
	64	+/* 로그인 */
	65	+.login-form {
	66	+ width: 600px;
38	67	padding: 50px 60px;
39		- label{
	68	+
	69	+ label {
40	70	color: #666;
41	71	font-size: 16px;
42	72	display: block;
43	73	margin-bottom: 6px;
44	74	}
45		-
46		- button{font-size: 22px; font-family: "Pretendard-B"; background: linear-gradient(132deg,#3e355c, #763954 );
47		- width: 100%; padding: 19px 0; border-radius: 15px; margin-top: 10px;
48		- img{margin: 0 12px 0 0;}
49		- span{color: #fff;}
	75	+
	76	+ button {
	77	+ font-size: 22px;
	78	+ font-family: "Pretendard-B";
	79	+ background: linear-gradient(132deg, #3e355c, #763954);
	80	+ width: 100%;
	81	+ padding: 19px 0;
	82	+ border-radius: 15px;
	83	+ margin-top: 10px;
	84	+
	85	+ img {
	86	+ margin: 0 12px 0 0;
	87	+ }
	88	+
	89	+ span {
	90	+ color: #fff;
	91	+ }
50	92	}
51		- .check-area{
52		- input{margin-right: 5px;}
	93	+
	94	+ .check-area {
	95	+ input {
	96	+ margin-right: 5px;
	97	+ }
53	98	}
54	99	}
55	100
56		-.info-form, .pwchange-form{
57		- dd{display: flex; align-items: center;}
	101	+/* 내정보 */
	102	+.info-form,
	103	+.pwchange-form {
	104	+ dd {
	105	+ display: flex;
	106	+ align-items: center;
	107	+ }
	108	+
58	109	padding: 30px 50px;
59		- label{
	110	+
	111	+ label {
60	112	position: relative;
61	113	width: 200px;
62	114	display: block;
63		- color: #000;
64	115	font-size: 18px;
	116	+
65	117	&.require::after {
66	118	position: absolute;
67	119	top: 5px;
68	120	padding-left: 3px;
69	121	content: "*";
70	122	color: #df2d2d;
71		- }
	123	+ }
72	124	}
73		- .hr{background-color: #eeeeee; margin: 10px 0;
	125	+
	126	+ .hr {
	127	+ background-color: #eeeeee;
	128	+ margin: 10px 0;
74	129	width: 100%;
75	130	height: 1px;
76	131	}
77		-
	132	+
78	133	}
79		-.pwchange-form{
80		- input{
81		- width:40%;
82		- }
	134	+
	135	+.pwchange-form {
	136	+ input {
	137	+ width: 40%;
	138	+ }
83	139	}
	140	+
84	141	.invalid-feedback {
85		- display: flex; align-items: center; gap: 4px;
	142	+ display: flex;
	143	+ align-items: center;
	144	+ gap: 4px;
86	145	background-color: #fbf1f2;
87	146	border: 1px solid #ce3e48;
88	147	border-radius: 20px;
89	148	padding: 8px 24px;
90	149	margin-left: 20px;
91		- span{font-size: 14px; color: #e22d2d; font-family: "Pretendard-EL"; }
	150	+
	151	+ span {
	152	+ font-size: 14px;
	153	+ color: #e22d2d;
	154	+ font-family: "Pretendard-EL";
	155	+ }
92	156	}
93	157
94		-.btn-group{
	158	+.btn-group {
95	159	gap: 10px;
96		-} (파일 끝에 줄바꿈 문자 없음)
	160	+}
	161	+
	162	+/* 통합검색 */
	163	+.search-form {
	164	+ background-image: linear-gradient(#fff, #fff),
	165	+ linear-gradient(-45deg, #ca3e49, #3f355c);
	166	+ background-origin: border-box;
	167	+ background-clip: content-box, border-box;
	168	+ border: 3px solid transparent;
	169	+ border-radius: 32px;
	170	+
	171	+ label {
	172	+ font-size: 18px;
	173	+ font-family: "Pretendard-SB";
	174	+ }
	175	+
	176	+ input[type="checkbox"] {
	177	+ position: relative;
	178	+ width: 22px;
	179	+ height: 22px;
	180	+ padding: 0;
	181	+ accent-color: #544483;
	182	+ /* This will change the checkbox color when checked */
	183	+ border: 1px solid #cccccc;
	184	+ /* This controls the border color */
	185	+ border-radius: 4px;
	186	+ /* Optional: rounded corners */
	187	+ background-color: #fff;
	188	+ /* Default background */
	189	+ appearance: none;
	190	+ /* Remove the default checkbox appearance */
	191	+ cursor: pointer;
	192	+ /* Optional: cursor pointer to indicate it is clickable */
	193	+ }
	194	+
	195	+ /* Checked state of the checkbox */
	196	+ input[type="checkbox"]:checked {
	197	+ background-color: #544483;
	198	+ /* Custom background when checked */
	199	+ border-color: #544483;
	200	+ /* Custom border color when checked */
	201	+ }
	202	+ input[type="checkbox"]:checked::before {
	203	+ content: '';
	204	+ background-image: url(../../images/check.png);
	205	+ background-repeat: no-repeat;
	206	+ position: absolute;
	207	+ left: 2px;
	208	+ top: 5px;
	209	+ width: 15px;
	210	+ height: 11px;
	211	+ }
	212	+}
	213	+

...	...	@@ -7,11 +7,17 @@
7	7	import Main from "./main/Main.vue";
8	8	import NotFound from "./etc/NotFound.vue";
9	9
	10	+import TotalSearch from "./user/TotalSearch.vue";
	11	+
10	12	const routes = [
11	13	{ path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
12	14	{ path: "/Login.page", name: "Login", component: Login },
13	15	{ path: "/MyInfo.page", name: "MyInfo", component: MyInfo, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
14	16	{ path: "/notFound.page", name: "NotFoundPage", component: NotFound },
	17	+
	18	+ { path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
	19	+
	20	+
15	21	];
16	22
17	23	const AppRouter = createRouter({

...	...	@@ -1,32 +1,45 @@
1	1	<template>
2	2	<div class="visual mb-50">
3		- <swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
	3	+
	4	+ <swiper
	5	+ ref="swiper"
	6	+ :loop="true"
	7	+ :spaceBetween="30"
	8	+ :centeredSlides="true"
	9	+ :autoplay="{
	10	+ delay: 2500,
	11	+ disableOnInteraction: false,
	12	+ }"
	13	+ :pagination="{
4	14	type: 'progressbar',
5		- }" :navigation="true" :modules="modules" class="mySwiper ">
6		- <swiper-slide v-for="(item, index) in slides" :key="index" >
	15	+ }" :navigation="true" :modules="modules" @slideChange="onSlideChange" class="mySwiper ">
	16	+ <swiper-slide v-for="(item, index) in slides" :key="index">
7	17	<img :src="item.img" :alt="item.alt" />
8	18	</swiper-slide>
9	19	<div class="pagination">
10		- <div class="page-count">1/3</div>
11		-
	20	+ <div class="page-count">{{ currentSlide }} / {{ totalSlides }}</div>
	21	+ <div class="btn-control">
	22	+ <button @click="play"><CaretRightOutlined /></button>
	23	+ <button @click="stop"><PauseOutlined /></button>
12	24	</div>
	25	+ </div>
13	26	</swiper>
14	27	<div class="search-wrap">
15	28
16	29	<div class="search-area">
17	30	<select name="" id="">
18		- <option value="" selected>전체</option>
19		- <option value="">사진</option>
20		- <option value="">영상</option>
21		- <option value="">미디어 영상</option>
22		- <option value="">보도자료</option>
	31	+ <option value="all" selected>전체</option>
	32	+ <option value="pic">사진</option>
	33	+ <option value="video">영상</option>
	34	+ <option value="media">미디어 영상</option>
	35	+ <option value="bodo">보도자료</option>
23	36	</select>
24	37	<div class="line"></div>
25	38	<input type="text" placeholder="검색어를 입력하세요">
26	39	<button class="search-btn"><img :src="search" alt=""></button>
27	40	</div>
28	41	<div class="total-search">
29		- <button class="total-btn">상세검색</button>
	42	+ <button class="total-btn"><router-link :to="{path : '/TotalSearch.page'}" >상세검색</router-link></button>
30	43	</div>
31	44	</div>
32	45	</div>
...	...	@@ -61,27 +74,77 @@
61	74	<div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
62	75	</div>
63	76	</div>
64		- <div class="new-update w1500">
	77	+ <div class="new-update w1500 mb-50">
65	78	<div class="tabs">
66		- <ul>
67		- <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
68		- @click="selectTab(index)">
69		- <img
70		- :src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
71		- :alt="tab.title"
72		- class="tab-icon"
73		- />
74		- <p><b>{{ tab.title }}</b> 기록물</p>
75		- </li>
76		- </ul>
	79	+ <ul class="">
	80	+ <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
	81	+ @click="selectTab(index)">
	82	+ <img :src="selectedTab === index ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
	83	+ <p><b>{{ tab.title }}</b> 기록물</p>
	84	+ </li>
	85	+ </ul>
	86	+
77	87	<div class="tab-content">
78		- <div v-if="selectedTab === 0" class="new-pic">
79		- <p>{{ tabs[0].content }}</p>
	88	+ <div v-if="selectedTab === 0" class="content-wrap">
	89	+ <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	90	+ <div class="new-pic">
	91	+ <div v-for="(contentItem, index) in tabs[0].contentArray" :key="index" class="box-wrap">
	92	+ <div class="box">
	93	+ <img :src="contentItem.image" :alt="tabs[0].title" class="tab-image" />
	94	+ <div class="info">
	95	+ <p>{{ contentItem.content }}</p>
	96	+ <span>{{ contentItem.date }}</span>
	97	+ </div>
	98	+ </div>
	99	+ </div>
	100	+ </div>
80	101	</div>
81		- <div v-if="selectedTab === 1" class="new-video">
82		- <p>{{ tabs[1].content }}</p>
	102	+ <div v-if="selectedTab === 1" class="content-wrap">
	103	+ <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	104	+ <div class="new-video">
	105	+ <div v-for="(contentItem, index) in tabs[1].contentArray" :key="index" class="box-wrap">
	106	+ <div class="box">
	107	+ <img :src="contentItem.image" :alt="tabs[1].title" class="tab-image" />
	108	+ <div class="info">
	109	+ <p>{{ contentItem.content }}</p>
	110	+ <span>{{ contentItem.date }}</span>
	111	+ </div>
	112	+ </div>
	113	+ </div>
	114	+ </div>
83	115	</div>
84	116	</div>
	117	+
	118	+
	119	+ </div>
	120	+ </div>
	121	+ <div class="new-update w1500 mb-50 flex-sp-bw">
	122	+ <div class="new-media">
	123	+ <div class="title mb-30">
	124	+ <h4>신규 미디어 영상</h4>
	125	+ <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	126	+ </div>
	127	+ <div class="media-wrap">
	128	+ <div v-for="(mediacontent, index) in mediacontent" :key="index" class="media-box">
	129	+ <img :src="mediacontent.image" :alt="mediacontent.title" class="media-image" />
	130	+ <div class="info">
	131	+ <p>{{ mediacontent.content }}</p>
	132	+ <span>{{ mediacontent.date }}</span>
	133	+ </div>
	134	+ </div>
	135	+ </div>
	136	+ </div>
	137	+ <div class="new-bodo">
	138	+ <div class="title mb-30">
	139	+ <h4>신규 미디어 영상</h4>
	140	+ <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
	141	+ </div>
	142	+ <ul>
	143	+ <li v-for="(bodocontent, index) in bodocontent" :key="index" class="info">
	144	+ <p>{{ bodocontent.content }}</p>
	145	+ <span>{{ bodocontent.date }}</span>
	146	+ </li>
	147	+ </ul>
85	148	</div>
86	149	</div>
87	150	</template>
...	...	@@ -96,6 +159,7 @@
96	159
97	160	import 'swiper/css/pagination';
98	161	import 'swiper/css/navigation';
	162	+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
99	163
100	164
101	165	// import required modules
...	...	@@ -104,6 +168,8 @@
104	168	components: {
105	169	Swiper,
106	170	SwiperSlide,
	171	+ PauseOutlined,
	172	+ CaretRightOutlined,
107	173	},
108	174	setup() {
109	175	return {
...	...	@@ -114,10 +180,35 @@
114	180	return {
115	181	selectedTab: 0, // Set initial tab index to 0 (first tab)
116	182	tabs: [
117		- { title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
118		- inactiveImage: "client/resources/images/pic-btn-click.png"},
119		- { title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
120		- inactiveImage: "client/resources/images/video-btn.png"},
	183	+ {
	184	+ title: "신규 사진", activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
	185	+ inactiveImage: "client/resources/images/mCont_ico1_off.png",
	186	+ contentArray: [
	187	+ { content: '문수사', date: '2025-03-18', image: 'client/resources/images/img1.png' },
	188	+ { content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img2.png' },
	189	+ { content: '박정희대통령역사자료관', date: '2025-03-20', image: 'client/resources/images/img3.png' }
	190	+ ],
	191	+ },
	192	+ {
	193	+ title: "신규 영상", activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
	194	+ inactiveImage: "client/resources/images/mCont_ico2_off.png",
	195	+ contentArray: [
	196	+ { content: '제목1', date: '2025-03-18', image: 'client/resources/images/img1.png' },
	197	+ { content: '제목2', date: '2025-03-19', image: 'client/resources/images/img2.png' },
	198	+ { content: '제목3', date: '2025-03-20', image: 'client/resources/images/img3.png' }
	199	+ ],
	200	+ },
	201	+ ],
	202	+ mediacontent: [
	203	+ { content: '문수사', date: '2025-03-18', image: 'client/resources/images/img4.png' },
	204	+ { content: '신평벽화마을', date: '2025-03-19', image: 'client/resources/images/img5.png' },
	205	+ ],
	206	+ bodocontent: [
	207	+ { content: '구미시장 우리동네 온(溫)데이', date: '2025-03-18', },
	208	+ { content: "구미 청년 창업, 지난해 성과 '쏠쏠'…올해도 새 도전자", date: '2025-03-19', },
	209	+ { content: "구미시여성단체협의회 신경은 회장 부부, 1,000만 원", date: '2025-03-19', },
	210	+ { content: "초보 기술 공무원도 전문가로! 구미시, 실무 역량 향상", date: '2025-03-19', },
	211	+ { content: "구미시, 청렴도 1등급 목표…반부패·청렴 시책 강화", date: '2025-03-19', },
121	212	],
122	213	direct: 'client/resources/images/direct-btn.png',
123	214	search: 'client/resources/images/icon/search.png',
...	...	@@ -132,20 +223,44 @@
132	223	{ img: 'client/resources/images/visual.png', alt: 'Slide 3' },
133	224	// Add more slides as needed
134	225	],
135		- autoplay: {
136		- delay: 2500, // Delay in milliseconds
137		- disableOnInteraction: false, // Autoplay won't stop when interacting
138		- },
139		- pagination: {
140		- clickable: true, // Allow clicking pagination
141		- },
	226	+ currentSlide: 1, // To track the current slide
	227	+ totalSlides: 3,
	228	+
142	229	navigation: true, // Enable navigation buttons (prev/next)
143	230	};
	231	+ },
	232	+ mounted() {
	233	+ // Store the swiper instance when it's ready
	234	+ this.totalSlides = this.slides.length;
144	235	},
145	236	methods: {
146	237	selectTab(index) {
147	238	this.selectedTab = index; // Update the selected tab index
148	239	},
	240	+ play() {
	241	+ const swiper = this.$refs.swiper.swiper;
	242	+ if (swiper && swiper.autoplay) {
	243	+ swiper.autoplay.start(); // Start autoplay
	244	+ } else {
	245	+ console.warn('Swiper instance or autoplay is not available');
	246	+ }
	247	+ },
	248	+ // Method to stop autoplay
	249	+ stop() {
	250	+ const swiper = this.$refs.swiper.swiper;
	251	+ if (swiper && swiper.autoplay) {
	252	+ swiper.autoplay.stop(); // Stop autoplay
	253	+ } else {
	254	+ console.warn('Swiper instance or autoplay is not available');
	255	+ }
	256	+ },
	257	+ // Method to update the current slide and total slides
	258	+ onSlideChange() {
	259	+ const swiper = this.$refs.swiper.swiper;
	260	+ if (swiper) {
	261	+ this.currentSlide = swiper.realIndex + 1; // Get current slide (1-based index)
	262	+ }
	263	+ },
149	264	},
150	265	};
151	266	</script>

...	...	@@ -11,21 +11,16 @@
11	11	</ul>
12	12	</div>
13	13	</div>
14		- <form action="login" class="login-form">
	14	+ <form action="search" class="search-form">
15	15	<dl>
16	16	<dd class="mb-25">
17		- <label for="id">아이디</label>
18		- <input type="text" id="id" class="wfull" placeholder="아이디를 입력하세요.">
	17	+
	18	+ <input type="checkbox" id="check_button" name="">
	19	+ <label for="check_button">선택1</label>
	20	+
19	21	</dd>
20	22
21		- <dd class="mb-10">
22		- <label for="pw">비밀번호</label>
23		- <input type="text" id="pw" class="wfull" placeholder="비밀번호를 입력하세요.">
24		- </dd>
25		- <dd class="check-area flex-end mb-25">
26		- <input type="checkbox" class="margin-top">
27		- <label for="save">아이디 저장</label>
28		- </dd>
	23	+
29	24	</dl>
30	25	<!-- Bind the image source dynamically for loginicon -->
31	26	<button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>

Delete comment