zoukankan      html  css  js  c++  java
  • 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- 0.05; // 2个选项横排;选项margin水平间距;
        @item-border- @common_border-width; // 2个选项的border宽度;
        @item-available- @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- @item-available-width*(1- @items_width-share)/4; // 2个选项之间的margin宽度;
        @item-render- @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;
         @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  均分铺满

  • 相关阅读:
    百度地图根据经纬度计算瓦片行列号
    【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件
    TCP/UDP简易通信框架源码,支持轻松管理多个TCP服务端(客户端)、UDP客户端
    重中之重:委托与事件
    可复用代码:组件的来龙去脉
    [史上最全]C#(VB.NET)中位运算符工作过程剖析(译)
    物以类聚:对象也有生命
    导入导出Android手机文件
    Android修改system只读权限
    SSHDroid(SSH Server for Android)通过PC或命令连接android
  • 原文地址:https://www.cnblogs.com/rsapaper/p/9741741.html
Copyright © 2011-2022 走看看