feat: 다운로드페이지-플랫폼 및 OS타입별 추가

2025-11-24 07:29:11 +00:00
parent 2a2631d3bc
commit cc5db808b2
4 changed files with 589 additions and 84 deletions
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SplideSlide } from '@splidejs/vue-splide'
 import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import type { Platform } from '#layers/types/components/button'
@@ -16,6 +15,8 @@ const props = defineProps<Props>()
 const runtimeConfig = useRuntimeConfig()
 const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
 const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_download.json'
+const stoveClientDownloadUrl = runtimeConfig.public
+  .stoveClientDownloadUrl as string

 // Multilingual
 const resultGetMultilingual = await useGetMultilingual({
@@ -70,13 +71,6 @@ const mobileSpecArray = ref<Array<string>>(['Android', 'Ios'])
 const mobileOSArray = ref<Array<string>>(['AOS', 'iOS'])

 // Computed
-const platformList = computed(() => {
-  if (breakpoints.value.isMobile) {
-    return ['MOBILE', 'PC', 'STOVE']
-  } else {
-    return ['PC', 'STOVE', 'MOBILE']
-  }
-})
 const driverList = computed(() =>
  driverArray.value.map(driver => ({
    id: `DRIVER_${driver}`,
@@ -103,6 +97,7 @@ const mobileSpecList = computed(() =>
 const mobileOSList = computed(() =>
  mobileOSArray.value.map(os => ({
    id: `MO_OS_${os}`,
+    osType: tm(`Download_${os}_Type`),
    osCode: os,
    osText: tm(`Download_${os}_OS`),
    platformCode: tm(`Download_${os}_Platform`),
@@ -141,116 +136,164 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
    <section class="section-static">
      <WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />

-      <BlocksSlideDefault
-        :per-page="platformList.length"
-        :gap="20"
-        :arrows="false"
-        :pagination="false"
-        :drag="false"
-        :breakpoints="{
-          1023: {
-            perPage: 'auto',
-            gap: 12,
-            focus: 0,
-            drag: true,
-            padding: { left: 0, right: 0 },
-          },
-        }"
-        class="min-w-[320px] w-[100vw] px-[20px] ml-[-20px] sm:px-[40px] sm:ml-[-40px] md:w-full md:px-0 md:ml-0"
+      <div
+        class="relative flex flex-col-reverse sm:flex-row-reverse items-stretch justify-center gap-[20px] w-full md:flex-row"
      >
-        <SplideSlide
-          v-for="platform in platformList"
-          :key="platform"
-          class="flex flex-col items-center justify-between shrink-0 whitespace-normal w-[295px] h-[280px] bg-[#FFFFFF] p-[20px] rounded-[12px] text-left md:w-[calc((100%-40px)/3)] md:h-[314px] md:p-[24px] md:rounded-[16px] lg:w-[420px] lg:h-[340px] lg:p-[32px]"
+        <div
+          v-if="gameData?.platform_type !== '2'"
+          class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-[2] md:pt-[24px] md:pb-0 lg:pt-[32px]"
        >
          <div
-            class="flex flex-col items-start justify-start gap-[8px] w-full md:gap-[12px]"
+            class="relative flex flex-col items-start justify-start w-full max-w-[800px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
          >
-            <h4
-              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+            <span
+              v-if="!breakpoints.isMobile"
+              class="absolute top-0 right-[28px] w-[212px] h-[212px] lg:right-[40px]"
            >
-              <span>{{ tm(`Download_Box_${platform}_Title`) }}</span>
+              <img
+                :src="
+                  getImageHost('/images/common/img_desktop.png', {
+                    imageType: 'common',
+                  })
+                "
+                :alt="tm('Download_Box_PC_Title')"
+                loading="lazy"
+                draggable="false"
+                class="w-full h-full object-contain"
+              />
+            </span>
+
+            <h4
+              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+            >
+              <span>{{ tm('Download_Box_PC_Title') }}</span>
+
+              <AtomsTooltip
+                position="top"
+                :offset="8"
+                background-color="#666666"
+                text-color="#FFFFFF"
+                :arrow="true"
+                :content="tm('Download_Box_PC_Tooltip')"
+              />
            </h4>

-            <p
-              v-if="
-                tm(`Download_Box_${platform}_Description_List`).length === 1
-              "
-              v-dompurify-html="tm(`Download_Box_${platform}_Description01`)"
-              class="text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
-            ></p>
-            <ul
-              v-else-if="
-                tm(`Download_Box_${platform}_Description_List`).length > 1
-              "
+            <template
+              v-for="(description, dIndex) in tm(
+                'Download_Box_PC_Description_List'
+              )"
+              :key="dIndex"
            >
-              <li
-                v-for="description in tm(
-                  `Download_Box_${platform}_Description_List`
-                )"
-                :key="description"
-                v-dompurify-html="tm(description)"
-                class="relative pl-[22px] before:content-[''] before:absolute before:top-[10px] before:left-[9px] before:w-[3px] before:h-[3px] before:rounded-full before:bg-[#999999] text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
-              ></li>
-            </ul>
+              <p
+                class="relative flex items-center justify-start w-full mt-[12px] text-left text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
+                v-dompurify-html="tm(description as string)"
+              ></p>
+            </template>

            <AtomsButton
-              v-if="platform !== 'STOVE'"
              type="action"
              button-size="size-small"
              background-color="transparent"
              text-color="#1F1F1F"
-              class="relative w-auto h-auto px-0 text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
-              @click="
-                handleMoveFocus(platform.toLowerCase() as 'pc' | 'mobile')
-              "
+              class="relative w-auto h-auto px-0 mt-[12px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+              @click="handleMoveFocus('pc')"
            >
-              <span>{{ tm(`Download_Box_${platform}_SpecCheck`) }}</span>
+              <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
              <AtomsIconsLongArrowRightLine
                :size="20"
                color="#1F1F1F"
                class="relative rotate-90"
              />
            </AtomsButton>
+
+            <div
+              v-if="breakpoints.isMobile"
+              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
+            >
+              <span>{{ tm('Download_Button_PC_Mobile') }}</span>
+            </div>
+
+            <BlocksButtonLauncher
+              v-else-if="breakpoints.isMd || breakpoints.isDesktop"
+              platform="pc"
+              class="!w-full !max-w-[300px] mt-[32px] lg:mt-[48px]"
+            >
+              <span>{{ tm('Download_Button_PC') }}</span>
+            </BlocksButtonLauncher>
          </div>

          <div
-            class="flex flex-col items-center justify-center gap-[8px] w-full md:gap-[12px]"
+            v-if="!breakpoints.isMobile"
+            class="relative flex items-center justify-center w-full p-[25px] mt-[24px] rounded-b-[12px] bg-[#FAFAFA] lg:mt-[32px]"
          >
-            <template v-if="platform === 'MOBILE'">
+            <p
+              class="relative flex items-center justify-center w-full gap-[8px] text-[#999999] text-[16px] font-[400] leading-[26px] tracking-[-0.48px]"
+            >
+              <span>{{ tm('Download_Text_Not_STOVE_Client') }}</span>
+              <NuxtLink
+                :href="stoveClientDownloadUrl"
+                target="_self"
+                rel="noopener noreferrer"
+                class="inline-flex items-center justify-start gap-[4px] text-[#3C75FF] text-[16px] font-[500] reading-[24px] tracking-[-0.48px]"
+              >
+                <span>{{ tm('Download_Button_STOVE') }}</span>
+                <AtomsIconsDownloadLine color="#3C75FF" />
+              </NuxtLink>
+            </p>
+          </div>
+        </div>
+
+        <div
+          v-if="gameData?.platform_type !== '1'"
+          class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:py-[24px] md:px-[28px] lg:pt-[32px] lg:pb-[40px] lg:px-[40px]"
+        >
+          <div
+            class="relative flex flex-col items-start justify-start w-full max-w-[800px] mx-auto"
+          >
+            <h4
+              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+            >
+              <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
+            </h4>
+
+            <AtomsButton
+              type="action"
+              button-size="size-small"
+              background-color="transparent"
+              text-color="#1F1F1F"
+              class="relative w-auto h-auto px-0 mt-[8px] mb-[48px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20 md:mt-[12px]"
+              @click="handleMoveFocus('mobile')"
+            >
+              <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
+              <AtomsIconsLongArrowRightLine
+                :size="20"
+                color="#1F1F1F"
+                class="relative rotate-90"
+              />
+            </AtomsButton>
+
+            <div
+              class="relative flex flex-col items-start justify-start w-full gap-[8px] mt-auto md:gap-[12px]"
+            >
              <template v-for="os in mobileOSList" :key="os.id">
                <BlocksButtonLauncher
-                  v-if="device.isMobile ? os.isValue : true"
+                  v-if="
+                    device.isMobile
+                      ? os.isValue
+                      : gameData?.os_type !== '3'
+                        ? gameData?.os_type === os.osType
+                        : true
+                  "
                  :platform="`${os.platformCode as Platform}`"
                  class="!w-full"
                >
                  <span>{{ os.platformText }}</span>
                </BlocksButtonLauncher>
              </template>
-            </template>
-            <template v-else>
-              <AtomsButton
-                v-if="breakpoints.isMobile"
-                type="action"
-                button-size="size-small"
-                background-color="#EBEBEB"
-                text-color="#999999"
-                :disabled="true"
-                class="w-full px-0 border border-solid border-[rgba(0,0,0,0.1)] cursor-default"
-              >
-                <span>{{ tm(`Download_Button_${platform}_Mobile`) }}</span>
-              </AtomsButton>
-              <BlocksButtonLauncher
-                v-else-if="breakpoints.isMd || breakpoints.isDesktop"
-                :platform="`${platform.toLowerCase() as Platform}`"
-                class="!w-full"
-              >
-                <span>{{ tm(`Download_Button_${platform}`) }}</span>
-              </BlocksButtonLauncher>
-            </template>
+            </div>
          </div>
-        </SplideSlide>
-      </BlocksSlideDefault>
+        </div>
+      </div>
    </section>

    <section ref="specPCRef" class="section-static">
@@ -426,4 +469,8 @@ table td {
 .splide :deep(.splide__track) {
  overflow: visible !important;
 }
+
+::v-deep([data-platform='stove']) .icon-platform {
+  display: none !important;
+}
 </style>