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-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 class="gallery video">
<img :src="eximg" alt="">
</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>https://youtu.be/2F2gWkEnSz4</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="red-line " type="button" @click="fnDeleteUser">삭제</button>
<button class="blue-line " type="button" @click="fnUpdateUser">수정</button>
<button class="gray-line-bg " 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',
eximg: 'client/resources/images/img8.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>