手写时间轴组件

图片.png
图片.png

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import "./index.less";
export default class Index extends Component {
  config = {
    navigationBarTitleText: ""
  };
  state = {};

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}
  goDetail(id) {
    const { coc_id, type } = this.props;
    if (type == 1) {
      Taro.navigateTo({
        url: `/pages/myBusiness/resumeDetail/index?coc_id=${coc_id}&&resume_id=${id}`
      });
    }
    Taro.navigateTo({
      url: `/coc/pages/cocNews/details/details?id=${id}`
    });
  }

  componentDidHide() {}
  monthDay(val) {
    const date = new Date(val * 1000);
    let m = date.getMonth() + 1;
    m = m < 10 ? `0${m}` : m;
    let d = date.getDate();
    d = d < 10 ? `0${d}` : d;
    return `${m}.${d}`;
  }
  yearMonth(val) {
    const date = new Date(val * 1000);
    const y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? `0${m}` : m;
    return `${y}.${m}`;
  }
  render() {
    const { list = [], type } = this.props;
    return list.map(item => (
      <View
        className="ys-list"
        onClick={this.goDetail.bind(this, item.id)}
        key={item.id}
      >
        <View className="des-time">
          <View className="time">
            {type == 1
              ? this.yearMonth(item.add_time)
              : this.monthDay(item.record_time)}
          </View>

          {type == 1 && <View className="type">{item.event == 4
              ? "获得荣誉"
              : item.event == 5
              ? "参与大事件"
              : item.event == 7
              ? "公益"
              : item.event == 8
              ? "社会职务"
              : ""}</View>}
        </View>
        <View className="des-mes">
          <View className="list-dot">
            <View className="dot" />
          </View>
          <View className="title" style={{ WebkitBoxOrient: "vertical" }}>
            {item.title}
          </View>
          <View className="itemImgBox">
            {item.imgs.map(items => (
              <Image src={items} className="itemImg"></Image>
            ))}
          </View>
        </View>
      </View>
    ));
  }
}

export { Index };

.ys-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: end;
  margin-left: 20px;
  .des-time {
    width: 12vw;
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-right: 40px;
    margin-top: -12px;
    .time {
      width: 15vw;
      font-size: 28px;
      color: #666666;
    }
    .type {
      margin-top: 10px;
      width: 15vw;
      font-size: 22px;
      color: #E8B643;
    }
  }
  .des-mes {
    border-left: 2px solid #979797;
    padding-left: 27px;
    width: 80%;
    display: flex;
    flex-direction: column;
    font-size: 28px;
    position: relative;
    .list-dot {
      width: 48px;
      line-height: 48px;
      position: absolute;
      top: 0px;
      left: -24.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      .dot {
        width: 15px;
        height: 15px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(51, 51, 51, 1);
        border-radius: 50%;
      }
    }
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer   : ignore next */
      -webkit-box-orient: vertical;
      // width: 560px;
      margin-bottom: 10px;
      font-size: 28px;
      color: #333333;
      margin-top: -12px;
    }
    .itemImgBox {
      display: flex;
      align-items: center;
      .itemImg {
        width: 120px;
        height: 120px;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 28px;
      }
    }
  }
}