### 颜色

---

```vue
<template>
  <div class="color-section">
    <h4>主色</h4>
    <div class="brand et-border-radius-base" :style="{ backgroundColor: styles.colorPrimary }">
      <div>
        <div>Primary</div>
        <div>{{ styles.colorPrimary }}</div>
        <div>.et-color-primary</div>
      </div>
    </div>
    <div v-for="(item, index) in config" :key="index">
      <h4>{{ item.title }}</h4>
      <div class="sub-color-section">
        <div
          v-for="(v, index) in item.children"
          :key="index"
          class="brand et-border-radius-base"
          :style="{ backgroundColor: styles[v.color], maxWidth: '200px' }"
        >
          <div>
            <div>{{ v.label }}</div>
            <div>{{ styles[v.color] }}</div>
            <div>.{{ v.className }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import styles from '../packages/theme-default/src/theme.scss'
export default {
  data() {
    return {
      styles,
      config: [
        {
          title: '辅助色',
          children: [
            {
              label: 'Success',
              color: 'colorSuccess',
              className: 'et-color-success',
            },
            {
              label: 'Warning',
              color: 'colorWarning',
              className: 'et-color-warning',
            },
            {
              label: 'Danger',
              color: 'colorDanger',
              className: 'et-color-danger',
            },
            {
              label: 'Info',
              color: 'colorInfo',
              className: 'et-color-info',
            },
          ],
        },
        {
          title: '中性色',
          children: [
            {
              label: '主要文字',
              color: 'colorTextPrimary',
              className: 'et-color-text-primary',
            },
            {
              label: '常规文字',
              color: 'colorTextRegular',
              className: 'et-color-text-regular',
            },
            {
              label: '次要文字',
              color: 'colorTextSecondary',
              className: 'et-color-text-secondary',
            },
            {
              label: '占位文字',
              color: 'colorTextPlaceholder',
              className: 'et-color-text-placeholder',
            },
          ],
        },
      ],
    }
  },
}
</script>
<style scoped>
.color-section {
  padding: 0 20px 20px;
}
.sub-color-section {
  display: flex;
  justify-content: space-between;
}
.brand {
  width: 30%;
  height: 100px;
  margin: 10px 0 20px 0;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #fff;
}
</style>
```

### 字体

---

- 字号

```vue
<template>
  <EtTable :localData="localData" :columns="columns" :showPagination="false" style="padding: 0 20px 20px">
    <template v-slot:level="scope">
      <span :class="scope.row.className">{{ scope.row.level }}</span>
    </template>
    <template v-slot:size="scope">
      <span :class="scope.row.className">{{ scope.row.size }}</span>
    </template>
    <template v-slot:className="scope">
      <span :class="scope.row.className">.{{ scope.row.className }}</span>
    </template>
    <template v-slot:eg="scope">
      <span :class="scope.row.className">{{ scope.row.eg }}</span>
    </template>
  </EtTable>
</template>

<script>
export default {
  data() {
    return {
      localData: [
        {
          level: '辅助文字',
          size: '12px Extra Small',
          className: 'et-font-12',
          eg: '用 Element 快速搭建页面',
        },
        {
          level: '正文（小）',
          size: '13px Small',
          className: 'et-font-13',
          eg: '用 Element 快速搭建页面',
        },
        {
          level: '正文',
          size: '14px Base',
          className: 'et-font-14',
          eg: '用 Element 快速搭建页面',
        },
        {
          level: '小标题',
          size: '16px Medium',
          className: 'et-font-16',
          eg: '用 Element 快速搭建页面',
        },
        {
          level: '标题',
          size: '18px Large',
          className: 'et-font-18',
          eg: '用 Element 快速搭建页面',
        },
        {
          level: '主标题',
          size: '20px Extra large',
          className: 'et-font-20',
          eg: '用 Element 快速搭建页面',
        },
      ],
      columns: [
        {
          label: '层级',
          prop: 'level',
          scopeSlot: true,
        },
        {
          label: '字体大小',
          prop: 'size',
          scopeSlot: true,
        },
        {
          label: 'className',
          prop: 'className',
          scopeSlot: true,
        },
        {
          label: '举例',
          prop: 'eg',
          scopeSlot: true,
        },
      ],
    }
  },

  methods: {},
}
</script>
```

- 行高

```vue
<template>
  <div class="lineheight__section">
    <div v-for="(item, index) in config" :key="index">
      <span :style="item.split(' ')[0]">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: [
        'line-height:1 无行高',
        'line-height:1.3 紧凑',
        'line-height:1.5 常规',
        'line-height:1.7 较宽松',
        'line-height:2 宽松',
      ],
    }
  },
}
</script>
<style lang="scss">
.lineheight__section div {
  background-color: #ccc;
  line-height: 1;
  display: inline-block;
  margin: 0 20px 20px;
}
</style>
```

- Font Family 代码

---

<div style="padding: 0 20px 20px">font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;</div>

### 边框

---

```vue
<template>
  <div class="border-section">
    <div v-for="(item, index) in config" :key="index">
      <h4>{{ item.title }}</h4>
      <el-row>
        <el-col v-for="v in item.children" :key="v.className" :span="6">
          <div v-html="v.label"></div>
          <div>.{{ v.className }}</div>
          <div :class="[v.className, item.className]"></div>
        </el-col>
      </el-row>
    </div>
    <div>
      <h4>投影</h4>
      <el-row>
        <el-col v-for="(item, index) in shadowConfig" :key="index" :span="12">
          <div v-html="item.label"></div>
          <div>.{{ item.className }}</div>
          <div :class="[item.className, 'shadow-border']"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: [
        {
          title: '圆角',
          className: 'raduis-border',
          children: [
            {
              label: '无圆角<br />border-radius: 0px',
              className: 'et-border-radius-zero',
            },
            {
              label: '小圆角<br />border-radius: 2px',
              className: 'et-border-radius-small',
            },
            {
              label: '大圆角<br />border-radius: 4px',
              className: 'et-border-radius-base',
            },
            {
              label: '圆形圆角<br />border-radius: 30px',
              className: 'et-border-radius-circle',
            },
          ],
        },
      ],
      shadowConfig: [
        {
          label: `基础投影<br />box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)`,
          className: 'et-box-shadow-base',
        },
        {
          label: '深色投影<br />box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12)',
          className: 'et-box-shadow-dark',
        },
        {
          label: '浅色投影<br />box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)',
          className: 'et-box-shadow-light',
        },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
.border-section {
  padding: 0 20px 20px;
}
/* .item {
  float: left; margin-right: 40px
} */
.raduis-border {
  border: 1px solid #ccc;
  width: 160px;
  height: 60px;
  margin-top: 10px;
}
.clear {
  clear: both;
}
.shadow-border {
  width: 80%;
  height: 100px;
  margin: 10px 0 20px 0;
}
</style>
```

### 图标

---

```vue
<template>
  <el-row class="icon__section">
    <el-col v-for="item in config" :key="item" :span="3">
      <div class="item">
        <i :class="item"></i>
        <div>{{ item }}</div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      config: [
        'el-icon-delete',
        'el-icon-setting',
        'el-icon-edit',
        'el-icon-refresh',
        'el-icon-loading',
        'el-icon-view',
        'el-icon-search',
        'el-icon-user',
        'el-icon-warning-outline',
        'el-icon-question',
        'el-icon-star-off',
        'el-icon-star-on',
      ],
    }
  },
}
</script>
<style lang="scss">
.icon__section {
  margin: 0 20px 20px;
  text-align: center;
}
.item {
  margin-bottom: 20px;
}
</style>
```

### 弹窗