77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<script setup>
|
|
import { computed, inject, watch, ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
|
const { selectedDeviceCog } = inject("system_selectedDevice");
|
|
const imgData = ref([]);
|
|
|
|
watch(
|
|
selectedDeviceCog,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
imgData.value = newValue.oriFile.map(file => file.file_url);
|
|
} else {
|
|
imgData.value = [];
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<a-carousel arrows class="mt-5 shadow-lg">
|
|
<template #prevArrow>
|
|
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
|
|
<font-awesome-icon
|
|
:icon="['fas', 'chevron-left']"
|
|
size="lg"
|
|
class="text-[#1b1b1b]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #nextArrow>
|
|
<div class="custom-slick-arrow" style="right: 10px">
|
|
<font-awesome-icon
|
|
:icon="['fas', 'chevron-right']"
|
|
size="lg"
|
|
class="text-[#1b1b1b]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div v-for="(url, index) in imgData" :key="index">
|
|
<img :src="`${FILE_BASEURL}/${url}`" alt="Image" />
|
|
</div>
|
|
</a-carousel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* For demo */
|
|
:deep(.slick-slide) {
|
|
text-align: center;
|
|
background: #c5c5c5;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:deep(.slick-arrow.custom-slick-arrow) {
|
|
width: 25px;
|
|
height: 25px;
|
|
font-size: 25px;
|
|
transition: ease all 0.3s;
|
|
opacity: 0.3;
|
|
z-index: 1;
|
|
}
|
|
:deep(.slick-arrow.custom-slick-arrow:before) {
|
|
display: none;
|
|
}
|
|
:deep(.slick-arrow.custom-slick-arrow:hover) {
|
|
color: #fff;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
:deep(.slick-slide img) {
|
|
margin: auto;
|
|
}
|
|
</style>
|