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  均分铺满

  • 相关阅读:
    异常处理的设计和重构学习一
    设计模式之禅之六大设计原则-里氏替换原则
    设计模式之禅之六大设计原则-单一职责原则
    swagger-ui生成api文档并进行测试
    功能强大的swagger-editor的介绍与使用
    swagger-codegen自动生成代码工具的介绍与使用
    Swagger使用教程大全,从入门到精通
    Linux下MySQL的数据文件存放位置
    JUC组件扩展(三):BlockingQueue(阻塞队列)详解
    http_load的安装及使用方法
  • 原文地址:https://www.cnblogs.com/rsapaper/p/9741741.html
Copyright © 2011-2022 走看看