前端css纯手搓布局_带小交互的统计面板(不用一个切图和图表组件)

前言

前端css+vue纯手搓一个统计面板,布局内采用flex属性，方便后期只要修改外层div的尺寸，可以很好的自动适配宽高

👉 码上掘金 在线查看完整示例

面板不规则背景拆解

外部面板类名.easy-ui-panel设置flex属性从上到下嵌套三个子div结构类名分别为.e-u-panel-title .e-u-panel-main .e-u-panel-bottom 标题栏和底部信息栏设置background 注意：.e-u-panel-main不设置背景且做padding设置，在其内部嵌套一个内容信息区的div类名.easy-chart-bar也设置和标题栏底部信息栏一样的背景色,这样就可以完成面板的不规则背景框绘制。

注意：给面板添加阴影就不能用box-shadow来设置了，给不规则图形本身做阴影效果可以用如下配置。
filter: drop-shadow(3px 3px 5px rgb(163, 163, 163));

标题栏区域 css动画和梯形不规则修饰框绘制

标题栏html区域代码

      <!-- title start -->
      <div class="e-u-panel-title">
        <i class="e-u-icon"/> 
        <h2>栏目文章发布数量统计</h2>
        <span class="easy-ui-dot">
          <i style="--index:200ms" />
          <i style="--index:400ms" />
          <i style="--index:600ms" />
          <i style="--index:800ms" />
        </span>
        <span class="easy-ui-trapezoid"></span>
      </div>
      <!-- title end -->

标题栏 呼吸灯点缀结构的css代码

// 定义关键帧动画
@keyframes animationShiny {
    0% {opacity: 1;}
    50% {opacity: 0.4;}
    100% {opacity: 1;}
}
// 光点效果
.e-u-icon{
    width: 7px;
    height: 7px;
    border-radius: 7px;
    border: 1px solid #000;
    background: #29c68b;
    animation:animationShiny 600ms linear infinite; 
}

// 跑马灯效果
.easy-ui-dot{
  display: flex;
  align-items: center; 
  margin-right: 5px;
  margin-top: 10px;
  perspective:150; // 
  -webkit-perspective:150; /* Safari and Chrome */ 
  i{
    width: 4px;
    height: 8px;
    margin: 0px 1px;
    border: 1px solid #030304;
    border-radius: 2px;
    background: #409cff;
    transform: rotateZ(29deg);
    animation:animationShiny 1s var(--index) linear infinite; 

    &:nth-child(3){ 
     background: #1ce17d;
    }
  }

} 

不规则梯形绘制 css代码

// 梯形修饰框
.easy-ui-trapezoid{
  position: absolute;
  right: 10px;
  top: 0px;
  border-top: 14px solid $color-bg;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 9px;
  width: 200px;
  filter: drop-shadow(0px 1px 0px #1b1d30);
}

内容信息区域交互效果展示

原创不易，代码也存在很多不成熟的地方，望大家多多包涵！