318 lines
9.4 KiB
Vue
318 lines
9.4 KiB
Vue
<script setup lang="ts">
|
|
import { useData } from 'vitepress';
|
|
import VPFeatures from './VPFeatures.vue';
|
|
|
|
const { frontmatter: fm } = useData();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="f-feature">
|
|
<div class="f-feature-subtitle">快速上手</div>
|
|
<div class="f-feature-title">灵活丰富的生态平台</div>
|
|
<div class="f-feature-container row">
|
|
<div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="f-feature-item-icon">
|
|
<img src="/assets/efficiency.png" />
|
|
</div>
|
|
<div class="f-feature-item-content">
|
|
<div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
|
|
<div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="f-feature-item-icon">
|
|
<img src="/assets/clarity.png" />
|
|
</div>
|
|
<div class="f-feature-item-content">
|
|
<div class="f-feature-item-title"><span>c</span>larity 清晰</div>
|
|
<div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="f-feature-item-icon">
|
|
<img src="/assets/consistency.png" />
|
|
</div>
|
|
<div class="f-feature-item-content">
|
|
<div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
|
|
<div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="f-feature-item-icon">
|
|
<img src="/assets/beauty.png" />
|
|
</div>
|
|
<div class="f-feature-item-content">
|
|
<div class="f-feature-item-title"><span>b</span>eauty 美观</div>
|
|
<div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-news">
|
|
<div class="f-news-container">
|
|
<div class="f-news-container-row row">
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-01">
|
|
<img src="/assets/Pro.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/components/">Farris UI 通用组件</a>
|
|
</div>
|
|
<div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-02">
|
|
<img src="/assets/Mobile.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/mobiles/">Farris UI Mobile 组件</a>
|
|
</div>
|
|
<div class="f-news-card-content">移动端应用组件库</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-03">
|
|
<img src="/assets/Pro.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/advance-components/">Farris UI 业务组件库</a>
|
|
</div>
|
|
<div class="f-news-card-content">为筛选数据、选取数据、社交等场景设计的业务组件库</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-news-container-row row">
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-04">
|
|
<img src="/assets/Dashboard.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/patterns/">Farris UI 页面模式</a>
|
|
</div>
|
|
<div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-05">
|
|
<img src="/assets/Portal.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/mobile-patterns/">Farris UI Mobile 页面模式</a>
|
|
</div>
|
|
<div class="f-news-card-content">使用 Farris UI Mobile 搭建的页面模板库</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-4 my-3">
|
|
<div class="f-news-card">
|
|
<div class="f-news-card-hero">
|
|
<div id="f-card-06">
|
|
<img src="/assets/Pix.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="f-news-card-title">
|
|
<a href="/resources/">Farris UI Resources</a>
|
|
</div>
|
|
<div class="f-news-card-content">设计资源和图标库</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.f-feature {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.f-feature-title {
|
|
font-size: 32px;
|
|
color: var(--vp-c-text-1);
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.f-feature-subtitle {
|
|
font-size: 16px;
|
|
color: var(--vp-c-text-2);
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.f-feature-container {
|
|
display: flex;
|
|
margin: 10px 20px;
|
|
box-shadow: var(--vp-shadow-3);
|
|
background-color: var(--vp-c-bg-soft);
|
|
border-radius: 8px;
|
|
padding: 48px 32px;
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.f-feature-container {
|
|
width: 1220px;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
|
|
.f-feature-item {
|
|
display: flex;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.f-feature-item-icon {
|
|
min-width: 54px;
|
|
}
|
|
|
|
.f-feature-item-icon img {
|
|
width: 54px;
|
|
height: 54px;
|
|
}
|
|
|
|
.f-feature-item-content {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.f-feature-item-title {
|
|
font-size: 20px;
|
|
color: var(--vp-c-text-1);
|
|
letter-spacing: 0;
|
|
line-height: 28px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.f-feature-item-title span {
|
|
color: #3661ff;
|
|
}
|
|
|
|
.f-feature-item-subtitle {
|
|
font-size: 14px;
|
|
color: var(--vp-c-text-2);
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.f-news {
|
|
padding-top: 80px;
|
|
padding-bottom: 120px;
|
|
}
|
|
|
|
.f-news-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.f-news-container {
|
|
width: 1248px;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
|
|
.f-news-container-row {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
|
|
.f-news-container-row > .f-news-card {
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.f-news-container-row > .f-news-card:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.f-news-card {
|
|
background-color: var(--vp-c-bg-soft);
|
|
box-shadow: var(--vp-shadow-3);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
height: 320px;
|
|
}
|
|
|
|
.f-news-card-hero > div {
|
|
height: 190px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
}
|
|
|
|
.f-news-card-hero img {
|
|
margin: auto;
|
|
}
|
|
|
|
.f-news-card-title {
|
|
font-size: 20px;
|
|
color: var(--vp-c-text-1);
|
|
letter-spacing: -0.5px;
|
|
font-weight: 400;
|
|
margin: 12px 16px 6px;
|
|
}
|
|
|
|
.f-news-card-title a {
|
|
color: inherit;
|
|
}
|
|
|
|
.f-news-card-title a:hover {
|
|
color: #529dff;
|
|
}
|
|
|
|
.f-news-card-content {
|
|
font-size: 14px;
|
|
color: var(--vp-c-text-2);
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
margin: 0 16px 12px;
|
|
}
|
|
|
|
#f-card-01 {
|
|
background-image: url(/assets/General_bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
#f-card-02 {
|
|
background-image: url(/assets/Mobile_bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
#f-card-03 {
|
|
background-image: url(/assets/Pro_bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
#f-card-04 {
|
|
background-image: url(/assets/Dashboard_bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
#f-card-05 {
|
|
background-image: url(/assets/Portal_bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
#f-card-06 {
|
|
background-image: url(/assets/Pix_bg.png);
|
|
background-size: cover;
|
|
}
|
|
</style>
|