gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/20251126_jo_bugfix' into 'feature/202501107-all'

Browse Source 
fix: [QA|디자인QA] 개선 및 버그 수정

See merge request sgp-web-d/web-template-fe!12
This commit is contained in:
김채린
2025-11-28 05:35:10 +00:00
parent 43e5df34fc d135e1ee71
commit 25f38273cd
3 changed files with 86 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layers/components/atoms/Tooltip.vue
View File

@@ -266,7 +266,7 @@ onUnmounted(() => {
<div
v-if="!teleport && isOpen"
:class="[
'absolute z-[10] flex items-center justify-center w-[280px] py-[8px] px-[12px] rounded-[4px]',
'absolute z-[10] flex items-center justify-center w-max max-w-[280px] py-[8px] px-[12px] rounded-[4px]',
]"
:style="[
isPositions.isTop
@@ -295,7 +295,7 @@ onUnmounted(() => {
v-if="!$slots.panel"
v-dompurify-html="props.content"
:class="[
`relative flex items-center justify-center w-full text-${props.textAlign} text-[${props.fontSize}] font-[${props.fontWeight}] leading-[${props.lineHeight}] tracking-[${props.letterSpacing}]`,
`relative flex items-center justify-center text-${props.textAlign} text-[${props.fontSize}] font-[${props.fontWeight}] leading-[${props.lineHeight}] tracking-[${props.letterSpacing}]`,
]"
:style="[`color: ${props.textColor};`]"
></p>

13
layers/components/blocks/Button/Launcher.vue
View File

@@ -106,7 +106,10 @@ const handleClick = () => {
<span class="text">
<slot />
</span>
<span v-if="type === 'default'" class="icon-download">
<span
v-if="type === 'default' && platform === 'pc'"
class="icon-download"
>
<AtomsIconsDownloadLine />
</span>
</span>
@@ -153,7 +156,13 @@ const handleClick = () => {
md:text-[16px];
}
.btn-base.default .icon-download {
@apply border-l border-white/10 ml-auto pl-4;
@apply ml-auto pl-4;
}
.btn-base.default .btn-content {
@apply justify-center;
}
.btn-base.default[data-platform='pc'] .btn-content {
@apply justify-start;
}
.btn-base.default[data-platform='stove'] {
@apply bg-[#FC4420];

138
layers/templates/FxDownload01/index.vue
View File

@@ -137,17 +137,17 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />
<div
class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[20px] w-full md:grid md:grid-cols-12 md:grid-rows-1"
class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[12px] w-full md:gap-[24px] md:grid md:grid-cols-12 md:grid-rows-1 lg:gap-[20px]"
>
<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-none md:pt-[24px] md:pb-0 lg:pt-[32px]"
class="relative flex flex-col items-start justify-start w-full h-[270px] py-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:pt-[24px] md:pb-0 lg:pt-[32px]"
:class="
gameData?.platform_type === '1' ? 'md:col-span-12' : 'md:col-span-8'
"
>
<div
class="relative flex flex-col items-start justify-start w-full max-w-[880px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
class="relative flex flex-col items-start justify-start gap-[20px] w-full max-w-[880px] h-full px-[20px] mx-auto md:gap-[24px] md:h-auto md:px-[28px] md:pr-[262px] lg:px-[40px]"
>
<span
v-if="!breakpoints.isMobile"
@@ -166,52 +166,56 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
/>
</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]"
<div
class="relative flex flex-col items-start justify-start w-full h-auto min-h-[108px] gap-[8px] md:gap-[12px] lg:min-h-[134px]"
>
<span>{{ tm('Download_Box_PC_Title') }}</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>
<AtomsTooltip
position="top"
:offset="8"
background-color="#666666"
text-color="#FFFFFF"
:arrow="true"
:content="tm('Download_Box_PC_Tooltip')"
/>
</h4>
<template
v-for="(description, dIndex) in tm(
'Download_Box_PC_Description_List'
)"
:key="dIndex"
>
<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>
<template
v-for="(description, dIndex) in tm(
'Download_Box_PC_Description_List'
)"
:key="dIndex"
>
<p
class="relative flex items-center justify-start w-full 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
type="action"
button-size="size-small"
background-color="transparent"
text-color="#1F1F1F"
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_PC_SpecCheck') }}</span>
<AtomsIconsLongArrowRightLine
:size="20"
color="#1F1F1F"
class="relative rotate-90"
/>
</AtomsButton>
<AtomsButton
type="action"
button-size="size-small"
background-color="transparent"
text-color="#1F1F1F"
class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md: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_PC_SpecCheck') }}</span>
<AtomsIconsLongArrowRightLine
:size="20"
color="#1F1F1F"
class="relative rotate-90"
/>
</AtomsButton>
</div>
<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] sm:mt-auto 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]"
class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-auto 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>
@@ -219,7 +223,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<BlocksButtonLauncher
v-else-if="breakpoints.isMd || breakpoints.isDesktop"
platform="pc"
class="!w-full !max-w-[300px] mt-[32px] lg:mt-[48px]"
class="!w-full !max-w-[300px]"
>
<span>{{ tm('Download_Button_PC') }}</span>
</BlocksButtonLauncher>
@@ -248,35 +252,39 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<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:flex-none md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
class="relative flex flex-col items-start justify-start w-full h-[270px] p-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
:class="
gameData?.platform_type === '2' ? 'md:col-span-12' : 'md:col-span-4'
"
>
<div
class="relative flex flex-col items-start justify-start w-full h-full max-w-[880px] mx-auto"
class="relative flex flex-col items-start justify-start gap-[20px] w-full h-full max-w-[880px] mx-auto md:gap-[24px]"
>
<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]"
<div
class="relative flex flex-col items-start justify-start w-full gap-[8px] md:gap-[12px]"
>
<span>{{ tm('Download_Box_MOBILE_Title') }}</span>
</h4>
<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>
<AtomsButton
type="action"
button-size="size-small"
background-color="transparent"
text-color="#1F1F1F"
class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md: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('mobile')"
>
<span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
<AtomsIconsLongArrowRightLine
:size="20"
color="#1F1F1F"
class="relative rotate-90"
/>
</AtomsButton>
</div>
<div
class="relative flex flex-col items-start justify-start w-full gap-[8px] mt-auto md:gap-[12px]"
@@ -423,7 +431,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
</p>
<AtomsButton
type="download"
type="link"
button-size="size-small"
background-color="#383838"
text-color="#FFFFFF"