自定义实现步骤条组件

<template>
  <div class="step_line">
    <div class="left_step">
      <div alt="" class="step_circle"></div>
      <div class="line"></div>
    </div>
    <div class="right_info">
      <div class="content-info">123</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.step_line {
  width: 100%;
  display: flex;

  .left_step {
    margin-right: 16px;
    width: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .step_circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #4983E8;
    }

    .line {
      flex: 1;
      width: 1px;
      background: linear-gradient(to bottom, #4983E8 0%, #4983E8 10%, transparent 90%, transparent);
      background-size: 100% 8px;
    }
  }

  .right_info {
    flex: 1;
    .content-info{
      margin-top: 18px;
      padding: 16px;
      width: 100%;
      background-color: #fff;
      border-radius: 6px;
      /*border: 1px solid #ccc;*/
      box-shadow: 0px 0px 10px #ccc;

    }
  }
}
</style>