SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el: '#root',
  data: {
    curIndex:0,
       "flightList": [
      {
        "Id": 0,
        "Title": "参考航班1",
        "TrafficList": [
          {
            "AirlineCompany": "中国国航",
            "DeptCity": "昆明",
            "DeptStation": "昆明长水机场",
            "DeptTime": "02:05",
            "DestCity": "北京",
            "DestStation": "首都机场T3",
            "DestTime": "20:30",
            "IntervalDays": 1,
            "StayType": "3",
            "TrafficNumber": "CA4173",
            "TrafficType": "飞机",
            "TripNo": "1",
            "costHour":'3',
            "costMin":'12'
          },
          {
            "AirlineCompany": "中国国航",
            "DeptCity": "北京",
            "DeptStation": "首都机场T3",
            "DeptTime": "8:40",
            "DestCity": "大阪",
            "DestStation": "关西机场T1",
            "DestTime": "12:40",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "CA0927",
            "TrafficType": "飞机",
            "TripNo": "2"
          },
          {
            "AirlineCompany": "中国国航",
            "DeptCity": "昆明",
            "DeptStation": "昆明长水机场",
            "DeptTime": "17:05",
            "DestCity": "北京",
            "DestStation": "首都机场T3",
            "DestTime": "20:30",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "CA4173",
            "TrafficType": "飞机",
            "TripNo": "2"
          },
          {
            "AirlineCompany": "中国国航",
            "DeptCity": "昆明",
            "DeptStation": "昆明长水机场",
            "DeptTime": "20:25",
            "DestCity": "上海",
            "DestStation": "浦东机场T2",
            "DestTime": "23:35",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "CA1938",
            "TrafficType": "飞机",
            "TripNo": "3"
          }
        ],
        "TrafficRemark": "行程航班C的参考信息"
      },
      {
        "Id": 1,
        "Title": "参考航班2",
        "TrafficList": [
          {
            "AirlineCompany": "香港航空",
            "DeptCity": "上海",
            "DeptStation": "浦东机场T2",
            "DeptTime": "9:10",
            "DestCity": "香港",
            "DestStation": "香港机场T1",
            "DestTime": "11:45",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "HX0235",
            "TrafficType": "飞机",
            "TripNo": "1"
          },
          {
            "AirlineCompany": "香港航空有限公司",
            "DeptCity": "香港",
            "DeptStation": "香港国际机场T1",
            "DeptTime": "18:15",
            "DestCity": "大阪",
            "DestStation": "大阪关西国际机场T1",
            "DestTime": "22:35",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "HX0612",
            "TrafficType": "飞机",
            "TripNo": "3"
          }
        ],
        "TrafficRemark": null
      },
      {
        "Id": 2,
        "Title": "参考航班3",
        "TrafficList": [
          {
            "AirlineCompany": "吉祥航空",
            "DeptCity": "上海",
            "DeptStation": "浦东机场T2",
            "DeptTime": "12:20",
            "DestCity": "大阪",
            "DestStation": "关西机场T1",
            "DestTime": "15:40",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "HO1339",
            "TrafficType": "飞机",
            "TripNo": "1"
          },
          {
            "AirlineCompany": "全日空航空",
            "DeptCity": "上海",
            "DeptStation": "浦东机场T2",
            "DeptTime": "17:30",
            "DestCity": "大阪",
            "DestStation": "关西机场T1",
            "DestTime": "20:30",
            "IntervalDays": 0,
            "StayType": "3",
            "TrafficNumber": "NH5726",
            "TrafficType": "飞机",
            "TripNo": "3"
          }
        ],
        "TrafficRemark": null
      }
    ]
  },
  methods: {
        
        },
  filters : {
        tripNoFliter(type) {
  const TYPE = {
    1:'去程',
    2:'中间程',
    3:'返程'
  }
  return TYPE[type]
}
        }      
})
<div id="root">
  

  <div class="filghtbox">
      <ul class="flightbox-tab">
          <li v-for="item,index in flightList"  :class="{cur:index==curIndex}" @click="curIndex = index">
              {{item.Title}}
          </li>
      </ul>
      <div class="filghtbox-content">
          <div v-for="item,index in flightList" class="tab-pane"  :class="{cur:index==curIndex}">
              <table class="traffic-table">
        <tbody>
            <tr class="border" v-for="flight in item.TrafficList">
                <td class="td-0">
                    <div class="has-connection">{{flight.TripNo | tripNoFliter}}程</div>
                </td>
                <td class="td-1">
                    {{flight.depDate}}
                    <span class="text-gary-9">{{flight.DeptCity}} → {{flight.DestCity}}</span>
                </td>
                <td class="td-2">
                    {{flight.AirlineCompany}}
                </td>
                <td class="td-3">
                    <span class="text-bold">{{flight.DeptTime}}</span>
                    <br>
                    <span class="text-gary-9">{{flight.DeptStation}}</span>
                </td>
                <td class="td-4">
                    {{flight.costHour}}小时{{flight.costMin}}分钟
                                      <div  v-if="flight.DeptTime >= '00:00' && flight.DeptTime <= '05:00'" class="tip">
                        <span>凌晨航班</span>
                    </div>
                </td>
                <td class="td-5">
                    <span class="text-bold">{{flight.DestTime}}</span>
                    <span class="accrossday" v-if="flight.IntervalDays">次日</span>
                    <br>
                    <span class="text-gary-9">{{flight.DestStation}}{{flight.arriveTerminal}}</span>
                </td>
                <td class="td-6">
                    经济舱
                </td>
            </tr>
        </tbody>
    </table>
          </div>
      </div>
  </div>
