<template>
  <div>
    <h3 class="fbg-title">布局</h3>
    <p class="fbg-text">删格式布局适配1440px以上的的电脑、笔记本、平板设备</p>
    <h3 class="fbg-title">文字</h3>
    <p class="fbg-text">文字字号</p>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>字号</th>
          <th>字体</th>
          <th>应用场景</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12px</td>
          <td>微软雅黑</td>
          <td>注释、面包屑</td>
        </tr>
        <tr>
          <td>14px</td>
          <td>微软雅黑</td>
          <td>正文、小按钮文字、小尺寸TAB页签</td>
        </tr>
        <tr>
          <td>16px</td>
          <td>微软雅黑</td>
          <td>大尺寸TAB页签</td>
        </tr>
        <tr>
          <td>18px</td>
          <td>微软雅黑</td>
          <td>三级标题</td>
        </tr>
        <tr>
          <td>20px</td>
          <td>微软雅黑</td>
          <td>二级标题</td>
        </tr>
        <tr>
          <td>22px</td>
          <td>微软雅黑</td>
          <td>一级标题</td>
        </tr>
        <tr>
          <td>24px</td>
          <td>微软雅黑</td>
          <td>--</td>
        </tr>
        <tr>
          <td>32px</td>
          <td>微软雅黑</td>
          <td>数字、余额等</td>
        </tr>
        <tr>
          <td>36px</td>
          <td>微软雅黑</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <p class="fbg-text">行高</p>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>字号</th>
          <th>标题行高</th>
          <th>文本行高</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>20px</td>
          <td>24px</td>
          <td>32px</td>
        </tr>
        <tr>
          <td>24px</td>
          <td>32px</td>
          <td>36px</td>
        </tr>
        <tr>
          <td>28px</td>
          <td>36px</td>
          <td>40px</td>
        </tr>
        <tr>
          <td>32px</td>
          <td>40px</td>
          <td>48px</td>
        </tr>
        <tr>
          <td>36px</td>
          <td>44px</td>
          <td>54px</td>
        </tr>
        <tr>
          <td>40px</td>
          <td>48px</td>
          <td>60px</td>
        </tr>
      </tbody>
    </table>
    <p class="fbg-text">字体颜色</p>
    <p class="fbg-text">#333333 主要文字，用于标题、重要文字</p>
    <p class="fbg-text">#666666 次要文字，用于辅助标题、政委、详情</p>
    <p class="fbg-text">#999999 辅助文字，用于辅助内容、灰化、时间、标签</p>
    <p class="fbg-text">#FFFFFF 深色背景的文字、按钮</p>
    <h3 class="fbg-title">颜色</h3>
    <p class="fbg-text">功能色</p>
    <p class="fbg-text">#FF4C4C <span style="color:#FF4C4C">紧急</span></p>
    <p class="fbg-text">#FF8833 <span style="color:#FF8833">重要</span></p>
    <p class="fbg-text">#FFD939 <span style="color:#FFD939">次要</span></p>
    <p class="fbg-text">#499DF2 <span style="color:#499DF2">提示</span></p>
    <p class="fbg-text">#3DCCA6 <span style="color:#3DCCA6">成功/已清除警告</span></p>
    <p class="fbg-text">中性色</p>
    <p class="fbg-text">#F4F5F6 <span style="color:#F4F5F6">背景色</span></p>
    <p class="fbg-text">#777777 <span style="color:#777777">图标色</span></p>
    <p class="fbg-text">#CCCCCC <span style="color:#CCCCCC">按钮边框线</span></p>
    <p class="fbg-text">#E2E2E2 <span style="color:#E2E2E2">分割线、虚线分割线</span></p>
    <p class="fbg-text">#FFFFFF <span style="color:#FFFFFF">深色背景的文字、按钮、页面底色</span></p>
  </div>
</template>
<script>
export default {
  
}
</script>
