-
+
![]()
({
locale: language,
fallbackLocale: 'en',
diff --git a/src/utils.ts b/src/utils.ts
index 238b7e9..7ca7d34 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -6,6 +6,21 @@
* @author feie9454
*/
+/**
+ * 设置HTML文档的lang属性
+ * @param locale - i18n的locale值 (例如 'zh_CN', 'en', 'ja' 等)
+ */
+export function setHtmlLang(locale: string): void {
+ const langMap: Record = {
+ 'zh_CN': 'zh-CN',
+ 'zh_TW': 'zh-TW',
+ 'ja': 'ja',
+ 'ko': 'ko',
+ 'en': 'en'
+ };
+ document.documentElement.lang = langMap[locale] || 'en';
+}
+
/**
* Darkens a hex color by a given percentage
* @param hex - Hex color code (e.g. '#00D78D' or '00D78D')
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 2c9d6f6..eb2a69d 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -149,15 +149,15 @@ function nextQuestion(i: number) {
.title {
position: absolute;
left: 10%;
- top: 32%;
+ top: 30%;
width: 80%;
- &:lang(en) {
+ &:lang(en),&:lang(ja),&:lang(ko) {
top: 25%;
.q-title {
width: 95%;
- font-size: 1.75rem;
+ font-size: 1.5rem;
}
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 744a04d..901bedc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -153,7 +153,7 @@ onUnmounted(() => {
@include abs-pos(85%, 4.2%);
position: relative;
cursor: pointer;
- width:20%;
+ width:23%;
z-index: 1000;
}
@@ -161,8 +161,8 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
- padding: 8px 12px;
+ gap: 4px;
+ padding: 8px 8px;
background: transparent;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.6);
diff --git a/src/views/PersonalInfo.vue b/src/views/PersonalInfo.vue
index 3888f52..bd41b73 100644
--- a/src/views/PersonalInfo.vue
+++ b/src/views/PersonalInfo.vue
@@ -121,6 +121,12 @@ function submit() {
&:lang(en) {
font-size: 1.9rem;
}
+ &:lang(ja) {
+ font-size: 1.5rem;
+ }
+ &:lang(ko) {
+ font-size: 1.5rem;
+ }
}
.inputs {
diff --git a/src/views/Report.vue b/src/views/Report.vue
index 55506dd..a176af7 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -51,12 +51,12 @@ const topFiveTraits = computed(() => {
return sortedTraits.slice(0, 5) as [[TraitName, number], ...[TraitName, number][]]
})
-function jumpZh() {
+/* function jumpZh() {
window.location.href = 'weixin://dl/business/?appid=wxe6d33a608a6fd9a5&path=pages/brandstorm/index&query=promotionId=9'
}
function jumpEn() {
window.location.href = 'https://brandstorm.loreal.com'
-}
+} */
@@ -77,7 +77,7 @@ function jumpEn() {
+ Debug {{ showDebug }}
+
-
+ lang: {{ $i18n.locale }}
+
+
+
+
+
+
- ![]()
![]()
@@ -176,13 +174,21 @@ function jumpEn() {
text-indent: 2em;
text-wrap: pretty;
- &:lang(zh) {
+ &[lang="zh_CN"], &[lang="zh_TW"] {
@include font(.80rem, 1.45, pre-wrap);
}
- &:lang(en) {
+ &[lang="en"] {
@include font(.80rem, 1.43, pre-wrap);
}
+
+ &[lang="ko"] {
+ @include font(.75rem, 1.43, pre-wrap);
+ }
+
+ &[lang="ja"] {
+ @include font(.75rem, 1.43, pre-wrap);
+ }
}
}
diff --git a/src/views/ReportMask.vue b/src/views/ReportMask.vue
index fbe115e..a2d7940 100644
--- a/src/views/ReportMask.vue
+++ b/src/views/ReportMask.vue
@@ -175,13 +175,21 @@ function jumpEn() {
text-indent: 2em;
text-wrap: pretty;
- &:lang(zh) {
+ &[lang="zh_CN"], &[lang="zh_TW"] {
@include font(.80rem, 1.45, pre-wrap);
}
- &:lang(en) {
+ &[lang="en"] {
@include font(.80rem, 1.43, pre-wrap);
}
+
+ &[lang="ko"] {
+ @include font(.75rem, 1.43, pre-wrap);
+ }
+
+ &[lang="ja"] {
+ @include font(.75rem, 1.43, pre-wrap);
+ }
}
}
diff --git a/src/views/Result.vue b/src/views/Result.vue
index fd55b9e..9037b16 100644
--- a/src/views/Result.vue
+++ b/src/views/Result.vue
@@ -117,7 +117,8 @@ const lightProps = [{
-
+
{{ t('result.subtitle') }}
@@ -125,10 +126,11 @@ const lightProps = [{
:title="`THE 5 L'Oréal DIMENSIONS`" :score-radio="1"
:subtitle="'OF POTENTIAL'" />
-
+ ![]()
@@ -140,9 +142,9 @@ const lightProps = [{
![]()
![]()
-
+
+ }}
@@ -186,11 +188,13 @@ const lightProps = [{
justify-content: space-around;
align-items: center;
gap: 1em;
+
&:lang(en) {
button {
font-size: .85em;
}
}
+
button {
text-transform: uppercase;
flex: 1;
@@ -241,13 +245,20 @@ const lightProps = [{
justify-content: center;
flex-direction: column;
gap: .5em;
+
&:lang(en) {
font-size: .85rem;
}
+
+ &:lang(ja) {
+ font-size: .75rem;
+ }
+
.title {
@include font(2.2em, 1, pre-wrap, center);
text-transform: uppercase;
width: max-content;
+ max-width: 80vw;
}
.subtitle {
@@ -264,7 +275,7 @@ const lightProps = [{
.slide-down {
@include abs-pos(50%, -2%);
-
+
@include font(1.1em, 1.4, pre-wrap, center);
display: flex;
align-items: center;
@@ -273,9 +284,16 @@ const lightProps = [{
gap: 1.25em;
width: max-content;
text-transform: uppercase;
+
img {
width: 4em;
animation: slide-down 1.5s ease-in-out infinite;
}
+
+ &:lang(ja),
+ &:lang(ko) {
+ font-size: 0.7em;
+ }
+
}
\ No newline at end of file