放一个还看得过去的后台模板设置模块css样式框架

#小李子9479#

如下图

<div class="grid col-3 margin-top-xl"><?php$clist = array('cyan', 'yellow', 'purple', 'red', 'blue', 'brown');foreach ($clist as $kk => $vv) {?><div style="max-width:400px;width:100%;padding:10px;"><div class="leaf leaf-<?= $vv ?>"><div class="leaf-left"><div class="leaf-iconbox"><div class="leaf-img"><img src="/static/admin/icon/weixin.png" alt=""></div><div class="leaf-icon"></div></div><div class="leaf-title">商城信息</div><div class="leaf-tips">配置商城基本信息</div><div class="leaf-smalltext">商城名称、h5域名、logo</div></div><div class="leaf-right"><div class="leaf-right-top"><div class="leaf-rt-left"><div class="leaf-rtl-1"></div><div class="leaf-rtl-2"></div><div class="leaf-rtl-3"></div></div><div class="leaf-rt-right"><div class="leaf-rtt-1"></div></div></div><div class="leaf-right-buttonbox"><div class="leaf-right-button">立即设置</div></div></div></div></div><?php}?>
</div>

css样式表

.leaf{padding:0 10px 24px;display:flex;align-items:stretch;color:#fff;justify-content:space-between;border-radius:20px;transition:all 2s;cursor:pointer;}
.leaf-right .leaf-rtl-1{width:54px;height:54px;background:rgba(255, 255, 255, 0.2);border-radius:0 34px;}
.leaf-right .leaf-rtl-2{width:54px;height:54px;border-radius:0 35px;transform:matrix(-1, 0, 0, 1, 0, 0);}
.leaf-right .leaf-rtl-3{width:54px;height:54px;background:rgba(255, 255, 255, 0.66);border-radius:0 34px;}
.leaf-right .leaf-rtt-1{width:40px;height:40px;background:rgba(255, 255, 255, 0.4); border-radius:6px;transform:rotate(-45deg);margin-top:86px; margin-left:10px;}
.leaf-right-top{display:flex;flex:1;padding-bottom:24px;}
.leaf-title{font-size:22px;margin-top:28px;color:white;}
.leaf-tips{font-size:14px;color:#ffffffcc;margin-top:14px;}
.leaf-smalltext{font-size:14px;max-width:170px;margin-top:26px;color:white;}
.leaf-iconbox{ margin-top:30px;position:relative;display:flex;}
.leaf-iconbox .leaf-img{width:48px;height:48px;border-radius:50%;}
.leaf-iconbox .leaf-icon{ width:48px;height:48px;background:#fff;border-radius:50%;position:absolute;left:36px;opacity:0.5;}
.leaf-iconbox .leaf-img img{width:100%;height:100%;}
.leaf-right-button{width:98px;height:40px;border-radius:20px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.leaf.leaf-cyan{background:linear-gradient(rgb(186, 240, 221) 0%, rgb(81, 188, 153) 100%);}
.leaf.leaf-cyan .leaf-rtl-2{background-color:#6acaa5;}
.leaf.leaf-cyan .leaf-right-button{background:rgb(224, 241, 235);color:rgb(19, 152, 108);}
.leaf.leaf-yellow{background:linear-gradient(#FCE6B7 0%, #E9A848 100%);}
.leaf.leaf-yellow .leaf-rtl-2{background-color:#e0b163;}
.leaf.leaf-yellow .leaf-right-button{background:#f7eddd;color:#b07318;}
.leaf.leaf-purple{background:linear-gradient(rgb(213, 184, 250) 0%, rgb(143, 98, 201) 100%);}
.leaf.leaf-purple .leaf-rtl-2{background-color:#915cf9;}
.leaf.leaf-purple .leaf-right-button{background:#e7def6;color:#6625cf;}
.leaf.leaf-brown{background:linear-gradient(#FCE6B7 0%, #E9A848 100%);}
.leaf.leaf-brown .leaf-rtl-2{background-color:#e0b163;}
.leaf.leaf-brown .leaf-right-button{background:#f7eddd;color:#b07318;}
.leaf.leaf-blue{background:linear-gradient(rgb(190, 214, 255) 0%, rgb(103, 133, 205) 100%);}
.leaf.leaf-blue .leaf-rtl-2{background-color:#6990e6;}
.leaf.leaf-blue .leaf-right-button{background: rgb(218, 225, 246);color: rgb(22, 102, 211);}
.leaf.leaf-red{background: linear-gradient(rgb(252, 183, 190) 0%, rgb(211, 96, 104) 100%);}
.leaf.leaf-red .leaf-rtl-2{    background: rgb(234, 102, 112);}
.leaf.leaf-red .leaf-right-button{    background: rgb(234, 102, 112);}
.leaf.leaf-orange{background: linear-gradient(rgb(250, 221, 192) 0%, rgb(228, 127, 109) 100%);}
.leaf.leaf-orange .leaf-rtl-2{    background: rgb(236, 147, 113);}
.leaf.leaf-orange .leaf-right-button{background: rgb(246, 229, 225);color: rgb(215, 81, 37);}