fix langs
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
|
||||
<div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}" />
|
||||
@ -50,10 +50,9 @@
|
||||
<div v-if="dropCountry"
|
||||
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
|
||||
<div class="overflow-y-auto h-[200px] w-full">
|
||||
<p v-for="item in menuStore.countryList" @click="() => {
|
||||
menuStore.selectedPhoneCountry = item
|
||||
dropCountry = false
|
||||
}" class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
<p v-for="item in menuStore.countries" :key="item.iso_code"
|
||||
@click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
|
||||
class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
:title="item.name">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
@ -62,14 +61,14 @@
|
||||
|
||||
</div>
|
||||
<p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
|
||||
}}</p>
|
||||
}}</p>
|
||||
<input :placeholder="$t('phone')" type="text"
|
||||
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('account_type') }}</p>
|
||||
<USelect v-model="selectedType" :items="component.section_lang_data.account_types"
|
||||
<USelect v-model="selectedType" :items="component.front_section_lang[0].data.account_types"
|
||||
value-key="name" :searchable="false" :ui="{
|
||||
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
|
||||
trailing: 'hidden w-full',
|
||||
@ -84,8 +83,8 @@
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
|
||||
<p class="truncate whitespace-nowrap">
|
||||
{{component.section_lang_data.account_types.find((item) => item.name ===
|
||||
modelValue)?.name}}</p>
|
||||
{{ component.front_section_lang[0].data.account_types.find((item) => item.name === modelValue)?.name }}
|
||||
</p>
|
||||
<span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
</div>
|
||||
@ -115,10 +114,10 @@
|
||||
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
|
||||
<p class="cursor-pointer hover:underline transition-all">{{
|
||||
$t('is_account')
|
||||
}}</p>
|
||||
}}</p>
|
||||
<p class="text-button cursor-pointer hover:text-button-hover">{{
|
||||
$t('login')
|
||||
}}</p>
|
||||
}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
@ -126,23 +125,32 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: {
|
||||
account_types: [{
|
||||
id: number,
|
||||
name: string
|
||||
}]
|
||||
};
|
||||
};
|
||||
const props = defineProps<{
|
||||
component: {
|
||||
id: number
|
||||
name: string
|
||||
img: string[]
|
||||
component_name: string
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {
|
||||
account_types: {
|
||||
id: number,
|
||||
name: string
|
||||
}[]
|
||||
}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
}
|
||||
}>();
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const dropdownRef = ref(null);
|
||||
const dropCountry = ref()
|
||||
|
||||
const selectedType = ref(props.component.section_lang_data.account_types[0].name)
|
||||
const selectedType = ref(props.component.front_section_lang[0].data.account_types[0].name)
|
||||
|
||||
onClickOutside(dropdownRef, () => {
|
||||
dropCountry.value = false
|
||||
|
Reference in New Issue
Block a user