微信小程序--------商品物流跟踪模板

2024-06-03 06:04:54

话不多讲，先上图

wxml:

<view class="wraper">

<view class='xbq-express'>

<view class='xbq-greencar'></view>

<view class='xbqsf'>顺丰快递（单号:13456）</view>

</view>

<view class='xbq-bar'></view>

<view class="kuaidi_follow">

<view class="follow_title"></view>

<view class="follow_satus">

<view class="follow_address">

<view class="label default"></view>

<view class="address default">上海市|签收|上海市【宝山顾村】，拍照签收已签收</view>

<view class="date">2016-08-30 <text class="time">11:31:44</text></view>

</view>

<view class="follow_address">

<view class="label"></view>

<view class="address">上海市|派件|上海市【宝山顾村】，【冯师傅/18917596580】正在派件</view>

<view class="date">2016-08-30 <text class="time">11:31:44</text></view>

</view>

<view class="follow_address">

<view class="label"></view>

<view class="address">上海市|发件|上海市【上海转运中心】，正发往【上海嘉定转运中心】</view>

<view class="date">2016-08-30 <text class="time">11:31:44</text></view>

</view>

<view class="follow_address">

<view class="label"></view>

<view class="address">上海市|发件|上海市【上海转运中心】，正发往【上海嘉定转运中心】</view>

<view class="date">2016-08-30 <text class="time">11:31:44</text></view>

</view>

</view>

</view>

</view>

wxss:

/* ----------------------------------------------------开始---------------------------------- */

.xbq-express{

width: 100%;

height: 100rpx;

background: white;

}

.xbq-greencar{

width: 50rpx;

height: 50rpx;

background: green;

margin-top: 20rpx;

margin-left: 20rpx;

float: left;

}

.xbqsf{

width:600rpx;

height: 50rpx;

/* background: forestgreen; */

float: left;

margin-left: 20rpx;

margin-top: 20rpx;

}

/*物流信息*/

page{

background: #f3f3f3;

}

.kuaidiInfo{

background: #fff;

width: 100%;

height:220rpx;

margin-top: 30rpx;

}

.kuaidiInfo .kuaidiIcon{

float: left;

width: 120rpx;

height: 120rpx;

margin: 50rpx;

}

.kuaidiInfo .kuaidiIcon image{

width: 100%;

height: 100%;

}

.kuaidiInfo .kuaidiDetails{

float: left;

margin-top: 33rpx;

}

.kuaidiInfo .kuaidiDetails .company{

line-height: 70rpx;

}

.kuaidiInfo .kuaidiDetails .satus{

color: #f23b4d;

}

.xbq-bar{

width: 100%;

height: 20rpx;

background: #f3f3f3;

}

/*物理跟踪*/

.kuaidi_follow{

width: 100%;

background: #fff;

padding: 20rpx 50rpx;

box-sizing: border-box;

}

.kuaidi_follow .follow_satus{

border-left: 1rpx solid #d5d5d5;

}

.kuaidi_follow .follow_satus .follow_address{

border-bottom: 1rpx solid #d5d5d5;

margin: 0 20rpx;

margin-top: 25rpx;

padding-bottom: 25rpx;

position: relative;

}

.kuaidi_follow .follow_satus .follow_address .address{

line-height: 60rpx;

}

.kuaidi_follow .follow_satus .follow_address .label{

width: 25rpx;

height: 25rpx;

border-radius: 50%;

position: absolute;

left: -30rpx;

top: -5rpx;

background: #d5d5d5;

}

.kuaidi_follow .follow_satus .follow_address .label.default{

background: #f23b4d;

}

.kuaidi_follow .follow_satus .follow_address .default{

color: #f23b4d;

}

/* --------------------------------------------------结束--------------------------------- */

js:

Page({data:{},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭}
})

-------------------------------------------------------简单模板，不成敬意-------------------------------------------------------------

微信小程序--------商品物流跟踪模板相关推荐

微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
python写微信小程序源码示例_python实现微信小程序用户登录、模板推送
python实现微信小程序用户登录.模板推送来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: python实现微信小程序用户登录.模板推送.txt ] (友情提示 ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
微信小程序3（WXSS模板样式和全局局部配置）
WXSS模板样式 WXSS模板样式-rpx rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位实现原理' 鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rp ...
炫酷手持滚动弹幕生成小工具微信小程序源码多样化模板
介绍: 这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自 ...

最新文章

热门文章