用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-3-3 16:47:39 柿霖不是林 咫尺尊享 楼主 102667
    实现了二维码扫描后直接查询
    自定义字体使用
    真机可用
    模板使用
    简易动画








    [HTML] 纯文本查看 复制代码
    .tracking {
      width: 100%;
    }
     
    .track-detail {
      width: 100%;
    }
     
    .track-title {
      padding: 30rpx;
      margin-bottom: 20rpx;
      min-height: 72rpx;
    }
     
    .track-title-right{
      margin-left: 100rpx;
    }
     
    .track-title icon {
      float: left;
      overflow: hidden;
      margin-top: 0;
    }
     
    .track-title text {
      display: block;
    }
     
    .track-title .track-number {
      font-size: 32rpx;
      color: #31708f;
      font-weight: bold;
      margin-bottom: 15rpx;
    }
     
    .track-title .track-state {
      font-size: 26rpx;
    }
     
    .track-success {
      background-color: #dff0d8;
    }
     
    .track-success .track-state {
      color: #3c763d;
    }
     
    .track-info {
      background-color: #d9edf7;
    }
     
    .track-info .track-state {
      color: #31708f;
    }
     
    .track-error {
      background-color: #f2dede;
    }
     
    .track-error .track-state {
      color: #a94442;
    }
     
    .track-null {
      background-color: #f5f5f5;
    }
     
    .track-null .track-state {
      color: #555;
    }
     
    .track-content {
      font-size: 28rpx;
      padding: 20rpx;
      padding-left: 40rpx;
    }
     
    .track-content-title {
      margin-bottom: 20rpx;
    }
     
    .track-content-title label {
      color: #a37c5c;
    }
     
    .track-content-item {
      padding: 12rpx 0;
    }
     
    .track-content-time-dot {
      position: relative;
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: transparent;
      margin-bottom: -12rpx;
      margin-right: 10rpx;
    }
     
    .track-content-time-dot-first {
      background-color: rgba(245, 184, 85, 0.3);
    }
     
    .track-content-time {
      display: inline-block;
      color: #3a87ad;
      margin-bottom: 8rpx;
    }
     
    .track-content-time-dot:before {
      position: absolute;
      content: ' ';
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: rgb(245, 184, 85);
      top: 50%;
      left: 50%;
      margin-top: -10rpx;
      margin-left: -10rpx;
    }
     
    .track-content-time-dot:after {
      content: ' ';
      border-left: 2rpx dashed rgba(245, 184, 85, 0.7);
      height: 120rpx;
      position: absolute;
      z-index: 100;
      top: 40rpx;
      left: 20rpx;
    }
     
    .track-content-time-dot-last:after {
      height: 60rpx;
    }
     
    .track-content-event {
      display: block;
      color: #333;
      padding-left: 50rpx;
      line-height: 1.3;
    }
     
    .i-destination {
      width: 5%;
      margin-bottom: -4rpx;
      margin-right: 8rpx;
    }
     
    .i-from {
      width: 5%;
      margin-bottom: -4rpx;
      margin-right: 8rpx;
    }
     
     
    .spinner {
      width: 100rpx;
      height: 100rpx;
      background-color: #f5b855;
     
      margin: 250rpx auto 0;
      -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
      animation: sk-rotateplane 1.2s infinite ease-in-out;
    }
     
    @-webkit-keyframes sk-rotateplane {
      0% { -webkit-transform: perspective(120px) }
      50% { -webkit-transform: perspective(120px) rotateY(180deg) }
      100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }
     
    @keyframes sk-rotateplane {
      0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
      } 50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }







    [HTML] 纯文本查看 复制代码
    <import src="_track_result.wxml" />
    <view class="container">
      <block wx:if="{{tracking}}">
        <view class="spinner"></view>
        <view class="f-12 mt-10 text-muted">正在为您查询,请稍后...</view>
      </block>
      <view wx:else class="track-detail">
        <view class="track-title {{titleInfo.css}}">
          <icon type="{{titleInfo.iconType}}" size="40" />
          <view class="track-title-right">
            <text class="track-number">{{result.TrackingNumber}}</text>
            <view wx:if="{{result.Exception==='None'}}" class="track-state">
              {{result.StatusDescription}}
              <label class="text-muted">({{result.Duration}})</label>
            </view>
          </view>
        </view>
        <view class="track-history-empty" wx:if="{{result.Exception!=='None'}}">
          <icon type="info_circle" size="45" color="orange" />
          <text>
            您的包裹查询不到跟踪信息。
          </text>
        </view>
        <template is="trackResult" wx:if="{{result.Destination.Carrire.Code}}" data="{{name:'目的地',...result.Destination}}" />
        <template is="trackResult" wx:if="{{result.Original.Carrire.Code}}" data="{{name:'发件地',...result.Original}}" />
      </view>
    </view>



    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    给力的lz
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    路过。表示看不懂 感谢!
    666666666666666
    看看看66666
    dddddddddddddd
    啥也不说了,感谢楼主分享哇!
    真的假的卡卡积分
    12下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略