From c675b67995d72a97b45b88bc650f1dc4dd04d246 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Wed, 10 Aug 2022 12:13:10 +0800 Subject: [PATCH] refactor: refactor index page --- .../varlet-cli/site/pc/pages/index/index.less | 291 ++++++------------ .../varlet-cli/site/pc/pages/index/index.vue | 99 +++--- packages/varlet-cli/varlet.default.config.js | 18 +- 3 files changed, 159 insertions(+), 249 deletions(-) diff --git a/packages/varlet-cli/site/pc/pages/index/index.less b/packages/varlet-cli/site/pc/pages/index/index.less index c9f43aa730d..f2d11ec2786 100644 --- a/packages/varlet-cli/site/pc/pages/index/index.less +++ b/packages/varlet-cli/site/pc/pages/index/index.less @@ -1,231 +1,124 @@ -.home-page { - position: relative; - width: 100vw; - height: 100vh; - box-sizing: border-box; - min-width: 1200px; - min-height: 460px; - background: var(--site-config-color-home-page-background); - overflow: hidden; - display: flex; - align-items: center; -} - -@keyframes fade-in { +@keyframes logo-wave { 0% { - opacity: 0; - transform: translateX(-100%); + transform: translate(8%, 8%); } - - to { - opacity: 1; - transform: translateX(0%); + 20% { + transform: translate(-8%, 8%); } -} -@keyframes slash-1 { - from { - transform: rotate(90deg); - ; + 40% { + transform: translate(-8%, -8%); } - to { - transform: rotate(10deg); + 60% { + transform: translate(-2%, 8%); } -} -@keyframes slash-2 { - from { - transform: rotate(90deg); - ; + 80% { + transform: translate(8%, -8%); } - to { - transform: rotate(20deg); + 100% { + transform: translate(8%, 8%); } } -@keyframes slash-3 { - from { - transform: rotate(90deg); - ; +.varlet-doc-index { + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + box-sizing: border-box; + background: var(--site-config-color-index-page-background); + + &__layout { + display: flex; + flex-direction: column; + align-items: center; + padding: 100px; + max-width: 1200px; } - to { - transform: rotate(30deg); + &__logo { + width: 100%; + height: 100%; + flex-shrink: 0; + z-index: 2; } -} -@keyframes slash-4 { - from { - transform: rotate(90deg); - ; + &__logo-container { + position: relative; + display: flex; + justify-content: center; + width: 160px; + height: 160px; } - to { - transform: rotate(40deg); + &__logo-background-mask { + position: absolute; + left: -40px; + top: -40px; + bottom: -40px; + right: -40px; + background: var(--site-config-color-index-page-logo-mask-background); + transition: background-color .2s; + filter: blur(45px); + border-radius: 50%; + animation: logo-wave 6s infinite linear; } -} -@keyframes slash-5 { - from { - transform: rotate(90deg); - ; + &__title { + font-size: 54px; + margin-top: 60px; } - to { - transform: rotate(50deg); + &__description { + width: 700px; + font-size: 16px; + line-height: 28px; + letter-spacing: 1px; + margin-top: 30px; + text-align: center; + color: var(--site-config-color-index-page-second-text-color); } -} -.slash-box { - position: absolute; - width: 30px; - bottom: -70%; - top: -130%; - right: 52%; - transform-origin: bottom right; - transition: box-shadow 0.5s; - box-shadow: -20px 0 20px var(--site-config-color-home-page-slash); -} + &__link-button-group { + display: flex; + justify-content: space-around; + margin-top: 30px; + } -.box-1 { - animation: slash-1 .75s forwards; -} + &__link-button { + height: 44px; + font-size: 18px; + transition: all .25s; + margin: 0 10px; + } -.box-2 { - animation: slash-2 .75s forwards; -} + &__link-button-text { + margin-right: 4px; + } -.box-3 { - animation: slash-3 .75s forwards; -} + &__features { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 60px; + } -.box-4 { - animation: slash-4 .75s forwards; -} + &__feature { + width: 280px; + margin: 10px; + padding: 20px; + border-radius: 4px; + background: var(--site-config-color-index-page-feature-background); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + } -.box-5 { - animation: slash-5 .75s forwards; + &__feature-description { + color: var(--site-config-color-index-page-second-text-color); + font-size: 14px; + margin-top: 10px; + } } - -.profile-container { - height: 100vh; - padding-left: 10vw; - display: flex; - justify-content: center; - align-items: center; - - .container-box { - width: 35vw; - min-width: 500px; - - .logo-container { - margin-right: 20px; - } - - .button-group { - display: flex; - margin-top: 25px; - align-items: center; - } - - .block-button-content { - display: flex; - align-items: center; - } - - .common-button { - height: 52px; - font-size: 18px; - transition: all .25s; - animation: fade-in .75s forwards; - } - - .extra-button { - flex-shrink: 0; - background-color: var(--site-config-color-home-page-extra-button-background); - } - - .github-button { - background-color: var(--site-config-color-home-page-github-button-background); - color: #fff; - } - - .primary-button { - background-color: var(--site-config-color-home-page-primary-button-background); - } - - .margin-left { - margin-left: 10px; - } - - @media all and (max-width: 2560px) { - .description-container { - display: flex; - margin-bottom: 40px; - } - - .base-title { - font-size: 110px; - line-height: 72px; - font-weight: 500; - margin-top: 21px; - animation: fade-in .75s forwards; - } - - .base-description { - font-size: 20px; - line-height: 38px; - padding-left: 4px; - font-weight: 500; - margin-bottom: 43px; - letter-spacing: 1px; - animation: fade-in .75s forwards; - } - - .logo-box { - width: 120px; - height: 120px; - flex-shrink: 0; - margin-right: 30px; - z-index: 2; - } - } - - @media all and (max-width: 1920px) { - - .description-container { - display: flex; - margin-bottom: 35px; - } - - .base-title { - font-size: 84px; - line-height: 72px; - font-weight: 500; - margin-top: 8px; - animation: fade-in .75s forwards; - } - - .base-description { - font-size: 16px; - line-height: 28px; - padding-left: 4px; - font-weight: 500; - margin-bottom: 45px; - letter-spacing: 1px; - animation: fade-in .75s forwards; - } - - .logo-box { - width: 90px; - height: 90px; - flex-shrink: 0; - margin-right: 25px; - z-index: 2; - } - } - } -} \ No newline at end of file diff --git a/packages/varlet-cli/site/pc/pages/index/index.vue b/packages/varlet-cli/site/pc/pages/index/index.vue index fb656c46376..44751da7aff 100644 --- a/packages/varlet-cli/site/pc/pages/index/index.vue +++ b/packages/varlet-cli/site/pc/pages/index/index.vue @@ -16,7 +16,7 @@ const route = useRoute() const router = useRouter() const packs = { 'zh-CN': zh_CN, - 'en-US': en_US, + 'en-US': en_US } as any const github = get(config, 'pc.header.github') @@ -59,7 +59,7 @@ const setCurrentThemes = (themes: 'themes' | 'darkThemes') => { const toggleTheme = () => { setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes') window.postMessage(getThemesMessage(), '*') - ; (document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*') + ;(document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*') } const setLocale = () => { @@ -93,47 +93,66 @@ watch(() => route.path, setLocale, { immediate: true })