[WHAT] 調整展覽列表卡片UI

FrontEnd/components/exhibition/ExhibitionListCard.vue

@@ -40,7 +40,7 @@
             <img src="~/assets/svg/noLogo.svg" class="md:tw-w-[160px] md:tw-p-[10px]" alt="" />
           </div>
           <nuxt-link v-else :to="localePath('/exhibition/' + item.ExhibitionID)"><img :src="item.Logo"
-              class="tw-py-[35px]" alt="" />
+              class="tw-p-[10px]" alt="" />
           </nuxt-link>
 
         </div>
@@ -67,16 +67,18 @@
               {{ item.ExhibitionName }}
             </div>
 
-            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?region=${item.RegionID}`)">{{
-              item.RegionName == null ? "" : item.RegionName + "．"
-            }}</nuxt-link>
-            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?country=${item.CountryID}`)">{{
-              item.CountryName == null ? "" : item.CountryName + "．"
-            }}</nuxt-link>
-            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?city=${item.CityID}`)">{{
-              item.CityName
-                == null ? "" : item.CityName
-            }}</nuxt-link>
+            <div class="tw-flex">
+              <div v-if="item.RegionName != ''" class="tw-text-neutrals-800 tw-body-3">
+                {{ item.RegionName == null ? "" : item.RegionName + "．" }}
+              </div>
+              <div v-if="item.CountryName != ''" class="tw-text-neutrals-800 tw-body-3">
+                {{ item.CountryName == null ? "" : item.CountryName + "．" }}
+              </div>
+              <div v-if="item.RegionName != ''" class="tw-text-neutrals-800 tw-body-3">
+                {{ item.CityName == null ? "" : item.CityName }}
+              </div>
+
+            </div>
 
             <!-- star and review-->
             <!-- <div class="tw-hidden md:tw-block md:tw-mb-[8px]">
@@ -91,16 +93,34 @@
               </div>
             </div> -->
 
-            <div v-if="item.MainCategoryList.length > 0"
+            <!-- <div v-if="item.MainCategoryList.length > 0"
               class="tw-w-fit tw-p-[5px] tw-body-5 tw-rounded-[10px] tw-bg-[#f6f6f6] tw-text-hint tw-mb-[8px] md:tw-text-[14px] md:tw-px-[10px] md:tw-py-[6px]">
 
               <div v-for="(Category, index) in item.MainCategoryList">
                 {{ Category.CategoryName }}
               </div>
 
+            </div> -->
+
+
+            <div>
+              <div v-if="item.MainCategoryList != null"
+                class="md:tw-flex md:tw-flex-row md:tw-items-center tw-mb-[8px]">
+                <div v-for="(item, index) in item.MainCategoryList" v-show="index < 1" :key="index"
+                  class="tw-bg-[#f6f6f6] tw-w-fit tw-rounded-[10px] tw-px-[10px] tw-py-[5px] tw-text-[14px] tw-mr-[10px]">
+                  <div class="tw-text-neutrals-800">
+                    {{ item.CategoryName }}
+                  </div>
+                </div>
+
+                <div class="tw-text-[12px] tw-text-complementary-1" v-if="item.MainCategoryList.length > 1">
+                  More ＋
+                </div>
+              </div>
             </div>
-            <div class="tw-hidden xl:tw-block tw-h-[62px]">
-              {{ item.Intro }}
+            <div class="tw-hidden xl:tw-block xl:tw-line-clamp-2 tw-text-neutrals-600 tw-text-[14px] xl:tw-mb-[14px]"
+              v-if="!!item.Intro">
+              <div v-html="item.Intro"></div>
             </div>
             <div class="tw-body-3 tw-text-black md:tw-text-[18px]">
               {{ formatDate(item.StartDate) + " - " + formatDate(item.EndDate) }}