perf(layout): 重构 layout 组件, 增强 carouel 轮播组件

This commit is contained in:
就眠仪式
2021-10-24 17:23:39 +08:00
parent 23ac843852
commit 3bd3dbf6cb
22 changed files with 1076 additions and 764 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div class="width:100%;height:300px">
<lay-layout>
<lay-header style="background: #393d49; border-bottom: 1px solid #404553">
<lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
<lay-header style="background: #393d49; border-bottom: 1px solid #404553"
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
<img src="../assets/logo.png" />
</lay-logo>
<ul
@@ -30,14 +30,14 @@
>
<li class="layui-nav-item">
<a href="https://gitee.com/layui-vue">
<lay-icon type="layui-icon-fonts-code" size="18px"></lay-icon>
<lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
<a
href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
>
<lay-icon type="layui-icon-chat" size="18px"></lay-icon>
<lay-icon type="layui-icon-chat" size="14px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
@@ -341,6 +341,9 @@ export default {
left: 15px;
top: 16px;
}
.layui-header > .layui-nav {
background-color: transparent;
}
.layui-menu-docs {
padding-top: 10px;
}

View File

@@ -37,9 +37,14 @@ const zhCN = [
meta: { title: '更新' },
},
{
path: '/zh-CN/guide/sandbox',
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
meta: { title: '沙盒' },
path: '/zh-CN/guide/problem',
component: () => import('../../docs/zh-CN/guide/problem.md'),
meta: { title: '问题' },
},
{
path: '/zh-CN/guide/contribution',
component: () => import('../../docs/zh-CN/guide/contribution.md'),
meta: { title: '贡献' },
},
],
},

View File

@@ -285,10 +285,10 @@ body::-webkit-scrollbar {
}
.layui-menu-item-group {
padding-left: 10px!important;
padding-right: 10px!important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
padding-left: 15px;
}
}

View File

@@ -1,41 +1,43 @@
<template>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
lay-options="{type: 'group', isAllowSpread: true}"
>
<div class="layui-menu-body-title">{{ menu.title }}</div>
<hr />
<ul>
<li
v-for="children in menu.children"
:key="children"
:class="[
currentPath === children.path ? 'layui-menu-item-checked2' : '',
]"
@click="handleClick(children)"
>
<div class="layui-menu-body-title">
<router-link :to="children.path">
<span>{{ children.title }}</span>
<span class="layui-font-12 layui-font-gray">
{{ children.subTitle }}
</span>
</router-link>
</div>
</li>
</ul>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
<lay-layout>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
lay-options="{type: 'group', isAllowSpread: true}"
>
<div class="layui-menu-body-title">{{ menu.title }}</div>
<hr />
<ul>
<li
v-for="children in menu.children"
:key="children"
:class="[
currentPath === children.path ? 'layui-menu-item-checked2' : '',
]"
@click="handleClick(children)"
>
<div class="layui-menu-body-title">
<router-link :to="children.path">
<span>{{ children.title }}</span>
<span class="layui-font-12 layui-font-gray">
{{ children.subTitle }}
</span>
</router-link>
</div>
</li>
</ul>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'

View File

@@ -1,41 +1,45 @@
<template>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
lay-options="{type: 'group', isAllowSpread: true}"
>
<div class="layui-menu-body-title">{{ menu.title }}</div>
<hr />
<ul>
<lay-layout>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="children in menu.children"
:key="children"
:class="[
currentPath === children.path ? 'layui-menu-item-checked2' : '',
]"
@click="handleClick(children)"
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
lay-options="{type: 'group', isAllowSpread: true}"
>
<div class="layui-menu-body-title">
<router-link :to="children.path">
<span>{{ children.title }}</span>
<span class="layui-font-12 layui-font-gray">
{{ children.subTitle }}
</span>
</router-link>
</div>
<div class="layui-menu-body-title">{{ menu.title }}</div>
<hr />
<ul>
<li
v-for="children in menu.children"
:key="children"
:class="[
currentPath === children.path
? 'layui-menu-item-checked2'
: '',
]"
@click="handleClick(children)"
>
<div class="layui-menu-body-title">
<router-link :to="children.path">
<span>{{ children.title }}</span>
<span class="layui-font-12 layui-font-gray">
{{ children.subTitle }}
</span>
</router-link>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
@@ -80,6 +84,18 @@ export default {
subTitle: 'change log',
path: '/zh-CN/guide/changelog',
},
{
id: 4,
title: '问题',
subTitle: 'problem',
path: '/zh-CN/guide/problem',
},
{
id: 5,
title: '贡献',
subTitle: 'contribution',
path: '/zh-CN/guide/contribution',
},
],
},
]

View File

@@ -4,7 +4,6 @@
background-color: whitesmoke;
height: 100%;
width: 100%;
margin-top: 60px;
"
>
<div class="site-banner">
@@ -28,7 +27,7 @@
>
</div>
<div class="site-version">
<span>当前版本v<cite class="site-showv">0.1.9</cite></span>
<span>当前版本v<cite class="site-showv">0.2.0</cite></span>
<span
><router-link
class="layui-inline site-down"