Merge pull request #422 from pycontw/fix/ui-venue

feat: ui venue change
pycontw · Aug 4, 2023 · ef0da5b · ef0da5b
2 parents 7b725c8 + c33f27d
commit ef0da5b
Show file tree

Hide file tree

Showing 12 changed files with 473 additions and 194 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+14.18.1
diff --git a/components/venue/VenueDivision.vue b/components/venue/VenueDivision.vue
@@ -0,0 +1,65 @@
+<template>
+    <div
+        class="venue-division flex items-center justify-center overflow-hidden whitespace-nowrap pt-6 text-primary-500 md:pb-10 md:pt-16"
+    >
+        <div class="venue-division-container mx-[10px] flex-1">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'VenueDivision',
+}
+</script>
+
+<style lang="postcss" scoped>
+.venue-division {
+    & >>> h3 {
+        padding: 0 14px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+            position: absolute;
+            content: '';
+            left: -10px;
+            transform: translateX(-100%);
+            border: 4px solid #9387ff;
+            display: inline-block;
+            border-radius: 50%;
+        }
+
+        &::after {
+            position: absolute;
+            content: '';
+            right: -10px;
+            transform: translateX(100%);
+            border: 4px solid #9387ff;
+            display: inline-block;
+            border-radius: 50%;
+        }
+
+        margin: 0;
+    }
+
+    &::before {
+        max-width: 336px;
+        content: '';
+        width: 100%;
+        border-top: 1px solid #9387ff;
+        display: inline-block;
+    }
+
+    &::after {
+        max-width: 336px;
+        width: 100%;
+        content: '';
+        border-top: 1px solid #9387ff;
+        display: inline-block;
+    }
+}
+</style>
diff --git a/components/venue/VenueDriveTab.vue b/components/venue/VenueDriveTab.vue
@@ -12,27 +12,19 @@
                 </span>
             </div>
             <div class="md:flex md:flex-1 md:justify-center">
-                <div class="md:flex md:flex-col">
+                <div class="pt-6 text-center md:flex md:flex-col md:pt-0">
                     <i18n
                         path="carInstructions.description"
                         tag="span"
                         class="md:my-2"
                     >
                         <a
-                            href="https://goo.gl/maps/HfVQkZULCWNs4tfz6"
+                            :href="carDestinationLink"
                             class="text-pink-500 underline"
                             target="_blank"
                             >{{ $t('carInstructions.destination') }}</a
                         >
                     </i18n>
-                    <ol class="ml-[20px] list-decimal pt-6 md:pt-0">
-                        <li
-                            v-for="carInstruction in carInstructions"
-                            :key="carInstruction"
-                        >
-                            {{ carInstruction }}
-                        </li>
-                    </ol>
                 </div>
             </div>
 
@@ -46,15 +38,12 @@
                 <span> {{ $t('carInstructions.footerTitle') }} </span>
             </div>
         </div>
-
-        <div class="parkingInfo pt-6 md:pb-10 md:pt-16">
-            <div class="parkingInfo-container flex-1">
-                <h3>
-                    <img class="mr-1" :src="icon.parkingPink" />
-                    {{ $t('parkingInfo.title') }}
-                </h3>
-            </div>
-        </div>
+        <VenueDivision>
+            <h3>
+                <img class="mr-1" :src="icon.parkingPink" />
+                {{ $t('parkingInfo.title') }}
+            </h3>
+        </VenueDivision>
         <div class="md:flex md:gap-10">
             <div class="md:flex-1">
                 <div class="flex items-center pt-6 md:pb-4">
@@ -63,7 +52,15 @@
                         {{ $t('parkingInfo.car.title') }}
                     </h5>
                 </div>
-                <p>{{ $t('parkingInfo.car.description') }}</p>
+                <i18n path="parkingInfo.car.description" tag="p">
+                    <a
+                        :href="parkingPlaceCarLink"
+                        class="text-pink-500"
+                        target="_blank"
+                    >
+                        {{ $t('parkingInfo.car.parkingPlace') }}
+                    </a>
+                </i18n>
             </div>
             <div class="md:flex-1">
                 <div class="flex items-center pt-6 md:pb-4">
@@ -74,32 +71,38 @@
                 </div>
                 <i18n path="parkingInfo.motor.description" tag="p">
                     <a
-                        href="https://goo.gl/maps/DnFQvhu8QiCvRgYE7"
+                        :href="parkingPlaceMotorLink[0]"
                         class="text-pink-500 underline"
                         target="_blank"
                         >{{ $t('parkingInfo.motor.descriptionLinkTitle1') }}</a
                     >
                     <a
-                        href="https://goo.gl/maps/BaJw3ufc4rfqz5wh8"
+                        :href="parkingPlaceMotorLink[1]"
                         class="text-pink-500 underline"
                         target="_blank"
                         >{{ $t('parkingInfo.motor.descriptionLinkTitle2') }}</a
                     >
                     <a
