【vue】常用cell样式

Pre：看下效果

一.template

cells是一个容器，cell是为了提供高度和下划线，content是一个栅栏

        <!-- 显示列表的部分 -->

        <div class="cells" v-for="(item, num) in mapList" :key="num" @click="details(item)">

            <div class="cell"> 

                <div class="content" >我是内容</div>

            </div>

        </div>

二.css

       .cells{

        width: 100%;

        box-sizing: border-box;

        

        //cell只是一个dev，给了单个cell的总高度

        .cell{

          width: 100%;

          background: white;

          padding-left: .3rem;

          box-sizing: border-box;

          width: 100%;

          height: .88rem; 

          //在cell下边加一条横线，注意margin-top:-1px；要不然会被遮挡

          &:after{

              margin-top: -1px;

              display: block;

              width: 100%;

              height: 1px;

              content: '';

              background:#ddd;

          }

          //content可以用flex，栅栏随便弄

          .content{

            width: 100%;

            line-height: .88rem;

            display: flex;

          }

        }

      }