HeadIcon
头像图标。HeadIcon UI提供与WeLink规范一致的视图。
效果示例
HTML
<div class="page">
<div class="page__hd">
<h1 class="page__title">HeadIcon</h1>
<p class="page__desc">头像图标</p>
</div>
<div class="page__bd page__bd_spacing">
<div class="page__desc">320x320</div>
<div class="weui-head-icon_view__320">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 80*80 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">80×80</div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__80 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__80">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 56*56 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">56×56</div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__56 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__56">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 48*48 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">48x48</div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__48 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__48">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 40*40 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">40×40</div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__40 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__40">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 36*36 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">36×36</div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__36 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__36">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 32*32 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">32x32</div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__32 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__32">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 30*30 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">30×30</div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__30 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__30">
<img src="./images/head/head3.jpg" />
</div>
</div>
<!-- 20*20 -->
<br />
<div class="page__bd page__bd_spacing">
<div class="page__desc">20×20</div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_1"><span class="weui-head-icon_text1" >MN</span></div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_2"><span class="weui-head-icon_text1">MN</span></div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_3"><span class="weui-head-icon_text1">美娜</span></div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_4"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_5"><span class="weui-head-icon_text1">LF</span></div>
<div class="weui-head-icon_view__20 weui-head-icon_bgColor_6"><span class="weui-head-icon_text1">刘丰</span></div>
<div class="weui-head-icon_view__20">
<img src="./images/head/head3.jpg" />
</div>
</div>
</div>
</div>