新闻列表item

标签：flex right 新闻 height padding item 列表 display

 

<div class="list">             <template v-for="(item, index) in mdata" :key="index">

                <li @click="godell(item)">                     <span id="title">{{item.achiveName}}</span>                     <span id="timer">{{item.stDate}}</span>                 </li>             </template> </div>    .list {         display: flex;         flex-direction: column;         min-height:500px;         background: #FCFCFD;         padding: 0 50px;         padding-top: 30px;         li {             &:hover{                 box-shadow: 0px 4px 12px 0px rgba(12, 68, 204, 0.1);                 padding: 0 20px;             }             display: flex;             justify-content: space-between;             align-items: center;             cursor: pointer;             color: #1E1E1E;             padding-right: 5px;             border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);             height: 50px;             #timer {                 color: #ABABAB;                 margin-left: 20px;
            }             #title {                 text-overflow: ellipsis;                 overflow: hidden;                 word-break: break-all;                 white-space: nowrap;                 &:before {                     content: "";                     width: 6px;                     height: 6px;                     display: inline-block;                     border-radius: 50%;                     background: #1E1E1E;                     vertical-align: middle;                     margin-right: 5px;
                }             }         } }

标签：flex,right,新闻,height,padding,item,列表,display
From： https://www.cnblogs.com/linxiaogang1122/p/18039091