title, page
| title |
page |
| A Desktop UI Toolkit for Web |
true |
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { withBase } from 'vitepress'
const sponsors = [
{
name: 'bit',
img: withBase('/images/bit.svg'),
url: '
https://bit.dev/?from=element-ui',
slogan: 'Share Code',
},
{
name: 'renren.io',
img: withBase('/images/renren.png'),
url: '
https://www.renren.io/?from=element-ui',
slogan: 'Rapid development platform',
className: 'renren',
},
]
</script>
A Desktop UI Library
Element Plus, a Vue 3 based component library for developers, designers and product managers
-
Guide
Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.
View Detail
-
Component
Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.
View Detail
-
Resource
Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.
View Detail
<style lang="scss" scoped>
.home-page {
.banner {
text-align: center;
}
.banner-desc {
padding-top: 30px;
h1 {
font-size: 34px;
margin: 0;
line-height: 48px;
color: var(--text-color);
}
p {
font-size: 18px;
line-height: 28px;
color: var(--text-color-light);
margin: 20px 0 5px;
}
}
.sponsors {
display: flex;
justify-content: center;
}
.sponsor {
margin: 0 20px 50px;
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: 14px;
}
}
.jumbotron {
width: 890px;
margin: 30px auto;
position: relative;
img {
width: 100%;
}
.jumbotron-red {
transition: height 0.1s;
background: #fff;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
}
.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;
}
}
@media (max-width: 1000px) {
.banner .container {
img {
display: none;
}
}
.jumbotron {
display: none;
}
}
@media (max-width: 768px) {
.cards {
li {
width: 80%;
margin: 0 auto 20px;
float: none;
}
.card {
height: auto;
padding-bottom: 54px;
}
}
.banner-stars {
display: none;
}
.banner-desc {
#line2 {
display: none;
}
h2 {
font-size: 32px;
}
p {
width: auto;
}
}
}
.theme-intro-b {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
.intro-banner {
position: absolute;
}
img {
width: 300px;
}
.title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
p {
padding: 0;
margin: 10px 0;
}
}
}
.theme-intro-a {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
opacity: 0.5;
}
.intro-banner {
top: 50%;
left: 50%;
position: fixed;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
text-align: center;
z-index: 100;
img {
width: 100%;
}
.intro-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
p {
padding: 0;
margin: 0;
font-size: 48px;
font-weight: bold;
color: #fff;
}
}
}
}
}
.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>
