vue移动端

移动端实现如下图竖线加上下边框

<div class="layer">
      <div class="layer-header"></div>
</div>

/*样式代码*/
.layer{
  width: 100%;
  background: #fff;
}
.layer-header{
  height: 30px;
  position: relative;
  padding:0 10px;
}
.layer-header::before{
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  top: 0;
  background: #ff8a2f;
}
.layer-header::after{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  transform: scale(.5,.5);
  transform-origin: left top;
  border:1px solid lightgray;
  /* 左右没有边框 */
  border-left: none;
  border-right: none;
}