proginn-frontend/components/works/editor-aside.vue

<template>
  <div class="aside">
    <h6>技术圈文章内容标准</h6>
    <el-timeline class="list">
      <el-timeline-item v-for="(activity, index) in activities" :key="index">{{activity.content}}</el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activities: [
        {
          content: '1. 技术结合开发应用的实例文章'
        },
        {
          content: '2. 开发过程实战化梳理文章'
        },
        {
          content: '3. 协同化开发经验文章'
        },
        {
          content: '4. 模块化开发经验分享'
        },
        {
          content: '5. 个人职业生涯规划'
        },
        {
          content: '6. 知名互联网公司开发经验文章'
        },
        {
          content: '7. 日常开发小经验分享类文章'
        },
        {
          content: '8. Q&A形式解答类文章'
        },
        {
          content: '9. 行业论坛聚焦化分享类文章'
        },
        {
          content: '10. 互联网+类程序开发经验文章'
        }
      ]
    };
  },
  computed: {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss">
.aside {
  position: relative;
  float: right;
  width: 250px;
  background: #fff;
  h6 {
    position: relative;
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 21px;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 230px;
      height: 0px;
      border-bottom: 2px dashed rgba(240, 240, 240, 1);
    }
  }
  .list {
    padding: 25px 0 25px 16px;
    .el-timeline-item__wrapper {
      top: -1px;
      padding-left: 15px;
    }
  }
}
</style>