64 lines
2.3 KiB
Vue
64 lines
2.3 KiB
Vue
<template>
|
|
<template v-for="file in block.data.file">
|
|
<div class="">
|
|
<a class="" :href="'/storage/'+ file.path" download type="button">
|
|
|
|
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
|
<div class="flex items-center">
|
|
<div class="w-[30px] h-[30px] bg-black flex justify-center items-center rounded-md mr-2">
|
|
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.9375 12.2188H12.75C12.4682 12.2188 12.198 12.1068 11.9987 11.9076C11.7994 11.7083 11.6875 11.438 11.6875 11.1562V5.84375C11.6875 5.56196 11.7994 5.29171 11.9987 5.09245C12.198 4.89319 12.4682 4.78125 12.75 4.78125H15.9375V5.84375H12.75V11.1562H15.9375V12.2188ZM9.5625 12.2188H7.4375C7.15571 12.2188 6.88546 12.1068 6.6862 11.9076C6.48694 11.7083 6.375 11.438 6.375 11.1562V5.84375C6.375 5.56196 6.48694 5.29171 6.6862 5.09245C6.88546 4.89319 7.15571 4.78125 7.4375 4.78125H9.5625C9.84429 4.78125 10.1145 4.89319 10.3138 5.09245C10.5131 5.29171 10.625 5.56196 10.625 5.84375V11.1562C10.625 11.438 10.5131 11.7083 10.3138 11.9076C10.1145 12.1068 9.84429 12.2188 9.5625 12.2188ZM7.4375 5.84375V11.1562H9.5625V5.84375H7.4375ZM3.1875 12.2188H1.0625V4.78125H3.1875C3.75087 4.78195 4.29096 5.00606 4.68933 5.40442C5.08769 5.80279 5.3118 6.34288 5.3125 6.90625V10.0938C5.3118 10.6571 5.08769 11.1972 4.68933 11.5956C4.29096 11.9939 3.75087 12.218 3.1875 12.2188ZM2.125 11.1562H3.1875C3.46929 11.1562 3.73954 11.0443 3.9388 10.8451C4.13806 10.6458 4.25 10.3755 4.25 10.0938V6.90625C4.25 6.62446 4.13806 6.35421 3.9388 6.15495C3.73954 5.95569 3.46929 5.84375 3.1875 5.84375H2.125V11.1562Z" fill="#F8F8F8"/>
|
|
</svg>
|
|
</div>
|
|
<div>{{ file.title }}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import slugify from "slugify";
|
|
import FsLightbox from "fslightbox-vue/v3";
|
|
|
|
|
|
export default {
|
|
name: "FileBlock",
|
|
components: { FsLightbox },
|
|
data() {
|
|
return {
|
|
toggler: false,
|
|
domainPath: null,
|
|
}
|
|
},
|
|
methods: {
|
|
generateSlug: function (text) {
|
|
return slugify(text, {
|
|
lower: true,
|
|
strict: true,
|
|
locale: 'ru'
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.domainPath = window.location.origin;
|
|
},
|
|
props: {
|
|
block: {
|
|
type: Object,
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.fslightbox-container {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
</style> |