小程序扫码、上传图片、css时间轴

de

<!-- 导航 -->
<view class="navSec flexBox">
    <text class="navItem {{ selectIndex == 1 ? 'selectedNav' : 'nothing' }}" data-index="1" bindtap="changeNav">发货扫码</text>
    <text class="navItem {{ selectIndex == 2 ? 'selectedNav' : 'nothing' }}" data-index="2" bindtap="changeNav">货运扫描</text>
    <text class="navItem {{ selectIndex == 3 ? 'selectedNav' : 'nothing' }}" data-index="3" bindtap="changeNav">货运查询</text>
    <text class="navItem {{ selectIndex == 4 ? 'selectedNav' : 'nothing' }}" data-index="4" bindtap="changeNav">发货查询</text>
</view>

<!-- 发货扫码 -->
<view class="contentWrapper wrapper1 {{ selectIndex == 1 ? 'showWrapper' : 'nothing' }}">
    <view class="scanContain flexBox radius10">
        <label class="tipLabel">出货单号：</label>
        <input class="inputBox radius10" bindinput="getInputTxt1" value="{{obj1.deliveryNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/>
        <button class="scanBtn btnActive" data-index="1" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button>
    </view>
    <view class="imgContain radius10">
        <view class="tipFile">附件<text class="tipNum">最多上传5张</text></view>
        <block wx:for="{{obj1.imgLst}}" wx:key="id">
            <view class="imgItem radius10">
                <label class="delImgBtn" data-info="1" data-index="{{index}}" bindtap="deleteImg">+</label>
                <image class="uploadImg" data-info="1" data-index="{{index}}" bindtap="previewImg" src="{{item}}" mode="aspectFill"></image>
            </view>
        </block>
        <view class="uploadImgBtn radius10" data-index="1" bindtap="uploadImg" wx:if="{{obj1.imgLst.length < 5}}">
            <image class="uploadIcon" src="QHImage/iconUpload.png" mode="widthFix"></image>
            <text class="uploadTip">添加图片</text>
        </view>
    </view>
    <view class="fixFoot {{!!obj1.deliveryNo ? 'showFoot' : 'hideFoot'}}">
        <button class="submitBtn btnActive" bindtap="submitPartOne">提交</button>
    </view>
</view>

<!-- 货运扫描 -->
<view class="contentWrapper wrapper2 {{ selectIndex == 2 ? 'showWrapper' : 'nothing' }}">
    <view class="scanContain flexBox radius10">
        <label class="tipLabel">出货单号：</label>
        <input class="inputBox radius10" bindinput="getInputTxt2" value="{{obj2.deliveryNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/>
        <button class="scanBtn btnActive" data-index="2" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button>
    </view>
    <view class="scanContain flexBox radius10">
        <label class="tipLabel">物流单号：</label>
        <input class="inputBox radius10" bindinput="getInputTxt3" value="{{obj2.logisticsNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/>
        <button class="scanBtn btnActive" data-index="3" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button>
    </view>
    <view class="imgContain radius10">
        <view class="tipFile">附件<text class="tipNum">最多上传5张</text></view>
        <block wx:for="{{obj2.imgLst}}" wx:key="id">
            <view class="imgItem radius10">
                <label class="delImgBtn" data-info="2" data-index="{{index}}" bindtap="deleteImg">+</label>
                <image class="uploadImg" data-info="2" data-index="{{index}}" bindtap="previewImg" src="{{item}}" mode="aspectFill"></image>
            </view>
        </block>
        <view class="uploadImgBtn radius10" data-index="2" bindtap="uploadImg" wx:if="{{obj2.imgLst.length < 5}}">
            <image class="uploadIcon" src="QHImage/iconUpload.png" mode="widthFix"></image>
            <text class="uploadTip">添加图片</text>
        </view>
    </view>
    <view class="fixFoot {{!!obj2.deliveryNo && !!obj2.logisticsNo ? 'showFoot' : 'hideFoot'}}">
        <button class="submitBtn btnActive" bindtap="submitPartTwo">提交</button>
    </view>
</view>

