手写动态圆柱体 vue scss

基于vue scss 写出来的动态圆柱体

所需图片

图1 底部图片

图2 实心顶部图片

效果图

<div class="column-wrap">
    <div class="column">
     	<div class="column-opacity" />
        <!-- <div class="column-solid" :style="{height:(detail.peoplesDeputyMeetingCount/total*100).toFixed(2)+'%'}" /> -->
        <div class="column-solid" style="height:50%" />
     </div>
</div>

// 圆柱体样式
      .column-wrap {
        width: 78px;
        height: 100px;
        padding: 0 10px 18px;
        background: #fff url('~@/assets/images/home/column-bottom1.png') 0 bottom/100% 30px no-repeat;
        .column{
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          // background: rgba(252, 163, 94, 0.38);
          &::before{
            content: '';
            position: absolute;
            top: -9px;
            width: 100%;
            height: 18px;
            background: #fff;
            border-radius: 50%;
            z-index: 20;
          }
          .column-opacity {
            position: relative;
            flex: 1;
            background: linear-gradient(0deg, rgba(161, 77, 13, 0.05) 0%, rgba(229, 91, 93, 0.4) 100%);
            &::before{
              content: '';
              position: absolute;
              top: -10px;
              width: 100%;
              height: 18px;
              background: rgba(229, 91, 93, 0.4);
              border-radius: 50%;
              z-index: 30;
            }
          }
          .column-solid{
            position: relative;
            bottom: 0;
            z-index: 60;
            background: linear-gradient(90deg, rgba(255, 40, 55, 1), rgba(255, 164, 101, 1));
            &::before{
              content:"";
              width: 100%;
              height: 18px;
              position: absolute;
              top: -9px;
              left: 0;
              z-index: 60;
              background:  url('~@/assets/images/home/column-top1.png') 0 top/100% 18px no-repeat;

            }
            &::after {
              content: '';
              position: absolute;
              bottom: -9px;
              width: 100%;
              height: 18px;
              background: inherit;
              border-radius: 50%;
              z-index: 50;
            }
          }
        }
      }