vue+vant结合list组件

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

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

![](../assets/fire.png)
Winner:Mr111
Buy Count:10





NO.111



Apple iPhone 12 Pro555

Value: ₹  111



![](../assets/clock.png)

Countdown To Reveal




Lucky code: 111


Reveal Time:
111




![](../assets/CNoJoin.png)

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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。