uni-app 制作物流信息 step样式表

更新：
用点跟文字div的::before 的做边框加色然后实现

 <view class="setBlock white-bac"><view class="padding-row view-middle-borderBottom"><view class="" ><text class="iconfont text0 right"></text><text class="title">快递信息</text></view><view><text class="grey" >{{deliveryname}}：{{orders.deliverycode}}</text></view></view><block v-if="logistic && logistic.State != 4" v-for="(item,index) in logistic.Traces"><view class="set_box view-flex view-flex-between" ><!-- 左边 --><view class="set-left view-flex-column view-flex-column-end right" style="width:12%;"><view class="grey text-day">{{item.day}}</view><view class="grey text-1">{{item.day_time}}</view><view class="set-left-bottom"></view></view><!-- 右边文字 --><view class="set-right view-flex-column"><text class="iconfont text1 green text-success" v-if="index==0 && logistic.State==3"></text><text class="iconfont text1 grey text-start" v-else-if="index==logistic.Traces.length-1"></text><text class="iconfont text1 grey text-ing" v-else></text><view :class="index==logistic.Traces.length-1 ? 'set-right-textBox-last' : 'set-right-textBox'"><view class="set-text" :class="index==0 && logistic.State==3 ? 'green' : ''">{{item.info}},{{item.Remark ? item.remark: ''}}</view><view class="set-bottom" ></view></view></view></view></block><block v-else><view class="left view-middle-noborderBottom"><text class="set-text left grey">暂无物流信息</text></view></block></view>

css:

.text-success{margin-left:-12rpx;
}
.text-ing{margin-left: -14rpx;
}
.text-start{margin-left: -12rpx;
}
.set-right-textBox{position: relative;margin-top:-15rpx;
}
.set-right-textBox::before{content: '';/* 必须存在如果没有图标就留空 */bottom: 0;/* 定位 距离*/border-left:1px solid #c6c6c6;/* 横线颜色 */left: 0;/* 定位 距离*/height: 95%;/* 高度 */position: absolute;/* 定位 */
}
.set-right-textBox-last{margin-top:-40rpx;
}
.set-right{width:85%;
}.set-left{width:12%;margin-top: -45rpx;}.setBlock {margin: 10rpx;border-radius: 20rpx;
}
.set-left-bottom{height: 50rpx;
}
.set_box{padding:10rpx;
}
.set-text{width: 92%;height: auto;margin-left:5%;
}
.set-bottom {height: 100rpx;
}.text-day{font-size:25rpx;
}.view-flex{display: flex;flex-flow: row nowrap;
}.view-flex-column{display: flex;flex-flow: column wrap;}.view-flex-cloumn-left {align-items:  flex-start;}

经
多个手机查看后有点不兼容，

         <view class="set_box view-flex view-flex-between" ><view class="set-left view-flex-column view-flex-column-end right" style="width:12%;"><view class="grey text0">{{item.day}}</view><view class="grey text-1">{{item.day_time}}</view><view class="set-left-bottom"></view></view><view v-if="index==0 && logistic.State==3" class="set-right1 green set-right"><view class="set-text">{{item.AcceptStation}},{{item.Remark ? item.Remark : ''}}</view><view class="set-bottom" ></view></view><view v-else-if="index==logistic.Traces.length-1" class="set-right-last"><view class="set-text">{{item.AcceptStation}},{{item.Remark ? item.Remark : ''}}</view><view class="set-bottom" ></view></view><view v-else  class="set-right" style="width:85%"><view class="set-text">{{item.AcceptStation}},{{item.Remark ? item.Remark : ''}}</view><view class="set-bottom" ></view></view></view></block><block v-else><view class="left view-middle-noborderBottom"><text class="set-text left grey">暂无物流信息</text></view></block>

css样式：

.set-left-bottom{height: 50upx;
}
.set_box{padding:10upx;
}
.set-right{margin-top:10upx;margin-left: 50upx;width:80%;position: relative;
}
.set-right-last{margin-top:10upx;margin-left: 50upx;width:80%;position: relative;
}
.set-right-last::before {content: "\e652";/* 必须存在如果没有图标就留空  已发货*/color: #c6c6c6;/* 设置颜色 */position: absolute;/* 定位 */left: -50upx;/* 移动到左边 */top: 0;/* 移动到左边 */font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */font-size: 30upx;/* 图标大小 */font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
.set-right::before {content: "\e655";/* 必须存在如果没有图标就留空   已发货*/color: #c6c6c6;/* 设置颜色 */position: absolute;/* 定位 */left: -59upx;/* 移动到左边 */top: -20upx;/* 移动到左边 */font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */font-size: 40upx;/* 图标大小 */font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
.set-right1::before {content: "\e64c" !important;/* 必须存在如果没有图标就留空  \e64c */font-size: 30upx !important;top:-8upx !important;left:-52upx !important;color:#00CE47 !important;}
.set-right::after {content: '';/* 必须存在如果没有图标就留空 */bottom: 0;/* 定位 距离*/border-left: #c6c6c6 1px solid;/* 横线颜色 */left: -40upx;/* 定位 距离*/height: 85%;/* 高度 */position: absolute;/* 定位 */
}
.set-text{width: 100%;height: auto;
}
.set-bottom {height: 100upx;
}
.view-flex{display: flex;flex-flow: row nowrap;}.view-flex-left{justify-content: flex-start;align-items: center;
}
.view-flex-column{display: flex;flex-flow: column wrap;
}.view-flex-column-end{justify-content: flex-end;align-items:flex-end;
}

uni-app 制作物流信息 step样式表相关推荐

tinymce php,php - 用TinyMCE制作的PHP样式表（Hor Zebra） - SO中文参考 - www.soinside.com
我的问题是,当我插入表格时,它们没有任何样式,因此很难阅读. 这是TinyMCE表插入的样子: 这将产生以下HTML代码: Table example: Headcell 1 Headcell 2 H ...
html结合css样式作用,css样式表可以实现什么功能？
css(Cascading Style Sheets,层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
如何优雅地制作精排 ePub —— 个人电子书制作规范及基本样式表
随着大数据时代的到来,多种移动阅读终端方兴未艾 -- Amazon Kindle不再小众.各互联网巨头纷纷推出旗下的电子书阅读软件.有了阅读的软件/硬件支持,必不可少的就是阅读什么的问题了.ePub格 ...
网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /* */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表和 ...
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架.开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验.Uni-a ...
外链引入css有哪些方式_引入ＣＳＳ样式表的方式有哪些？
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式行内式也称内联样式 ...
Qt Style Sheets(qt样式表)
我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位.通过qt样式表可以展示绝大部分你可以想象得到的风格. qt样式表的使用是先将要特例化的样式建立在后缀qss的文件中,在程序启 ...
(原创分享，改进版)CSS样式表速成！
大话CSS样式表速成程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...

uni-app 制作物流信息 step样式表

uni-app 制作物流信息 step样式表相关推荐

最新文章

热门文章

uni-app 制作 物流信息 step样式表

uni-app 制作 物流信息 step样式表相关推荐

最新文章

热门文章

uni-app 制作物流信息 step样式表

uni-app 制作物流信息 step样式表相关推荐