flex 均分铺满


<view>充值金额</view>
<view class="weui-flex">
<repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
<view class="amount-item" @tap="onTap" data-key="currentType" data-val={{index}}>
<view class=" {{index===amountTab.currentType ? 'amount-item_select-after' :''}}">
<view>
<view class="amountType-gift">{{index===0 ? ' ': '送'+item[1]+'币'}}</view>
<view class="amountType-exchange-rate">
<!-- 官方不建议span -->
<text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>
</view>
</view>
</view>
</view>
<view class="{{index%2===0 ? 'amountType-separation': ''}}"></view>
</repeat>
</view> .weui-flex {
display: flex
} // https://weui.io/weui.css
.amount-item {
display: inline-flex; // 父已经去除padding
@2items_padding-width : @wx-width_subtract-padding-width*0.05; // 并排的2个选项区域的外围边框border;
@item-separation-margin-width: 0.05; // 2个选项横排;选项margin水平间距;
@item-border-width: @common_border-width; // 2个选项的border宽度;
@item-available-width: @wx-width_subtract-padding-width*(1- @item-separation-margin-width) - @2items_padding-width*2 - @item-border-width*4; // 待布局选项区域;
@items_width-share: 0.9; // 选项宽度份额,其他留作2个选项间的水平margin;使用margin的原因是项有边框;
@item-margin-width: @item-available-width*(1- @items_width-share)/4; // 2个选项之间的margin宽度;
@item-render-width: @item-available-width*@items_width-share/2; // 选项最终被渲染的宽度;
// @item-render-height: @item-render-width/@item-width-divide-height; // 保持选项宽高比,选项最终被渲染的高度;
@item_select-after-font-size: @common_select-after-font-size;
border: @common_border-width solid @color-main_gray;
width: @item-render-width;
.amountType-separation {
margin: 0 @item-separation-margin-width*@wx-width_subtract-padding-width;
}
.mixin-block-float(@f: right) {
display: block;
float: @f;
}
.amountType-gift {
.mixin-block-float(@f: right);
background-color: @color-main_red;
border-radius: 20% 0 0 30%;
color: #fff;
font-size: 80%; //TODO exact
}
.amountType-exchange-rate {
.mixin-block-float(@f: left);
@v: 700;
text:nth-last-child(2) {
color: @color-main_red;
font-weight: @v;
}
text:nth-child(1) {
font-weight: @v;
}
}
}
.amount-item_select-after {
border: @common_border-width solid @color-main_blue;
&:after {
.mixin-item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
}
}
flex 均分铺满
flex 均分铺满的更多相关文章
- Unity2D 背景图铺满与Camera.Size的计算公式
在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...
- ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩
var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...
- iOS- 解决iOS10 App启动时放大铺满App Icon的问题
0.前言 iOS10 App启动时放大铺满App图标 iPad Application shows app icon as launch screen in iOS 10 如图,点击APP后APP图标 ...
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...
- 设置ImageView显示的图片铺满全屏
转自:http://m.blog.csdn.net/blog/wjwj1203/32334459 为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...
- video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...
- 【QT】QPixmap在Label中自适应大小铺满
KeepAspectRatio:设置pixmap缩放的尺寸保持宽高比. setScaledContents:设置label的属性scaledContents,这个属性的作用是允许(禁止)label缩放 ...
- html盒子铺满全屏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- android设置GridView高度自适应,实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...
随机推荐
- 【DB2】报错:-30090 25000 指定的操作对远程执行失败
场景描述: 数据库:DB_1,DB_2 现在在DB_1中建立NICKNAME为CST_INFO_NICK,并且该别名指向数据库DB_2的CST_INFO表,在DB_1中建立存储过程,该存储过程需要 ...
- ROS示例----导航功能包Husky_exploration
ROS导航功能包示例husky amcl gmapping slam exploration 此功能包包含如下文件: 结构如下: $ tree -L 2 . ├── CMakeLists.txt -& ...
- python操作xml文件
一.什么是xml? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. abc.xml <?xml version="1.0&q ...
- 8.1.1 Service的生命周期
2010-06-21 16:57 李宁 中国水利水电出版社 字号:T | T <Android/OPhone开发完全讲义>第8章Android服务,本章主要介绍了Android系统 中的服 ...
- 李洪强iOS开发之OC[005] - OC和C的差异学习二
- 设置一个label显示多种颜色,多种字体大小
UILabel* label = [[UILabel alloc] init]; label.frame = CGRectMake(0, 100, 200, 100); label.textColor ...
- VS中去除SrouceControl的信息
如果在不连接TFS的情况下,编辑一个已经source control的solution,总是会有烦人的提示信息.如果你确定不再需要source control,可以这么干. Here is how t ...
- driver基础
驱动测试时,linux驱动常以模块方式插入内核.应包含头文件:linux/kernel.h,linux/module.h 设备驱动的一般结构:Soc(主芯片->设备控制器->外设引脚)-- ...
- Oracle----oracle 事务总结
用了这么长时间的oracle,该总结一下所得了 1,事务 事务用于保证数据的一致性, 它由一组相关的 dml语句组成, 该组的dml(数据操作语言,增删改,没有查询)语句要么全部成功,要么全部失败,比 ...
- spring cloud与K8S
链接:https://www.zhihu.com/question/50806354/answer/139653085 spring cloud +docker 当然没有问题,只是当我们搭建集群实现高 ...