支付宝小程序用于查询物流的步骤条

最新推荐文章于 2022-06-23 15:31:02 发布

qq_41996062

最新推荐文章于 2022-06-23 15:31:02 发布

阅读量340

点赞数

分类专栏：前端支付宝小程序文章标签：小程序前端 css3

本文链接：https://blog.csdn.net/qq_41996062/article/details/113253301

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

支付宝小程序

2 篇文章 0 订阅

订阅专栏

官网有可以直接引用的，但跟项目有出入，改人家的也是麻烦，于是自己半小时写了一个。

index.axml

<view class="wrap">
  <view class="list flex_as">
    <view class="left_line">
    </view>
    <view class="items">
      <view class="item flex_as" a:for="{{4}}">
        <view class="circle">
        </view>
        <view class="info">
          <view class="time">2020:12:02  11:45</view>
          <view class="text">快递已到某某某地方快递已到某某某地方快递已到某某某地方快递已到某某某地方</view>
        </view>
      </view>
    </view>
  </view>
</view>

index.acss

page {
  background: #f3f4f9;
}
.wrap{
  padding: 30rpx 20rpx;
}

.list {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 0 20rpx 20rpx 20rpx;
  position: relative;
  height: 100%;
}
 
.left_line {
  position: absolute;
  top: 50rpx;
  bottom: 20rpx;
  left: 30rpx;
  width: 1rpx;
  background-color: #e5e5e5;
}

.items {
  font-family: PingFang-SC-Medium;
  font-size: 26rpx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rpx;
  color: #666666;
  flex: 1;
}

.item {
  position: relative;
  padding-left: 48rpx;
}
.item:last-child .info{
  border: none
}

.circle {
  position: absolute;
  top: 50rpx;
  left: 5rpx;
  width: 10rpx;
  height: 10rpx;
  background-color: #7d84ab;
  border-radius: 50%;
}

.time {
  margin: 40rpx 0 20rpx 0;
}

.text {
  margin-bottom: 20rpx;
  line-height: 46rpx;
}

.info {
  border-bottom: 1rpx solid #e5e5e5;  
  width: 100%
}

结果展示