1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在应用vue+vant开发的过程中,咱们可能会应用到list来实现一些成果,上面我来分享一下,心愿对你有所帮忙。
4.废话不多说,间接上效果图:

5.在template中增加如下代码:

<!-- 开始了 --><van-list class="WinnerList"><div class="acconcedList" v-for="(item, index) in acconcedLIst" :key="index"><div class="IsAccounced">![](../assets/fire.png)<span><span class="colorhui">Winner</span>:Mr111</span><span class="Winnerright">Buy Count:10</span></div><div class="IsAccouncedDetail" @click="goWinnerDetailsPage(item)"><div class="acconcedImg"><img src="http://3529bd6649.wicp.vip/storage/images/51735b5fd849e8ea3bc8ba3b8bd4542b.jpg"alt="" /><p>NO.<span>111</span></p></div><div class="IsAccouncedDescript"><p class="IsAccouncedDescriptTitle">Apple iPhone 12 Pro555</p><p>Value:  <i> 111</i></p><div v-if="item.isShowTime && countTimer(item)" class="accouncedTime"><div class="accoundclock">![](../assets/clock.png)</div><div>Countdown To Reveal</div><van-count-down format="HH:mm:ss:SSS" millisecond@finish="item.isShowTime = false" :time="countTimer(item)" /></div><div v-else><p class="luckyNumber">Lucky code: <span>111</span></p><p class="RevealTime">Reveal Time:<span>111</span></p></div></div><div class="WinnerNoJoin">![](../assets/CNoJoin.png)</div></div></div></van-list><!-- 完结啦 -->

6.在css中增加如下代码:

/* Winner 复制款式*/    .acconcedList {        width: 100%;        /* height: 120px; */        background-color: #fff;        /* border: 1px solid red; */        margin: auto;        border-radius: 12px;        margin-top: 10px;    }    .IsAccounced,    .NotAccounced {        width: 100%;        height: 40px;        line-height: 40px;        border-bottom: 1px solid #f0f0f0;        overflow: hidden;        color: #e60012;        font-size: 16px;        font-weight: bold;        position: relative;    }    .IsAccounced img {        width: 6vw;        height: 6vw;        float: left;        margin: 8px 10px 0 10px;        border-radius: 50%;    }    .IsAccounced span {        display: inline-block;        float: left;    }    .IsAccouncedDetail {        width: 100%;        padding: 8px 15px 8px 8px;        box-sizing: border-box;        /* margin: auto; */        display: flex;        justify-content: flex-start;        /* margin: 8px; */        position: relative;    }    .acconcedImg {        width: 21vw;        height: 21vw;        position: relative;        margin-right: 10px;    }    .acconcedImg p {        width: 100%;        height: 20px;        font-size: 10px;        background-color: #000000;        position: absolute;        bottom: 0;        left: 0;        opacity: 0.6;        text-align: center;        line-height: 20px;        color: #fff;    }    .IsAccouncedDetail img {        width: 92%;        height: 100%;        margin-left: 4%;    }    .IsAccouncedDescript {        width: 80%;        /* border: 1px solid red; */    }    .IsAccouncedDescript .IsAccouncedDescriptTitle {        /* width: 100%; */        width: 58%;        text-overflow: ellipsis;        overflow: hidden;        white-space: nowrap;        color: #333;        font-weight: 500;        font-size: 14px;        font-family: PingFang SC;        margin-bottom: 4%;        box-sizing: border-box;    }    .IsAccouncedDescript p:nth-child(2) {        width: 100%;        color: #999999;        font-weight: 500;        font-size: 12px;        margin-top: 5px;        margin-bottom: 2px;    }    /* 倒计时 */    .accouncedTime {        width: 100%;        height: 25px;        font-size: 12px;        background: linear-gradient(to right, #ffebc0 0%, #ffffff 100%);        display: flex;        justify-content: flex-start;        align-items: center;        color: #e60012;        padding-left: 5px;        font-weight: 500;    }    .van-count-down {        color: #e60012;        font-size: 14px;        font-weight: bold;        margin-left: 5px;    }    /* 未揭晓 */    .acconcedWinner {        color: #999;        font-size: 15px;        margin-right: 5px;    }    .acconcedCount {        width: 120px;        display: inline-block;        color: #999;        font-size: 12px;        min-width: 100px;        position: absolute;        right: -5px;        top: 1px;        font-weight: 600;    }    .acconcedName {        width: 140px;        font-size: 14px;        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;    }    .luckyNumber {        width: 100%;        font-size: 12px;        color: #999999 !important;        margin-top: -2px;        font-weight: 500;    }    .luckyNumber span {        color: #e60012;        margin-left: 4px;    }    .RevealTime {        color: #999;        font-size: 12px;    }    /* Winner 复制款式完结啦 */
 /* 新增加的  Winner款式*/    .WinnerList {        padding: 0% 2% 0% 2%;        box-sizing: border-box;    }    /* 图片状态 */    .WinnerNoJoin img {        width: 80px;        text-align: right;        position: absolute;        top: -15%;        right: -3.4%;        transform: scale(0.7);    }    .Winnerright {        position: absolute;        right: 2%;        color: #333;        font-weight: none;    }    .colorhui{        color: #999999;    }    /* 新增加的 Winner款式 完结啦 */
//留神:可能存在多余的代码,小伙伴们依据本人的需要进行批改//留神:css代码只是局部代码,小伙伴们依据需要进行批改

7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。