vue 简易时间线显示数据组件

项目遇到2个页面要时间轴显示数据 2个页面还不一样 这鬼才UI设计师

不需要引用其它依赖 纯样式编写 用组件的形式引用 cv 即可

第一种

第一种效果图：

代码：

<template>
  <div class="bigBox">
    <div class="items">
      <template v-for="(item, index) in timeDataList">
        <div :key="index" class="itembox">
          <div class="item">
            <div class="line">
              <div class="gardenbox">
                <div class="garden">
                  <div class="garden2"></div>
                </div>
              </div>
            </div>
            <div class="valuebox">
              <h4>{{ item.value }}</h4>
              自定义内容
              <div>sdaasdasd</div>
              <div>sdaasdasd</div>
              <div>sdaasdasd</div>
              <div>sdaasdasd</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    timeDataList: {
      type: Array,
      default: () => {
        return [
          {
            id: 1,
            value: '2022',
          },
          {
            id: 2,
            value: '2021',
          },
          {
            id: 3,
            value: '2020',
          },
          {
            id: 4,
            value: '2019',
          },
          {
            id: 5,
            value: '2018',
          },
        ]
      },
    },
  },
}
</script>

<style scoped>
div {
  box-sizing: border-box;
}
.bigBox {
  width: 100%;
}
.items {
  display: flex;
  flex-wrap: wrap;
}
.itembox {
  width: 50%;
  border-right: 4px solid rgba(0, 61, 165, 0.22);
  position: relative;
  padding-right: 70px;
}
.items .itembox:nth-child(even) {
  border-right: none;
  padding-right: 0px;
  padding-left: 70px;
  margin-top: 100px;
  padding-bottom: 0px;
}
.items .itembox:last-child {
  padding-bottom: 100px;
}
.line {
  position: absolute;
  top: 20%;
  right: -70px;
  z-index: -2;
  width: 80px;
  border-bottom: 4px solid rgba(0, 61, 165, 0.22);
}
.line .gardenbox {
  height: 100%;
  position: relative;
}
.line .garden {
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 30px;
  height: 30px;
  background: rgba(0, 61, 165, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(55%, 55%);
}

.line .garden2 {
  width: 16px;
  height: 16px;
  background: #004fae;
  border-radius: 50%;
}

.items .itembox:nth-child(even) .line {
  right: inherit;
  left: -70px;
}
.items .itembox:nth-child(even) .line .garden {
  right: inherit;
  left: 0px;
  transform: translate(-55%, 55%);
}
.item {
  background: #ffffff;
  box-shadow: 1px 1px 20px 0px #dae5f6;
  border-radius: 4px;
  position: relative;
}
.valuebox {
  text-align: center;
}
</style>

第二种

第二种效果图：

代码：

```javascript
<template>
  <div class="time-bigbox">
    <template v-for="(item, index) in timeDataList">
      <div class="time-box" :key="index">
        <div class="year">{{ item.year }}</div>
        <div class="content">
          <span class="yuan"></span>
          <div class="shangyi">
            <div class="title">
              <div class="h1">{{ item.title }}</div>
            </div>
            <div>
              <div>自定义内容</div>
              <div>asdkasjd</div>
              <div>asdkasdasds大苏打飒飒水水水水水水水水水水水jd</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    timeDataList: {
      type: Array,
      default: () => {
        return [
          {
            id: 1,
            year: "2021",
            title: "标题1",
          },
          {
            id: 2,
            year: "2020",
            title: "标题2",
          },
          {
            id: 2,
            year: "2019",
            title: "标题3",
          },
        ];
      },
    },
  },
};
</script>

<style scoped>
.time-bigbox {
  padding: 27px 0;
}
.time-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.year {
  width: 180px;
  font-size: 60px;
  font-weight: bold;
  color: #003da5;
  padding-left: 20px;
  padding-right: 35px;
  text-align: right;
  transform: translateY(-27px);
}
.content {
  flex: 1;
  border-left: 2px dashed #999;
  padding-left: 30px;
  position: relative;
  padding-bottom: 50px;
}
.time-box:last-child .content {
  border-left: 2px solid transparent;
}
.shangyi {
  transform: translateY(-11px);
}
.yuan {
  position: absolute;
  top: 0;
  left: 0px;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #999999;
  border-radius: 50%;
  transform: translateX(-56%);
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  font-size: 26px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
}
</style>

到此结束 有不足或错误的地方 请指出 谢谢