【实用】可视化深色大屏-vue&css纯代码打造排名面板

用零散时间直接在码上掘金在线编辑的，没有具体规划UI和编码，所以代码也有些粗糙，各位jym请多多包涵，也希望平常写的一些前端demo能帮助到大家。

前言

写一个基于vue+css的排名面板简单的Demo,不依赖其他前端组件和UI切图,掘金独家发布，方便jym复制即用，当然代码也存在很多待优化和提高的地方,我就抛个砖引玉！代码不一定优雅，贵在实用！

在线Demo演示—排名面板01

知识点：渐变边框线

使用::before 和 ::after伪类 给div绘制1px高度的带渐变背景即可

.row-box{
  position: relative;
  width:500px;
  height:50px;
  display: flex;
  flex-direction: column;
  border:1px solid #002c54; 
  background: rgba(0,25,48,0.8); 
  overflow: hidden;
  
  @mixin lineBox {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
  }
  // 上边框
  &::before{
    @include lineBox;
    background: linear-gradient(to right,transparent,rgba(3, 141, 255, 0.6) 20%,transparent); 
    top:0px;
  }
  // 下边框
  &::after{
    @include lineBox;
    background: linear-gradient(to right,transparent,rgba(3, 141, 255, 0.6) 60%,transparent); 
    bottom:0px;
  }
}

在线Demo演示—排名面板02

知识点：scss里定义颜色变量映射

使用定义颜色变量映射 $colors:(颜色值1,颜色值2)让样式更灵活,方便后期维护

定义：$colors:(颜色值1,颜色值2) 使用：nth($colors, 1)

// 颜色数组
$colors: (  
  #f4a33a,  
  #7f9eb6,  
  #e26431,  
  #1e499b,   
);
// 例子
.div1{ 
  background: linear-gradient(to right,nth($colors, 1),transparent);
}
.div2{
  background: linear-gradient(to right,nth($colors, 2),transparent);
}

在线Demo演示—排名面板03

知识点：带高光的透视底座css绘制

元素设置视距，增加其3D效果 perspective

.fatherClass{
    perspective:150;  
    -webkit-perspective:150; /* Safari and Chrome */  
}
.childClass{
    position: relative; 
    border-radius: 5px; 
    width:600px;
    height:50px;
    
    // 透视底座
    &::before{
      position: absolute;
      content: '';
      display: block;
      width: 90%;
      height: 40px; 
      left: 30px;
      z-index: 1;
      transition: 200ms linear; 
      background: linear-gradient(to top,rgba(10, 82, 140, 0.9),transparent);
      opacity: 0.2;
      bottom:0px;
      border-radius: 3px;   
      transform: rotateX(40deg);
    } 
    // 底部高亮线
    &::after{
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right,transparent,rgba(3, 141, 255, 0.6) 20%,transparent); 
      bottom:2px;
    } 
    
}