Stpes设置样式

最新推荐文章于 2023-08-21 18:03:24 发布

别凶小晗.

最新推荐文章于 2023-08-21 18:03:24 发布

阅读量599

点赞数

分类专栏：小程序文章标签： css 小程序微信

本文链接：https://blog.csdn.net/Wang_MengHan/article/details/119328061

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

根据自己UI设计稿，搞了一下午的Stpes，改哪些样式class需要拿哪个，这是根据UI设计稿扣出来的几个改动样式的地方
改动地方：
字体大小、字体颜色、字体间距、内边距、圆角
先看一下UI设计稿
在这里插入图片描述
再来看一下我的布局

我这人有强迫症，必须要跟UI搞设计的一样，所以我就花费了很长时间把这个布局好好设计了一下，最后一张图，是效果
再来看看我的样式设计CSS：

wxml:
<!-- 物流进度条 -->
	<view class="steps-box">
        <van-steps steps="{{express_info}}" active="{{ active }}" active-color="#09BAA7" direction="vertical"
            inactive-color="#A2A7AB" />
    </view>
<!-- 物流进度条-end -->

`wxml就这些，再看看看样式`

/* 走到哪一步的icon 写着个是因为他会在最新的那条信息下边占位置 */
.van-step__circle-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9 !important;
    
}
/* 最新物流icon大小/及颜色 */
.van-icon-checked{
    font-size: 31rpx !important;
    z-index: 999;
    color:#09BAA7 ;
}
/* 改变走过的圆圈大小 */
.van-step__circle {
    width: 9rpx !important;
    height: 9rpx !important;
}
/* 改变整个Steps圆角 */
.van-steps {
    border-radius: 22rpx;
}
/* 整个Stpes的间距 */
.van-steps--vertical .van-step__wrapper {
    padding: 20rpx 0 0 40rpx !important;
}
/* 物流信息上一条距离下一条的间距 */
.van-step--vertical {
    padding: 20rpx 0 47rpx 9rpx !important;
}
/* 去掉所有的Stpes内边距线 */
.van-step--vertical:after {
    border: none !important;
}
/* 改变最新物流信息字体颜色/及大小等 */
.van-step--process>.van-step__title>view:nth-child(1) {
    color: #292C2E !important;
    font-size: 25rpx;
}
/* 设置走过的物流信息字体颜色/及大小等 */
.van-step__title view:nth-child(1) {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}
/* 改变走过的物流信息时间颜色/及大小 */
.van-step__title view:nth-child(2) {
    color: #A2A7AB;
    font-size: 22rpx;
    padding-top: 4rpx;
}


getData: function () {
        let _this = this;
        let obj = {
            url: wx.$api.MALL.expressinfo,
            method: 'get',
            load: false,
            data: {
                expressSn: _this.data.expressSn,
                ordersn:_this.data.ordersn
            },
        }

        wx.$http(obj).then(res => {
            let data = res.result;
            // 用的vant框架（Stpes），不支持其他字段，需转换成我们需要的字段
            if(data.express_info!=null){
                data.express_info.forEach(ele => {
                    ele.text = ele.message
                    ele.desc = ele.time
                })
            }
            _this.setData({
                address_info:data.address_info, // 地址信息
                express_info: data.express_info, // 物流信息
                express_name: data.express_name, // 快递名称
                express_sn: data.express_sn, // 快递单号
            })
        });
    },