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 ceb36eeb38
commit ec9c3a71d3
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-subtitle">快速上手</div>
<div class="f-feature-title">灵活丰富的生态平台</div>
<div class="f-feature-container">
<div class="f-feature-item">
<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>
@ -19,7 +19,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">快速、高效、智能极致体验</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">
<img src="/assets/clarity.png" />
</div>
@ -28,7 +28,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</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">
<img src="/assets/consistency.png" />
</div>
@ -37,7 +37,7 @@ const { frontmatter: fm } = useData();
<div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</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">
<img src="/assets/beauty.png" />
</div>
@ -50,74 +50,86 @@ const { frontmatter: fm } = useData();
</div>
<div class="f-news">
<div class="f-news-container">
<div class="f-news-container-row">
<div class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-01">
<img src="/assets/Pro.svg" />
<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 class="f-news-card-title">
<a href="/components/">Farris UI 通用组件</a>
</div>
<div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
</div>
<div class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-02">
<img src="/assets/Mobile.svg" />
<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 class="f-news-card-title">
<a href="/mobiles/">Farris UI Mobile 组件</a>
</div>
<div class="f-news-card-content">移动端应用组件库</div>
</div>
<div class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-03">
<img src="/assets/Pro.svg" />
<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 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-container-row">
<div class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-04">
<img src="/assets/Dashboard.svg" />
<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 class="f-news-card-title">
<a href="/patterns/">Farris UI 页面模式</a>
</div>
<div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
</div>
<div class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-05">
<img src="/assets/Portal.svg" />
<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 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 class="f-news-card">
<div class="f-news-card-hero">
<div id="f-card-06">
<img src="/assets/Pix.svg" />
<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 class="f-news-card-title">
<a href="/resources/">Farris UI Resources</a>
</div>
<div class="f-news-card-content">设计资源和图标库</div>
</div>
</div>
</div>
@ -150,16 +162,27 @@ const { frontmatter: fm } = useData();
.f-feature-container {
display: flex;
margin: 10px auto;
width: 1220px;
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 {
flex: 1;
display: flex;
margin: 16px 0;
}
.f-feature-item-icon {
min-width: 54px;
}
.f-feature-item-icon img {
@ -196,14 +219,20 @@ const { frontmatter: fm } = useData();
}
.f-news-container {
display: block;
margin: 10px auto;
width: 1220px;
display: flex;
flex-direction: column;
}
@media (min-width: 1440px) {
.f-news-container {
width: 1248px;
margin: 10px auto;
}
}
.f-news-container-row {
display: flex;
margin-bottom: 40px;
margin: 0;
}
.f-news-container-row > .f-news-card {
@ -215,9 +244,11 @@ const { frontmatter: fm } = useData();
}
.f-news-card {
flex: 1;
/* margin-right: 40px; */
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 {
@ -254,13 +285,6 @@ const { frontmatter: fm } = useData();
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 {
background-image: url(/assets/General_bg.png);
background-size: cover;

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

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

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

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