整體的頁面框架

?

?代碼參考: 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;}}}

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。