H5C3项目实战——碧水智慧（大屏应用） 问题记录

目录

1.按照设计稿写的1920px，实际完成后全屏之下却出现了滚动条

2.固定头部标题栏及左侧边栏头部的一些注意事项

3.左侧边栏实现固定高度，多余部分向下滚动，并隐藏滚动条的效果

4.时间选择器：输入框+按钮 结合的一些设计细节

5.表格实现表体高度固定、表身滚动的效果，常见的表格样式设置

6.鼠标移动后按钮发生位置偏移、text-align “失效”、中英文括号

7.layui-date 的使用、第三方插件的样式重写

8.Echarts 实现折线和 Y轴相交以及继续延长、饼状图富文本图例

---

1.按照设计稿写的1920px，实际完成后全屏之下却出现了滚动条

• 重置页面样式的时候, 将 html, body 的宽高固定（width:100%,height:100%）
• 然后再写总容器的固定宽高（width：1920px,height:1080px）
• box-sizing:border-box：并不是解决上述问题的好方法，跟 margin、padding 无关
• overflow:hidden / overflow-x:hidden ：溢出部分隐藏，防止出现滚动条，也是可以尝试的方法

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.container {
  display: flex;
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;
  flex-direction: column;
  overflow-x: hidden;
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

2.固定头部标题栏及左侧边栏头部的一些注意事项

• 头部标题栏固定：当我采用 fixed 的时候，header 不再占据空间，导致下方布局混乱
• 解决方案：用容器包裹住 header，容器宽高和 header 相同；header 设置 fixed、宽高、z-index（重要）
• 
• 左侧边栏头部固定：给左侧标题栏套父盒子添加 position:relative 左侧标题栏添加 position:fixed 并不能让他在合理的位置实现固定定位，他依旧是以浏览器为基准进行定位
• 解决方案：左侧标题栏不需要任何父盒子，直接用浏览器定位 fixed、z-index，他下面的元素设置 margin-top
• 注意，左侧边栏头部固定 必须搭配 头部标题栏固定 一起实现

3.左侧边栏实现固定高度，多余部分向下滚动，并隐藏滚动条的效果

• 左侧边栏宽高写作固定的，同时添加 纵轴超出部分隐藏：overflow-y: auto;（hidden）
• 滚动条隐藏：.aside-left::-webkit-scrollbar { display: none; }
• 

4.时间选择器：输入框+按钮 结合的一些设计细节

• 时间选择器作为一个整体，可以采用 绝对定位position 定在左侧边栏的头部，左侧边栏头部用了 flex布局
• 也就是说，flex布局 和 绝对定位 absolute 并不冲突
• 关于 input输入框 / button按钮 清除默认样式：outline: none; 
• 为了让 输入框 / 按钮 看起来像是一个组件：给输入框的左边设置圆角样式，给按钮的右边设置圆角样式
• 

 

1.   border-top-right-radius: 2px;
2.   border-bottom-right-radius: 2px;
3.   border-top-left-radius: 2px;
4.   border-bottom-left-radius: 2px;

• 关于背景图片位置（那个小日历）： 百分比定位 background: 95% 50% #10264e url(../img/rili.png) no-repeat;
• 为了让 特殊样式数字 和 普通单位 放在一起不违和，可以用

  分别包裹他们，然后位移定位

• 

5.表格实现表体高度固定、表身滚动的效果，常见的表格样式设置

6.鼠标移动后按钮发生位置偏移、text-align “失效”、中英文括号

• 
• 移动后位置发生偏移是因为，原来没有给按钮设置边框线的粗细，鼠标移动后改变边框线的颜色和粗度，导致位移
• 解决方案：最初就给按钮添加边框线（与背景同色）
• text-align 在这里并没有失效，之所以不能实现文字水平居中的效果，是因为：中文括号比较特殊
• 解决方案：将中文括号改为英文，增加空格，实现居中效果

7.layui-date 的使用、第三方插件的样式重写

• 将完整的 layui-date 文件夹放入项目根目录中，在 html 文件中引入对应 js 文件，并添加如下代码：

• 第三方插件样式重写的两种方法：

1. 直接改写第三方插件的样式文件（同一文件中后面的样式覆盖前面的样式）
2. 在自己的样式文件中，通过不断地添加 !important 实现样式修改 / 或者不断增加类的层数，提高优先级实现样式修改

8.Echarts 实现折线和 Y轴相交以及继续延长、饼状图富文本图例

• 一般情况下，为了延长相交，通常定义两个假数据，隐藏假数据的标志点及坐标轴标签的展示，达到效果
• 还有一种思路是，忽略第二个点的坐标轴标签展示，只显示除了第二个点之外的坐标轴标签
• 如何实现 图例文字紧贴图例，而图例百分比右对齐呢？
• 
• 注意：此处的白圈是通过设置背景图片实现的，右侧百分比右对齐 是通过富文本编辑实现的
• https://segmentfault.com/q/1010000020016386

   legend: {
      orient: 'vertical',
      left: '55%',
      y: 'center',
      itemWidth: 15,
      data: ['优良', 'IV类', 'V类', '劣V类', '无数据'],
      textStyle: {
        color: '#B0C2E1',
        fontSize: '13',
        lineHeight: '21',
        padding: [0, 8]
      },
      formatter: function (name) {
        // 获取 legend 显示内容
        let data = option.series[0].data;
        let total = 0;
        let tarValue = 0;
        for (let i = 0, l = data.length; i < l; i++) {
          total += data[i].value;
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        let p = (tarValue / total * 100).toFixed(1);
        // return name + '  ' + p + '%';
        // let arr = [ '{a|' + name + '}{b|' + tarValue + '}{c|' + p + '%}' ];
        let arr = [ '{a|' + name + '}{c|' + p + '%}' ];
        return arr.join('\n')
      },
      textStyle: {
        rich: {
          a: {
            verticalAlign: 'right',
            fontSize: 14,
            align: 'left',
            padding:[0,35,3,5],
            width: 65,
            color: '#B0C2E1'
          },
          c: {
            fontSize: 14,
            align: 'left',
            padding:[0,20,3,0],
            width: 40,
            color: '#B0C2E1'
          }}
      }}

• 所谓的忽略数据标志点和坐标轴文本标签：

      // symbolSize: function (value, param) {
      //   var index = param.dataIndex;
      //   if (index === 0 || index == 5) {
      //     return 0;//虚拟数据上不显示标点
      //   } else {
      //     return 6;
      //   }},

      // label: {
      //   formatter: function (param) {
      //     var index = param.dataIndex;
      //     if (index === 0 || index === 5) {
      //       return "";//虚拟数据上不显示标签
      //     } else {
      //       return param.value;
      //     }
      //   }}