乐趣区

关于前端:vuevant结合list组件

jiezi

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

退出移动版