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 ...
随机推荐
- measureChildren的工作原理
无论是在重写View还是ViewGroup的时候,尤其是ViewGrop的时候,往往不可避免的重写onMeasure方法,我们一定会调用setMeasuredDimension()将测量好的宽高值传递 ...
- React Native Android入门实战及深入源代码分析系列(2)——React Native源代码编译
本文为老曾原创.转载需注明出处:viewmode=contents">http://blog.csdn.net/minimicall?viewmode=contents 在上一节中,我 ...
- GBDT,随机森林
author:yangjing ## time:2018-10-22 Gradient boosting decision tree 1.main diea The main idea behind ...
- Android模拟器Genymotion安装apk
一.下载apk 选择你需要安装的apk进行下载,下载完以后放在与adb.exe同一目录下: 看我的 二.安装apk遇到的问题 开启Genymotion模拟器,然后cmd到你的platform-tool ...
- 推荐系统学习03-SVDFeature
介绍 SVDFeature是由Apex Data & Knowledge Management Lab在KDD CUP11竞赛中开发出来的工具包.它的目的是有效地解决基于特征的矩阵分解.新的模 ...
- 使用Google Https搜索
一. 将浏览器Google的默认搜索使用https 1. IE浏览器 进入注册表搜索"google.com"将搜索替换成https://www.google.com.hk 2. F ...
- jQuery select的操作实现代码
//改变时的事件 $("#testSelect").change(function(){ //事件发生生 jQuery('option:selected', this ...
- SGDMA-----Scatter-gather DMA
Scatter-gather DMA 使用一个链表描述物理上不连续的存储空间,然后把链表首地址告诉DMA master.DMA master在传输完一块物理连续的数据后,不用发起中断,而是根据链表来传 ...
- VS2017调试MVC程序,中文输入法下浏览器闪退,程序调试终止
工具->选项-> 项目和解决方案->Web项目->浏览器窗口关闭时停止调试器(s) 复选√ 去掉即可,
- DataUml Design 教程2-实体建模
DataUml Design 实体建模基于UML类图标准来设计,支持一对一.一对多.多对多关联.模型与开发语言和数据库绑定.1.新建数据模型 1).选择“数据模型” 节点,点击鼠标右键,在菜单中 ...