<!-- 外層pages -->
<view class='pages'>

  <!-- 頭部 -->
  <view class='head'>
    <image class='head_img' src='../../image/list_img.png'></image>
    <label class='head_name'>已簽收</label>
    <label class='head_title'>圓通速遞：8889993221341234</label>
    <label class='head_tel_name'>官方客服:95559</label>
    <label class="head_tell">物流客服</label>
  </view>
  <!-- 追蹤 -->
  <view class='logisit' wx:for="{{list}}" wx:key="key">
    <!-- 列表 -->
    <view class='list'>
      <!-- 判斷列表中id==0並且長度大於1  已完成ICON帶線 -->
      <image class='list_img_tab1' wx:if="{{item.id==0&&list.length>1}}" src='../../image/tabw.png'></image>
      <!-- 判斷列表中id==0並且長度小於1  已完成ICON無線 -->
      <image class='list_img' wx:if="{{item.id==0&&list.length==1}}" src='../../image/111.png'></image>
      <!-- 判斷列表中id==1  灰色ICON -->
      <image class='list_imgs' wx:if="{{item.id==1}}" src='../../image/writes.png'></image>
      <!-- 判斷列表中id==2  灰色ICON -->
      <image class='list_imgs' wx:if="{{item.id==2}}" src='../../image/writes.png'></image>
      <!-- 判斷列表中id==3  飛機ICON -->
      <image class='list_img' wx:if="{{item.id==3}}" src='../../image/222.png'></image>
      <view class='list_name_page'>
        <!-- 列表名稱 -->
        <lable class='list_name'>{{item.name}}</lable>
      </view>
      <!-- 時間 -->
      <view class='list_dates_page'>{{item.dates}}</view>

    </view>
    <!-- 列表底線 -->
    <view class='writes'></view>


  </view>



</view>
 

.head{
  position: relative;
  width: 100%;
  height: 230rpx;
  border-bottom: 6rpx solid #ebebeb;
  /* background-color: red; */
}
/* 收貨圖片 */
.head_img{
  position: absolute;
  width: 144rpx;
  height: 144rpx;
  left: 60rpx;
  top: 45rpx;
}
/* 快遞狀態 */
.head_name{
  position: absolute;
  left: 230rpx;
  font-size: 40rpx;
  top: 36rpx;
}
/* 快遞編號 */
.head_title{
position: absolute;
font-size: 30rpx;
left: 230rpx;
top: 100rpx;
color: #333;
}
/* 官方客服 */
.head_tel_name{
  position: absolute;
font-size: 30rpx;
left: 230rpx;
top: 150rpx;
color: #333;
}
/* 客服按鈕 */
.head_tell{
  position: absolute;
  font-size: 28rpx;
  right: 60rpx;
  bottom: 40rpx;
  font-family: PingFangSC-Regular;
color: #AAAAAA;
letter-spacing: 0;
}

/* 追蹤 */
.logisit{
  position:relative;
  width: 100%;
  height: 170rpx;
  text-align: center;
 /* background-color: red; */
}
/*  */
.list{
  position: relative;
  display: inline-block;
  width: 85%;
  height: 170rpx;
  /* border-left: 1rpx solid #ddd; */
  /* background-color: yellow; */
}
.list_name_page{
  position: relative;
  width: 100%;
  top:25%;
  /* background-color: red; */
  left: 40rpx;
}
.list_dates_page{
    position: relative;
  width: 100%;
  top: 30%;
  color: #aaa;
  text-align: left;
  font-size: 30rpx;
  /* background-color: yellow; */
  left: 40rpx;
}
.list_img_tab1{
    display: inline-flex;
  position: absolute;
  left: -34rpx;
  top: 40rpx;
  width: 55rpx;
  height: 195rpx;
}
.list_img{
  position: absolute;
  left: -28rpx;
  top: 50rpx;
  width: 45rpx;
  height: 45rpx;
}
.list_imgs{
   display: inline-flex;
  position: absolute;
  left: -28rpx;
  top: 40rpx;
  width: 40rpx;
  height: 195rpx;
}
.list_name{
  position: relative;
  text-align: left;
  font-size: 30rpx;
  width: 600rpx;
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 2;    
overflow: hidden;
}

.list_dates{
  position: absolute;
  text-align: left;
  top:68%;
  font-size: 30rpx;
}
/* .write{
  position: absolute;
  height: 78%;
  top:38%;
  border-left: 1rpx solid #ddd;
 left: 45rpx;
} */
.writes{
    position: absolute;
  width: 80%;
  bottom: -20rpx;
  border-bottom: 1rpx solid #ddd;
 left:100rpx;
}
 

// pages/userhome/address/address.js
Page({
  data: {
    // 列表資料
    list: [{
        // 狀態
        id: 0,
        // title
        name: "客戶簽收人:徐劍 已簽收 感謝使用圓通快遞",
        // 時間
        dates: "2016-08-30"
      }, {
        id: 1,
        name: "北京市通州區梨園公司北京市通州區梨園公司北京市通州區梨園公司北京市通州區梨園公司",
        dates: "2016-08-30"
      }, {
        id: 2,
        name: "【北京市通州區梨園公司】已收入【北京市通州區梨園公司】已收入",
        dates: "2016-08-30"
      }

      , {
        id: 3,
        name: "北京朝陽區十里堡公司】取件人：小四 已收件",
        dates: "2016-08-30"
      }


    ]


  },
  onLoad: function(options) {
    // 頁面初始化 options為頁面跳轉所帶來的引數
  },
  onReady: function() {
    // 頁面渲染完成
  },
  onShow: function() {
    // 頁面顯示
  },
  onHide: function() {
    // 頁面隱藏
  },
  onUnload: function() {
    // 頁面關閉
  }
})