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;

          }

        }

      }

Logo

前往低代码交流专区

更多推荐