进度条,步骤条,

1,记录一次步骤条来实现人数不同显示的进度不同

效果如图:

废话不多说 上代码:

html文件:

 <div class="gift">
        <p class="prenum">已有
        <countTo
            :startVal=‘0‘
            :endVal=‘userNums‘
            :duration=‘3000‘/>
            位武魂使共赴苍岚</p>
        <div class="bg_range">
            <div class="awards-progress-wrap">
                <div class="awards-progress">
                    <div class=‘awards-progress-cur‘
                        :class="classObject"
                        style="transition: all 1s ease 0s;"></div>
                    <ol class="awards-progress-points">
                        <li
                            @click="scanList(0)"
                            :class="[‘down‘,activeNum === 0? ‘activeLi‘ : ‘‘]">
                            3W预约
                        </li>
                        <li
                            @click="scanList(1)"
                            class="up"
                            :class="[‘down‘,activeNum === 1? ‘activeLi‘ : ‘‘]"
                        >
                            5W预约
                        </li>
                        <li
                            @click="scanList(2)"
                            :class="[‘down‘,activeNum === 2? ‘activeLi‘ : ‘‘]"
                            class="down">
                            10W预约
                        </li>
                        <li
                            @click="scanList(3)"
                            :class="[‘down‘,activeNum === 3? ‘activeLi‘ : ‘‘]"
                            class="up">
                            20W预约
                        </li>
                        <li
                            @click="scanList(4)"
                            :class="[‘down‘,activeNum === 4? ‘activeLi‘ : ‘‘]"
                            class="down">
                            30W预约
                        </li>
                    </ol>
                    <ul class="awards-progress-text">
                        <li class="item1 unreach finished">3W预约</li>
                        <li class="item2 unreach finished">5W预约</li>
                        <li class="item3 unreach finished">10W预约</li>
                        <li class="item4 unreach">20W预约</li>
                        <li class="item5 unreach">30W预约</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="gift_container">
            <div class="gift_detail" v-for="item in dataInfo" :key="item.imgUrl">
                <div class="dj">
                    <img :src="item.imgUrl">
                    <span>{{item.num}}</span>
                </div>
                <p>{{item.name}}</p>
            </div>
        </div>
    </div>

css 代码:

