Panelweui-panel由head（可选）、body、foot（可选）三部分组成，主要承载了图文组合列表weui-media-box_appmsg、文字组合列表weui-media-box_text以及小图文组合列表weui-media-box_small-appmsg。

    body部分根据不同业务可自定义不同的内容。foot部分默认支持“查看更多”的样式，需要在weui-panel扩展一个weui-panel_access的类。

    Panel

    图文组合列表：包括封面图、标题与描述，封面图居左，与文字垂直居中对齐，示例代码如下：

    1. <div class="weui-panel weui-panel_access">
    2.     <div class="weui-panel__hd">图文组合列表</div>
    3.     <div class="weui-panel__bd">
    4.         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
    5.             <div class="weui-media-box__hd">
    6.                 <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
    7.             </div>
    8.             <div class="weui-media-box__bd">
    9.                 <h4 class="weui-media-box__title">标题一</h4>
    10.                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
    11.             </div>
    12.         </a>
    13.         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
    14.             <div class="weui-media-box__hd">
    15.                 <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
    16.             </div>
    17.             <div class="weui-media-box__bd">
    18.                 <h4 class="weui-media-box__title">标题二</h4>
    19.                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
    20.             </div>
    21.         </a>
    22.     </div>
    23.     <div class="weui-panel__ft">
    24.         <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
    25.             <div class="weui-cell__bd">查看更多</div>
    26.             <span class="weui-cell__ft"></span>
    27.         </a>    
    28.     </div>
    29. </div>
    30. <div class="weui-panel weui-panel_access">
    31.     <div class="weui-panel__hd">文字组合列表</div>
    32.     <div class="weui-panel__bd">
    33.         <div class="weui-media-box weui-media-box_text">
    34.             <h4 class="weui-media-box__title">标题一</h4>
    35.             <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
    36.         </div>
    37.         <div class="weui-media-box weui-media-box_text">
    38.             <h4 class="weui-media-box__title">标题二</h4>
    39.             <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
    40.         </div>
    41.     </div>
    42.     <div class="weui-panel__ft">
    43.         <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
    44.             <div class="weui-cell__bd">查看更多</div>
    45.             <span class="weui-cell__ft"></span>
    46.         </a>    
    47.     </div>
    48. </div>
    49. <div class="weui-panel">
    50.     <div class="weui-panel__hd">小图文组合列表</div>
    51.     <div class="weui-panel__bd">
    52.         <div class="weui-media-box weui-media-box_small-appmsg">
    53.             <div class="weui-cells">
    54.                 <a class="weui-cell weui-cell_access" href="javascript:;">
    55.                     <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
    56.                     <div class="weui-cell__bd weui-cell_primary">
    57.                         <p>文字标题</p>
    58.                     </div>
    59.                     <span class="weui-cell__ft"></span>
    60.                 </a>
    61.                 <a class="weui-cell weui-cell_access" href="javascript:;">
    62.                     <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
    63.                     <div class="weui-cell__bd weui-cell_primary">
    64.                         <p>文字标题</p>
    65.                     </div>
    66.                     <span class="weui-cell__ft"></span>
    67.                 </a>
    68.             </div>
    69.         </div>
    70.     </div>
    71. </div>
    72. <div class="weui-panel">
    73.     <div class="weui-panel__hd">文字列表附来源</div>
    74.     <div class="weui-panel__bd">
    75.         <div class="weui-media-box weui-media-box_text">
    76.             <h4 class="weui-media-box__title">标题一</h4>
    77.             <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
    78.             <ul class="weui-media-box__info">
    79.                 <li class="weui-media-box__info__meta">文字来源</li>
    80.                 <li class="weui-media-box__info__meta">时间</li>
    81.                 <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
    82.             </ul>
    83.         </div>
    84.     </div>
    85. </div>

    原文: https://github.com/Tencent/weui/wiki/Panel