testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(vitepress): fix response layout

This commit is contained in:
Sagi 2022-10-09 14:07:02 +08:00
parent 4412194351
commit e975f5bfa0
5 changed files with 180 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue
View File

@ -9,8 +9,8 @@ const { frontmatter: fm } = useData();
<div class="f-feature"> <div class="f-feature">
<div class="f-feature-subtitle">快速上手</div> <div class="f-feature-subtitle">快速上手</div>
<div class="f-feature-title">灵活丰富的生态平台</div> <div class="f-feature-title">灵活丰富的生态平台</div>
<div class="f-feature-container"> <div class="f-feature-container row">
<div class="f-feature-item"> <div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="f-feature-item-icon"> <div class="f-feature-item-icon">
<img src="/assets/efficiency.png" /> <img src="/assets/efficiency.png" />
</div> </div>
@ -19,7 +19,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">快速、高效、智能极致体验</div> <div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
</div> </div>
</div> </div>
<div class="f-feature-item"> <div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="f-feature-item-icon"> <div class="f-feature-item-icon">
<img src="/assets/clarity.png" /> <img src="/assets/clarity.png" />
</div> </div>
@ -28,7 +28,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div> <div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
</div> </div>
</div> </div>
<div class="f-feature-item"> <div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="f-feature-item-icon"> <div class="f-feature-item-icon">
<img src="/assets/consistency.png" /> <img src="/assets/consistency.png" />
</div> </div>
@ -37,7 +37,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div> <div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
</div> </div>
</div> </div>
<div class="f-feature-item"> <div class="f-feature-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="f-feature-item-icon"> <div class="f-feature-item-icon">
<img src="/assets/beauty.png" /> <img src="/assets/beauty.png" />
</div> </div>
@ -50,74 +50,86 @@ const { frontmatter: fm } = useData();
</div> </div>
<div class="f-news"> <div class="f-news">
<div class="f-news-container"> <div class="f-news-container">
<div class="f-news-container-row"> <div class="f-news-container-row row">
<div class="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-01"> <div class="f-news-card-hero">
<img src="/assets/Pro.svg" /> <div id="f-card-01">
<img src="/assets/Pro.svg" />
</div>
</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="f-news-card-title">
<a href="/components/">Farris UI 通用组件</a>
</div>
<div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
</div> </div>
<div class="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-02"> <div class="f-news-card-hero">
<img src="/assets/Mobile.svg" /> <div id="f-card-02">
<img src="/assets/Mobile.svg" />
</div>
</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="f-news-card-title">
<a href="/mobiles/">Farris UI Mobile 组件</a>
</div>
<div class="f-news-card-content">移动端应用组件库</div>
</div> </div>
<div class="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-03"> <div class="f-news-card-hero">
<img src="/assets/Pro.svg" /> <div id="f-card-03">
<img src="/assets/Pro.svg" />
</div>
</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 class="f-news-card-title">
<a href="/advance-components/">Farris UI 业务组件库</a>
</div>
<div class="f-news-card-content">为筛选数据、选取数据、社交等场景设计的业务组件库</div>
</div> </div>
</div> </div>
<div class="f-news-container-row"> <div class="f-news-container-row row">
<div class="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-04"> <div class="f-news-card-hero">
<img src="/assets/Dashboard.svg" /> <div id="f-card-04">
<img src="/assets/Dashboard.svg" />
</div>
</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="f-news-card-title">
<a href="/patterns/">Farris UI 页面模式</a>
</div>
<div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
</div> </div>
<div class="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-05"> <div class="f-news-card-hero">
<img src="/assets/Portal.svg" /> <div id="f-card-05">
<img src="/assets/Portal.svg" />
</div>
</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="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="f-news-card"> <div class="col-12 col-sm-12 col-md-4 my-3">
<div class="f-news-card-hero"> <div class="f-news-card">
<div id="f-card-06"> <div class="f-news-card-hero">
<img src="/assets/Pix.svg" /> <div id="f-card-06">
<img src="/assets/Pix.svg" />
</div>
</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 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> </div>
@ -150,16 +162,27 @@ const { frontmatter: fm } = useData();
.f-feature-container { .f-feature-container {
display: flex; display: flex;
margin: 10px auto; margin: 10px 20px;
width: 1220px;
box-shadow: var(--vp-shadow-3); box-shadow: var(--vp-shadow-3);
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
border-radius: 8px; border-radius: 8px;
padding: 48px 32px; padding: 48px 32px;
} }
@media (min-width: 1440px) {
.f-feature-container {
width: 1220px;
margin: 10px auto;
}
}
.f-feature-item { .f-feature-item {
flex: 1;
display: flex; display: flex;
margin: 16px 0;
}
.f-feature-item-icon {
min-width: 54px;
} }
.f-feature-item-icon img { .f-feature-item-icon img {
@ -196,14 +219,20 @@ const { frontmatter: fm } = useData();
} }
.f-news-container { .f-news-container {
display: block; display: flex;
margin: 10px auto; flex-direction: column;
width: 1220px; }
@media (min-width: 1440px) {
.f-news-container {
width: 1248px;
margin: 10px auto;
}
} }
.f-news-container-row { .f-news-container-row {
display: flex; display: flex;
margin-bottom: 40px; margin: 0;
} }
.f-news-container-row > .f-news-card { .f-news-container-row > .f-news-card {
@ -215,9 +244,11 @@ const { frontmatter: fm } = useData();
} }
.f-news-card { .f-news-card {
flex: 1; background-color: var(--vp-c-bg-soft);
/* margin-right: 40px; */ box-shadow: var(--vp-shadow-3);
border-radius: 16px;
padding: 16px; padding: 16px;
height: 320px;
} }
.f-news-card-hero > div { .f-news-card-hero > div {
@ -254,13 +285,6 @@ const { frontmatter: fm } = useData();
margin: 0 16px 12px; margin: 0 16px 12px;
} }
.f-news-card {
flex: 1;
background-color: var(--vp-c-bg-soft);
box-shadow: var(--vp-shadow-3);
border-radius: 16px;
}
#f-card-01 { #f-card-01 {
background-image: url(/assets/General_bg.png); background-image: url(/assets/General_bg.png);
background-size: cover; background-size: cover;

