氧MDUI主题会读取智简魔方财务系统中,商品设置的“商品描述”,展示在购物车卡片中。
如果纯文本描述过于单调,可以模仿润云魔方使用MDUI列表。主题描述区域支持HTML代码,因此您可以直接这样设置:
<ul class="mdui-list mdui-list-dense"> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">vCPU</div> <div class="mdui-list-item-text mdui-list-item-one-line">8核心 SuperCow Powered</div> </div> </li> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">内存</div> <div class="mdui-list-item-text mdui-list-item-one-line">256GB</div> </div> </li> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">系统盘</div> <div class="mdui-list-item-text mdui-list-item-one-line">20GB</div> </div> </li> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">宽带</div> <div class="mdui-list-item-text mdui-list-item-one-line">1M上行 1000M下行</div> </div> </li> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">公网能力</div> <div class="mdui-list-item-text mdui-list-item-one-line">没有公网</div> </div> </li> </ul>
其中<ul class="mdui-list mdui-list-dense">
是父元素,规定了这是一个MDUI列表。里面的子元素将以列表项目形式展现。
<li class="mdui-list-item mdui-ripple">
则是列表项目。相信聪明的读者已经知道如何添加、删除某单独的一项。
<li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content"> <div class="mdui-list-item-title mdui-list-item-one-line">标题</div> <div class="mdui-list-item-text mdui-list-item-one-line">内容内容内容</div> </div> </li>