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

最新推荐文章于 2024-11-01 16:54:21 发布

lsk9479

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量464

点赞数 13

文章标签： css android 前端

本文链接：https://blog.csdn.net/ktucms/article/details/136257064

版权

文章描述了如何在系统中配置商城的基本信息，如名称、H5域名和logo，以及相关的图标设计和CSS样式表的应用。

摘要由CSDN通过智能技术生成

#小李子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);}