整體的頁(yè)面框架

?

?代碼參考: html,，如果動(dòng)態(tài)渲染的話會(huì)簡(jiǎn)單點(diǎn)，html結(jié)構(gòu)圖,其中文字、圖片、顏色不一樣，動(dòng)態(tài)渲染

?

//整個(gè)頁(yè)面的框架 <div class="container">//card父級(jí)<header class="home-header"></header>//內(nèi)容區(qū)域<article class="content-wrap"><section class="left-content"><article class="myflow-content">我的工作頁(yè)面</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動(dòng)態(tài)渲染結(jié)構(gòu),代碼參考:

//動(dòng)態(tài)渲染header card renderHeader(){//todo 需要請(qǐng)求數(shù)據(jù)獲取實(shí)時(shí)的條數(shù) 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:'我發(fā)起', 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設(shè)置為背景圖，因?yàn)椴煌直媛蕡A點(diǎn)和圖會(huì)錯(cuò)誤，一起設(shè)置定位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>`})//獲取父級(jí)元素用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;}}}

?

總結(jié)

以上是生活随笔為你收集整理的js写card样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。