<!-- 货运查询 -->
<view class="contentWrapper wrapper3 {{ selectIndex == 3 ? 'showWrapper' : 'nothing' }}">
    <view class="scanContain logisticsScanContain flexBox">
        <label class="tipLabel">单号：</label>
        <input class="inputBox radius10" bindinput="getInputTxt4" value="{{obj3.logisticsNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/>
        <button class="scanBtn logisticsScanBtn btnActive" data-index="4" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button>
        <button class="logisticsSearchBtn btnActive radius10" bindtap="searchLogistics">查询</button>
    </view>
    <!-- 物流详情 -->
    <view class="logisticsContain radius10" wx:if="{{obj3.logisticsInfo.stateArr.length > 0}}">
        <view class="logisticsAddr">
            <image class="iconAddr" src="QHImage/iconAddr.png" mode="aspectFill"></image>
            <text class="logisticsAddrTxt">收货地址：{{obj3.logisticsInfo.address}}</text>
        </view>
        <block wx:for="{{obj3.logisticsInfo.stateArr}}" wx:key="id">
            <view class="logisticsItem">
                <view class="logisticsTimeLeft">
                    <text class="logisticsTime">{{item.time}}</text>
                    <text class="logisticsDate">{{item.date}}</text>
                </view>
                <view class="logisticsTxtRight">
                    <text class="logisticsState">{{item.state}}</text>
                    <text class="logisticsTxt">{{item.stateTxt}}</text>
                </view>
            </view>
        </block>
    </view>
</view>

<!-- 发货查询 -->
<view class="contentWrapper wrapper4 {{ selectIndex == 4 ? 'showWrapper' : 'nothing' }}">
    <view class="dateFilterContain">
        <text class="filterTip">查询日期</text>
        <view class="dateBox flexBox">
            <picker class="startDate {{obj4.startDate ? 'noEmptyDate' : 'nothing'}}" end="{{obj4.endDate}}"
                mode="date" bindchange="startDateChange">{{obj4.startDate ? obj4.startDate : "开始时间"}}</picker>
            <picker class="endDate {{obj4.endDate ? 'noEmptyDate' : 'nothing'}}" start="{{obj4.startDate}}"
                mode="date" bindchange="endDateChange">{{obj4.endDate ? obj4.endDate : "结束时间"}}</picker>
        </view>
        <button class="shipmentSearchBtn searchBtn btnActive" bindtap="searchOrder">查询</button>
    </view>
    <view class="shipmentOrderContain" wx:if="{{obj4.orderLst.length > 0}}">
        <block wx:for="{{obj4.orderLst}}" wx:key="id">
            <view class="shipmentItem">
                <text class="shipmentNo">出货单号:{{item.orderNo}}</text>
                <view class="dataRow">
                    <text class="customerName itemTxt">客户简称：{{item.customerName}}</text>
                    <text class="shipmentNum itemTxt">出货件数：{{item.goodNum}}</text>
                </view>
                <view class="dataRow">
                    <text class="statistics itemTxt">金额统计：<text class="orderAmount">￥{{item.amount}}</text></text>
                    <text class="createTime itemTxt">提交日期：{{item.createTime}}</text>
                </view>
            </view>
        </block>
    </view>
    <!-- 为空提示 -->
    <view class="nothingBox" wx:if="{{obj4.isEmpty == 1 && obj4.orderLst.length == 0}}">
        <image class="nothingPic" src="QHImage/nothingPic.png" mode="widthFix"></image>
        <text class="nothingTip">没有查询到产品信息</text>
    </view>
</view>

<!-- 操作提示 -->
<view class="operateTip {{operateTip.isShowTip ? 'showOperateTip' : 'nothing'}}">{{operateTip.tipTxt}}</view>

wxml

