003_ color

1. Color color

1.1. Element To avoid visual communication differences , Use a specific set of color palettes to specify colors , Provide a consistent visual impression for the products you build .

2. Main color

2.1. Element The main brand colors are bright 、 Friendly blue .

3. Auxiliary color

3.1. Scene colors other than the main color , Need to be used in different scenarios ( For example, a danger color indicates a dangerous operation ).

4. Neutral color

4.1. Neutral colors are used for text 、 Background and border colors . By using different neutral colors , To represent the hierarchy .

 

5. Color color Example

5.1. Use the scaffold to create a new one named element-ui-color Front end projects , At the same time to install Element plug-in unit .

 

5.2. To write App.vue 

<template>
  <div id="app">
    <h1> Main color </h1>
    <span class="elementColor brand">Brand Color<br />#409EFF</span>
    <h1> Auxiliary color </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> Neutral color </h1>
    <span class="elementColor importText"> Main text <br />#303133</span>
    <span class="elementColor oneBorder"> First level border <br />#DCDFE6</span>
    <span class="elementColor baseBlack"> Basic black <br />#000000</span><br />
    <span class="elementColor normalText"> Regular text <br />#606266</span>
    <span class="elementColor twoBorder"> Secondary border <br />#E4E7ED</span>
    <span class="elementColor baseWhite"> Basic white <br />#FFFFFF</span><br />
    <span class="elementColor secondaryText"> Secondary text <br />#909399</span>
    <span class="elementColor thirdBorder"> Third level border <br />#EBEEF5</span>
    <span class="elementColor transparent"> transparent <br />Transparent</span><br />
    <span class="elementColor seatText"> Placeholder text <br />#C0C4CC</span>
    <span class="elementColor fourBorder"> Four level border <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. Run the project