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

  • 相关阅读:
    测试文档
    详细文档
    需求规格说明文档
    会议
    软工项目
    分组
    项目名
    google 常用的搜索关键词 (技术相关)
    Kafka 入门和 Spring Boot 集成
    用nginx实现分布式限流
  • 原文地址:https://www.cnblogs.com/rsapaper/p/9741741.html
Copyright © 2011-2022 走看看