cell布局

qui-cells qui-cell cell布局是手机端页面最常见的布局，就是每行带有底边框，有时右边会有个右箭头那种布局

事实上cell-bd是一个弹性布局元素，相当于flex布局里的flex-item 其前面和后面加的div可以自适应

         <div class="qui-cells">
            <div class="qui-cell">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
            <div class="qui-cell">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
        </div>

去掉qui-cell 的底边框

         <div class="qui-cells">
            <div class="qui-cell border-none">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
            <div class="qui-cell border-none">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
        </div>

去掉qui-cell 的底边框左边的距离，因为默认底边线是left:30

         <div class="qui-cells">
            <div class="qui-cell bor-left_0">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
            <div class="qui-cell bor-left_0">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
        </div>

使的底边框右边的距离为30

         <div class="qui-cells">
            <div class="qui-cell bor-right_30">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
            <div class="qui-cell bor-right_30">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
        </div>

每个qui-cells 的标题 qui-cells-title

         <div class="qui-cells-title">我是标题</div>
         <div class="qui-cells">
            <div class="qui-cell">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
            <div class="qui-cell">
                <div class="icon-camerafill mr20"></div>
                <div class="cell-bd">右边带箭头的</div>
                <div class="arrow-r"></div>
            </div>
        </div>