-                        href="https://goo.gl/maps/EZ4RDMZTPYwFxAvh9"
+                        :href="parkingPlaceMotorLink[2]"
                         class="text-pink-500 underline"
                         target="_blank"
                         >{{ $t('parkingInfo.motor.descriptionLinkTitle3') }}</a
                     >
                 </i18n>
 
-                <i18n path="parkingInfo.moreInfo" tag="p">
+                <i18n class="pt-10 md:pt-0" path="parkingInfo.moreInfo" tag="p">
                     <a
-                        href="https://dga.sinica.edu.tw/posts/78705"
-                        class="text-pink-500 underline"
+                        :href="parkingMoreInfoLink[0]"
+                        class="text-pink-500"
                         target="_blank"
                         >{{ $t('parkingInfo.moreInfoLinkTitle') }}</a
                     >
+                    <a
+                        :href="parkingMoreInfoLink[1]"
+                        class="text-pink-500"
+                        target="_blank"
+                        >{{ $t('parkingInfo.moreInfoLinkTitle2') }}</a
+                    >
                 </i18n>
             </div>
         </div>
@@ -108,78 +111,35 @@
 
 <script>
 import i18n from '@/i18n/venue/index.i18n'
-
+import VenueDivision from './VenueDivision.vue'
+import { venueDriveIconConfig } from './config/venueIconConfig'
 export default {
     i18n,
     name: 'VenueDriveTab',
+    components: { VenueDivision },
     data() {
         return {
-            icon: {
-                car: require('~/static/img/venue/car.svg'),
-                carWhite: require('~/static/img/venue/car-white.svg'),
-                motorWhite: require('~/static/img/venue/motor-white.svg'),
-                parking: require('~/static/img/venue/parking.svg'),
-                parkingPink: require('~/static/img/venue/parking-pink.svg'),
-                venueDestination: require('~/static/img/venue/venue-destination.svg'),
-                venueDestinationMd: require('~/static/img/venue/venue-destination-md.svg'),
-            },
-            carInstructions: [
-                this.$t('carInstructions.description1'),
-                this.$t('carInstructions.description2'),
-                this.$t('carInstructions.description3'),
+            carDestinationLink: 'https://goo.gl/maps/HfVQkZULCWNs4tfz6',
+            parkingPlaceCarLink:
+                'https://www.google.com/maps/place/%E4%B8%AD%E5%A4%AE%E7%A0%94%E7%A9%B6%E9%99%A2%E4%BA%BA%E6%96%87%E7%A4%BE%E6%9C%83%E7%A7%91%E5%AD%B8%E9%A4%A8/@25.0409679,121.6068671,17z/data=!4m7!3m6!1s0x3442ab46b3aaaaab:0x6ad0b8243ddc70ef!8m2!3d25.0409679!4d121.6113732!15sCiTkuK3lpK7noJTnqbbpmaLkurrmlofnpL7mnIPnp5HlrbjppKhaLCIq5Lit5aSuIOeglOeptiDpmaIg5Lq65paHIOekvuacgyDnp5Hlrbgg6aSokgEGc2Nob29s4AEA!16s%2Fg%2F11f50wylmj?entry=tts&shorturl=1',
+
+            parkingPlaceMotorLink: [
+                'https://goo.gl/maps/DnFQvhu8QiCvRgYE7',
+                'https://goo.gl/maps/BaJw3ufc4rfqz5wh8',
+                'https://goo.gl/maps/EZ4RDMZTPYwFxAvh9',
+            ],
+            parkingMoreInfoLink: [
+                'https://dga.sinica.edu.tw/posts/78705',
+                'https://dga.sinica.edu.tw/pages/1442',
             ],
-            parkingInfo: {
-                car: '人社館地下室設有汽車停車場，車輛進入院區持證件向大門警衛換證後可駛入院區，停車費用每小時20元。',
-            },
         }
     },
+    computed: {
+        icon() {
+            return venueDriveIconConfig[this.$i18n.locale]
+        },
+    },
 }
 </script>
 
-<style lang="postcss" scoped>
-.parkingInfo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-    color: #9387ff;
-    & >>> h3 {
-        padding: 0 14px;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &::before {
-            position: absolute;
-            content: '';
-            left: 0;
-            border: 4px solid #9387ff;
-            display: inline-block;
-            border-radius: 50%;
-        }
-        &::after {
-            position: absolute;
-            content: '';
-            right: 0;
-            border: 4px solid #9387ff;
-            display: inline-block;
-            border-radius: 50%;
-        }
-        margin: 0;
-    }
-    &::before {
-        max-width: 336px;
-        content: '';
-        width: 100%;
-        border-top: 1px solid #9387ff;
-        display: inline-block;
-    }
-    &::after {
-        max-width: 336px;
-        width: 100%;
-        content: '';
-        border-top: 1px solid #9387ff;
-        display: inline-block;
-    }
-}
-</style>
+<style lang="postcss" scoped></style>