关于前端:vuevant结合list组件

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