31
packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeHero.vue
View File

@ -1,25 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { useData } from "vitepress"; import { useData } from 'vitepress';
import VPHero from "./VPHero.vue"; import VPHero from './VPHero.vue';
const { frontmatter: fm } = useData(); const { frontmatter: fm } = useData();
</script> </script>
<template> <template>
<VPHero <VPHero
v-if="fm.hero" v-if="fm.hero"
class="VPHomeHero" class="VPHomeHero"
:name="fm.hero.name" :name="fm.hero.name"
:text="fm.hero.text" :text="fm.hero.text"
:tagline="fm.hero.tagline" :tagline="fm.hero.tagline"
:image="fm.hero.image" :image="fm.hero.image"
:actions="fm.hero.actions" :actions="fm.hero.actions"
/> />
</template> </template>
<style scoped> <style scoped>
.VPHomeHero { .VPHomeHero {
background-image: url(/assets/banner.png); background-image: url(/assets/banner.png);
background-size: cover; background-size: cover;
}
.dark .VPHomeHero {
background-image: url(/assets/banner_dark.png);
display: none;
} }
</style> </style>

1
packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue
View File

@ -23,6 +23,7 @@ const { hasSidebar } = useSidebar();
.VPNavBarTitle { .VPNavBarTitle {
flex-shrink: 0; flex-shrink: 0;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
margin-left: 10px;
} }
@media (min-width: 960px) { @media (min-width: 960px) {

136
packages/ui-vue/docs/.vitepress/farris-theme/components/VPSidebar.vue
View File

@ -1,114 +1,110 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watchPostEffect, nextTick } from "vue"; import { ref, watchPostEffect, nextTick } from 'vue';
import { useSidebar } from "../composables/sidebar.js"; import { useSidebar } from '../composables/sidebar.js';
import VPSidebarGroup from "./VPSidebarGroup.vue"; import VPSidebarGroup from './VPSidebarGroup.vue';
const { sidebar, hasSidebar } = useSidebar(); const { sidebar, hasSidebar } = useSidebar();
const props = defineProps<{ const props = defineProps<{
open: boolean; open: boolean;
}>(); }>();
// a11y: focus Nav element when menu has opened // a11y: focus Nav element when menu has opened
let navEl = ref<(Element & { focus(): void }) | null>(null); let navEl = ref<(Element & { focus(): void }) | null>(null);
watchPostEffect(async () => { watchPostEffect(async () => {
if (props.open) { if (props.open) {
await nextTick(); await nextTick();
navEl.value?.focus(); navEl.value?.focus();
} }
}); });
</script> </script>
<template> <template>
<aside v-if="hasSidebar" class="VPSidebar" :class="{ open }" ref="navEl" @click.stop> <aside v-if="hasSidebar" class="VPSidebar" :class="{ open }" ref="navEl" @click.stop>
<nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1"> <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
<span class="visually-hidden" id="sidebar-aria-label"> Sidebar Navigation </span> <span class="visually-hidden" id="sidebar-aria-label"> Sidebar Navigation </span>
<div v-for="group in sidebar" :key="group.text" class="group"> <div v-for="group in sidebar" :key="group.text" class="group">
<VPSidebarGroup <VPSidebarGroup :text="group.text" :items="group.items" :collapsible="group.collapsible" :collapsed="group.collapsed" />
:text="group.text" </div>
:items="group.items" </nav>
:collapsible="group.collapsible" </aside>
:collapsed="group.collapsed"
/>
</div>
</nav>
</aside>
</template> </template>
<style scoped> <style scoped>
.VPSidebar { .VPSidebar {
position: fixed; position: fixed;
/* top: 0; */ /* top: 0; */
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: var(--vp-z-index-sidebar); z-index: var(--vp-z-index-sidebar);
padding: 32px 32px 96px; padding: 32px 32px 96px;
width: calc(100vw - 64px); width: calc(100vw - 64px);
max-width: 320px; max-width: 320px;
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
opacity: 0; opacity: 0;
box-shadow: var(--vp-c-shadow-3); box-shadow: var(--vp-c-shadow-3);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
transform: translateX(-100%); transform: translateX(-100%);
transition: opacity 0.5s, transform 0.25s ease; transition: opacity 0.5s, transform 0.25s ease;
top: var(--vp-nav-height); top: var(--vp-nav-height);
padding-top: 0; padding-top: 0;
} }
.VPSidebar.open { .VPSidebar.open {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translateX(0); transform: translateX(0);
transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
} }
.dark .VPSidebar { .dark .VPSidebar {
box-shadow: var(--vp-shadow-1); box-shadow: var(--vp-shadow-1);
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.VPSidebar { .VPSidebar {
z-index: 1; z-index: 1;
/* padding-top: var(--vp-nav-height-desktop); */ /* padding-top: var(--vp-nav-height-desktop); */
padding-bottom: 128px; padding-bottom: 128px;
width: var(--vp-sidebar-width); width: var(--vp-sidebar-width);
max-width: 100%; max-width: 100%;
background-color: var(--vp-c-bg-alt); background-color: var(--vp-c-bg-alt);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
box-shadow: none; box-shadow: none;
transform: translateX(0); transform: translateX(0);
} }
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
.VPSidebar { .VPSidebar {
/* padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)); */ /* padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)); */
/* width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px); */ /* width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px); */
} }
} }
.nav { .nav {
outline: 0; outline: 0;
flex-direction: column;
} }
.group + .group { .group + .group {
margin-top: 32px; margin-top: 32px;
border-top: 1px solid var(--vp-c-divider-light); border-top: 1px solid var(--vp-c-divider-light);
padding-top: 10px; padding-top: 10px;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.group { .group {
padding-top: 10px; padding-top: 10px;
width: calc(var(--vp-sidebar-width) - 64px); width: calc(var(--vp-sidebar-width) - 64px);
} }
.group + .group { .group + .group {
margin-top: 24px; margin-top: 24px;
} }
} }
</style> </style>

BIN
packages/ui-vue/docs/assets/farris_design_dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 33 KiB