2021-08-26

vue蛇形时间线、

<template>
 <div>
      <div style="width: 100%; display: flex">
          <div style="width: 10%; margin-left: 30px">
            <div>
              <!-- 开头 -->
              <span
                data-v-jzl20210826=""
                style="margin-top: 49.5px"
                class="headerRadio"
              ></span>
              <!-- 第二行 -->
              <span class="hingelisHeard" style="margin-top: 98.9px"></span>
              <!-- <span  data-v-jzl20210826="" style="margin-top:98.5px" class="hingeorgerHeard"></span> -->
              <!-- 第三行 -->
              <!-- <span class="hingelisHeard" style="margin-top:99.5px"></span> -->
              <span
                data-v-jzl20210826=""
                style="margin-top: 99.5px"
                class="hingeorgerHeard"
              ></span>
            </div>
          </div>
          <div style="width: 75%">
            <!-- 第一行数据 -->
            <div style="display: flex">
              <div class="timeline" v-for="(v, i) in experienceData" :key="i">
                <div class="border"></div>
                <div class="Nodes"></div>
                <div class="timeNodes">
                  <p class="nodeTimelis">
                    <span>{{ i + "伦理委员会同意" }}</span>
                  </p>
                  <p class="nodeTimes">
                    <span>{{ i + "2017-05-24" }}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 第二行数据 -->
            <div style="display: flex">
              <div class="timeline" v-for="(v, i) in 4" :key="i">
                <div class="border"></div>
                <div class="Nodes"></div>
                <div class="timeNodes">
                  <p class="nodeTimelis">
                    <span>{{ i + "伦理委员会同意" }}</span>
                  </p>
                  <p class="nodeTimes">
                    <span>{{ i + "2017-05-24" }}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 第三行数据 -->
            <div style="display: flex">
              <div class="timeline" v-for="(v, i) in 4" :key="i">
                <div class="border" style="top: 51%"></div>
                <div class="Nodes" style="top: 51%"></div>
                <div class="timeNodes">
                  <p class="nodeTimelis">
                    <span>{{ i + "伦理委员会同意" }}</span>
                  </p>
                  <p class="nodeTimes">
                    <span>{{ i + "2017-05-24" }}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 第四行数据 -->
            <div style="display: flex">
              <div class="timeline" v-for="(v, i) in 2" :key="i">
                <div class="border" style="top: 51%"></div>
                <div class="Nodes" style="top: 51%"></div>
                <div class="timeNodes">
                  <p class="nodeTimelis">
                    <span>{{ i + "伦理委员会同意" }}</span>
                  </p>
                  <p class="nodeTimes">
                    <span>{{ i + "2017-05-24" }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 10%">
            <div>
              <!-- 第一行 -->
              <span class="hingelis"></span>
              <!-- <span  data-v-jzl20210826="" class="hingeorger"></span> -->
              <!-- 第二行 -->
              <span class="hingelis" style="margin-top: 100.3px"></span>
              <!-- <span  data-v-jzl20210826="" style="margin-top:100.3px" class="hingeorger"></span> -->
              <!-- 第三行 -->
              <!-- <span class="hingelis" style="margin-top:100.3px"></span> -->
              <!-- <span  data-v-jzl20210826="" style="margin-top:100.3px" class="hingeorger"></span> -->
            </div>
          </div>
        </div>
 </div>
</template>```

js

<script>
export default {
  props: {
    data: {},
    Index: 0, //第一行展示X条数据
  },
  data() {
    return {
      experienceData: this.data,
    };
  },
  watch: {
    data: function (newVal, oldVal) {
      this.experienceData = newVal;
    },
  },
};
</script>

css

<style scoped>

.timeline {
  width: 100%;
  height: 100px;
  position: relative;
}
.border {
  width: 100%;
  border-bottom: 1px solid #cccccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.Nodes {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  border: 5px solid #0075c7;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translate(0, -50%);
}

.timeNodes {
  position: absolute;
  text-align: center;
  right: -5px;
  top: 50%;
  transform: translate(0, -50%);
}

.nodeTimelis {
  margin-bottom: 20px;
}
.nodeTimes {
  margin-top: 15px;
}

.hingelis {
  content: "";
  display: block;
  width: 100%;
  height: 99.1px;
  border: 1px solid #cccccc;
  border-radius: 0 50px 50px 0;
  border-left: 0px;
  margin-top: 49.5px;
}

.hingelisHeard {
  content: "";
  display: block;
  width: 100%;
  height: 100px;
  border: 1px solid #cccccc;
  border-radius: 50px 0 0 50px;
  border-right: 0px;
  margin-top: 50px;
}

.hingeorger {
  display: block;
  width: 100%;
  border-bottom: 1px solid #cccccc;
  margin: 49.5px 0;
  position: relative;
}
.hingeorgerHeard {
  display: block;
  width: 100%;
  border-bottom: 1px solid #cccccc;
  position: relative;
}

.hingeorgerHeard[data-v-jzl20210826]:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  border-top: 5px solid transparent;
  border-right: 12px solid #cccccc;
  border-bottom: 5px solid transparent;
}

.hingeorger[data-v-jzl20210826]:after {
  content: "";
  position: absolute;
  top: -4px;
  right: -2px;
  border-top: 5px solid transparent;
  border-left: 12px solid #cccccc;
  border-bottom: 5px solid transparent;
}

.headerRadio {
  display: block;
  width: 100%;
  border-bottom: 1px solid #cccccc;
  position: relative;
}

.headerRadio[data-v-jzl20210826]:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: #cccccc;
  border: 5px solid #cccccc;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translate(0, -50%);
}
</style>