mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 19:28:14 +08:00
docs: parallax layers for home (#6435)
* docs: parallax layers for home * fix: parallax size to small * fix: parallax size to small * fix: adjust home size
This commit is contained in:
云游君
GitHub
parent
11d3db586c
commit
46d6240ad6
169
docs/.vitepress/vitepress/components/globals/home-footer.vue
Normal file
169
docs/.vitepress/vitepress/components/globals/home-footer.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
const lang = useLang()
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer-main">
|
||||
<h4>{{ homeLang['10'] }}</h4>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['11'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/releases"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['12'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://element.eleme.io/"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['13'] }}
|
||||
</a>
|
||||
<a
|
||||
:href="`/${lang}/guide/theming`"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['14'] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-main">
|
||||
<h4>{{ homeLang['19'] }}</h4>
|
||||
<a
|
||||
href="https://gitter.im/element-en/Lobby"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['15'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/issues"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['16'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['17'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://segmentfault.com/t/element-plus"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['18'] }}
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.footer {
|
||||
background-color: var(--bg-color);
|
||||
width: 100%;
|
||||
padding: 40px 80px;
|
||||
box-sizing: border-box;
|
||||
height: 340px;
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 110px;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.footer-main-link {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 2;
|
||||
font-size: 14px;
|
||||
color: var(--text-color-light);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.footer-social-title {
|
||||
color: var(--text-color-light);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ep-icon-github {
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #c8d6e8;
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
color: #8d99ab;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-icon-gitter {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
.footer {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.footer-social {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
.footer-main {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,10 +3,10 @@ import { ref, reactive, computed } from 'vue'
|
||||
import { useParallax, useThrottleFn, useEventListener } from '@vueuse/core'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
import { isDark } from '../../composables/dark'
|
||||
import { sponsors } from '../../../config/sponsors'
|
||||
import HomeSponsors from '../home/home-sponsors.vue'
|
||||
import HomeCards from '../home/home-cards.vue'
|
||||
import HomeFooter from './home-footer.vue'
|
||||
import type { CSSProperties } from 'vue'
|
||||
const langZhCN = 'zh-CN'
|
||||
const target = ref<HTMLElement | null>(null)
|
||||
const parallax = reactive(useParallax(target))
|
||||
const jumbotronRedOffset = ref(0)
|
||||
@ -14,19 +14,6 @@ const jumbotronRef = ref<HTMLElement | null>(null)
|
||||
const lang = useLang()
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
|
||||
const getSponsorName = (spons) => {
|
||||
if (lang.value === langZhCN) {
|
||||
return spons.name_cn || spons.name
|
||||
}
|
||||
return spons.name
|
||||
}
|
||||
const getSponsorSlogan = (spons) => {
|
||||
if (lang.value === langZhCN) {
|
||||
return spons.slogan_cn || spons.slogan
|
||||
}
|
||||
return spons.slogan
|
||||
}
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -40,13 +27,9 @@ const containerStyle: CSSProperties = {
|
||||
}
|
||||
|
||||
const cardStyle = computed(() => ({
|
||||
background: 'var(--bg-color)',
|
||||
minHeight: '30rem',
|
||||
width: '50rem',
|
||||
borderRadius: '5px',
|
||||
height: '30rem',
|
||||
width: '100%',
|
||||
transition: '.3s ease-out all',
|
||||
boxShadow:
|
||||
isDark && !isDark.value ? '0 0 20px 0 rgba(255, 255, 255, 0.25)' : 'none',
|
||||
transform: `rotateX(${parallax.roll}deg) rotateY(${parallax.tilt}deg)`,
|
||||
}))
|
||||
|
||||
@ -57,15 +40,56 @@ const layerBase: CSSProperties = {
|
||||
transition: '.3s ease-out all',
|
||||
}
|
||||
|
||||
const layer0 = computed(() => ({
|
||||
const screenLayer = computed(() => ({
|
||||
...layerBase,
|
||||
transform: `translateX(${parallax.tilt * 10}px) translateY(${
|
||||
parallax.roll * 10
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
transform: `translateX(${parallax.tilt * 10 + 80}px) translateY(${
|
||||
parallax.roll * 10 + 50
|
||||
}px)`,
|
||||
}))
|
||||
|
||||
const peopleLayer = computed(() => ({
|
||||
...layerBase,
|
||||
width: '30%',
|
||||
height: '30%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
transform: `translateX(${parallax.tilt * 25 + 25}px) translateY(${
|
||||
parallax.roll * 25
|
||||
}px) scale(1)`,
|
||||
}))
|
||||
|
||||
const jumbotronRedStyle = computed(() => ({
|
||||
height: `${jumbotronRedOffset.value}px`,
|
||||
// center layer
|
||||
const leftLayer = computed(() => ({
|
||||
...layerBase,
|
||||
width: '20%',
|
||||
height: '20%',
|
||||
transform: `translateX(${parallax.tilt * 12 + 205}px) translateY(${
|
||||
parallax.roll * 12 + 210
|
||||
}px)`,
|
||||
}))
|
||||
|
||||
const leftBottomLayer = computed(() => ({
|
||||
...layerBase,
|
||||
width: '30%',
|
||||
height: '30%',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
transform: `translateX(${parallax.tilt * 30 - 10}px) translateY(${
|
||||
parallax.roll * 30
|
||||
}px)`,
|
||||
}))
|
||||
|
||||
const rightLayer = computed(() => ({
|
||||
...layerBase,
|
||||
width: '33%',
|
||||
height: '33%',
|
||||
top: 0,
|
||||
right: 0,
|
||||
transform: `translateX(${parallax.tilt * 25 + 5}px) translateY(${
|
||||
parallax.roll * 25
|
||||
}px)`,
|
||||
}))
|
||||
|
||||
const handleScroll = useThrottleFn(() => {
|
||||
@ -85,160 +109,52 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
|
||||
<template>
|
||||
<div ref="target" class="home-page">
|
||||
<div class="banner">
|
||||
<div class="banner-desc">
|
||||
<div class="banner" text="center">
|
||||
<div class="banner-desc" m="t-4">
|
||||
<h1>{{ homeLang['title'] }}</h1>
|
||||
<p>{{ homeLang['title_sub'] }}</p>
|
||||
<p m="t-2">{{ homeLang['title_sub'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="jumbotronRef" class="jumbotron">
|
||||
<div :style="containerStyle">
|
||||
<div class="parallax-container" :style="containerStyle">
|
||||
<div :style="cardStyle">
|
||||
<div class="banner" :style="layer0">
|
||||
<img src="/images/theme-index-blue.png" alt="banner" />
|
||||
<div class="jumbotron-red" :style="jumbotronRedStyle">
|
||||
<img src="/images/theme-index-red.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
:style="screenLayer"
|
||||
src="/images/home/screen.svg"
|
||||
alt="banner"
|
||||
/>
|
||||
<img
|
||||
:style="peopleLayer"
|
||||
src="/images/home/people.svg"
|
||||
alt="banner"
|
||||
/>
|
||||
<img
|
||||
:style="leftLayer"
|
||||
src="/images/home/left-layer.svg"
|
||||
alt="banner"
|
||||
/>
|
||||
<img
|
||||
:style="leftBottomLayer"
|
||||
src="/images/home/left-bottom-layer.svg"
|
||||
alt="banner"
|
||||
/>
|
||||
<img
|
||||
:style="rightLayer"
|
||||
src="/images/home/right-layer.svg"
|
||||
alt="banner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sponsors-container">
|
||||
<div class="sponsors-list">
|
||||
<a
|
||||
v-for="(sponsor, i) in sponsors"
|
||||
:key="i"
|
||||
:class="['sponsor', sponsor.className]"
|
||||
:href="sponsor.url"
|
||||
target="_blank"
|
||||
>
|
||||
<img width="45" :src="sponsor.img" :alt="sponsor.name" />
|
||||
<div>
|
||||
<p>
|
||||
Sponsored by
|
||||
<span class="name">{{ getSponsorName(sponsor) }}</span>
|
||||
</p>
|
||||
<p>{{ getSponsorSlogan(sponsor) }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="join">
|
||||
<el-tooltip placement="top" :hide-after="1000" :offset="20">
|
||||
<template #content>
|
||||
{{ homeLang['21'] }}
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
element-plus@outlook.com
|
||||
</a>
|
||||
</template>
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
<el-button round>{{ homeLang['20'] }}</el-button>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/guide.png" alt="" />
|
||||
<h3>{{ homeLang['3'] }}</h3>
|
||||
<p>{{ homeLang['4'] }}</p>
|
||||
<a :href="`/${lang}/guide/design.html`">{{ homeLang['5'] }}</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/component.png" alt="" />
|
||||
<h3>{{ homeLang['6'] }}</h3>
|
||||
<p>{{ homeLang['7'] }}</p>
|
||||
<a :href="`/${lang}/component/layout.html`">
|
||||
{{ homeLang['5'] }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/resource.png" alt="" />
|
||||
<h3>{{ homeLang['8'] }}</h3>
|
||||
<p>{{ homeLang['9'] }}</p>
|
||||
<a :href="`/${lang}/resource/index.html`"> {{ homeLang['5'] }} </a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="footer-main">
|
||||
<h4>{{ homeLang['10'] }}</h4>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['11'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/releases"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['12'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://element.eleme.io/"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['13'] }}
|
||||
</a>
|
||||
<a
|
||||
:href="`/${lang}/guide/theming`"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['14'] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-main">
|
||||
<h4>{{ homeLang['19'] }}</h4>
|
||||
<a
|
||||
href="https://gitter.im/element-en/Lobby"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['15'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/issues"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['16'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['17'] }}
|
||||
</a>
|
||||
<a
|
||||
href="https://segmentfault.com/t/element-plus"
|
||||
class="footer-main-link"
|
||||
target="_blank"
|
||||
>
|
||||
{{ homeLang['18'] }}
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
<HomeSponsors />
|
||||
<HomeCards />
|
||||
</div>
|
||||
<HomeFooter />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.home-page {
|
||||
.banner {
|
||||
text-align: center;
|
||||
}
|
||||
.banner-dot h1 span {
|
||||
position: relative;
|
||||
&::after {
|
||||
@ -253,8 +169,6 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
}
|
||||
}
|
||||
.banner-desc {
|
||||
padding-top: 30px;
|
||||
|
||||
h1 {
|
||||
font-size: 34px;
|
||||
margin: 0;
|
||||
@ -264,9 +178,7 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: var(--text-color-light);
|
||||
margin: 20px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -306,168 +218,32 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
}
|
||||
}
|
||||
|
||||
.sponsors-container {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
.join {
|
||||
text-align: center;
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsors-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
margin: 0 20px 10px;
|
||||
display: inline-flex;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.8;
|
||||
color: var(--text-color-light);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
width: 890px;
|
||||
margin: 30px auto;
|
||||
width: 800px;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.jumbotron-red {
|
||||
transition: height 0.1s;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.parallax-container {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.jumbotron {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
width: 33.3%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: var(--brand-color);
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: var(--brand-color);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, 0.5);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
.container {
|
||||
.parallax-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.banner .container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.banner img {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -611,95 +387,4 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background-color: var(--bg-color);
|
||||
width: 100%;
|
||||
padding: 40px 150px;
|
||||
box-sizing: border-box;
|
||||
height: 340px;
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 110px;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.footer-main-link {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 2;
|
||||
font-size: 14px;
|
||||
color: var(--text-color-light);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.footer-social-title {
|
||||
color: var(--text-color-light);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ep-icon-github {
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #c8d6e8;
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
color: #8d99ab;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-icon-gitter {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
.footer {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.footer-social {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
.footer-main {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
150
docs/.vitepress/vitepress/components/home/home-cards.vue
Normal file
150
docs/.vitepress/vitepress/components/home/home-cards.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
const lang = useLang()
|
||||
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/guide.png" alt="" />
|
||||
<h3>{{ homeLang['3'] }}</h3>
|
||||
<p>{{ homeLang['4'] }}</p>
|
||||
<a :href="`/${lang}/guide/design.html`">{{ homeLang['5'] }}</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/component.png" alt="" />
|
||||
<h3>{{ homeLang['6'] }}</h3>
|
||||
<p>{{ homeLang['7'] }}</p>
|
||||
<a :href="`/${lang}/component/layout.html`">
|
||||
{{ homeLang['5'] }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="/images/resource.png" alt="" />
|
||||
<h3>{{ homeLang['8'] }}</h3>
|
||||
<p>{{ homeLang['9'] }}</p>
|
||||
<a :href="`/${lang}/resource/index.html`"> {{ homeLang['5'] }} </a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page {
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.3%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: var(--brand-color);
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: var(--brand-color);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, 0.5);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.banner .container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.banner img {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
docs/.vitepress/vitepress/components/home/home-sponsors.vue
Normal file
107
docs/.vitepress/vitepress/components/home/home-sponsors.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import { sponsors } from '../../../config/sponsors'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
const lang = useLang()
|
||||
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
const langZhCN = 'zh-CN'
|
||||
|
||||
const getSponsorName = (sponsor) => {
|
||||
if (lang.value === langZhCN) {
|
||||
return sponsor.name_cn || sponsor.name
|
||||
}
|
||||
return sponsor.name
|
||||
}
|
||||
const getSponsorSlogan = (sponsor) => {
|
||||
if (lang.value === langZhCN) {
|
||||
return sponsor.slogan_cn || sponsor.slogan
|
||||
}
|
||||
return sponsor.slogan
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sponsors-container" m="t-9 auto">
|
||||
<div class="sponsors-list">
|
||||
<a
|
||||
v-for="(sponsor, i) in sponsors"
|
||||
:key="i"
|
||||
:class="['sponsor', sponsor.className]"
|
||||
:href="sponsor.url"
|
||||
target="_blank"
|
||||
>
|
||||
<img width="45" :src="sponsor.img" :alt="sponsor.name" />
|
||||
<div>
|
||||
<p>
|
||||
Sponsored by
|
||||
<span class="name">{{ getSponsorName(sponsor) }}</span>
|
||||
</p>
|
||||
<p>{{ getSponsorSlogan(sponsor) }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="join">
|
||||
<el-tooltip placement="top" :hide-after="1000" :offset="20">
|
||||
<template #content>
|
||||
{{ homeLang['21'] }}
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
element-plus@outlook.com
|
||||
</a>
|
||||
</template>
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
<el-button round>{{ homeLang['20'] }}</el-button>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page {
|
||||
.sponsors-container {
|
||||
width: 92%;
|
||||
.join {
|
||||
text-align: center;
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsors-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
margin: 0 20px 10px;
|
||||
display: inline-flex;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.8;
|
||||
color: var(--text-color-light);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
.hero-content {
|
||||
padding: 55px 40px 0;
|
||||
padding: 40px 40px 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-content {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
28
docs/public/images/home/left-bottom-layer.svg
Normal file
28
docs/public/images/home/left-bottom-layer.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<svg width="467" height="257" viewBox="0 0 467 257" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd_6407_141411)">
|
||||
<rect x="20" y="15.9591" width="426.263" height="216.462" rx="4.44024" fill="white"/>
|
||||
</g>
|
||||
<circle cx="256.443" cy="98.1035" r="8.88047" fill="#3F85ED"/>
|
||||
<circle cx="256.443" cy="152.496" r="8.88047" fill="#C7DBF8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.231 202.449C171.452 202.449 206.49 167.411 206.49 124.19C206.49 80.9685 171.452 45.9307 128.231 45.9307C85.0094 45.9307 49.9716 80.9685 49.9716 124.19C49.9716 167.411 85.0094 202.449 128.231 202.449ZM128.231 176.363C157.045 176.363 180.403 153.004 180.403 124.19C180.403 95.3757 157.045 72.0171 128.231 72.0171C99.4164 72.0171 76.0579 95.3757 76.0579 124.19C76.0579 153.004 99.4164 176.363 128.231 176.363Z" fill="#3F85ED"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.9716 124.19L76.0579 124.19C76.0579 95.3757 99.4164 72.0171 128.231 72.0171C128.231 72.0171 128.231 72.0171 128.231 72.0171V45.9307C85.0094 45.9307 49.9716 80.9685 49.9716 124.19Z" fill="#98BDF2"/>
|
||||
<rect x="280.309" y="87.558" width="133.207" height="21.0911" rx="10.5456" fill="#E4EFFF"/>
|
||||
<rect x="280.309" y="141.951" width="133.207" height="21.0911" rx="10.5456" fill="#E4EFFF"/>
|
||||
<defs>
|
||||
<filter id="filter0_dd_6407_141411" x="0.0189397" y="0.418282" width="466.225" height="256.424" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.22012" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6407_141411"/>
|
||||
<feOffset dy="4.44024"/>
|
||||
<feGaussianBlur stdDeviation="8.88047"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.039009 0 0 0 0 0.13338 0 0 0 0 0.232469 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6407_141411"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="2.22012"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.133333 0 0 0 0 0.231373 0 0 0 0.04 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_6407_141411" result="effect2_dropShadow_6407_141411"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6407_141411" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
6
docs/public/images/home/left-layer.svg
Normal file
6
docs/public/images/home/left-layer.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="261" height="172" viewBox="0 0 261 172" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.17153 0.985229C2.71925 0.985229 0.731293 2.97319 0.731293 5.42546V154.173C0.731293 156.626 2.71925 158.614 5.17153 158.614L173.068 158.614L186.111 171.379L198.599 158.614L256.045 158.614C258.497 158.614 260.485 156.626 260.485 154.173V5.42547C260.485 2.97319 258.497 0.985229 256.045 0.985229H5.17153Z" fill="#5C97EE"/>
|
||||
<rect x="26.8177" y="22.0763" width="64.3834" height="21.6461" rx="10.8231" fill="#C7DCFB"/>
|
||||
<rect x="26.8177" y="63.1485" width="207.581" height="21.6461" rx="4.44024" fill="#A2C5F9"/>
|
||||
<rect x="26.8177" y="102.556" width="207.581" height="21.6461" rx="4.44024" fill="#A2C5F9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 758 B |
22
docs/public/images/home/people.svg
Normal file
22
docs/public/images/home/people.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<svg width="343" height="289" viewBox="0 0 343 289" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M171.044 80.553C257.922 80.553 261.236 163.53 255.686 183.511L169.102 229.856C144.125 217.83 92.674 191.226 86.6797 181.013C79.1868 168.248 88.0672 80.553 171.044 80.553Z" fill="#428BFB"/>
|
||||
<path d="M134.134 169.635C129.972 162.42 131.359 126.065 134.967 112.467C123.312 128.841 126.457 156.685 127.752 169.635C131.267 172.04 137.465 175.408 134.134 169.635Z" fill="#2671E5"/>
|
||||
<path d="M212.236 169.635C216.399 162.42 215.011 126.065 211.404 112.467C223.059 128.841 219.914 156.685 218.619 169.635C215.104 172.04 208.906 175.408 212.236 169.635Z" fill="#2671E5"/>
|
||||
<path d="M117.567 137.77L123.312 195.999L159.944 207.655H219.887L227.793 137.818C228.016 135.843 226.471 134.113 224.484 134.113H120.881C118.913 134.113 117.374 135.812 117.567 137.77Z" fill="#ECE6E6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.504 199.384L160.499 207.655H220.442L228.348 137.818C228.571 135.843 227.026 134.113 225.039 134.113H204.174L134.504 199.384Z" fill="#DDD7D7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.983 172.067C181.983 173 181.517 173.175 181.517 173.175C181.517 173.175 173.233 177.958 172.708 178.25C172.417 178.367 172.125 178.367 171.833 178.25C171.833 178.25 163.2 173.233 162.908 173C162.733 172.883 162.617 172.65 162.558 172.417C162.558 172.417 162.558 162.5 162.558 162.033C162.558 161.567 163.142 161.275 163.142 161.275L171.775 156.317C172.125 156.142 172.475 156.142 172.825 156.317C172.825 156.317 180.467 160.75 181.283 161.217C181.75 161.45 182.042 161.917 181.983 162.442C181.983 162.383 181.983 171.192 181.983 172.067ZM178.542 162.15C176.792 161.158 172.592 158.708 172.592 158.708C172.358 158.592 172.008 158.592 171.775 158.708L165.008 162.617C165.008 162.617 164.542 162.908 164.542 163.258C164.542 163.608 164.542 171.367 164.542 171.367C164.542 171.542 164.658 171.717 164.775 171.833C165.008 172.008 171.775 175.917 171.775 175.917C172.008 176.033 172.242 176.033 172.475 175.917C172.883 175.683 179.358 171.95 179.358 171.95C179.358 171.95 179.708 171.775 179.708 171.075C179.708 170.842 179.708 170.083 179.708 169.033L172.125 173.642V171.892C172.125 171.425 172.358 171.017 172.708 170.667L179.475 166.583C179.65 166.35 179.767 166.058 179.767 165.708C179.767 164.95 179.767 164.308 179.767 163.9L172.125 168.508V166.642C172.125 166.233 172.3 165.825 172.592 165.592L178.542 162.15Z" fill="#409EFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.142 155.733C184.142 155.617 184.025 155.5 183.908 155.5H182.275V153.808C182.275 153.692 182.158 153.692 181.983 153.692L181.167 153.808C181.05 153.808 180.992 153.867 180.992 153.925V155.5H179.417C179.3 155.5 179.242 155.617 179.183 155.675V156.725H181.05V158.475C181.05 158.592 181.167 158.65 181.342 158.592L182.158 158.475C182.275 158.475 182.333 158.417 182.333 158.358V156.725H184.2V155.733H184.142Z" fill="#409EFF"/>
|
||||
<path opacity="0.6" d="M342.245 260.554C342.245 278.593 265.833 288.861 171.573 288.861C77.3139 288.861 0.901611 279.703 0.901611 260.554C0.901611 241.406 77.3139 232.248 171.573 232.248C265.833 232.248 342.245 240.573 342.245 260.554Z" fill="#F1F7FF"/>
|
||||
<path d="M156.891 84.9933C144.957 77.5004 139.962 58.6294 139.407 50.0264C139.685 44.4761 140.739 31.7104 142.737 25.0501C145.235 16.7246 181.867 18.3897 191.857 20.8874C201.848 23.385 200.183 32.8205 200.738 50.0264C201.293 67.2323 189.36 80.8305 185.752 84.1607C182.144 87.4909 168.824 92.4862 156.891 84.9933Z" fill="#FBBDA4"/>
|
||||
<path d="M171.322 105.252C159.666 105.807 156.336 101.089 153.838 96.0938L159.111 79.9979H182.7L186.307 96.6488C185.197 99.3315 180.646 104.808 171.322 105.252Z" fill="#FBBDA4"/>
|
||||
<path d="M205.456 61.9595C207.121 57.7968 203.791 52.2465 200.46 52.2465C198.24 57.1492 194.411 67.0657 196.853 67.5098C199.905 68.0648 203.791 66.1222 205.456 61.9595Z" fill="#FBBDA4"/>
|
||||
<path d="M137.059 61.615C135.714 57.3381 139.455 52.0559 142.776 52.3081C144.618 57.365 147.686 67.543 145.217 67.8008C142.131 68.1231 138.404 65.8918 137.059 61.615Z" fill="#FBBDA4"/>
|
||||
<path d="M186.862 2.57136C177.982 -1.86887 170.489 2.84886 162.996 7.84412C158.648 7.3816 148.51 8.45466 142.738 16.4471C136.965 24.4395 137.1 45.766 139.302 53.8245C140.099 53.1714 141.162 52.5333 142.727 52.4706C142.727 51.9155 141.905 38.3708 142.738 35.8731C143.57 33.3755 143.848 28.6577 149.12 27.5477C154.393 26.4376 160.221 31.4329 172.154 31.4329C184.087 31.4329 186.03 27.8252 192.69 27.2702C196.02 27.8252 198.518 29.2128 199.906 34.208C201.016 38.2042 200.461 48.2688 200.183 52.524C200.758 52.524 202.236 52.2727 203.625 53.8599C203.663 53.7182 203.682 53.613 203.704 53.5284C206.155 44.3409 203.446 24.8764 200.738 17.8347C198.518 12.0624 193.708 10.0642 191.58 9.78673C192.783 9.1392 191.303 4.79147 186.862 2.57136Z" fill="#190E02"/>
|
||||
<path opacity="0.6" d="M102.22 259.272C108.603 259.55 112.211 260.937 120.814 260.105L126.642 236.239L107.771 234.851C106.106 236.424 101.554 239.291 96.6701 239.291C90.5648 239.291 80.5743 241.789 73.0814 244.564C64.4306 247.768 57.818 256.22 56.9855 259.272C56.7079 260.937 58.6506 263.713 63.9234 262.325C69.1962 260.937 95.8376 258.995 102.22 259.272Z" fill="#70A2EB"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M108.049 259.807C106.223 259.588 104.38 259.366 102.219 259.272C95.8366 258.995 69.1952 260.938 63.9224 262.325C63.8589 262.342 63.796 262.358 63.7335 262.373C65.0229 259.835 69.6345 254.13 76.4095 250.392C84.4574 245.952 94.4479 244.287 101.386 243.732C108.324 243.177 110.821 241.512 115.539 237.626L122.974 251.256L120.813 260.105C115.122 260.656 111.617 260.235 108.049 259.807Z" fill="#3678D8"/>
|
||||
<path d="M287.045 260.383C286.532 262.95 284.548 263.713 280.385 262.325L260.681 257.607L227.102 259.55L220.997 249.282L225.992 237.626C229.507 236.886 237.092 236.239 239.313 236.239C240.7 237.626 244.863 239.553 251.801 239.847C271.504 240.679 281.773 250.947 283.993 253.445C286.213 255.942 287.6 257.607 287.045 260.383Z" fill="#70A2EB"/>
|
||||
<path d="M245.14 244.009C236.815 243.177 237.092 241.234 228.767 241.512C227.287 247.432 224.937 259.383 227.379 259.827C230.432 260.383 240.148 259.735 252.356 260.105C261.514 260.383 267.897 260.938 280.385 262.325C275.667 250.392 253.466 244.842 245.14 244.009Z" fill="#3678D8"/>
|
||||
<path d="M174.374 213.205C161.886 209.32 146.9 200.439 127.474 191.836C125.254 190.844 108.881 183.788 96.3925 181.846C83.9043 179.903 66.9759 184.899 65.8659 200.162C64.7558 215.425 92.5074 232.909 115.819 240.956C139.13 249.004 192.968 256.22 205.733 258.162C218.499 260.105 226.824 262.88 231.542 258.995C236.26 255.11 236.26 245.119 231.542 240.124C226.824 235.129 186.862 217.09 174.374 213.205Z" fill="#3F3C7E"/>
|
||||
<path d="M173.819 219.865C161.331 211.725 131.914 195.999 109.158 192.114C126.031 196.998 166.881 219.31 168.269 223.751L173.819 219.865Z" fill="#302B7A"/>
|
||||
<path d="M280.385 196.832C279.357 192.836 272.614 180.181 250.968 181.846C230.155 184.621 209.986 197.015 187.972 206.822C162.718 217.09 138.575 225.416 126.364 232.909C113.989 240.503 109.158 244.287 111.656 253.445C116.096 261.493 113.876 263.158 141.905 258.995C176.327 253.883 223.372 246.756 252.356 231.521C274.002 220.143 282.882 206.545 280.385 196.832Z" fill="#504D84"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
27
docs/public/images/home/right-layer.svg
Normal file
27
docs/public/images/home/right-layer.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="473" height="327" viewBox="0 0 473 327" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd_6407_141432)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.6518 16.1391C22.1995 16.1391 20.2115 18.1271 20.2115 20.5794V284.773C20.2115 287.226 22.1995 289.214 24.6518 289.214H155.084L168.127 301.979L180.615 289.214H447.584C450.037 289.214 452.025 287.226 452.025 284.773V20.5794C452.025 18.1271 450.037 16.1391 447.584 16.1391H24.6518Z" fill="white"/>
|
||||
</g>
|
||||
<rect x="121.227" y="210.954" width="103.235" height="43.2923" rx="21.6461" fill="#E4EFFF"/>
|
||||
<rect x="247.219" y="210.954" width="103.235" height="43.2923" rx="21.6461" fill="#3F85ED"/>
|
||||
<rect x="59.0637" y="107.164" width="354.109" height="21.6461" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect x="115.122" y="148.236" width="241.993" height="21.6461" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect x="151.754" y="48.8859" width="170.949" height="32.1917" rx="4.44024" fill="#91BEFF"/>
|
||||
<defs>
|
||||
<filter id="filter0_dd_6407_141432" x="0.230488" y="0.598305" width="471.775" height="325.802" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.22012" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6407_141432"/>
|
||||
<feOffset dy="4.44024"/>
|
||||
<feGaussianBlur stdDeviation="8.88047"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.039009 0 0 0 0 0.13338 0 0 0 0 0.232469 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6407_141432"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="2.22012"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.133333 0 0 0 0 0.231373 0 0 0 0.06 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_6407_141432" result="effect2_dropShadow_6407_141432"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6407_141432" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
34
docs/public/images/home/screen.svg
Normal file
34
docs/public/images/home/screen.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<svg width="1163" height="728" viewBox="0 0 1163 728" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6407_141381)">
|
||||
<rect x="0.50882" y="0.0586548" width="1161.12" height="727.089" fill="#E4EFFF"/>
|
||||
<rect x="0.50882" y="0.0586548" width="1161.12" height="66.6035" fill="#3F85ED"/>
|
||||
<circle cx="58.787" cy="31.6954" r="7.77041" fill="#FD873B"/>
|
||||
<circle cx="93.1988" cy="31.6954" r="7.77041" fill="#FFCD8A"/>
|
||||
<circle cx="127.611" cy="31.6954" r="7.77041" fill="#91DD9D"/>
|
||||
<rect x="183.114" y="16.1545" width="336.903" height="33.3018" rx="16.6509" fill="#C7DEFF"/>
|
||||
<rect x="50.4616" y="112.175" width="248.653" height="567.795" rx="4.44024" fill="white"/>
|
||||
<rect opacity="0.6" x="91.5338" y="136.596" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect opacity="0.6" x="91.5338" y="194.319" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect opacity="0.6" x="91.5338" y="252.042" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect opacity="0.6" x="91.5338" y="309.765" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect opacity="0.6" x="91.5338" y="367.488" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect x="332.972" y="112.175" width="778.706" height="139.867" rx="4.44024" fill="white"/>
|
||||
<rect opacity="0.6" x="473.394" y="140.481" width="286.95" height="32.1917" rx="4.44024" fill="#91BEFF"/>
|
||||
<rect opacity="0.6" x="473.394" y="194.319" width="449.574" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
|
||||
<rect opacity="0.6" x="949.609" y="194.319" width="119.331" height="32.1917" rx="4.44024" fill="#E2EDFE"/>
|
||||
<rect x="366.828" y="140.481" width="82.1444" height="82.1444" rx="4.44024" fill="#3F85ED"/>
|
||||
<rect x="331.862" y="284.234" width="779.261" height="395.736" fill="white"/>
|
||||
<path d="M1016.21 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<path d="M818.067 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<path d="M619.922 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<path d="M421.776 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<path d="M354.895 544.265C370.159 570.629 382.647 592.553 419.556 591.443C461.738 590.174 469.759 538.715 519.739 538.715C579.682 538.715 629.08 613.644 709.004 602.543C806.412 589.014 805.024 362.493 847.484 362.493C897.437 362.493 847.484 555.366 950.442 575.069C997.599 584.094 1069.77 554.903 1089.75 538.715" stroke="#E4EFFF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<path d="M358.78 504.858C390.695 524.562 408.733 525.117 427.049 522.064C455.078 517.392 488.657 465.173 529.175 459.623C579.96 452.666 605.769 490.317 664.047 480.714C718.908 471.675 760.622 367.766 843.599 380.531C921.303 392.486 914.088 530.667 954.882 540.102C977.638 545.366 989.572 516.791 1022.04 521.509C1048.02 525.283 1075.79 560.823 1086.42 578.122" stroke="#75ADFF" stroke-width="8.88047" stroke-linecap="round"/>
|
||||
<circle cx="419.556" cy="522.896" r="9.71302" fill="#E4EFFF" stroke="#75ADFF" stroke-width="4.99526"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6407_141381">
|
||||
<rect x="0.50882" y="0.0586548" width="1161.68" height="727.089" rx="2.22012" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in New Issue
Block a user