案例类卡片

样式图例
示例代码
&lt;view class=&quot;cu-card case {{isCard?'no-card':''}}&quot;&gt;
  &lt;view class=&quot;cu-item shadow&quot;&gt;
    &lt;view class=&quot;image&quot;&gt;
      &lt;image src=&quot;https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg&quot; mode=&quot;widthFix&quot;&gt;&lt;/image&gt;
      &lt;view class=&quot;cu-tag bg-blue&quot;&gt;史诗&lt;/view&gt;
      &lt;view class=&quot;cu-bar bg-shadeBottom&quot;&gt;
        &lt;text class=&quot;text-cut&quot;&gt;我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。&lt;/text&gt;
      &lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;cu-list menu-avatar&quot;&gt;
      &lt;view class=&quot;cu-item&quot;&gt;
        &lt;view class=&quot;cu-avatar round lg&quot; style=&quot;background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);&quot;&gt;&lt;/view&gt;
        &lt;view class=&quot;content flex-sub&quot;&gt;
          &lt;view class=&quot;text-grey&quot;&gt;正义天使 凯尔&lt;/view&gt;
          &lt;view class=&quot;text-gray text-sm flex justify-between&quot;&gt;
            十天前
            &lt;view class=&quot;text-gray text-sm&quot;&gt;
              &lt;text class=&quot;cuIcon-attentionfill margin-lr-xs&quot;&gt;&lt;/text&gt; 10
              &lt;text class=&quot;cuIcon-appreciatefill margin-lr-xs&quot;&gt;&lt;/text&gt; 20
              &lt;text class=&quot;cuIcon-messagefill margin-lr-xs&quot;&gt;&lt;/text&gt; 30
            &lt;/view&gt;
          &lt;/view&gt;
        &lt;/view&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&lt;/view&gt;
页面列表