js写card样式

整体的页面框架

 

 代码参考: html,，如果动态渲染的话会简单点，html结构图,其中文字、图片、颜色不一样，动态渲染

 

//整个页面的框架
<div class="container">

//card父级
    <header class="home-header">

    </header>

//内容区域
    <article class="content-wrap">
        <section class="left-content">

            <article class="myflow-content">
                我的工作页面
            </article>

            <article class="left-content-footer">
                <section class="notice">公告</section>
                <section class="last-new-msg">最新资料</section>
            </article>
        </section>

        <aside class="right-content">日历</aside>
    </article>
</div>

js动态渲染结构,代码参考:

//动态渲染header card
renderHeader(){
    //todo 需要请求数据获取实时的条数 style是字体颜色
    const header = [
        {style:'#609dea',num:194,text:'待审批', type: 5,dot:'#E03D3E'},
        {style:'#7267b8',num:14,text:'已审批', type: 4,dot:'#559EEF'},
        {style:'#88b951',num:60,text:'我发起', type: 8,dot:"#EF8055"},
        {style:'#3fbc9b',num:3,text:'已完成',type: 3,dot:'#2EBF79'},
        {style:'#fd9a46',num: "",text:'新建流程',type:"",dot:'#EFBE55'},
    ];
    let html = '';
    header.forEach(product=>{
        //如果不只是src这样引入，可以用class设置为背景图，因为不同分辨率圆点和图会错误，一起设置定位
        html+=  `<div class="home__product__card" >
                        <div class='left_icon'>
                               <div class="dot" style="background: ${product.dot}"></div>
                               <img src="../../../assets/images/homePage/${product.text}.png">
                        </div>
                       <div class='right_text'style="color:${product.style}">
                           <h3>${product.num}</h3>
                           <p>${product.text}</p>
                       </div>
                    </div>`
    })
    //获取父级元素用jq $('.home-header')
    this.el.find('.home-header').append(html)
},

scss参考

@import "../../../assets/scss/commonStyle";
.container{
  background-color:#F7F7F7 ;
  padding: 0 2%;
  .home-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 18%;
    align-items: center;
      .home__product__card{
        border-radius: 5px;
        display: flex;
        height: 100px;
        border-radius: 10px;
        background: #fff;
        width: 18%;
        box-shadow: 0 2px 10px 0 #666666;
        flex-direction: row;
        justify-content: space-around;
          .right_text{
            display: flex;
            width: 70%;
            padding-right: 5%;
            flex-direction: column;
            justify-content: center;
            text-align: right;
            font-size: 18px;
            //color: #E03D3E;
              h3{
                font-weight: bolder;
              }
          }

          .left_icon{
            position: relative;
            width: 30%;
            padding-left: 5%;
            font-size: 50px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
              .dot{
                position: absolute;
                top: 0px;
                right: 0px;
                width: 60px;
                height: 60px;
                opacity: .1;
                border-radius: 30px;
                margin-top: 20px;
                margin-left: 10px;
              }
          }
      }
    }

  .content-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 80%;

      .left-content{
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .left-content-footer{
          display: flex;
          height: 49%;
          flex-direction: row;
          justify-content: space-between;
            .notice,.last-new-msg{
              width: 49%;
              background-color: #fff;
              border-radius:10px;
            }
        }
          .myflow-content{
            height: 49%;
            width: 100%;
            background-color: #fff;
            border-radius:10px;
          }

      }
      .right-content{
        width: 20%;
        background-color: #fff;
        height: 100%;
        width: 24%;
        background-color: #fff;
        height: 100%;
        border-radius:10px;
      }
  }

}