diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index f98d12b..93ce65f 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -31,6 +31,94 @@ const themeChange = () => { {{ underlineToHump(appStore.getTitle) }} +

{{ t('login.consoleLabel') }}

{{ t('login.welcome') }}

@@ -81,16 +169,58 @@ const themeChange = () => { flex-direction: column; justify-content: space-between; + &::before, &::after { position: absolute; - right: -80px; - bottom: -120px; - width: 360px; - height: 360px; - border: 1px solid rgb(255 255 255 / 16%); + border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: ''; } + + &::before { + top: -140px; + left: -80px; + width: 420px; + height: 420px; + } + + &::after { + right: -120px; + bottom: -160px; + width: 460px; + height: 460px; + } +} + +.hero-fruits { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; +} + +.fruit { + position: absolute; + filter: drop-shadow(0 18px 24px rgb(0 0 0 / 28%)); +} + +.cherry { + top: 16%; + right: 14%; + width: 150px; +} + +.mango { + top: 30%; + left: 38%; + width: 210px; +} + +.banana { + top: 54%; + left: 12%; + width: 200px; + transform: rotate(-8deg); } .hero-brand { @@ -113,13 +243,14 @@ const themeChange = () => { .hero-copy { position: relative; z-index: 1; - max-width: 460px; + max-width: 420px; h1 { - margin: 10px 0 12px; - font-size: 40px; - font-weight: 700; - line-height: 1.2; + margin: 12px 0 0; + font-size: 44px; + font-weight: 600; + line-height: 1.15; + letter-spacing: -0.03em; color: #fff; } } @@ -191,8 +322,12 @@ const themeChange = () => { padding: 16px 24px 20px; } + .hero-fruits { + display: none; + } + .hero-copy h1 { - margin: 6px 0 8px; + margin: 6px 0 0; font-size: 28px; }