OpenPlatForm/components/domain/apiSteps.vue

<template>
  <div class="steps-box">
    <div v-for="(item, index) in setpsData" :key="index">
      <div class="for-item">
        <span class="item-time">{{ item.time }}</span>
        <span class="item-yuan"  :class="{'itemCotnent-top': index === 0 }"></span>
        <span class="item-title">{{ item.title }}</span>
        <span style="color: #2f89fc">查看该版本</span>
        <span class="item-border"></span>
      </div>
      <div v-html="item.content" class="item-content" :class="{'itemCotnent-bottom': index === setpsData.length - 1}"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      setpsData: [
        {
          title: "版本：V1.2.0.3212",
          content: `工具箱<br />
优化虚拟定位功能<br />
优化下载中心下载应用逻辑<br />
优化投屏工具的稳定性<br />
修复IPA签名失败和个人签名登录失败的问题<br />
主程序<br />
设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
优化虚拟定位功能<br />
优化下载中心下载应用逻辑<br />
优化投屏工具的稳定性<br />
修复IPA签名失败和个人签名登录失败的问题<br />
主程序<br />
设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
优化虚拟定位功能<br />
优化下载中心下载应用逻辑<br />
优化投屏工具的稳定性<br />
修复IPA签名失败和个人签名登录失败的问题<br />
主程序<br />
设置界面增加关闭验机选项`,
          time: "2020-12-22",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
优化虚拟定位功能<br />
优化下载中心下载应用逻辑<br />
优化投屏工具的稳定性<br />
修复IPA签名失败和个人签名登录失败的问题<br />
主程序<br />
设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.32",
          content: `工具箱<br />
优化虚拟定位功能<br />
优化下载中心下载应用逻辑<br />
优化投屏工具的稳定性<br />
修复IPA签名失败和个人签名登录失败的问题<br />
主程序<br />
设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.steps-box {
  display: flex;
  flex-flow: column;
  font-size: 14px;
  .for-item {
    display: flex;
    align-items: center;
    .item-time {
      color: #333333;
    }
    .item-yuan {
      margin: 0 18px;
      width: 20px;
      height: 20px;
      background: #f7f8fa;
      border: 4px solid #c2cad4;
      border-radius: 50%;
    }
    .itemCotnent-top {
 
        background: #F7F8FA;
        border: 4px solid #2F89FC;
    }


    .item-title {
      color: #333333;
      margin-right: 10px;
    }
    .item-border {
      border-top: 1px solid #e5e5e5;
      width: 100%;
      flex: 1;
      margin-left: 20px;
    }
  }
    .item-content {
        margin-left: 107px;
        color: #999999;
        font-size: 12px;
        
        line-height: 20px;
        border-left: 6px solid #F7F8FA;
        padding: 5px 0 30px 25px;
    }
    .itemCotnent-bottom {
        border: none;
    }
    
}
</style>