</div>
.filghtbox {
    background:#fff;
    .flightbox-tab {
        display: block;
        height: 40px;
        border: 1px solid #dedede;
        li {
            float: left;
            width: 92px;
            height: 40px;
            line-height:40px;
            border-right: 1px solid #dedede;
            background-color: #fff;
            text-align: center;
            color: #333;
            cursor: pointer;
            box-sizing:border-box;
            &.cur {
                border-top: 2px solid #01c39a;
                color: #01c39a;
                box-sizing:border-box;
            }
        }
    }
    .filghtbox-content {
      .tab-pane {
        display:none;
        padding:15px;
        &.cur {
                display:block;
            }
      }
    }
}
 .traffic-table{
        width: 100%;
        tr{
            th,td{
                text-align: center;
            }
        }



        tr{
            height: 80px;
            border-top: 1px dashed #ddd;
            &:first-child{
                border-top: 0px dashed #ddd;
            }
            .td-1{
                padding-left: 10px;
                width: 90px;
            }
            .td-2{
                width: 160px;
                font-size: 16px;
            }
            .td-3,.td-5{
                position: relative;
                width: 120px!important;
                .text-bold{
                    font-size: 24px;
                    font-weight: bold;
                }
                .range-time{
                    font-size: 12px;
                }
                .span-time{
                    position: absolute;
                    top: 14px;
                    left: 83px;
                    white-space: nowrap;
                }
            }
            .td-4{
                width: 135px;
                font-size: 12px;
                background-position: -30px 35px;
                display: table-cell;
                padding-bottom: 25px;
            }
            .td-6{
                width: 100px;
                font-size: 12px;
                .btn-ship-space{
                    display: none;
                }
            }

        }
    }

    .traffic-table{
        tr{
            font-size: 14px;
            .td-0{
                font-size: 14px;
                color: #fff;
                position: relative;
                width: 25px;
                .has-connection{
                    width: 20px;
                    background-color: #aaafb7;
                    height: 50px;
                    line-height: 25px;
                    &:after{
                        content: '';
                        width: 0;
                        height: 0;
                        border-left: 4px solid #aaafb7;
                        border-bottom: 4px dashed transparent;
                        border-top: 4px dashed transparent;
                        position: absolute;
                        top: 36px;
                        right: 2px;
                    }
                    &.multi {
                        height: 55px;
                        line-height: 18px;
                    }
                }
            }
            .td-2{
                font-size: 14px;
            }
          .td-4{
            position:relative;
            .tip {
              position:absolute;
              left:0;
              right:0;
              top:40px;
            }
          }
          .td-5{
position:relative;
            .accrossday {
              position:absolute;
              top:10px;
              width:30px;
              color:#01c39a;
            }
          }
            

        }
    }