.awards-progress {
        width: 100%;
        height: 75%;
        border-radius: 6px;
        position: relative;
        top: 1px;
    }

    .awards-progress-cur {
        height: 100%;
        width: 0;
        border-radius: 6px;
        background: linear-gradient(to right, #b5ddfa 0, #a3d4f7 50%, #4b97cf 100%);
    }

    .awards-progress-cur.item0 {
        width: 10%;
    }

    .awards-progress-cur.item1 {
        width: 20%;
    }

    .awards-progress-cur.item2 {
        width: 40%;
    }

    .awards-progress-cur.item3 {
        width: 65%;
    }

    .awards-progress-cur.item4 {
        width: 90%;
    }

    .awards-progress-cur.item5 {
        width: 98%;
    }

    .awards-progress-points {
        position: absolute;
        top: -2.5px;
        left: 0;
    }

    .awards-progress-points li {
        width: 11px;
        height: 11px;
        border: 2px solid #b2d8f3;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 0;
        font-size: 0;
    }

    .awards-progress-points li:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 5.5px;
        height: 5.5px;
        background-color: #b2d8f3;
        border-radius: 50%;
    }

    .awards-progress-points li:nth-child(1) {
        left: 20px;
    }

    .awards-progress-points li:nth-child(2) {
        left: 68px;
    }

    .awards-progress-points li:nth-child(3) {
        left: 132px;
    }

    .awards-progress-points li:nth-child(4) {
        left: 215px;
    }

    .awards-progress-points li:nth-child(5) {
        left: 293px;
    }

    .awards-progress-points li:before {
        content: "";
        display:block;
        width:0;
        height:0;
        border-style:solid;
        border-color:transparent;
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .awards-progress-points li.down:before {
        border-bottom-color: #4b97cf;
        top: 16px;
        border-width:0 3px 5px;
    }

    .awards-progress-points li.up:before {
        border-top-color: #4b97cf;
        top: -12px;
        border-width:5px 3px 0;
    }
    .awards-progress-points li.activeLi{
        border-color: rgb(240, 202, 121) !important
    }
    .awards-progress-points li.activeLi:after {
        background-color: rgb(240, 202, 121) !important
    }

    .awards-progress-text {
        position: absolute;
        top: 0;
        left: 0;
    }
    .awards-progress-text li {
        position: absolute;
        width: 50px;
        height: 12px;
        font-size: 12px;
        color: #21679B;
    }
    .awards-progress-text li:nth-child(odd) {
        top: 24px;
    }

    .awards-progress-text li:nth-child(even) {
        top: -24px;
    }
    .awards-progress-text li:nth-child(1) {
        left:8px;
    }
    .awards-progress-text li:nth-child(2) {
        left: 59px;
    }
    .awards-progress-text li:nth-child(3) {
        left: 118px;
    }
    .awards-progress-text li:nth-child(4) {
        left: 200px;
    }
    .awards-progress-text li:nth-child(5) {
        left: 281px;
    }
    .awards-progress-text li.finished {
        background-position-x: -.1rem;
    }

简单实现:

ps有个弊端: 不能根据后端传入的数值来计算进度比例,只是写死的item来控制大概的进度,如果有更好的意见请留言给我 谢谢

原文地址:https://www.cnblogs.com/sanye00liubingjian/p/10827095.html

时间: 2024-11-11 05:05:23

进度条,步骤条,的相关文章

使用ivx步骤条容器的经验总结

步骤条是一种常见的导航形式,在各种流程处理中随处可见,例如重置密码,网购流程等等.ivx中已经将其封装成一个拓展组件,今天就说一说它是如何使用的吧.1.demo结构demo中主要内容放在一个横幅之中,正好三个行容器划分3部分.行1是放置步骤条容器,行2则是放置两个对步骤条容器进行操作的按钮组件.steps行可以看做一个文本标注行,主要就是让步骤名称对应好下面的步骤条组件,其内部的行1,行2几个行组件都是作为文本之间的填充.2.步骤条步骤条是拓展组件的一种,添加位置如下图所示.选中步骤条容器再点开

一款基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持.一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> Battle.net <b>style progress bar</b></h1> <div class="progress"> <b

纯css写的步骤条

步骤条很常见,但是网上很多都不太智能,不适合放在手机上的步骤条,应一位朋友的求帮忙,故写了一个可以加任意多个步骤,宽度仍然等比,超过屏幕还可以滑动的步骤条ui.具体展示如下: 于若需要请移步我的github,按照自己的需求自行修改.其中横向滑动可以参加另外一篇文章 :css如何实现滚动条隐藏但鼠标仍然可以滚动

微信小程序 - 步骤条组件

<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> <steps uncolor="#ccc" type="detail" active="0" data="{{basicsList}}" /> 点击下载:示例 原文地址:https://www.cnblogs.com/c

WPF-自定义实现步骤条控件

原文:WPF-自定义实现步骤条控件 步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthConverter x:Key="StepListStepWidthConverter" /> <ControlTemplate x:Key="NormalItemTemplate" TargetType="List

android 发送短信 如何做到一条一条的发送,只有在上一条发送成功之后才发送下一条短信

android发送短信截获上一条发送是否成功,然后再来发送下一条短信 1.问题:在项目中遇到如下要求:待发短信有N条,实现一条一条的发送并在上一条短信发送成功之后再来发送下一条. for(int i=0;i<3;i++){ sendSMS(10086, text1, i); } private void sendSMS(String toAddress, String body, Long id) { // ---sends an SMS message to another device---

android 发送短信 怎样做到一条一条的发送,仅仅有在上一条发送成功之后才发送下一条短信

android发送短信截获上一条发送是否成功,然后再来发送下一条短信 1.问题:在项目中遇到例如以下要求:待发短信有N条,实现一条一条的发送并在上一条短信发送成功之后再来发送下一条. for(int i=0;i<3;i++){ sendSMS(10086, text1, i); } private void sendSMS(String toAddress, String body, Long id) { // ---sends an SMS message to another device-

进度步骤条

效果图 页面 html部分 <body class="bodybg padding20"> <div id="steps" ></div> <div id="page" class="bgWhite padding20"></div> <div class="step-button text-center marginTop20" >

使用NGUI制作进度条(血条/蓝条)

制作血条和蓝条,原理都是一样的,下面创建一个可以复用的进度条. 第一步,搭建基本的UI显示界面,使用NGUI(没有插件的童鞋可以看我上一遍文章 )创建一个基本的进度条界面. 选中UIRoot,在Scene视图中,创建一个Sprite,重命名为NumberBar,为其选择图集和精灵,修改其大小到合适位置(256* 32).在其上右键,Attach一个Box Collider,然后再右键Attach一个Slider Script.我们会看到Slider组件会有些参数,我们会在稍后解释. 选中刚创建的