预览图

组件

<template>
  <div class="context">
    <div class="top">
      <div class="label-context">
        <div class="label" v-for="(item, index) in value" :key="index">
          <div class="label-text" v-if="index % 2 === 0">
            {
   {
    item.label }}
          </div>
          <div class="connect-line-box" v-if="index % 2 === 0">
            <div class="connect-line"><i class="center-line-icon"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="center-line">

      <div class="icon-box" v-for="(item, index) in value" :key="index">
        <i class="center-line-icon"></i>
      </div>

    </div>
    <div class="bottom">
      <div class="label-context">
        <div class="label" v-for="(item, index) in value" :key="index">
          <div class="connect-line-box" v-if="index % 2 === 1">
            <div class="connect-line"></div>
          </div>
          <div class="label-text" v-if="index % 2 === 1">
            {
   {
    item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default