zoukankan      html  css  js  c++  java
  • 知识点1: 进度条随数据变化,并添加渐变样式

    效果图:

    dom:

                //  进度条
          
           <div class="progress" :style="styleObj1"> <div class="point"></div> </div>
           //  数据容器 <div class="precent"> <counter :data="precents1" :config="config2"></counter> </div>

    css:

     .progress{
           50%;
          position: absolute;
          height: 10px;
          background: linear-gradient(to right,rgb(31,107,169),rgb(167,132,252)); //线性渐变
          border-radius: 5px;
          left: 20%;
          bottom: 22px;
          transition: all 2s; //css动画
              .point{
                   10px;
                  height: 10px;
                  border-radius: 50%;
                  background: #fff;
                  border: 2px solid rgb(173,133,255);
                  box-sizing:content-box !important;
                  position: absolute;
                  top: -2px;
                  right: 0px;
              }
    }
    • js
    export default{
        computed:{
          styleObj1(){
            return{
              `${this.precents1*3.1}px` //宽度变化
            }
          }
        }
    }
    //接数据
    loaddata() { this.$http.indi.get('sl0057', {}, res => { if (res.data.data && res.data.data.length > 0) { try { this.totalvalue1 = res.data.data[0].KPI_VALUE1 this.precents1 = res.data.data[0].KPI_VALUE2 } catch (error) { console.log('**** indicator has error', error) } } }) }
    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    [Trie][并查集]JZOJ 5822 量子纠缠
    [模拟]JZOJ 5820 非法输入
    SAM模板
    [树形DP]JZOJ 5819 大逃杀
    [MST][dij]JZOJ 5818 做运动
    [暴力]JZOJ 5817 抄代码
    [概率期望][树形DP][LCA]JZOJ 5814 树
    认证组件
    注册接口
    视图家族 & 路由组件
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/9871408.html
Copyright © 2011-2022 走看看