mui标题嵌套九宫格

时间:2025-01-27 07:03:50
<div style="margin-top: 13rem;height: 100%;">
<ul class="mui-table-view" >
    <li class="mui-table-view-cell mui-collapse mui-active "  style="padding-left:0px; padding-right: 0px;">
        <a  style="padding-left: 30px;font-weight: 700;color: #636363;font-family:'palace script mt';font-size: 1.1rem;">大标题一</a>
        <ul class="mui-table-view mui-grid-view mui-grid-9"  style="margin-left: 0px;margin-right: 0px;height: 100%;">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-yello" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">字标题</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-green" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">字标题</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-blue" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">字标题</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-blue" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">字标题</div>
                </a>
            </li>
        </ul>
    </li>
</ul>
<ul class="mui-table-view" >
    <li class="mui-table-view-cell mui-collapse mui-active "  style="padding-left:0px; padding-right: 0px;">
        <a  style="padding-left: 30px;font-weight: 700;color: #636363;font-family:'palace script mt';font-size: 1.1rem;">大标题二</a>
        <ul class="mui-table-view mui-grid-view mui-grid-9"  style="margin-left: 0px;margin-right: 0px;height: 100%;">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-yello" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">实有人口</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-green" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">实有房屋</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
                <a href="#">
                    <span class="iconfont icon-qiye icon-blue" style="font-size: 2rem;"></span>
                    <div class="mui-media-body" style="font-size: 0.9rem;font-family:'微软雅黑';color:#000000;">实有企业</div>
                </a>
            </li>
        </ul>
    </li>
</ul>