File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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">
<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="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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></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-end">
<button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button>
<button class="update" 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' },
// Add more slides as needed
],
};
},
methods: {
},
watch: {},
computed: {
},
mounted() { },
};
</script>