|
|
<template> <div class="faq-wrapper"> <div v-if="$i18n.locale == 'en'"> <div class="faq"> <client-only> <v-card flat class="rounded-0 d-flex flex-row align-center" :class="width > breakPoint ? 'justify-space-around' : 'justify-center'" style="background: #f7ede4" width="100%" :height="width > 960 ? '276' : width > 550 ? '220' : '149'"> <v-img :max-width="width > breakPoint ? 175 : 84" min-width="84" height="178" contain :class="width > breakPoint ? 'mr-3' : 'align-self-end ml-n5 mr-10'" :src="require('~/assets/img/faq1.png')"> </v-img> <v-card flat color="transparent" class="primary--text text-center"> <div style="font-weight: 700" :style="width > breakPoint ? ' font-size: 30px' : 'font-size: 18px;'" class="mb-3"> How Can We Help You? </div> <div :style="width > breakPoint ? ' font-size: 16px' : 'font-size: 12px;'"> Got a question? We’re here to answer!<br /> <span v-show="width > 870">If you don’t see your question here, please contact us.</span> </div> </v-card> <v-img max-width="175" min-width="175" height="178" v-show="width > 870" contain :src="require('~/assets/img/faq2.png')"></v-img> </v-card> </client-only> <client-only> <v-card width="100%" height="auto" style="background: #f8f8f8" class="d-flex justify-center" flat> <v-card flat color="transparent" :width="width > breakPoint ? '960' : '434'" height="auto" class="px-10" style="margin: 80px 0px">
<div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[0])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> ShowEasy Service </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 2" :key="i"> <v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : How do I search for events? </div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : How do I add events to my wishlist (my favorites)? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> You can search the events by using the "searching bar" on the homepage of ShowEasy, you can also use "country/city" or "category" to search for the events. </p> <p> You can use "filter" on the left side of the "exhibitions page" to narrow down your searching range. The results will be showing on the right side of the page. </p> <p> The results can be sort by "date", "popularity", "interested", and "rating" in order to find a perfect match for you. </p> </div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]" style="margin:20px;"> <p> There is a heart shape "like" button on the page of every event's information, you may like these events that you are interested in after logging in to your account and these events will appear in "my favorites". You may also like these events on their own information page. </p> <p> If you want to check the events that you have liked, click "my favorites" to compare or to unlike (click the heart shape button again to unlike). </p> </div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[1])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> Sign Up </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 3" :key="i">
<v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : How do I sign up for ShowEasy account?
</div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : What benefits can I get after signing up for ShowEasy account? </div> <div v-if="i == 2" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q3 : Why didn't I receive any email or confirmation code? </div>
</v-expansion-panel-header>
<v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> It's totally free to <a href="/user" class="text-decoration-none">sign up</a> for ShowEasy account, here are the ways:
</p> <p> 【By using『Google』or『Facebook』account】 <ol> <li>From ShowEasy homepage, click the "login/ sign up" button on the upper right side, choose『Google』or『Facebook』to log in.</li> <li>After logging in to your account (Google or Facebook), the system will have your email address and other information from the social platform you have chosen.</li> <li>Fill in other required columns, read and agree the policy, then click "submit"</li> </ol> </p> <p> 【By using email address】 <ol> <li>From ShowEasy homepage, click "log in/ sign up" on the upper right side, then click "sign up now"</li> <li>Enter your email address, name, phone number, password etc., read and agree the policy, click "submit"</li> <li>You will receive a confirmation mail, click "member verification"</li> <li>You may now log in to your account from ShowEasy homepage!</li> </ol> </p>
</div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> As long as you are a member of ShowEasy, you may use all the convenient services that ShowEasy provides! </p> <p> Including: my favorites, reviews, price enquiry, tickets purchase etc. </p> <p> There will be some surprises waiting for you in the future! </p>
</div> </div> <div v-if="i == 2"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <ul> <li> I didn't receive any email Please go check your "junk" first, sometimes your email server may misjudge ShowEasy's message as junk mail. </li> <p class="tw-mt-[15px]"> We suggest you remove our mail from "junk" and add <span class="primary--text">info@showeasy.com</span> to your contact in order to avoid this kind of incident. </p> <li> I entered my email address but I didn't receive the confirmation code... Please wait for a few minutes, we suggest you to re-enter your email address if you still didn't receive it, or contact us directly. </li>
<p class="tw-mt-[15px]"> 【Contact】<br /> Monday-Friday 09:00-17:50<br /> Tel : 02-2725-5000<br /> Email : info@showeasy.com </p> </ul> </div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[2])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> Account Settings </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 3" :key="i">
<v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : How can I reset my password if I forget it? </div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : How can I change my password? </div> <div v-if="i == 2" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q3 : How can I edit my personal information? </div>
</v-expansion-panel-header>
<v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> Click 【Login】->【Forget password?】-> enter the email address you signed up for ShowEasy account -> you will receive an email with the link to reset your password, follow the following steps then you can reset your password
</p> <p> Remember your new password when you log in next time!
</p>
</div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> After logging in to your account, click the button on the upper right side ->【settings】->【edit】in password column->once your changes are complete, click 【submit】
</p>
</div> </div> <div v-if="i == 2"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> After logging in to your account, click the button on the upper right side, then you can modify your profile and other information.
</p> <p> Once your changes are complete, click on the【save】 button on the bottom of the page.
</p>
</div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mb-[298px] tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[3])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> Contact </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 1" :key="i">
<v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q: How to contact ShowEasy? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> If you have any questions about ShowEasy, we are pleased to receive your call during our service hours: </p> <p> Monday-Friday 09:00-18:00 (GMT+8)<br /> Tel: 02-2725-5000<br /> Email: info@showeasy.com<br /> </p> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> </v-card> </v-card> </client-only> </div> </div> <div v-if="$i18n.locale == 'zh-tw'"> <div class="faq"> <client-only> <v-card flat class="rounded-0 d-flex flex-row align-center" :class="width > breakPoint ? 'justify-space-around' : 'justify-center'" style="background: #f7ede4" width="100%" :height="width > 960 ? '276' : width > 550 ? '220' : '149'"> <v-img :max-width="width > breakPoint ? 175 : 84" min-width="84" height="178" contain :class="width > breakPoint ? 'mr-3' : 'align-self-end ml-n5 mr-10'" :src="require('~/assets/img/faq1.png')"> </v-img> <v-card flat color="transparent" class="primary--text text-center"> <div style="font-weight: 700" :style="width > breakPoint ? ' font-size: 30px' : 'font-size: 18px;'" class="mb-3"> {{ $t('How Can We Help You?') }} </div> <div :style="width > breakPoint ? ' font-size: 16px' : 'font-size: 12px;'"> {{ $t('Got a question? We’re here to answer!') }}<br /> <span v-show="width > 870">{{ $t('If you don’t see your question here, please contact us.') }}</span> </div> </v-card> <v-img max-width="175" min-width="175" height="178" v-show="width > 870" contain :src="require('~/assets/img/faq2.png')"></v-img> </v-card> </client-only>
<client-only> <v-card width="100%" height="auto" style="background: #f8f8f8" class="d-flex justify-center" flat> <v-card flat color="transparent" :width="width > breakPoint ? '960' : '434'" height="auto" class="px-10" style="margin: 80px 0px">
<div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[0])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> ShowEasy服務 </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 2" :key="i"> <v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : 如何使用搜尋展覽？ </div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : 如何收藏展覽? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 進入ShowEasy首頁後，可以直接在『搜尋欄』填上您想找的展覽名稱 , 或是運用『國家/城市』及『產業別』進行搜尋。 </p> <p> 在『展覽列表』頁面 , 您也可以利用勾選左側的篩選條件來縮小您的搜尋範圍，結果將同步於右側清單欄位。 </p> <p> 搜尋結果上方亦可依排序條件，如展期、熱門程度、收藏數等進行排序，以便找到最適合您的展覽。 </p>
</div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 每個展覽介紹都有個愛心符號，登入會員點選愛心成為實心後，該展覽將列入您的收藏清單，您也可以在個別展覽頁面按下『加入收藏』按鈕。 </p> <p> 若要查看已收藏的展覽，可以進入『我的收藏』查看比較，若要取消，請再次點選愛心符號，即可取消收藏。 </p>
</div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[1])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> 註冊會員 </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 3" :key="i"> <v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : 如何註冊成為ShowEasy會員? </div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : 註冊會員有什麼好處? </div> <div v-if="i == 2" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q3 : 為什麼沒有收到email或驗證碼? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 建立<a href="/user" class="text-decoration-none">ShowEasy會員帳號</a>完全免費，您可透過以下方式進行： </p> <p> 【使用『Google』或『Facebook』帳號登入】 <ol> <li>進入showeasy.com，點選右上方『登入/註冊』，選擇右邊使用『Google』或『Facebook』帳號登入。</li> <li>輸入您在上述平台的帳號及密碼後 , 系統自動帶入您的電子郵件及在平台上的資料。</li> <li>補上其他必填欄位，詳閱相關條款勾選後 , 點選『確認送出』即可使用。</li> </ol> </p> <p> 【使用email註冊】 <ol> <li>進入showeasy.com，點選右上方『登入/註冊』，選擇下方『立即註冊』。</li> <li>填寫您的電子信箱、姓名、手機以及密碼等欄位，詳閱相關條款勾選後 , 點選『確認送出』。</li> <li>至您的電子信箱內查收驗證信件，點選信件『會員驗證』。</li> <li>至showeasy.com點選右上方『登入/註冊』，輸入您的帳號密碼登入後即可使用。</li> </ol> </p> </div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 只要您註冊成為ShowEasy會員，即可享有【ShowEasy平台】所提供的各種便利服務。 </p> <p> 包括：收藏展覽、評論功能、商品詢價、票券訂購等功能、 </p> <p> 未來可能還會有不定期的驚喜! </p> </div> </div> <div v-if="i == 2"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <ul> <li> 沒有收到email 請先至「垃圾郵件」確認 , 有時候您的電子信箱可能將ShowEasy的訊息誤判為垃圾信。 </li> <p class="tw-mt-[15px]"> 為了避免再次發生這種情況，建議您可以將我們的郵件從垃圾箱移到「收件匣」，並將 <span class="primary--text">info@showeasy.com</span>添加至您的通訊錄。 </p> <li> 填入電子郵件後，等不到驗證碼? 可稍待幾分鐘等候系統發出，如依然未收到，建議您可以重新輸入帳號再次嘗試，或與我們聯絡。 </li> <p class="tw-mt-[15px]"> 【聯絡資訊】<br /> 週一到週五 9:00-17:50<br /> Tel : 02-2725-5000<br /> Email : info@showeasy.com </p> </ul> </div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[2])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> 會員帳號設定 </div> </div> <v-expansion-panels multiple accordion style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 3" :key="i"> <v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q1 : 忘記密碼怎麼辦? </div> <div v-if="i == 1" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q2 : 如何更改個人資料? </div> <div v-if="i == 2" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q3 : 如何重設密碼? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div v-if="i == 0"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> <ul> <li> 請於登入畫面點選『忘記密碼』。 </li> <li> 輸入您註冊ShowEasy帳號時所使用的電子郵件。 </li> <li> 您將收到一封含有重置密碼的連結，點入後依步驟即可進行密碼修改。 </li> <li> 請記錄您的新密碼供下次登入時使用。 </li> </ul> </p> </div> </div> <div v-if="i == 1"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 您可以登入會員後，點選右上方個人帳號名稱，即可在『個人資料管理』中進行修改。 更改完成後，請點擊頁面最下方『儲存』。 </p> </div> </div> <div v-if="i == 2"> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 您可以登入會員後，點選右上方個人帳號名稱－＞『登入管理』－＞『修改密碼』即可進行修改。 </p> <p> 更改完成後，請點擊『確認送出』。 </p> </div> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> <div class="tw-mb-[298px] tw-mt-[70.5px]"> <div class="d-flex flex-row justify-start"> <v-img max-width="24" max-height="24" contain class="mr-4" :src="require('~/assets/svg/' + icons[3])"> </v-img> <div style="font-weight: 700" :style=" width > breakPoint ? 'font-size: 18px;' : 'font-size: 14px;' " class="mb-5"> 聯絡資訊 </div> </div> <v-expansion-panels multiple :accordion="customAccordion" style="border-radius: 20px;"> <v-expansion-panel v-for="(item, i) in 1" :key="i"> <v-expansion-panel-header class="t16"> <template v-slot:actions> <v-icon color="primary" class="tw-mr-[48.88px]"> $expand </v-icon> </template> <div v-if="i == 0" class="tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> Q: 如何聯絡ShowEasy? </div> </v-expansion-panel-header> <v-expansion-panel-content> <div class="t12 tw-ml-[40px] tw-mr-[40px] tw-mt-[21.5px] tw-mb-[21.5px]"> <p> 如果對ShowEasy有任何疑問，歡迎在我們上班時間來電洽詢！ </p> <p> Tel: 02-2725-5000（週一到週五 9:00-18:00)<br /> Email: info@showeasy.com <br /> </p> </div> </v-expansion-panel-content> </v-expansion-panel> </v-expansion-panels> </div> </v-card> </v-card> </client-only> </div> </div> </div></template>
<script>export default { auth: false, data() { return {
icons: ["gear.svg", "sign-up.svg", "setting.svg", "mail.svg"], panels: [-1, -1, -1, -1], width: undefined, breakPoint: 550, }; }, created() { if (process.client) { this.width = window.innerWidth; } }, mounted() { this.$nextTick(() => { window.addEventListener("resize", this.onResize); }); }, beforeDestroy() { window.removeEventListener("resize", this.onResize); }, methods: { panelHandle(cardIdx, itemIdx) { for (let i = 0; i < 4; i++) { if (i == cardIdx) { this.$set(this.panels, i, itemIdx); } else { this.$set(this.panels, i, -1); } } }, onResize() { if (process.client) { this.width = window.innerWidth; } }, },};</script>
<style lang="scss" scoped>p {
list-style: none; margin-bottom: 15px; white-space: initial;
}
.v-expansion-panel { &::before { box-shadow: none; border-bottom: 500px; }
}
.theme--light .v-expansion-panels .v-expansion-panel:not(:first-child) { &::after { margin-left: 30px; margin-right: 30px; }}</style>
|
