<template> <div class="content"> <div class="sub-title-area mb-30"> <h2>사진 기록물</h2> <div class="breadcrumb-list"> <ul> <li><img :src="homeicon" alt="Home Icon"> <p>기록물</p> </li> <li><img :src="righticon" alt=""></li> <li>사진 기록물</li> </ul> </div> </div> <form action="" class="gallery-form mb-40"> <dl class="mb-20"> <dd> <p>사진 기록물 제목1 </p> <div class="date flex align-center"> <img :src="calendaricon" alt=""> <span>2025.02.28</span> </div> </dd> </dl> <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-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="btn-group"> <button class="select-down">선택 다운로드</button> <button class="all-down">전체 다운로드</button> </div> </div> </form> <h3>내용</h3> <form action="" class=" info-form mb-50"> <dl> <dd> <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p> </dd> </dl> </form> <h3>기본정보</h3> <form action="" class="info-form mb-50"> <dl> <dd class="mb-20"> <img :src="addressicon" alt=""> <span>주소</span> <p>경상북도 구미시 송정대로 55</p> </dd> <dd class="mb-20"> <img :src="yearicon" alt=""> <span>생산정보</span> <p>2017</p> </dd> <dd> <img :src="categoryicon" alt=""> <span>카테고리</span> <ul class="category"> <li v-if="resultitem.category1" class="category1">카테고리1</li> <li v-if="resultitem.category2" class="category2">카테고리2</li> </ul> </dd> </dl> </form> <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> <script> import axios from "axios"; import { ref } from 'vue'; import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user" // 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'; export default { components: { PauseOutlined, CaretRightOutlined, Swiper, SwiperSlide, }, setup() { const thumbsSwiper = ref(null); const setThumbsSwiper = (swiper) => { thumbsSwiper.value = swiper; }; return { thumbsSwiper, setThumbsSwiper, modules: [FreeMode, Navigation, Thumbs], }; }, data() { return { resultitem: { category1: true, category2: true, }, calendaricon: 'client/resources/images/icon/calendaricon.png', homeicon: 'client/resources/images/icon/home.png', erroricon: 'client/resources/images/icon/error.png', righticon: 'client/resources/images/icon/right.png', addressicon: 'client/resources/images/icon/addressicon.png', yearicon: 'client/resources/images/icon/yearicon.png', categoryicon: 'client/resources/images/icon/categoryicon.png', slides: [ { img: 'client/resources/images/visual.png', alt: 'Slide 1' }, { 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 ], }; }, methods: { }, watch: {}, computed: { }, mounted() { }, }; </script>