学习笔记之数据可视化（二）——页面布局（中）

2.6 监控区域布局

监控区域 monitor盒子高度： 480px，布局划分及内部盒子类名如下：

2.6.1 布局结构解析：

• .tab样切换：tabs 标签选项，加上active激活选项，默认激活第一个选项；
• .显示内容：content 切换内容，添加style="display: block;"显示内容 默认激活第一个内容

2.6.2 样式描述：

• .inner 容器内间距 24px 0
• .tabs 容器内间距 0 36px
  • a 容器 颜色： #1950c4 内间距：0 27px 字体：18px
  • 第一个a容器 去除左侧内间距 加上右侧2px宽度边框#00f2f1
  • 激活的时候 颜色白色
• .content容器
  • 占满剩余高度 flex:1
  • 默认隐藏
• .head 容器
  • 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px
• row 容器
  • 行高 1.05 内间距 12px 36px 颜色 #68d8f