perf(layout): 重构 layout 组件, 增强 carouel 轮播组件
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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: '贡献' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user