氧MDUI 智简魔方商品描述信息 展示为列表

氧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>
5 1 投票
文章评分
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x
滚动至顶部