📝(component): update
This commit is contained in:
parent
369822290a
commit
68f0f70bcb
@ -6,9 +6,11 @@
|
|||||||
.layui-panel {
|
.layui-panel {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
margin-bottom: 15px;
|
||||||
border-radius: var(--panel-border-radius);
|
border-radius: var(--panel-border-radius);
|
||||||
border-color: var(--panel-border-color);
|
border-color: var(--panel-border-color);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-panel.is-hover-shadow:hover {
|
.layui-panel.is-hover-shadow:hover {
|
||||||
|
@ -10,6 +10,8 @@
|
|||||||
|
|
||||||
--global-checked-color: #5fb878;
|
--global-checked-color: #5fb878;
|
||||||
|
|
||||||
|
--global-info-color: #31BDEC;
|
||||||
|
|
||||||
--global-border-radius: 2px;
|
--global-border-radius: 2px;
|
||||||
|
|
||||||
--global-neutral-color-1: #FAFAFA;
|
--global-neutral-color-1: #FAFAFA;
|
||||||
|
@ -166,10 +166,10 @@ export default {
|
|||||||
<lay-card>
|
<lay-card>
|
||||||
内容
|
内容
|
||||||
</lay-card>
|
</lay-card>
|
||||||
<lay-card shadow="hover">
|
<lay-card shadow="hover">
|
||||||
内容
|
内容
|
||||||
</lay-card>
|
</lay-card>
|
||||||
<lay-card shadow="never">
|
<lay-card shadow="never">
|
||||||
内容
|
内容
|
||||||
</lay-card>
|
</lay-card>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,7 +35,7 @@
|
|||||||
<li class="layui-col-sm6">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#393D49</p><p>
|
<p>#393D49</p><p>
|
||||||
</p><p tips="">常用于导航</p>
|
</p><p tips="">导航色</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -63,9 +63,15 @@ export default {
|
|||||||
<template>
|
<template>
|
||||||
<ul class="layui-row layui-col-space15">
|
<ul class="layui-row layui-col-space15">
|
||||||
<li class="layui-col-sm6">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #31BDEC;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#FF5722</p><p>
|
<p>#31BDEC</p><p>
|
||||||
</p><p tips="">错误 - DANGER</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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm6">
|
<li class="layui-col-sm6">
|
||||||
@ -75,15 +81,9 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm6">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#01AAED</p><p>
|
<p>#FF5722</p><p>
|
||||||
</p><p tips="">成功 - SUCCESS</p>
|
</p><p tips="">错误 - DANGER</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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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
|
::: contributor color
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -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 属性
|
::: title Panel 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -4,15 +4,15 @@
|
|||||||
<br>
|
<br>
|
||||||
<p>
|
<p>
|
||||||
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
|
<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>
|
</a>
|
||||||
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
|
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
|
||||||
<a href="http://layui-vue.pearadmin.com">
|
<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>
|
</a>
|
||||||
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
|
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
|
||||||
<a href="http://layui-vue.pearadmin.com">
|
<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>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
|
@ -191,6 +191,20 @@
|
|||||||
></lay-avatar>
|
></lay-avatar>
|
||||||
</a>
|
</a>
|
||||||
</lay-tooltip>
|
</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-col>
|
||||||
</lay-row>
|
</lay-row>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user