// pages/YT/productShipment.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        selectIndex: 1,
        operateTip: {
            isShowTip: false,
            tipTxt: ""
        },
        obj1: {  // 发货扫码
            deliveryNo: "",
            imgLst: []
        },

        obj2: { // 货运扫描
            deliveryNo: "",
            logisticsNo: "",
            imgLst: []
        },

        obj3: { // 货运查询
            logisticsNo: "",
            logisticsInfo: ""
        },

        obj4: {  // 发货查询
            startDate: "",
            endDate: "",
            orderLst: []
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
    },

    // 切换
    changeNav: function(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        that.setData({
            selectIndex: index
        });
    },

    // 扫码
    scanCode: function(e) {
        var that = this;
        var inputIndex = e.currentTarget.dataset.index;
        wx.scanCode({
            success(res) {
                var shipmentNo = "2021112912312312"; // 假设单号
                switch(inputIndex) {
                    case "1":
                        that.setData({
                            "obj1.deliveryNo": shipmentNo
                        });
                        break;
                    case "2":
                        that.setData({
                            "obj2.deliveryNo": shipmentNo
                        });
                        break;
                    case "3":
                        that.setData({
                            "obj2.logisticsNo": shipmentNo
                        });
                        break;
                    case "4":
                        that.setData({
                            "obj3.logisticsNo": shipmentNo
                        });
                        break;
                    default:
                        break;
                }
            },
            fail(res) {
                wx.showToast({
                    title: "扫码失败",
                    icon: "none",
                    duration: 1300
                  })
            }
        });
    },

    // 发货扫码--出货单号
    getInputTxt1: function(e) {
        this.setData({
            "obj1.deliveryNo": e.detail.value
        });
    },

    // 货运扫描--出货单号
    getInputTxt2: function(e) {
        this.setData({
            "obj2.deliveryNo": e.detail.value
        });
    },

    // 货运扫描--物流单号
    getInputTxt3: function(e) {
        this.setData({
            "obj2.logisticsNo": e.detail.value
        })
    },

    // 图片上传
    uploadImg: function(e) {
        var that = this;
        var imgLstIndex = e.currentTarget.dataset.index;
        var imgLst1 = that.data.obj1.imgLst;
        var imgLst2 = that.data.obj2.imgLst;
        var count = imgLstIndex == 1 ? (5 - imgLst1.length) : (5 - imgLst2.length);

        wx.chooseImage({
            count: count,
            sizyType: ["original", "compressed"],
            sourceType: ["album", "camera"],
            success: function(res) {
                var imgs = res.tempFilePaths;
                switch(imgLstIndex) {
                    case "1":
                        that.setData({
                            "obj1.imgLst": imgLst1.concat(imgs)
                        });
                        break;
                    case "2":
                        that.setData({
                            "obj2.imgLst": imgLst2.concat(imgs)
                        });
                        break;
                    default:
                        break;
                }
            }
        });
    },

    // 查看图片
    previewImg: function(e) {
        var that = this;
        var imgLstIndex = e.currentTarget.dataset.info;
        var imgIndex = e.currentTarget.dataset.index;
        if(imgLstIndex == 1) {
            wx.previewImage({
                current: that.data.obj1.imgLst[imgIndex],
                urls: that.data.obj1.imgLst
            });
        } else {
            wx.previewImage({
                current: that.data.obj2.imgLst[imgIndex],
                urls: that.data.obj2.imgLst
            })
        }
    },

    // 删除图片
    deleteImg: function(e) {
        var that =  this;
        var imgLstIndex = e.currentTarget.dataset.info;
        var imgIndex = e.currentTarget.dataset.index;

        if(imgLstIndex == 1) {
            var imgLst1 = that.data.obj1.imgLst;
            imgLst1.splice(imgIndex, 1);
            that.setData({
                "obj1.imgLst": imgLst1
            });
        }

        if(imgLstIndex == 2) {
            var imgLst2 = that.data.obj2.imgLst;
            imgLst2.splice(imgIndex, 1);
            that.setData({
                "obj2.imgLst": imgLst2
            });
        }
    },

    // 提交--发货扫码
    submitPartOne: function() {
        var that = this;
        that.upImgFile(that.data.obj1.imgLst);
        that.setData({
            "obj1.deliveryNo": "",
            "obj1.imgLst": [],
            "operateTip.isShowTip": true,
            "operateTip.tipTxt": "已提交审核",
        });
        that.hideOperateTip();
    },

    // 提交--货运扫描
    submitPartTwo: function() {
        var that = this;
        that.upImgFile(that.data.obj2.imgLst);
        that.setData({
            "obj2.deliveryNo": "",
            "obj2.logisticsNo": "",
            "obj2.imgLst": [],
            "operateTip.isShowTip": true,
            "operateTip.tipTxt": "已提交审核",
        });
        that.hideOperateTip();
    },

    // 上传图片至服务器
    upImgFile: function(imgArr) {
        var i;
        for(i = 0; i < imgArr.length; i++) {
            wx.uploadFile({
                url: "http://192.168.1.121:8025/Handle/AjaxUpload.ashx",
                filePath: imgArr[i],
                name: "file",
                success(res) {
                }
            })
        }
    },

    // 获取货运单号
    getInputTxt4: function(e) {
        this.setData({
            "obj3.logisticsNo": e.detail.value
        });
    },

    // 货运查询
    searchLogistics: function() {
        var that = this;
        var logisticsNo = that.data.obj3.logisticsNo;
        if(!!logisticsNo) {
            that.loadLogisticsData();
        } else {
            that.setData({
                "operateTip.isShowTip": true,
                "operateTip.tipTxt": "请输入单号",
            });
            that.hideOperateTip();
        }
    },

    // 物流信息
    loadLogisticsData: function() {
        var that = this;
        var logisticsJson = {
            address: "广东省东莞市厚街镇家具大道30号广东省 东莞市厚街镇家具大道30号",
            stateArr: [
                { time: "16:20", date: "0-05",   state: "签收", stateTxt: "快递已送达广东省东莞市厚街镇家具大道30 号 签收人：詹某某" },
                { time: "13:20", date: "03-05",  state: "派件中", stateTxt: "" },
                { time: "12:20", date: "01-05",  state: "运输中", stateTxt: "货物正在派件请注意查收" },
                { time: "11:20", date: "01-04",  state: "运输中", stateTxt: "货物到达某站点" },
                { time: "09:20", date: "01-03",  state: "运输中", stateTxt: "货物离开南康物流中心，前往东莞物流中心" },
                { time: "23:20", date: "01-02",  state: "已揽收", stateTxt: "" },
                { time: "12:20", date: "01-02",  state: "卖家已发货", stateTxt: "" }
            ]
        };

        if(logisticsJson.stateArr.length > 0) {
            that.setData({
                "obj3.logisticsInfo": logisticsJson
            });
        } else {
            that.setData({
                "operateTip.isShowTip": true,
                "operateTip.tipTxt": "查询不到该单号物流信息",
            });
            that.hideOperateTip();
        }
    },

    // 选择时间
    startDateChange: function(e) {
        var that = this;
        that.setData({
            "obj4.startDate": e.detail.value
        });
    },

    endDateChange: function(e) {
        this.setData({
            "obj4.endDate": e.detail.value
        });
    },

    // 发货查询
    searchOrder: function() {
        var that = this;
        var startDate = that.data.obj4.startDate;
        var endDate = that.data.obj4.endDate;

        if(!!startDate && !!endDate) {
            that.loadOrderData();
        } else {
            that.setData({
                "operateTip.isShowTip": true,
                "operateTip.tipTxt": "请选择时间",
            });
            that.hideOperateTip();
        }
    },

    loadOrderData: function() {
        var that = this;
        var orderInfo = [
            {"orderNo": "YTXCX2021", "customerName": "晨希纳","goodNum": "12345","amount": "26850", "createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"},
            {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}
        ];

        // 数据项为 0 时，显示为空提示
        var isEmpty = orderInfo.length > 0 ? 0 :1;

        that.setData({
            "obj4.orderLst": orderInfo,
            "obj4.isEmpty": isEmpty
        });
    },

    // 关闭操作提示
    hideOperateTip: function() {
        var that = this;
        setTimeout(function() {
            that.setData({
                "operateTip.isShowTip": false,
                "operateTip.tipTxt": "",
            });
        }, 1000)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },

})

