mohadese namavar
120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<template>
|
|
<div class="seller-add-spec">
|
|
<div>
|
|
<div>
|
|
<h2>{{ $t("addSpec") }}</h2>
|
|
<Button icon="isax isax-close-circle" severity="secondary" rounded link @click="dialog.close()" />
|
|
</div>
|
|
<p>{{ dialog.data.title }}</p>
|
|
</div>
|
|
<ul>
|
|
<li>
|
|
<InputText v-model="form.key" placeholder id="key" />
|
|
<label for="key">{{ $t('title') }}</label>
|
|
</li>
|
|
<li>
|
|
<Textarea v-model="form.value" placeholder id="value" />
|
|
<label for="value">{{ $t("description") }}</label>
|
|
</li>
|
|
</ul>
|
|
<Button :label="$t('submitSpec')" @click="add()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const dialog = inject('dialogRef')
|
|
const form = reactive({})
|
|
|
|
const add = () => {
|
|
dialog.value.data.specs[form.key] = form.value
|
|
dialog.value.close();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-add-spec {
|
|
@apply w-full lg:w-[40.1rem] lg:h-[38.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col relative;
|
|
|
|
&::after {
|
|
@apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col gap-1.5 lg:h-[7.8rem] lg:gap-3 border-b lg:border-b-2 border-[#E5E5E5] p-6 lg:px-10 lg:pt-8 pb-6;
|
|
|
|
&>div {
|
|
@apply flex justify-between items-center;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-xl font-bold font-vazir;
|
|
}
|
|
|
|
button {
|
|
@apply -mx-4 -my-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.4em] lg:text-3xl text-[#191919];
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
|
|
}
|
|
}
|
|
|
|
&>ul {
|
|
@apply flex flex-col h-full items-center gap-[1.1rem] px-6 pt-9 lg:gap-5 lg:pt-6 lg:px-10;
|
|
|
|
li {
|
|
@apply flex items-center gap-4 cursor-pointer w-max select-none relative;
|
|
@apply w-[21.4rem] lg:w-[27.1rem];
|
|
|
|
label {
|
|
@apply w-max absolute right-3 top-4 lg:top-3.5 px-1 bg-white transition-['top'];
|
|
@apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text;
|
|
@apply pointer-events-none;
|
|
}
|
|
|
|
input, textarea {
|
|
@apply h-[3.4rem] pl-10 rtl w-full rounded-[0.6rem] border shadow-none;
|
|
@apply text-[#4C4C4C] font-vazir grow;
|
|
}
|
|
|
|
&:has(input:focus),
|
|
&:has(textarea:focus),
|
|
&:has(input:not(:placeholder-shown)),
|
|
&:has(textarea:not(:placeholder-shown)) {
|
|
label {
|
|
@apply -top-2 h-4;
|
|
@apply text-[#4C4C4C] text-xs font-normal font-vazir;
|
|
}
|
|
}
|
|
}
|
|
|
|
li:last-child {
|
|
@apply w-full lg:w-[27.1rem] h-full flex flex-col items-start gap-4 mt-3 lg:mt-4;
|
|
|
|
// label {
|
|
// @apply text-[#7F7F7F] text-xs lg:text-xl font-medium font-vazir max-lg:mr-2.5;
|
|
// }
|
|
|
|
textarea {
|
|
@apply w-full h-[9.6rem] lg:h-full p-4 rounded-[0.6rem] border border-[#E5E5E5];
|
|
|
|
// &::placeholder {
|
|
// @apply text-[#999999] text-[0.7em] lg:text-lg font-normal font-vazir;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply h-[2.9rem] m-6 mt-8 lg:h-14 lg:m-10 lg:mt-9 shrink-0 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply font-bold font-iran-sans text-sm lg:text-base;
|
|
}
|
|
}
|
|
}
|
|
</style> |