<template>
  <div class="h300">
    <div class="flex" v-for="(item,i) in list" :key="i">
      <span class="circle"></span>
      <span class="cont">
        <div class="card">
          <div>
            <span class="f600">运输中</span>
            <span class="eee">2022-02-02 11：12：21</span>
          </div>
          <div class="mg10">
            改地址为撒顶顶顶...
          </div>
        </div>
      </span>
    </div> 
    <div v-if="!list.length">
      暂无轨迹
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      list:[1,2,3],
      stateobj:{
        0:'待揽收',
        1:'已揽收' ,
        2:'运输中' ,
        7:'已送达' ,
        3:'已签收', 
        4:'异常' ,
        5:'退回中' ,
        6:'已退回', 
      }
    }
  },
  props:['gjData'],
  watch:{
    gjData:{
      handler(newVal) {
        console.log(newVal)
        // this.list = newVal;
      },
      immediate: true,
      deep: true,
    }
  }
}
</script>
<style scoped>
.h300{
  height:300px;
  overflow-y: scroll;
}
.flex{
  display: flex;
  justify-content: space-around;
}
.circle{
   display: inline-block;
  background: #e4e7ed;
  border-radius: 50%;
  width:15px;
  height:15px;
  position: relative;
  margin-top:28px
}
.circle::after{
  display: block;
  content:'';
  width: 3px;
  height: 110px;
  background: #e4e7ed;
  position: absolute;
  top: 10px;
  left:39%;

}
.cont{
  display: inline-block;
  display: flex;
  width:94%;
  
}
.card{
  width:90%;
  background: #fff;
  box-shadow: 4px 4px 4px 4px #f5f5f5;
  margin:20px ;
  padding: 10px 20px;
  text-align: left;

}
.f600{
  font-size: 18px;
  font-weight: 600;
  margin-right: 20px;
}
.eee{
  color:#999
}
.mg10{
  margin-top:6px
}
.flex:first-child>.circle::after{
  height: 140px;
}
.flex:last-child>.circle::after{
  display: none;
  content:''
}
</style>