[文档] 更新主页
This commit is contained in:
就眠仪式
parent
4eb431415c
commit
98beb7c23c
@ -3,8 +3,8 @@
|
||||
<template>
|
||||
<lay-collapse>
|
||||
<lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
|
||||
@ -59,4 +59,9 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| trigger | 触发方式 | `click` `hover` |
|
||||
@ -2,6 +2,12 @@
|
||||
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.0.11">
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.0.10">
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.0.9">
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.0.8">
|
||||
</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
|
||||
@ -4,27 +4,38 @@
|
||||
layui（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
||||
</lay-block>
|
||||
|
||||
::: demo
|
||||
<lay-timeline style="padding-left:38px;padding-top:30px;">
|
||||
<lay-timeline-item title="2021年，layui vue 里程碑版本 0.0.1 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
|
||||
</lay-timeline>
|
||||
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
<div>
|
||||
<ul class="layui-row layui-col-space30 site-idea">
|
||||
<li class="layui-col-md4">
|
||||
<div>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>返璞归真</legend>
|
||||
<p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>双面体验</legend>
|
||||
<p>拥有双面的不仅是人生，还有 layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>星辰大海</legend>
|
||||
<p>如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回<!--海天相接-->，正是 layui 不灭的执念。</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -29,4 +29,5 @@ createApp(App)
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</lay-layout>
|
||||
```
|
||||
```
|
||||
完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
|
||||
@ -98,7 +98,7 @@ function handleScroll() {
|
||||
.lay-code .meta .description {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid var(--c-divider);
|
||||
border: 1px solid whitesmoke;
|
||||
box-sizing: border-box;
|
||||
background: var(--c-bg);
|
||||
font-size: 14px;
|
||||
@ -115,7 +115,7 @@ function handleScroll() {
|
||||
padding: 1px 5px;
|
||||
margin: 0 4px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--code-inline-bg-color);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
</ul>
|
||||
</lay-header>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding:6px">
|
||||
<li
|
||||
:key="menu"
|
||||
v-for="menu in menus"
|
||||
|
||||
@ -22,7 +22,7 @@ div[class*='language-'] {
|
||||
margin: 1rem -1.5rem;
|
||||
background-color: #fafafa;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #eaeefb;
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
li > div[class*='language-'] {
|
||||
|
||||
@ -213,4 +213,29 @@ table td {
|
||||
|
||||
.site-doc-bgcolor li {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.site-idea {
|
||||
margin: 30px 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.site-idea li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.site-idea li div {
|
||||
padding: 25px;
|
||||
line-height: 24px;
|
||||
border: 1px solid #d2d2d2;
|
||||
}
|
||||
|
||||
.site-idea .layui-field-title {
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.site-idea .layui-field-title legend {
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "0.0.11",
|
||||
"version": "0.0.12",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
"main": "lib/layui-vue.umd.js",
|
||||
"module": "lib/layui-vue.es.js",
|
||||
|
||||
@ -4312,6 +4312,7 @@ body .layui-table-tips .layui-layer-content {
|
||||
.layui-menu .layui-menu-item-checked,
|
||||
.layui-menu .layui-menu-item-checked2 {
|
||||
background-color: #F6F6F6 !important;
|
||||
border-radius: 2px;
|
||||
color: #5FB878
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user