69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<template lang="pug">
|
||
.wrapper-additional.flex.flex-col.gap-y-8.justify-between.text-base
|
||
.flex.flex-col.gap-y-6.w-full.px-4
|
||
.flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
|
||
.flex.flex-col.gap-y-1
|
||
base-input(v-model="info.header" placeholder="Заголовок")
|
||
.flex.px-4.py-3.description
|
||
textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10")
|
||
.upload-wrapper.flex.flex-col.justify-center.items-center
|
||
.upload-text.text-center.flex.w-fit
|
||
input.hidden(@change="(e) => saveFile(e)" type="file" :id="info.id")
|
||
span Загрузите элемент
|
||
label.label.cursor-pointer(:for="info.id") с комьютера
|
||
span или перетащите их сюда
|
||
.add-additional.flex.gap-x-3.cursor-pointer(@click="addNewAdditional")
|
||
.icon-plus
|
||
span Добавить еще пункт
|
||
.px-4
|
||
base-button(@click="saveClient" :size="40")
|
||
span.font-semibold Создать клиента
|
||
</template>
|
||
|
||
<script>
|
||
import BaseInput from "@/components/base/BaseInput";
|
||
import BaseButton from "@/components/base/BaseButton";
|
||
export default {
|
||
name: "FormCreateAdditional",
|
||
components: { BaseInput, BaseButton },
|
||
props: {
|
||
additionalInfo: Object,
|
||
saveClient: Function,
|
||
addNewAdditional: Function,
|
||
saveFile: Function,
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.wrapper-additional
|
||
min-height: 443px
|
||
max-height: 443px
|
||
overflow-y: auto
|
||
&::-webkit-scrollbar
|
||
width: 4px
|
||
&::-webkit-scrollbar-track
|
||
background-color: rgba(211, 212, 220, 0.5)
|
||
border-radius: 8px
|
||
&::-webkit-scrollbar-thumb
|
||
border-radius: 8px
|
||
background-color: var(--btn-blue-color)
|
||
.upload-wrapper
|
||
min-height: 92px
|
||
max-height: 92px
|
||
width: 100%
|
||
color: var(--font-grey-color)
|
||
border: 2px dashed var(--font-grey-color)
|
||
border-radius: 4px
|
||
.upload-text
|
||
max-width: 278px
|
||
.label
|
||
color: var(--btn-blue-color)
|
||
.description
|
||
min-height: 77px
|
||
border-radius: 4px
|
||
border: 2px solid var(--border-light-grey-color)
|
||
.add-additional
|
||
color: var(--btn-blue-color)
|
||
</style>
|