160 lines
4.6 KiB
Plaintext
160 lines
4.6 KiB
Plaintext
::: anchor
|
||
:::
|
||
|
||
::: title 基本介绍
|
||
:::
|
||
|
||
::: describe 视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感。
|
||
:::
|
||
|
||
::: title 主色调
|
||
:::
|
||
|
||
::: demo layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。
|
||
|
||
<template>
|
||
<ul class="layui-row layui-col-space15">
|
||
<li class="layui-col-sm6">
|
||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||
<p>#009688</p><p>
|
||
</p><p tips="">主色调</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="">次色调</p>
|
||
</div>
|
||
</li>
|
||
<li class="layui-col-sm6">
|
||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||
<p>#1E9FFF</p><p>
|
||
</p><p tips="">经典蓝</p>
|
||
</div>
|
||
</li>
|
||
<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>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
:::
|
||
|
||
::: title 次色调
|
||
:::
|
||
|
||
::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。
|
||
|
||
<template>
|
||
<ul class="layui-row layui-col-space15">
|
||
<li class="layui-col-sm6">
|
||
<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">
|
||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||
<p>#FFB800</p><p>
|
||
</p><p tips="">警示 - WARNING</p>
|
||
</div>
|
||
</li>
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
:::
|
||
|
||
::: title 中性色
|
||
:::
|
||
|
||
::: demo layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！
|
||
|
||
<template>
|
||
<ul class="layui-row site-doc-color site-doc-necolor">
|
||
<li class="layui-col-md12">
|
||
<div style="background-color: #FAFAFA;">
|
||
<p>#FAFAFA</p><p>
|
||
</p></div>
|
||
</li>
|
||
<li class="layui-col-md12">
|
||
<div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
|
||
</li>
|
||
<li class="layui-col-md4">
|
||
<div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
:::
|
||
|
||
::: contributor color
|
||
:::
|
||
|
||
::: previousNext color
|
||
::: |