mui标题嵌套九宫格

最近在做app开发，要做首页模块功能，按照mui九宫格做了一定的修改，先看效果吧！

具体代码：

<div id="menuMain" 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>

</div>

特别标注：要替换显示图标，代码里面是我自定义的图标。具体位置在九宫格ul里面的li里面 <span class="iconfont icon-qiye icon-blue" style="font-size: 2rem;"></span>的class.