新闻列表item

 

<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;

                }

            }

        }

}