js

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad {box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height: 1;}
page {background-color: #f5f5f5;}

.flexBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.radius10 {border-radius: 10rpx;}
.btnActive:active { filter: opacity(.85);}

/* 导航切换 */
.navSec {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    background-color: #fff;
}

.navItem {
    position: relative;
    display: block;
    width: 25%;
    height: 62rpx;
    line-height: 62rpx;
    font-size: 26rpx;
    text-align: center;
    color: #333;
}

.selectedNav {
    font-weight: 800;
    color: #399EFF;
}

.navItem::after {
    position: absolute;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    border-bottom: 2rpx solid;
    transform: translateX(-50%);
}

.selectedNav::after {
    width: 37.35%;
    transition: width .3s;
}

/* 发货扫码、货运扫描 */
.contentWrapper {display: none;}
.showWrapper {display: block;}
.wrapper1, .wrapper2 { padding: 92rpx 30rpx 0;}

.scanContain {
    position: relative;
    z-index: 6;
    height: 110rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
}

.tipLabel {
    flex-shrink: 0;
    font-size: 28rpx;
    color: #333;
}

.inputBox {
    flex-grow: 1;
    height: 70rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
    font-weight: 700;
    background-color: #f5f5f5;
}

.inputHolder {
    font-weight: 400;
    color: #A3A3A3;
}

.scanBtn:not([size=mini]) {
    position: absolute;
    right: 30rpx;
    z-index: 3;
    width: 118rpx;
    height: 44rpx;
    padding: 0;
    margin: 0;
    line-height: 40rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    background-color: #399EFF;
    border-radius: 6rpx;
}

.iconScan {
    margin-left: 10rpx;
    width: 24rpx;
    height: 24rpx;
    vertical-align: middle;
}

/* 图片详情 */
.imgContain {
    padding: 22rpx 20rpx 0;
    font-size: 0;
    background-color: #fff;
}

.tipFile {
    padding-bottom: 20rpx;
    font-size: 26rpx;
    color: #333;
}

.tipNum {
    padding-left: 20rpx;
    color: #C6C6C6;}

.imgItem, .uploadImgBtn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 158rpx;
    height: 158rpx;
    margin: 0 30rpx 30rpx 0;
}

.uploadImg {
    width: 100%;height: 100%;
}

.uploadImgBtn {
    text-align: center;
    background-color: #f5f5f5;
}

.delImgBtn {
    position: absolute;
    right: 0;
    z-index: 3;
    width: 50rpx;
    height: 50rpx;
    padding: 10rpx;
    line-height: 30rpx;
    font-size: 28rpx;
    text-align: center;
    color: #399EFF;
    background-clip: content-box;
    border-radius: 50%;
    background-color: #fff;
    transform: rotate(45deg);
}

.delImgBtn:active {
    color: #fff;
    background-color: #399EFF;
    transition: all .2s;
}

.uploadIcon {
    display: block;
    width: 48rpx;
    height: 48rpx;
    margin: 38rpx auto 24rpx;
}

.uploadTip {
    font-size: 22rpx;color: #7F7F7F;
}

.fixFoot {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    padding: 10rpx 30rpx;
    background-color: #fff;
    transition: all .3s;
}

.hideFoot {
    visibility: hidden;opacity: 0;
}

.showFoot {
    visibility: visible;opacity: 1;
}

.submitBtn:not([size=mini]) {
    width: 100%;
    height: 78rpx;
    padding: 0;
    margin: 0 auto;
    line-height: 78rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #fff;
    border-radius: 39rpx;
    background-color: #399EFF;
}

/* 货运查询 */
.wrapper3 {padding: 222rpx 0 30rpx;}

.logisticsScanContain {
    position: fixed;
    top: 62rpx;
    width: 100%;
    height: 130rpx;
    padding: 0 30rpx;
}

.logisticsScanBtn:not([size=mini]) { right: 180rpx;}

.logisticsSearchBtn:not([size=mini]) {
    flex-shrink: 0;
    width: 120rpx;
    height: 70rpx;
    padding: 0;
    margin: 0 0 0 20rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #fff;
    background-color: #399EFF;
}

.logisticsContain {
    width: 92%;
    padding: 30rpx 20rpx 30rpx 52rpx;
    margin: 0 auto;
    background-color: #fff;
}

.logisticsItem {
    display: flex;
    padding-bottom: 70rpx;
    margin-top: -24rpx;
    color: #7F7F7F;
    border-left: 2rpx solid #C6C6C6;
}

.logisticsItem:nth-child(2) { color: #333;}

.logisticsItem:last-child {
    padding-bottom: 10rpx;
    border-color: rgba(0,0,0,0);
}

.logisticsAddr {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 120rpx;
    padding: 0 0 60rpx 44rpx;
    color: #7F7F7F;
    border-left: 2rpx solid #C6C6C6;
}

.iconAddr,
.logisticsAddr::before {
    position: absolute;
    top: 0;
    content: "";
    left: -33rpx;
    width: 66rpx;
    height: 66rpx;
    background-color: #399EFF;
    border-radius: 50%;
}

.logisticsAddrTxt {
    font-size: 24rpx;
    line-height: 1.5;
}

.logisticsTimeLeft {
    position: relative;
    flex-shrink: 0;
    width: 138rpx;
    text-align: center;
}

.logisticsTimeLeft::before  {
    position: absolute;
    top: 20rpx;
    left: -11rpx;
    content: "";
    width: 20rpx;
    height: 20rpx;
    background-color: #C6C6C6;
    border-radius: 50%;
}

.logisticsItem:nth-child(2) .logisticsTimeLeft::before {
    background-color: #399EFF; }

.logisticsTime { display: block;font-size: 24rpx;}

.logisticsDate {font-size: 18rpx;}

.logisticsTxtRight {flex-grow: 1;}

.logisticsState {
    display: block;
    padding: 16rpx 0 10rpx;
    font-size: 28rpx;
}

.logisticsTxt { font-size: 24rpx; }

/* 发货查询 */
.wrapper4 { padding-top: 328rpx; }

.dateFilterContain {
    position: fixed;
    top: 62rpx;
    z-index: 5;
    width: 100%;
    padding: 24rpx 50rpx 20rpx;
    background-color: #fff;
}

.filterTip {
    font-size: 26rpx; color: #333;
}

.dateBox {
    position: relative; margin: 14rpx auto 20rpx
}

.dateBox::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 42rpx;
    height: 1rpx;
    background-color: #A3A3A3;
    transform: scaleY(.5) translate(-50%, -50%);
}

.startDate, .endDate {
    position: relative;
    display: inline-block;
    width: 290rpx;
    height: 56rpx;
    line-height: 56rpx;
    font-size: 26rpx;
    text-align: center;
    color: #A3A3A3;
    border-radius: 28rpx;
    background-color: #f5f5f5;
}

.startDate::after,
.endDate::after {
    position: absolute;
    top: 40%;
    right: 26rpx;
    content: "";
    width: 10rpx;
    height: 10rpx;
    color: #A3A3A3;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(45deg);
}

.noEmptyDate, .noEmptyDate::after {  color: #333; }

.shipmentSearchBtn:not([size=mini]) {
    width: 100%;
    height: 70rpx;
    padding: 0;
    margin: 0;
    line-height: 70rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #fff;
    background-color: #399EFF;
    border-radius: 35rpx
}

/* 出货项 */
.shipmentItem {
    width: 92%;
    padding: 26rpx 20rpx 10rpx 30rpx;
    margin: 0 auto 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.shipmentNo {
    display: block;
    padding-bottom: 26rpx;
    line-height: inherit;
    font-size: 30rpx;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
}

.dataRow {
    display: flex;  margin-bottom: 14rpx;
}

.itemTxt {
    display: block;
    flex-shrink: 0;
    line-height: 1.3;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 26rpx;
    color: #7F7F7F;
}

.customerName, .statistics {
    min-width: 320rpx;
    max-width: 400rpx;
    padding-right: 20rpx;
}

.orderAmount {
    font-weight: 700; color: #399EFF;
}

.shipmentNum, .createTime { flex: 1 0 0; }

/* 为空提示 */
.nothingBox {
    width: 400rpx;
    padding-top: 120rpx;
    margin: 0 auto;
    text-align: center;
}

.nothingPic {
    width: 400rpx; height: 400rpx;
}

.nothingTip {
    font-size: 26rpx; color: #7f7f7f;
}

/* 操作提示 */
.operateTip {
    position: fixed;
    left: 50%;
    bottom: 128rpx;
    min-width: 192rpx;
    height: 57rpx;
    padding: 0 20rpx;
    line-height: 57rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(51,51,51,.7);
    border-radius: 10rpx;
    transform: translateX(-50%);
}

.showOperateTip {
    animation: showTip 1s ;
}

@keyframes showTip {
    0% { visibility: hidden;opacity: 0; }
    100% { visibility: visible;opacity: 1; }
}

wxss

示例：