003_Color色彩

1. Color色彩

1.1. Element为了避免视觉传达差异, 使用一套特定的调色板来规定颜色, 为你所搭建的产品提供一致的外观视觉感受。

2. 主色

2.1. Element主要品牌颜色是鲜艳、友好的蓝色。

3. 辅助色

3.1. 除了主色外的场景色, 需要在不同的场景中使用(例如危险色表示危险的操作)。

4. 中性色

4.1. 中性色用于文本、背景和边框颜色。通过运用不同的中性色, 来表现层次结构。

 

5. Color色彩例子

5.1. 使用脚手架新建一个名为element-ui-color的前端项目, 同时安装Element插件。

 

5.2. 编写App.vue 

<template>
  <div id="app">
    <h1>主色</h1>
    <span class="elementColor brand">Brand Color<br />#409EFF</span>
    <h1>辅助色</h1>
    <span class="elementColor success">Success<br />#67C23A</span>
    <span class="elementColor warning">Warning<br />#E6A23C</span>
    <span class="elementColor danger">Danger<br />#F56C6C</span>
    <span class="elementColor info">Info<br />#909399</span>
    <h1>中性色</h1>
    <span class="elementColor importText">主要文字<br />#303133</span>
    <span class="elementColor oneBorder">一级边框<br />#DCDFE6</span>
    <span class="elementColor baseBlack">基础黑色<br />#000000</span><br />
    <span class="elementColor normalText">常规文字<br />#606266</span>
    <span class="elementColor twoBorder">二级边框<br />#E4E7ED</span>
    <span class="elementColor baseWhite">基础白色<br />#FFFFFF</span><br />
    <span class="elementColor secondaryText">次要文字<br />#909399</span>
    <span class="elementColor thirdBorder">三级边框<br />#EBEEF5</span>
    <span class="elementColor transparent">透明<br />Transparent</span><br />
    <span class="elementColor seatText">占位文字<br />#C0C4CC</span>
    <span class="elementColor fourBorder">四级边框<br />#F2F6FC</span>
  </div>
</template>

<style>
  .elementColor {
    display: inline-block;
    width: 200px;
    height: 60px;
    color: #fff;
    padding: 20px;
  }
  .brand {
    background-color: #409EFF;
  }
  .success {
    background-color: #67C23A;
  }
  .warning {
    background-color: #E6A23C;
    margin-left: 10px;
  }
  .danger {
    background-color: #F56C6C;
    margin-left: 10px;
  }
  .info {
    background-color: #909399;
    margin-left: 10px;
  }
  .importText {
    background-color: #303133;
  }
  .oneBorder {
    background-color: #DCDFE6;
    color: black;
    margin-left: 10px;
  }
  .baseBlack {
    background-color: #000000;
    margin-left: 10px;
  }
  .normalText {
    background-color: #606266;
  }
  .twoBorder {
    background-color: #E4E7ED;
    color: black;
    margin: 10px;
  }
  .baseWhite {
    background-color: #FFFFFF;
    border: 1px solid black;
    color: black;
  }
  .secondaryText {
    background-color: #909399;
  }
  .thirdBorder {
    background-color: #EBEEF5;
    color: black;
    margin: 10px;
  }
  .transparent {
    background-color: Transparent;
    border: 1px solid black;
    color: black;
  }
  .seatText {
    background-color: #C0C4CC;
  }
  .fourBorder {
    background-color: #F2F6FC;
    color: black;
    margin-left: 10px;
  }
</style>

5.3. 运行项目