You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1446 lines
49 KiB
1446 lines
49 KiB
<template>
|
|
<div
|
|
class="NavBar tw-bg-white tw-sticky tw-top-0 tw-left-0 tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200 tw-z-10"
|
|
>
|
|
<div
|
|
class="tw-px-[20px] tw-py-[20px] md:tw-px-[30px] md:tw-py-[24px] xl:tw-px-[60px] xl:tw-pt-[22px] xl:tw-pb-[14px] xl:tw-max-w-[1366px] xl:tw-mx-auto"
|
|
>
|
|
<div class="tw-flex tw-justify-between tw-items-center xl:tw-h-[48px]">
|
|
<div
|
|
class="tw-flex tw-items-center tw-flex-grow xl:tw-grid xl:tw-grid-cols-[188px_auto] xl:tw-gap-[30px] xl:tw-basis-[70%]"
|
|
>
|
|
<img
|
|
class="tw-mr-[20px] md:tw-mr-[40px] xl:tw-hidden"
|
|
:src="require('@/assets/svg/menu.svg')"
|
|
@click="clickMenu"
|
|
/>
|
|
<nuxt-link
|
|
:to="localePath('/')"
|
|
class="tw-block tw-w-[146px] md:tw-w-[188px]"
|
|
><img
|
|
:src="require('@/assets/svg/logo_v2.svg')"
|
|
class="tw-w-full"
|
|
alt=""
|
|
/>
|
|
</nuxt-link>
|
|
<!-- <v-card class="tw-hidden flex-row rounded-lg py-1 px-4 xl:tw-flex xl:tw-ml-[30px]" outlined
|
|
v-if="showNavSearch" @click="bigSearch = true">
|
|
<v-card flat color="transparent" :width="$vuetify.breakpoint.mdAndDown ? '70px' : '300px'"
|
|
class="my-auto neutrals--text text--darken-3 text-size-14">
|
|
{{
|
|
this.$vuetify.breakpoint.mdAndDown
|
|
? $t("Looking ?")
|
|
: $t("What are you looking for?")
|
|
}}
|
|
</v-card>
|
|
<svg width="24" height="24" class="tw-my-auto" shape-rendering="geometricPrecision">
|
|
<image xlink:href="@/assets/svg/icon-search-small.svg" src="@/assets/svg/icon-search-small.svg" width="24"
|
|
height="24" />
|
|
</svg>
|
|
</v-card> -->
|
|
<div v-if="showNavSearch" class="tw-w-full tw-hidden xl:tw-block" style="border: 1px solid red;">
|
|
<Search
|
|
v-if="showNavSearch"
|
|
:exhibitionsCategories="exhibitionsCategories"
|
|
:exhibitionsLocations="exhibitionsLocations"
|
|
:exhibitionsSearchs="exhibitionsSearchs"
|
|
:servicesLocations="servicesLocations"
|
|
:servicesSearchs="servicesSearchs"
|
|
@keyword-search="Search"
|
|
/>
|
|
<!-- @loaading="Search" -->
|
|
</div>
|
|
|
|
</div>
|
|
<div
|
|
class="tw-basis-[46%] md:tw-basis-[66%] xl:tw-basis-[43%] xl:tw-ml-[56px]"
|
|
v-click-outside="clickOutSide"
|
|
>
|
|
<div class="tw-flex tw-justify-end xl:tw-hidden">
|
|
<div class="tw-flex tw-justify-center tw-items-center">
|
|
<v-img
|
|
max-width="24"
|
|
class="mr-4 float-left"
|
|
contain
|
|
:src="require('@/assets/svg/search-black.svg')"
|
|
@click="clickSearch"
|
|
></v-img>
|
|
</div>
|
|
<!--v-img
|
|
max-width="24"
|
|
class="mr-4 hidden-md-and-up"
|
|
contain
|
|
:src="require('@/assets/svg/shopping-bag.svg')"
|
|
></v-img-->
|
|
<span max-width="28px" v-if="$auth.$state.loggedIn">
|
|
<v-menu
|
|
offset-y
|
|
bottom
|
|
left
|
|
nudge-bottom="20"
|
|
class="neutrals darken-1 mt-4 on-top"
|
|
>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
@click="UserInfoPopup = true"
|
|
v-if="$auth.$storage.getUniversal('userPicture')"
|
|
icon
|
|
width="28px"
|
|
height="28px"
|
|
class="ms-2"
|
|
>
|
|
<v-img
|
|
:src="userPicture"
|
|
max-width="28px"
|
|
max-height="28px"
|
|
class="rounded-circle"
|
|
:key="userPicture"
|
|
></v-img>
|
|
</v-btn>
|
|
<v-btn
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
@click="UserInfoPopup = true"
|
|
v-else-if="
|
|
$auth.$storage.getUniversal('userLastName') != undefined
|
|
"
|
|
fab
|
|
class="user-no-picture-border mx-2 tw-shadow-none"
|
|
color="primary"
|
|
width="28"
|
|
height="28"
|
|
>
|
|
<span class="tw-text-[16px]">
|
|
{{ $auth.$storage.getUniversal("userLastName") }}
|
|
</span>
|
|
</v-btn>
|
|
<div
|
|
v-else
|
|
class="tw-bg-primary-default tw-cursor-pointer tw-rounded-[12px] tw-whitespace-nowrap tw-block tw-text-white tw-px-[16px] tw-py-[9px] tw-whitespace-nowrap tw-text-[10px] tw-font-medium tw-transition-all tw-duration-200 tw-ease-in-out hover:tw-bg-primary-light"
|
|
@click="toUser"
|
|
>
|
|
{{ $t("Log in/Sign up") }}
|
|
</div>
|
|
</template>
|
|
<div class="neutrals darken-1 tw-hidden xl:tw-block">
|
|
<v-btn
|
|
:to="
|
|
localePath(
|
|
$auth.$storage.getUniversal('authtoken')
|
|
? '/user'
|
|
: ''
|
|
)
|
|
"
|
|
class="neutrals darken-1 neutrals--text text--darken-5 no-text-transform elevation-0 text-size-14"
|
|
>
|
|
<unicon
|
|
class="mr-3"
|
|
name="user"
|
|
height="20px"
|
|
fill="neutrals-darken5"
|
|
/>{{ $t("Profile") }}
|
|
</v-btn>
|
|
<v-btn
|
|
@click="logout"
|
|
class="neutrals darken-1 warning--text no-text-transform elevation-0"
|
|
>
|
|
<unicon
|
|
class="mr-3 text-size-14"
|
|
name="signout"
|
|
height="20px"
|
|
fill="#EF5A5A"
|
|
/>{{ $t("Logout") }}
|
|
</v-btn>
|
|
</div>
|
|
<!-- <v-list class="neutrals darken-1 tw-hidden xl:tw-block">
|
|
<v-list-item>
|
|
<v-btn :to="
|
|
localePath(
|
|
$auth.$storage.getUniversal('authtoken')
|
|
? `/user/${
|
|
$auth.$storage.getUniversal('authtoken').user_id
|
|
}`
|
|
: ''
|
|
)
|
|
"
|
|
class="neutrals darken-1 neutrals--text text--darken-5 no-text-transform elevation-0 text-size-14">
|
|
<unicon class="mr-3" name="user" height="20px" fill="neutrals-darken5" />{{ $t("Profile") }}
|
|
</v-btn>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-btn @click="logout" class="neutrals darken-1 warning--text no-text-transform elevation-0">
|
|
<unicon class="mr-3 text-size-14" name="signout" height="20px" fill="#EF5A5A" />{{ $t("Logout") }}
|
|
</v-btn>
|
|
</v-list-item>
|
|
</v-list> -->
|
|
</v-menu>
|
|
</span>
|
|
<span v-else>
|
|
<nuxt-link :to="localePath('/user')">
|
|
<img class="" :src="require('@/assets/svg/profile.svg')" />
|
|
</nuxt-link>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="tw-hidden xl:tw-flex xl:tw-justify-end xl:tw-items-center"
|
|
>
|
|
<v-btn
|
|
v-if="$i18n.locale == 'zh-tw'"
|
|
depressed
|
|
class="remove-upper tw-mx-0 tw-px-0 tw-bg-transparent tw-text-primary-default"
|
|
href="https://medium.com/showeasy"
|
|
target="_blank"
|
|
>
|
|
{{ $t("Blog") }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-else
|
|
depressed
|
|
class="remove-upper tw-mx-0 tw-px-0 tw-bg-transparent tw-text-primary-default"
|
|
href="https://medium.com/showeasy-eng"
|
|
target="_blank"
|
|
>
|
|
{{ $t("Blog") }}
|
|
</v-btn>
|
|
<div
|
|
:class="[
|
|
'changeLang tw-relative tw-justify-center tw-items-center',
|
|
disabled ? 'disabled' : '',
|
|
disabled ? 'tw-text-neutrals-300' : 'tw-text-black',
|
|
]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'tw-flex tw-items-center tw-mx-[12px] tw-cursor-pointer tw-py-[8px] tw-rounded-[4px]',
|
|
]"
|
|
>
|
|
<div class="tw-body-3 tw-mr-[15px] t16 tw-font-normal">
|
|
{{ $i18n.localeProperties["title"] }}
|
|
</div>
|
|
<img v-if="disabled" src="@/assets/svg/down-arrow-disabled.svg" />
|
|
<img v-else src="@/assets/svg/down-arrow.svg" />
|
|
</div>
|
|
<transition name="lang">
|
|
<div
|
|
v-show="langShow"
|
|
class="tw-rounded-[10px] tw-bg-white tw-px-[12px] tw-py-[8px] tw-absolute tw-top-[40px] tw-w-max tw-left-0 tw-z-10 tw-shadow-[0_2px_20px_rgba(0,0,0,0.15)]"
|
|
>
|
|
<!-- <button
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[25px] tw-px-[12px] tw-py-[11px] tw-w-full tw-bg-white hover:tw-bg-primary-pale hover:tw-text-primary-1 hover:tw-rounded-[10px]"
|
|
@click="Currencystatus('USD')"
|
|
>
|
|
<div class="tw-body-4 tw-font-bold" value="USD">USD</div>
|
|
<div class="tw-body-4 tw-text-left">{{ $t("U.S. Dollar") }}</div>
|
|
</button> -->
|
|
|
|
<nuxt-link v-for="(lang, idx) in this.$i18n.locales" :key="idx"
|
|
class="tw-rounded-[10px] text-decoration-none tw-body-3 tw-w-full"
|
|
:to="switchLocalePath(lang.code)"
|
|
>
|
|
<div class="tw-px-[12px] tw-py-[11px] tw-w-full tw-bg-white tw-font-normal tw-text-black hover:tw-bg-primary-pale hover:tw-text-primary-1 hover:tw-rounded-[10px]">
|
|
{{ lang.text }}
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<!-- <v-menu offset-y class="on-top">
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
depressed
|
|
class="white neutrals--text text--darken-5 no-text-transform tw-body-3 tw-font-normal"
|
|
>
|
|
{{ $i18n.localeProperties["title"] }}
|
|
<img src="@/assets/svg/down-arrow.svg" alt="" class="ml-1" />
|
|
</v-btn>
|
|
</template>
|
|
<v-list class="tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]">
|
|
<v-list-item
|
|
v-for="(lang, idx) in this.$i18n.locales"
|
|
:key="idx"
|
|
class="tw-mx-auto"
|
|
>
|
|
<nuxt-link
|
|
:to="switchLocalePath(lang.code)"
|
|
class="tw-rounded-[10px] tw-text-base-primary text-decoration-none tw-body-3 tw-font-normal tw-w-full tw-px-[12px] tw-py-[8px] hover:tw-bg-primary-3 hover:tw-text-primary-1"
|
|
>
|
|
{{ lang.text }}
|
|
</nuxt-link>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu> -->
|
|
<changeCurrency></changeCurrency>
|
|
<nuxt-link
|
|
class="tw-px-[10px] tw-mr-[10px] hover:tw-bg-primary-3 active:tw-bg-primary-3"
|
|
:to="localePath('/FAQ')"
|
|
><img src="~/assets/svg/faq.svg" alt=""
|
|
/></nuxt-link>
|
|
<!-- <v-btn
|
|
depressed
|
|
class="white tw-mr-[16px]"
|
|
:to="localePath('/FAQ')"
|
|
>
|
|
<svg width="20" height="20">
|
|
<image
|
|
xlink:href="@/assets/svg/help-circle.svg"
|
|
src="@/assets/svg/help-circle.svg"
|
|
width="20"
|
|
height="20"
|
|
/>
|
|
</svg>
|
|
</v-btn> -->
|
|
<!-- <v-btn depressed class="white" small>
|
|
<img src="@/assets/svg/shopping-bag.svg" alt="" />
|
|
</v-btn> -->
|
|
|
|
<div v-if="$auth.$state.loggedIn" class="tw-relative">
|
|
<div @click="UserInfoPopup = true"
|
|
v-if="$auth.$storage.getUniversal('userPicture')"
|
|
class="ms-2 tw-bg-primary-default tw-w-[28px] tw-h-[28px] tw-rounded-[28px]">
|
|
<v-img v-if="userPicture"
|
|
:src="userPicture"
|
|
class="tw-rounded-[28px] tw-w-[28px] tw-h-[28px] tw-flex tw-items-center tw-cursor-pointer"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<v-btn
|
|
@click="UserInfoPopup = true"
|
|
v-else-if="
|
|
$auth.$storage.getUniversal('userLastName') != undefined
|
|
"
|
|
fab
|
|
:class="['mx-2 tw-shadow-none tw-bg-primary-default',($auth.$storage.getUniversal('userLastName')!=undefined && $auth.$storage.getUniversal('userLastName')
|
|
&& $auth.$storage.getUniversal('userLastName').length>1)?'tw-w-[40px] tw-rounded-[20px]':'tw-w-[28px] tw-rounded-[28px]']"
|
|
color="primary"
|
|
height="28"
|
|
>
|
|
<span :class="[($auth.$storage.getUniversal('isLetter')!=undefined && $auth.$storage.getUniversal('isLetter')==false)?'tw-text-[16px]':'tw-text-[12px]']">
|
|
{{ $auth.$storage.getUniversal("userLastName") }}
|
|
</span>
|
|
</v-btn>
|
|
<div
|
|
v-else
|
|
class="tw-bg-primary-default tw-cursor-pointer tw-rounded-[12px] tw-whitespace-nowrap tw-block tw-text-white tw-px-[16px] tw-py-[9px] tw-whitespace-nowrap tw-text-[10px] tw-font-medium tw-transition-all tw-duration-200 tw-ease-in-out hover:tw-bg-primary-light"
|
|
@click="toUser"
|
|
>
|
|
{{ $t("Log in/Sign up") }}
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'tw-grid-cols-1 tw-gap-[14px] tw-px-[10px] tw-py-[8px] tw-bg-white tw-rounded-[10px] tw-w-max tw-absolute tw-right-0 tw-top-[40px] tw-z-50 tw-shadow-[0_1px_4px_0_rgba(0,0,0,0.3)]',
|
|
UserInfoPopup && width >= 1366 ? 'tw-grid' : 'tw-hidden',
|
|
]"
|
|
>
|
|
<nuxt-link
|
|
:to="
|
|
localePath('/user/editPersonalInfo')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/profile.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("userProfile.profile") }}
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link :to="localePath('/user/myBooking')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/bookings.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t('My Bookings')}}
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="localePath('/user/saveExhibition')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/saveExhibition.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("userProfile.savedExhibitions") }}
|
|
</div>
|
|
</nuxt-link>
|
|
<!-- <nuxt-link :to="localePath('/user/saveService')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"><img src="~/assets/svg/saveService.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("userProfile.savedServices") }}
|
|
</div>
|
|
</nuxt-link> -->
|
|
<nuxt-link
|
|
:to="localePath('/user/companyInfo')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/companyInfo.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("userProfile.companyInfo") }}
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="localePath('/user/contactInfo')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/contactInfo.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("Contact Info") }}
|
|
</div>
|
|
</nuxt-link>
|
|
<nuxt-link
|
|
:to="localePath('/user/setting')"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click.native="UserInfoPopup = false"
|
|
><img src="~/assets/svg/profile_setting.svg" alt="" />
|
|
<div class="tw-head-body tw-text-base-primary">
|
|
{{ $t("userProfile.setting") }}
|
|
</div>
|
|
</nuxt-link>
|
|
<div
|
|
class="tw-border tw-border-t tw-border-solid tw-border-neutral-200"
|
|
></div>
|
|
<button
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
|
|
@click="logout"
|
|
>
|
|
<img src="~/assets/svg/logout.svg" alt="" />
|
|
<div
|
|
class="tw-flex tw-head-body tw-text-error-default tw-justify-start"
|
|
>
|
|
{{ $t("userProfile.logout") }}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div
|
|
@click="toUser"
|
|
class="tw-text-[14px] tw-cursor-pointer tw-whitespace-nowrap tw-text-white tw-bg-primary-default tw-px-[16px] tw-py-[9px] tw-rounded-[12px] hover:tw-bg-primary-light"
|
|
>
|
|
{{ $t("Log in/Sign up") }}</div
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref="dropdown"
|
|
:class="[
|
|
'navBar-row2 tw-relative tw-hidden xl:tw-grid xl:tw-mt-[35px] tw-transition-all tw-duration-200 tw-delay-75 tw-ease-linear',
|
|
]"
|
|
>
|
|
<div
|
|
class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-3"
|
|
@mouseleave="exhibitionActiveIndex = 0"
|
|
>
|
|
<a
|
|
:href="localePath('/exhibition')"
|
|
@click="isPageLoading = true"
|
|
:class="[
|
|
'tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default',
|
|
$route.path.match('\/exhibition')
|
|
? 'tw-text-primary-default'
|
|
: '',
|
|
]"
|
|
>
|
|
{{ $t("Exhibition") }}</a
|
|
>
|
|
<div v-if="exhibitionsCategoryList.length>0"
|
|
class="customDropMenu exhibition tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] tw-overflow-hidden tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
|
|
>
|
|
<div
|
|
class="tw-relative tw-grid tw-grid-cols-2 tw-max-w-[700px] tw-min-h-[110px] tw-overflow-hidden"
|
|
>
|
|
<div
|
|
class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-grid tw-grid-cols-1 tw-gap-[10px]"
|
|
>
|
|
<div
|
|
class="tw-list-none tw-mr-[20px]"
|
|
v-for="(item, index) in exhibitionsCategoryList"
|
|
:key="index"
|
|
@mouseover="exhibitionActiveIndex = index"
|
|
>
|
|
<div
|
|
:class="[
|
|
'exhibitionDropdownLink tw-grid tw-grid-cols-[30px_auto] tw-gap-[10px] tw-body-4 tw-font-normal hover:tw-text-primary-default',
|
|
exhibitionActiveIndex == index
|
|
? 'tw-text-primary-default active'
|
|
: 'tw-text-neutrals-900',
|
|
]"
|
|
>
|
|
<img
|
|
v-if="exhibitionListIcon[index] !== undefined"
|
|
:src="
|
|
require(`@/assets/img/CategoryIcon/${exhibitionListIcon[index]}.png`)
|
|
"
|
|
/><span class="tw-flex tw-items-center tw-min-w-[322px]">{{
|
|
$t(item.CategoryName)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-full tw-overflow-x-hidden tw-overflow-y-auto" v-if="exhibitionsCategoryList.length>0">
|
|
<ul
|
|
class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[20px] tw-px-[20px]"
|
|
>
|
|
<li class="tw-list-none">
|
|
<a
|
|
:href="
|
|
localePath(
|
|
`/exhibition?category=${exhibitionsCategoryList[exhibitionActiveIndex].CategoryID}`
|
|
)
|
|
"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default"
|
|
>{{ $t("All") }}</a
|
|
>
|
|
</li>
|
|
<template v-if="exhibitionsCategoryList[
|
|
exhibitionActiveIndex
|
|
].SubCategoryList && exhibitionsCategoryList[
|
|
exhibitionActiveIndex
|
|
].SubCategoryList.length>0">
|
|
<li
|
|
v-for="(sub, index) in exhibitionsCategoryList[
|
|
exhibitionActiveIndex
|
|
].SubCategoryList"
|
|
:key="index"
|
|
class="tw-list-none"
|
|
>
|
|
<a
|
|
:href="localePath(`/exhibition?subcategory=${sub.CategoryID}`)"
|
|
class="tw-block tw-min-h-[30px] tw-body-4 tw-font-normal tw-min-w-[230px] tw-text-neutral-800 hover:tw-text-primary-default"
|
|
>{{ sub.CategoryName }}</a
|
|
>
|
|
</li></template>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="vertical-line"></span>
|
|
<div
|
|
class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-3"
|
|
>
|
|
<a
|
|
:href="localePath(`/service`)"
|
|
:class="[
|
|
'tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default',
|
|
$route.path.match('\/service') ? 'tw-text-primary-default' : '',
|
|
]"
|
|
>
|
|
{{ $t("All Services") }}</a
|
|
>
|
|
<div v-if="serviceCategoryList.length>0"
|
|
class="customDropMenu services tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] -tw-mb-[60px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
|
|
>
|
|
<ul
|
|
v-for="(item, index) in serviceCategoryList"
|
|
:key="item.CategoryID"
|
|
class="tw-list-none tw-mb-0 tw-mr-[40px] tw-h-auto tw-break-inside-avoid"
|
|
>
|
|
<li class="tw-list-none">
|
|
<a
|
|
:href="localePath(`/service?category=${item.CategoryID}`)"
|
|
class="tw-block tw-mb-[16px] tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-body-4 tw-font-normal tw-text-primary-default hover:tw-text-primary-default"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
class="tw-my-auto"
|
|
shape-rendering="geometricPrecision"
|
|
v-if="serviceListIcon[index] !== undefined"
|
|
>
|
|
<image
|
|
:xlink:href="
|
|
require(`@/assets/svg/${serviceListIcon[index]}.svg`)
|
|
"
|
|
:src="
|
|
require(`@/assets/svg/${serviceListIcon[index]}.svg`)
|
|
"
|
|
width="16"
|
|
height="16"
|
|
/>
|
|
</svg>
|
|
<div v-else></div>
|
|
<span>{{ item.CategoryName }}</span>
|
|
</a>
|
|
<ul
|
|
class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[16px] tw-p-0"
|
|
>
|
|
<li
|
|
v-for="(sub, index) in item.SubCategoryList"
|
|
:key="index"
|
|
class="tw-list-none"
|
|
>
|
|
<a
|
|
:href="localePath(`/service?subcatg=${sub.CategoryID}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default"
|
|
>{{ sub.CategoryName }}</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<div class="tw-h-[60px]"></div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref="headerSwiper"
|
|
class="swiper-container headerService tw-w-full tw-overflow-hidden tw-relative tw-max-w-[1008px] tw-ml-[25px] tw-transition-all tw-duration-200 tw-delay-75 tw-ease-in"
|
|
>
|
|
<div class="swiper-wrapper">
|
|
<div
|
|
class="swiper-slide customMenuLink tw-relative tw-justify-start tw-items-center tw-w-auto"
|
|
v-for="item in serviceList"
|
|
:key="item.id"
|
|
>
|
|
<a
|
|
:href="localePath(`/service?taiwan=${item.id}`)"
|
|
class="tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default tw-whitespace-nowrap"
|
|
>{{ $t(item.name) }}</a
|
|
>
|
|
<ul v-if="item.SubServiceList && item.SubServiceList.length>0"
|
|
class="customDropMenu oneType tw-grid-cols-1 tw-gap-[16px] tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
|
|
>
|
|
<li
|
|
v-for="(sub, index) in item.SubServiceList"
|
|
:key="index"
|
|
class="tw-list-none"
|
|
>
|
|
<a
|
|
:href="localePath(`/service?subcatg=${sub.id}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-black hover:tw-text-primary-default"
|
|
>{{ sub.name }}</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'swiper-button-prev headerService tw-text-black tw-hidden',
|
|
headerServiceSwiper
|
|
? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
|
|
: '',
|
|
]"
|
|
></div>
|
|
<div
|
|
:class="[
|
|
'swiper-button-next headerService tw-text-black tw-hidden',
|
|
headerServiceSwiper
|
|
? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
|
|
: '',
|
|
]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Drawer
|
|
:serviceCategory.sync="serviceCategoryList"
|
|
:exhibitionsCategory.sync="exhibitionsCategoryList"
|
|
:serviceListIcon="serviceListIcon"
|
|
:exhibitionListIcon="exhibitionListIcon"
|
|
@changeLang="changeLang()"
|
|
/>
|
|
<SearchDialog
|
|
ref="searchDialog"
|
|
:exhibitionsCategoryList="exhibitionsCategoryList"
|
|
:exhibitionsLocations="exhibitionsLocations"
|
|
:exhibitionListIcon="exhibitionListIcon"
|
|
:exhibitionsCategories="exhibitionsCategories"
|
|
:servicesLocations="servicesLocations"
|
|
:servicesSearchs="servicesSearchs"
|
|
:populars="populars"
|
|
@loaading="isPageLoading = true"
|
|
/>
|
|
<mobileUserInfoPopup
|
|
v-show="width < 1366"
|
|
:show="UserInfoPopup"
|
|
:width="width"
|
|
@popup="UserInfoPopup = $event"
|
|
>
|
|
</mobileUserInfoPopup>
|
|
<loading :isLoading="isPageLoading"></loading>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Search from "@/components/home/headerInlineSearch";
|
|
import Drawer from "@/components/newDrawer";
|
|
import SearchDialog from "@/components/SearchDialog";
|
|
import mobileUserInfoPopup from "@/components/mobileUserInfoPopup.vue";
|
|
import { SettingsIcon } from "vue-feather-icons";
|
|
// import jwt_decode from "authtoken-decode";
|
|
import loading from "@/components/newComponent/loading/loading.vue";
|
|
import changeCurrency from "@/components/dropdown/changeCurrencyWeb.vue";
|
|
import Swiper from "swiper/bundle";
|
|
// import { getCurrentTime } from "~/utils/assist";
|
|
import { getFirstName } from "~/utils/common";
|
|
|
|
// import { handler } from "@tailwindcss/line-clamp";
|
|
export default {
|
|
components: {
|
|
Drawer,
|
|
Search,
|
|
SettingsIcon,
|
|
SearchDialog,
|
|
mobileUserInfoPopup,
|
|
loading,
|
|
changeCurrency,
|
|
Swiper,
|
|
},
|
|
data() {
|
|
return {
|
|
disabled: true,
|
|
langShow: false,
|
|
show: false,
|
|
bigSearch: false,
|
|
userPicture: "",
|
|
showNavSearch: true,
|
|
servicesSearchs: [],
|
|
servicesLocations: [],
|
|
serviceCategoryList: [],
|
|
serviceList: [{
|
|
id: 'taiwan',
|
|
name: 'Onsite Service',
|
|
SubServiceList: []
|
|
}],
|
|
serviceListIcon: [
|
|
"Booth",
|
|
"Exhibit",
|
|
"event",
|
|
"Marketing",
|
|
"journey",
|
|
"human",
|
|
"service_others",
|
|
],
|
|
exhibitionsCategoryList: [],
|
|
exhibitionsSearchs: [],
|
|
exhibitionsLocations: [],
|
|
exhibitionsCategories: [],
|
|
exhibitionListIcon: [
|
|
"rawMaterial",
|
|
"aeroSpace",
|
|
"energy",
|
|
"autoMobile",
|
|
"electronics",
|
|
"contrucstion",
|
|
"security",
|
|
"Machinary",
|
|
"Medical",
|
|
"education",
|
|
"textile",
|
|
"food",
|
|
"entertainment",
|
|
"consumer",
|
|
"others",
|
|
],
|
|
populars: {},
|
|
exhibitionActiveIndex: 0,
|
|
width: undefined,
|
|
drawer: false,
|
|
group: null,
|
|
isPageLoading: false,
|
|
UserInfoPopup: false,
|
|
headerServiceSwiper: null,
|
|
offsetLeft: 0,
|
|
top: 0,
|
|
TAIWAN_ID: 18,
|
|
JAPAN_ID: 16,
|
|
ITALY_ID: 31,
|
|
};
|
|
},
|
|
async created() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
if (!this.$route) return;
|
|
if (!this.$route.name) return;
|
|
const [path, lang] = this.$route.name.split("___");
|
|
if (path == "index") {
|
|
this.showNavSearch = false;
|
|
} else {
|
|
this.showNavSearch = true;
|
|
}
|
|
if (this.$auth.loggedIn) {
|
|
this.$auth.$storage.setUniversal('userPicture',"/");
|
|
}
|
|
await this.fetchUser();
|
|
// this.socialRegister();
|
|
// this.getServiceCategory();
|
|
// this.getExhibitionsCategory();
|
|
// this.getServiceHistory();
|
|
// this.getExhibitionsHistory();
|
|
// this.getServiceLocations();
|
|
// this.getExhibitionsLocations();
|
|
await this.getExhibitionsCategories();
|
|
await this.getAllServiceCategories();
|
|
await this.getLocations();
|
|
// this.getExhibitionsCollections();
|
|
// this.getPopulars();
|
|
},
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
window.addEventListener("resize", this.onResize);
|
|
vm.initSwiper();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.onResize);
|
|
},
|
|
computed: {
|
|
windowWidth() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
return this.width;
|
|
},
|
|
pictureStatus() {
|
|
return this.$store.getters.getPictureStatus;
|
|
},
|
|
registerStatus() {
|
|
return this.$store.getters.getRegisterStatus;
|
|
},
|
|
lang() {
|
|
return this.$i18n.localeProperties["langQuery"];
|
|
},
|
|
},
|
|
watch: {
|
|
group: {
|
|
handler: function () {
|
|
this.drawer = false;
|
|
},
|
|
},
|
|
$route: {
|
|
handler: function (to, from) {
|
|
if (!to) return;
|
|
if (!to.name) return;
|
|
const [path, lang] = to.name.split("___");
|
|
if (path == "index") {
|
|
this.showNavSearch = false;
|
|
} else {
|
|
this.showNavSearch = true;
|
|
}
|
|
if (path === "exhibition") {
|
|
this.isPageLoading = false;
|
|
}
|
|
if (path === "service") {
|
|
this.isPageLoading = false;
|
|
}
|
|
|
|
if (to != from) {
|
|
this.bigSearch = false;
|
|
}
|
|
},
|
|
},
|
|
pictureStatus: {
|
|
handler: async function (newVal, oldVal) {
|
|
await this.fetchUser();
|
|
this.$forceUpdate();
|
|
},
|
|
},
|
|
registerStatus: {
|
|
handler: function (newVal, oldVal) {
|
|
// this.socialRegister();
|
|
},
|
|
},
|
|
lang: {
|
|
handler: async function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.$refs.dropdown.style.opacity = 0;
|
|
// this.getServiceCategory();
|
|
// this.getExhibitionsCategory();
|
|
// this.getServiceHistory();
|
|
// this.getExhibitionsHistory();
|
|
// this.getServiceLocations();
|
|
// this.getExhibitionsLocations();
|
|
await this.getExhibitionsCategories();
|
|
await this.getAllServiceCategories();
|
|
await this.getLocations();
|
|
// this.getExhibitionsCollections();
|
|
this.initSwiper();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
Search(str) {
|
|
console.log(str)
|
|
|
|
const currentVal = this.$route.query.q;
|
|
|
|
if(currentVal === str){
|
|
this.isPageLoading = false
|
|
}else{
|
|
this.isPageLoading = true
|
|
}
|
|
|
|
// setTimeout(()=> {
|
|
// this.isPageLoading = false
|
|
// },3000);
|
|
|
|
},
|
|
clickOutSide() {
|
|
this.show = false;
|
|
this.UserInfoPopup = false;
|
|
},
|
|
onResize() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
clickMenu() {
|
|
if (this.windowWidth < 1366) {
|
|
this.$store.dispatch("toggleDrawer", true);
|
|
}
|
|
},
|
|
clickSearch() {
|
|
this.$store.dispatch("toggleSearchDialog", true);
|
|
},
|
|
initSwiper() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
vm.headerServiceSwiper = new Swiper(".swiper-container.headerService", {
|
|
direction: "horizontal",
|
|
initialSlide: 0,
|
|
observer: true,
|
|
observeParents: true,
|
|
rebuildOnUpdate: true,
|
|
slidesPerView: "auto",
|
|
spaceBetween: 25,
|
|
watchSlidesVisibility: true,
|
|
slideVisibleClass: "swiper-slide-visible",
|
|
allowTouchMove: false,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next.headerService",
|
|
prevEl: ".swiper-button-prev.headerService",
|
|
},
|
|
});
|
|
vm.headerServiceSwiper.init();
|
|
vm.headerServiceSwiper.update();
|
|
// this.$refs.headerSwiper.style.opacity = 1;
|
|
vm.$refs.dropdown.style.opacity = 1;
|
|
});
|
|
},
|
|
async fetchUser() {
|
|
if (this.$auth.loggedIn) {
|
|
await this.$axios
|
|
.get(`/trending/api/members/info`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data){
|
|
if(data.MemberPicture){
|
|
this.userPicture = data.MemberPicture;
|
|
this.$auth.$storage.setUniversal("userPicture", data.MemberPicture);
|
|
}else{
|
|
this.userPicture = "";
|
|
this.$auth.$storage.removeUniversal("userPicture");
|
|
}
|
|
if(data.LastName){
|
|
let arr = getFirstName(data.LastName,this.$i18n.localeProperties["langQuery"]);
|
|
let name = arr[0];
|
|
let isLetter = arr[1];
|
|
this.$auth.$storage.setUniversal("userLastName", name);
|
|
this.$auth.$storage.setUniversal("isLetter", isLetter);
|
|
}else{
|
|
this.$auth.$storage.removeUniversal("isLetter");
|
|
this.$auth.$storage.removeUniversal("userLastName");
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
});
|
|
}
|
|
},
|
|
async getAllServiceCategories() {
|
|
await this.$axios
|
|
.get(`/trending/api/Onsite/Categories?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.serviceCategoryList = data;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) =>
|
|
console.log(error)
|
|
);
|
|
},
|
|
// getExhibitionsCategory() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
|
|
// )
|
|
// .then((result) => {
|
|
// this.exhibitionsCategoryList = result.data.sort_results;
|
|
// this.exhibitionsCategoryList = this.exhibitionsCategoryList.map(
|
|
// (item) => {
|
|
// item.subcategories_list = item.subcategories_list.map(
|
|
// (children) => {
|
|
// return {
|
|
// id: children.subcategory_id,
|
|
// title: children.subcategory_name,
|
|
// key: children.subcategory_name,
|
|
// type: "subcategory",
|
|
// };
|
|
// }
|
|
// );
|
|
// return {
|
|
// id: item.categories_id,
|
|
// title: item.category_name,
|
|
// key: item.category_name,
|
|
// type: "category",
|
|
// subcategory: item.subcategories_list,
|
|
// };
|
|
// }
|
|
// );
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
// },
|
|
// getServiceHistory() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/trending/services/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
// )
|
|
// .then((response) => {
|
|
// this.servicesSearchs = response.data.searches;
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
// },
|
|
// getExhibitionsHistory() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/trending/exhibitions/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
// )
|
|
// .then((response) => {
|
|
// this.exhibitionsSearchs = response.data.searches;
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
// },
|
|
// getServiceLocations() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/trending/services/locations?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
// )
|
|
// .then((response) => {
|
|
// this.servicesLocations = response.data.locations;
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
// },
|
|
// getExhibitionsLocations() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/trending/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
// )
|
|
// .then((response) => {
|
|
// this.exhibitionsLocations = response.data.locations;
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
// },
|
|
async getExhibitionsCategories() {
|
|
await this.$axios
|
|
.get(`/trending/api/Exhibition/Categories?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.exhibitionsCategoryList = data;
|
|
this.exhibitionsCategories = data;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) =>
|
|
console.log(error)
|
|
);
|
|
},
|
|
getLocations() {
|
|
this.$axios
|
|
.get(`/trending/api/Exhibition/Locations?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data){
|
|
this.exhibitionsLocations = data;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) =>
|
|
console.log(error)
|
|
);
|
|
},
|
|
// getExhibitionsCollections() {
|
|
// this.$axios
|
|
// .get(
|
|
// `/trending/exhibitions/collections?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
// )
|
|
// .then((response) => {
|
|
// this.collections = response.data.collections;
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
// },
|
|
async changeLang() {
|
|
// this.getServiceCategory();
|
|
// this.getExhibitionsCategory();
|
|
// this.getServiceHistory();
|
|
// this.getExhibitionsHistory();
|
|
// this.getServiceLocations();
|
|
// this.getExhibitionsLocations();
|
|
await this.getExhibitionsCategories();
|
|
// this.getExhibitionsCollections();
|
|
},
|
|
async getPopulars() {
|
|
await this.$axios
|
|
.get(
|
|
`/trending/search/popular?lang=${this.$i18n.localeProperties["langQuery"]}`
|
|
)
|
|
.then((response) => {
|
|
this.populars = response.data;
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
logout() {
|
|
this.$auth.$storage.removeUniversal("authtoken");
|
|
this.$auth.$storage.removeUniversal("userPicture");
|
|
this.$auth.$storage.removeUniversal("userLastName");
|
|
this.$auth.$storage.removeUniversal("userBeforePath");
|
|
if (this.width < 1024) {
|
|
this.$router.push(this.localePath("/"));
|
|
} else {
|
|
this.$router.push(this.localePath("/user"));
|
|
}
|
|
this.$auth.logout();
|
|
this.$nuxt.refresh();
|
|
this.UserInfoPopup = false;
|
|
},
|
|
toUser(){
|
|
this.$auth.$storage.removeUniversal("authtoken");
|
|
this.$auth.$storage.removeUniversal("userPicture");
|
|
this.$auth.$storage.removeUniversal("userLastName");
|
|
this.$auth.$storage.removeUniversal("userBeforePath");
|
|
this.$router.push(this.localePath("/user"));
|
|
this.$auth.logout();
|
|
this.$nuxt.refresh();
|
|
this.UserInfoPopup = false;
|
|
},
|
|
langClickOutSide() {
|
|
this.langShow = false;
|
|
},
|
|
// socialRegister() {
|
|
// if (this.$auth.loggedIn) {
|
|
// const jsonPayload =
|
|
// this.$auth.$storage.getUniversal("authtoken") &&
|
|
// this.$auth.$storage.getUniversal("authtoken").token != undefined
|
|
// ? jwt_decode(this.$auth.$storage.getUniversal("authtoken").token)
|
|
// : { ueid: "" };
|
|
// if (
|
|
// this.$auth.$state.strategy === "google" ||
|
|
// this.$auth.$state.strategy === "facebook"
|
|
// )
|
|
// {
|
|
// const userData = {
|
|
// social_id:
|
|
// this.$auth.$state.strategy === "google"
|
|
// ? this.$auth.$state.user.sub
|
|
// : this.$auth.$state.user.id,
|
|
// first_name:
|
|
// this.$auth.$state.strategy === "google"
|
|
// ? this.$auth.$state.user.given_name
|
|
// : this.$auth.$state.user.first_name,
|
|
// last_name:
|
|
// this.$auth.$state.strategy === "google"
|
|
// ? this.$auth.$state.user.family_name
|
|
// : this.$auth.$state.user.last_name,
|
|
// email: this.$auth.$state.user.email,
|
|
// picture:
|
|
// this.$auth.$state.strategy === "google"
|
|
// ? this.$auth.$state.user.picture
|
|
// : this.$auth.$state.user.picture.data.url,
|
|
// social_schema: this.$auth.$state.strategy,
|
|
// };
|
|
// jsonPayload.ueid != ""
|
|
// ? (userData.user_id = JSON.parse(jsonPayload.ueid))
|
|
// : "";
|
|
// this.$axios
|
|
// .post("/member/users/social", userData)
|
|
// .then((result) => {
|
|
// this.$auth.$storage.setUniversal("authtoken", result.data, true);
|
|
// this.$store.dispatch("updatePicture");
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
// }
|
|
// this.$store.dispatch("updatePicture");
|
|
// }
|
|
// },
|
|
// toShowList(countryId) {
|
|
// if (countryId > 0) {
|
|
// this.$router.push(this.localePath(`/exhibition?country=${countryId}`));
|
|
// } else {
|
|
// this.$router.push(this.localePath(`/exhibition`));
|
|
// }
|
|
// this.isPageLoading = true;
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-menu__content {
|
|
box-shadow: none;
|
|
min-width: 186px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v-list-item {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
color: #232323 !important;
|
|
}
|
|
|
|
.navBar-row2 {
|
|
opacity: 0;
|
|
grid-template-columns: fit-content(70px) 50px fit-content(90px) auto;
|
|
}
|
|
|
|
.navBar-row2 {
|
|
opacity: 0;
|
|
grid-template-columns: fit-content(70px) 50px fit-content(90px) auto;
|
|
}
|
|
|
|
.vertical-line {
|
|
display: inline-block;
|
|
border-left: 1.5px solid;
|
|
margin: 5px 20px 5px 20px;
|
|
height: 15px;
|
|
}
|
|
|
|
:deep(.v-toolbar__content) {
|
|
max-width: 1366px;
|
|
width: 1366px;
|
|
}
|
|
|
|
.user-picture-container {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.user-picture-border {
|
|
border: 1px solid #f5cda8;
|
|
}
|
|
|
|
.user-no-picture-border {
|
|
border: 2px solid #f5cda8;
|
|
}
|
|
|
|
.user-no-picture-font {
|
|
font-family: "DM Sans";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.v-btn:before {
|
|
background-color: rgba(238, 149, 70, 0.6) !important;
|
|
font-color: #ee9546;
|
|
}
|
|
|
|
.on-top {
|
|
z-index: 500;
|
|
}
|
|
|
|
.customMenuLink {
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 150%;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0;
|
|
}
|
|
|
|
&:hover {
|
|
.customDropMenu {
|
|
display: block;
|
|
|
|
&.oneType {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.customDropMenu {
|
|
column-count: 4;
|
|
display: none;
|
|
|
|
&.exhibition {
|
|
column-count: initial;
|
|
column-gap: initial;
|
|
}
|
|
|
|
&.services {
|
|
column-count: 3;
|
|
column-gap: 30px;
|
|
}
|
|
|
|
&.oneType {
|
|
column-count: 1;
|
|
column-gap: 30px;
|
|
}
|
|
|
|
> ul {
|
|
&:last-of-type {
|
|
> div {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-button {
|
|
&-prev {
|
|
left: 0;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 60px;
|
|
height: 100%;
|
|
background-image: url("~/assets/svg/swiper_linear.svg");
|
|
// background-image: linear-gradient(to left, transparent, #fff);
|
|
position: absolute;
|
|
left: -6px;
|
|
top: 0;
|
|
z-index: -1;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
right: 10px;
|
|
background-image: url("~/assets/svg/left-arrow-default.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 7px 13px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
&-next {
|
|
right: 0;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 60px;
|
|
height: 100%;
|
|
background-image: url("~/assets/svg/swiper_linear.svg");
|
|
// background-image: linear-gradient(to right, transparent, #fff);
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 10px;
|
|
background-image: url("~/assets/svg/right-arrow-default.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 7px 13px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.swiper-container) {
|
|
.swiper-slide {
|
|
opacity: 0;
|
|
display: flex;
|
|
|
|
&.swiper-slide-visible {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
[aria-disabled="true"] {
|
|
opacity: 0;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.theme--light.v-list){
|
|
box-shadow: 10px 10px 5px #888888 !important;
|
|
}
|
|
|
|
.exhibitionDropdownLink {
|
|
&.active {
|
|
background-image: url("@/assets/svg/icon-arrow.svg");
|
|
background-position: right center;
|
|
background-size: 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.changeLang > div {
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
&::before {
|
|
opacity: 0.08;
|
|
// background-color: rgba(238, 149, 70, 0.6);
|
|
bottom: 0;
|
|
content: " ";
|
|
display: block;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.changeLang > div.show {
|
|
&::before {
|
|
opacity: 0.24;
|
|
background-color: rgba(238, 149, 70, 0.6);
|
|
bottom: 0;
|
|
content: " ";
|
|
display: block;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|