HeadIcon

头像图标。HeadIcon UI提供与WeLink规范一致的视图。

<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>