📝(component): update
This commit is contained in:
parent
369822290a
commit
68f0f70bcb
@ -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 {
|
||||
|
@ -10,6 +10,8 @@
|
||||
|
||||
--global-checked-color: #5fb878;
|
||||
|
||||
--global-info-color: #31BDEC;
|
||||
|
||||
--global-border-radius: 2px;
|
||||
|
||||
--global-neutral-color-1: #FAFAFA;
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
:::
|
||||
|
||||
|
@ -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 属性
|
||||
:::
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user