📝(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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user