📝(component): update

This commit is contained in:
就眠儀式 2022-07-23 10:46:03 +08:00
parent 369822290a
commit 68f0f70bcb
7 changed files with 77 additions and 35 deletions

View File

@ -6,9 +6,11 @@
.layui-panel {
border-width: 1px;
border-style: solid;
margin-bottom: 15px;
border-radius: var(--panel-border-radius);
border-color: var(--panel-border-color);
background-color: #fff;
padding: 20px;
}
.layui-panel.is-hover-shadow:hover {

View File

@ -10,6 +10,8 @@
--global-checked-color: #5fb878;
--global-info-color: #31BDEC;
--global-border-radius: 2px;
--global-neutral-color-1: #FAFAFA;

View File

@ -166,10 +166,10 @@ export default {
<lay-card>
内容
</lay-card>
<lay-card shadow="hover">
<lay-card shadow="hover">
内容
</lay-card>
<lay-card shadow="never">
<lay-card shadow="never">
内容
</lay-card>
</div>

View File

@ -35,7 +35,7 @@
<li class="layui-col-sm6">
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#393D49</p><p>
</p><p tips="">常用于导航</p>
</p><p tips="">导航</p>
</div>
</li>
</ul>
@ -63,9 +63,15 @@ export default {
<template>
<ul class="layui-row layui-col-space15">
<li class="layui-col-sm6">
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#FF5722</p><p>
</p><p tips="">错误 - DANGER</p>
<div style="background-color: #31BDEC;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#31BDEC</p><p>
</p><p tips="">引导 - INFO</p>
</div>
</li>
<li class="layui-col-sm6">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#5FB878</p><p>
</p><p tips="">成功 - SUCCESS</p>
</div>
</li>
<li class="layui-col-sm6">
@ -75,15 +81,9 @@ export default {
</div>
</li>
<li class="layui-col-sm6">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#01AAED</p><p>
</p><p tips="">成功 - SUCCESS</p>
</div>
</li>
<li class="layui-col-sm6">
<div style="background-color: #31BDEC;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#2F4056</p><p>
</p><p tips="">引导 - INFO</p>
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#FF5722</p><p>
</p><p tips="">错误 - DANGER</p>
</div>
</li>
</ul>
@ -153,23 +153,6 @@ export default {
:::
::: title 颜色说明
:::
::: table
| Class | 描述 | 使用 |
| --------------- | ---- | ----------------------- |
| layui-bg-red | 赤色 | class="layui-bg-red" |
| layui-bg-orange | 橙色 | class="layui-bg-orange" |
| layui-bg-green | 墨绿 | class="layui-bg-green" |
| layui-bg-cyan | 藏青 | class="layui-bg-cyan" |
| layui-bg-blue | 蓝色 | class="layui-bg-blue" |
| layui-bg-black | 雅黑 | class="layui-bg-black" |
:::
::: contributor color
:::

View File

@ -30,6 +30,47 @@ export default {
:::
::: title 边框阴影
:::
::: demo 通过 shadow 属性设置面板阴影出现的时机。 该属性的值可以是always、hover或never。
<template>
<div class="panel-container">
<lay-panel>
内容
</lay-panel>
<lay-panel shadow="hover">
内容
</lay-panel>
<lay-panel shadow="never">
内容
</lay-panel>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
<style>
.panel-container > * {
background: whitesmoke;
margin-top: 20px;
}
</style>
:::
::: title Panel 属性
:::

View File

@ -4,15 +4,15 @@
<br>
<p>
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
<img src="../../../assets/layui-logo.png" alt="layui" width="105" style="border-radius:12px;">
<img src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" alt="layui" width="105" style="border-radius:4px;">
</a>
<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="105" style="border-radius:12px;">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:4px;">
</a>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
<img src="../../../assets/logo.jpg" alt="layui" width="105" style="border-radius:4px;">
</a>
</p>
<br>

View File

@ -191,6 +191,20 @@
></lay-avatar>
</a>
</lay-tooltip>
</lay-col>
<lay-col :md="3">
<lay-tooltip content="Pear Admin" position="top">
<a
style="height: 40px; display: inline-block"
href="http://www.pearadmin.com"
target="_blank"
>
<lay-avatar
src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png"
style="background: transparent"
></lay-avatar>
</a>
</lay-tooltip>
</lay-col>
</lay-row>
</div>