theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop

Browse Source
This commit is contained in:
halo
2022-03-09 07:29:22 +08:00
parent 1a388229f6 2c5bf79041
commit e9a3642733
30 changed files with 515 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/docs/zh-CN/components/color.md
View File

@@ -111,7 +111,7 @@ export default {
<template>
<ul class="layui-row site-doc-color site-doc-necolor">
<li class="layui-col-md12">
<div style="background-color: @global-neutral-color-1;">
<div style="background-color: #FAFAFA;">
<p>#FAFAFA</p><p>
</p></div>
</li>

73
example/docs/zh-CN/components/countup.md
View File

@@ -7,8 +7,8 @@
::: demo
<template>
<h1 style="padding:20px 15px">
<lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
<h1 style="padding:20px 15px; font-family: sans-serif">
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
</h1>
</template>
@@ -17,9 +17,9 @@ import { ref } from 'vue'
export default {
setup() {
const countVal = 2862.9888;
return {
}
}
}
@@ -38,14 +38,14 @@ export default {
<br/>
<!-- 属性 -->
<lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px">
<h1 style="padding:20px 15px; font-family: sans-serif">
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
</h1>
</lay-card>
<!-- 插槽 -->
<lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px">
<lay-count-up :end-val="18" :duration="1">
<lay-count-up :end-val="18" :duration="2000">
<template #prefix>
<span style="font-size:75%">雷雨&nbsp</span>
</template>
@@ -84,15 +84,18 @@ export default {
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| startVal | 起始值 | number | `0` | — |
| endVal | 显示的值 | number | `0` | — |
| decimal | 小数点 | string | `.` | — |
| decimalPlaces | 小数位数 | number | `0` | — |
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
| useGrouping | 是否使用千位分隔符 | boolean | `true` | `true` `false` |
| separator | 分隔符 | string | `,` | — |
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
| duration | 动画持续时间 | number | `2` | — |
| autoplay | 是否自动播放 | boolean | `true` | `true` `false` |
| useEasing | 是否使用动画 | boolean | `true` | `true` `false` |
| easingFn | 动画类型 | Array \| Function \| string | `easeInOutCubic` | — |
| duration | 动画持续时间,单位: ms | number | `2000` | — |
| prefix | 前缀 | string | — | — |
| suffix | 后缀 | string | — | — |
| option | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | — | 参见[CountUpOptions](#opts) |
:::
@@ -108,23 +111,45 @@ export default {
:::
::: title Count Up Options 属性
::: title Count Up 动画类型
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| startVal | 开始值 | number | `0` | — |
| decimalPlaces | 小数位数 | number | `0` | — |
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
| separator | 分隔符 | string | `,` | — |
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
| duration | 动画持续时间 | number | `2` | — |
| prefix | 前缀 | string | — | — |
| suffix | 后缀 | string | — | — | |
::: describe 可使用贝塞尔曲线定义动画
:::
```
easingFn: [0.75, 0, 0.25, 1]
```
::: describe 也可以使用自定义函数
:::
```
const easeOutElastic = (n) => {
return n === 0
? 0
: n === 1
? 1
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}
easingFn: easeOutElastic
```
::: describe 通过以下字符串快速设置动画类型
:::
```
easeInSine easeOutSine easeInOutSine
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
linear
```
::: previousNext countUp
:::

6
example/docs/zh-CN/components/load.md
View File

@@ -1,6 +1,12 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
:::
::: title 基础使用
:::

252
example/docs/zh-CN/components/menu.md
View File

@@ -14,20 +14,22 @@
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item>
<lay-menu-item title="菜单2" id="9"></lay-menu-item>
<lay-sub-menu title="菜单3" id="10">
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
<lay-sub-menu title="菜单3-3" id="13">
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item>
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
</lay-sub-menu>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -58,16 +60,22 @@ export default {
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -99,16 +107,22 @@ export default {
<template>
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu id="10">
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -140,16 +154,44 @@ export default {
<template>
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-menu-item id="1">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
目录
</template>
<lay-menu-item id="8">
菜单
</lay-menu-item>
<lay-menu-item id="9">
菜单
</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<template #title>
目录
</template>
<lay-menu-item id="11">
菜单
</lay-menu-item>
<lay-menu-item id="12">
菜单
</lay-menu-item>
<lay-menu-item id="13">
菜单
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -241,19 +283,107 @@ export default {
<br/>
<br/>
<lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item id="1">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item>
<lay-menu-item title="菜单2" id="9"></lay-menu-item>
<lay-sub-menu title="菜单3" id="10">
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
<lay-sub-menu title="菜单3-3" id="13">
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item>
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="8">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="9">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="10">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="11">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="12">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="13">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="14">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="15">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="16">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
@@ -287,13 +417,13 @@ export default {
::: table
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
| 属性 | 描述 | 备注 |
| ------------------- | -------------- | -------------- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
:::

3
example/docs/zh-CN/components/modal.md
View File

@@ -16,6 +16,7 @@
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible1 = ref(false)
@@ -158,7 +159,7 @@ export default {
<template>
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
<lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
<lay-layer title="加载 Iframe 内容" :area="['500px','400px']" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
</template>
<script>

6
example/docs/zh-CN/components/msg.md
View File

@@ -1,6 +1,12 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 全局展示操作反馈信息。
:::
::: title 基础使用
:::

17
example/docs/zh-CN/guide/changelog.md
View File

@@ -11,6 +11,23 @@
<template>
<lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-9"></a>
<li>
<h3>0.3.9 <span class="layui-badge-rim">2022-03-08</span></h3>
<ul>
<li>[重构] count-up 组件。</li>
<li>[新增] algolia 文档搜索引擎。</li>
<li>[新增] theme 主题 neutral 辅色配置。</li>
<li>[新增] menuItem 与 subMenu 组件 title 与 icon 插槽。</li>
<li>[新增] menu 菜单 collapse 属性, 支持折叠。</li>
<li>[修复] menu 菜单 inverted 跟随主题配置。</li>
<li>[删除] menuItem 菜单项 title 属性。</li>
<li>[删除] subMenu 菜单集 title 属性。</li>
<li>[升级] layer-vue 1.3.8 版本。</li>
</ul>
</li>
</ul>
<ul>
<a name="0-3-8"> </a>
<li>

12
example/docs/zh-CN/guide/getStarted.md
View File

@@ -5,21 +5,21 @@
<p>
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="110" style="border-radius:12px;">
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">+</span>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
<a href="http://layui-vue.pearadmin.com">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="110" style="border-radius:12px;">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">=</span>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo.jpg" alt="layui" width="110" style="border-radius:12px;">
<img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
</a>
</p>
<br>
::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
::: describe 使用 npm 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite rollup.
:::
```

4
example/docs/zh-CN/guide/introduce.md
View File

@@ -3,7 +3,7 @@
<p>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo-new.png" alt="layui" width="400">
<img src="../../../src/assets/logo-new.png" alt="layui" width="440">
</a>
</p>
@@ -14,7 +14,7 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
:::
<lay-timeline>
<lay-timeline-item title="2021年，layui vue 孵化" simple></lay-timeline-item>
<lay-timeline-item title="2021年，layui-vue 首个版本发布" 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>

2
example/docs/zh-CN/guide/member.md
View File

@@ -145,7 +145,7 @@
::: title 社区伙伴
:::
::: block
::: quote
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
:::

142
example/src/components/LaySearch.vue
View File

@@ -1,124 +1,40 @@
<template>
<select :name="name" lay-verify="required" />
<div
class="layui-unselect layui-form-select layui-search"
:class="[openState ? 'layui-form-selected' : '']"
@click="open"
style="margin-left: 20px"
>
<div class="layui-select-title">
<input
type="text"
placeholder="Search"
class="layui-input layui-unselect"
:value="name"
style="
background: rgba(255, 255, 255, 0.05);
border: none;
color: rgba(255, 255, 255, 0.7);
width: 196px;
height: 34px;
"
@input="change"
/><i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit" style="">
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
<dd
v-for="data in menus"
v-else
:key="data"
:value="name"
class="layui-select-tips"
@click="jump(data)"
>
{{ data.title }}
</dd>
</dl>
</div>
<div id="docsearch"></div>
</template>
<script setup name="LaySelect" lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Recordable } from '../../../src/types'
// @ts-ignore
import docsearch from "@docsearch/js";
import { onMounted } from "vue";
import "@docsearch/css";
const props = defineProps<{
datas?: Recordable[]
}>()
const route = useRoute()
const router = useRouter()
const openState = ref(false)
const menus = ref(props.datas)
const name = ref('')
const open = function () {
openState.value = !openState.value
}
const jump = function (data: any) {
name.value = data.title
router.push(data.path)
}
const change = function (e: any) {
name.value = e.target.value
if (e.target.value === '') {
menus.value = props.datas
} else {
menus.value = searchList(e.target.value, props.datas)
}
}
const searchList = function (str: string, container: any) {
var newList = []
var startChar = str.charAt(0)
var strLen = str.length
for (var i = 0; i < container.length; i++) {
var obj = container[i]
var isMatch = false
for (var p in obj) {
if (typeof obj[p] == 'function') {
obj[p]()
} else {
var curItem = ''
if (obj[p] != null) {
curItem = obj[p]
}
for (var j = 0; j < curItem.length; j++) {
if (curItem.charAt(j) == startChar) {
if (curItem.substring(j).substring(0, strLen) == str) {
isMatch = true
break
}
}
}
}
}
if (isMatch) {
newList.push(obj)
}
}
return newList
}
onMounted(() => {
docsearch({
container: "#docsearch",
appId: "Y8NT7MICRP",
apiKey: "fb23e7bbc001828e56c50d66e6be26b2",
indexName: "indexName"
});
});
</script>
<style>
.layui-search .layui-anim::-webkit-scrollbar {
width: 6px;
height: 6px;
.DocSearch-Button {
outline: none;
box-shadow: none;
}
.layui-search .layui-anim::-webkit-scrollbar-corner {
background: #f6f6f6;
.DocSearch-Button .DocSearch-Search-Icon,
.DocSearch-Button-Placeholder {
color: whitesmoke;
}
.layui-search .layui-anim::-webkit-scrollbar-thumb {
background: #e6e6e6;
border-radius: 2px;
:root {
--docsearch-logo-color: var(--global-primary-color);
--docsearch-primary-color: var(--global-primary-color) ;
--docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
--docsearch-container-background: rgba(0, 0, 0, 0.1);;
}
.layui-search .layui-anim::-webkit-scrollbar-track {
background: white;
border-radius: 2px;
}
</style>
</style>

3
example/src/plugin/usePlayground.ts
View File

@@ -59,8 +59,7 @@ export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
}
const encoded = utoa(JSON.stringify(originCode))
const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
//const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`
return {
code,
encoded,

2
example/src/view/extend.vue
View File

@@ -13,7 +13,7 @@
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm12">
<div class="alone">
<a href="https://gitee.com/layui-vue/layer-vue" target="_blank"
<a href="http://layer.layui-vue.com" target="_blank"
>layer - vue<cite>通用型弹出层组件</cite></a
>
</div>

27
example/src/view/index.vue
View File

@@ -1,20 +1,20 @@
<template>
<div
style="
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
"
<div class="site-container"
>
<div class="site-banner">
<div class="site-banner-main">
<div class="site-zfj site-zfj-anim">
<img src="../assets/logo.jpg" style="width: 200px;border-radius: 10px;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" />
<img
src="../assets/logo.jpg"
style="width: 220px; border-radius: 10px"
/>
</div>
<div class="layui-anim site-desc site-desc-anim">
<p class="web-font-desc">layui - vue</p>
<cite>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.</cite>
<cite
>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件
库.</cite
>
</div>
<div class="site-download">
<router-link class="layui-inline site-down" to="/zh-CN/guide"
@@ -109,15 +109,18 @@
</div>
</template>
<style>
.site-container {
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
}
.site-banner {
position: relative;
height: 600px;
text-align: center;
overflow: hidden;
background-color: #393d49;
background-image: url(../assets/background.svg);
background-repeat: no-repeat;
background-size: 100%;
}
.site-banner-bg {
background-position: center 0;

52
example/src/view/material.vue
View File

@@ -9,35 +9,17 @@
<div class="layui-container" style="width: 80%">
<div class="layui-row layui-col-space16">
<div class="layui-col layui-col-md6">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"
/>
<div class="project-list-item-body">
<h2>Sandbox</h2>
<div class="project-list-item-text layui-text">
生命就像一盒巧克力，结果往往出人意料。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
<div class="ew-head-list"></div>
</div>
</div>
</div>
</div>
<div class="layui-col layui-col-md6">
<div class="project-list-item">
<a href="https://github.com/scopewu/qrcode.vue">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
/>
<div class="project-list-item-body">
<h2>Sandbox</h2>
<h2>Qrcode.vue</h2>
<div class="project-list-item-text layui-text">
没有锚的船当然也可以航行，只是紧张充满你的一生。
A Vue.js component to generate qrcode。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
@@ -45,21 +27,39 @@
</div>
</div>
</div>
</a>
</div>
<div class="layui-col layui-col-md6">
<a href="https://github.com/rstacruz/nprogress">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
/>
<div class="project-list-item-body">
<h2>Nprogress</h2>
<div class="project-list-item-text layui-text">
For slim progress bars like on YouTube, Medium。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
<div class="ew-head-list"></div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
.alone-banner {
margin-top: 60px;
height: 190px;
text-align: center;
font-weight: 300;
background-color: #009688;
color: #fff;
}
.alone-banner h1 {