Panel

面板

Panel(weui-panel)由head(可选)、body、foot(可选)三部分组成,主要承载了图文组合列表weui-media-box_appmsg、文字组合列表weui-media-box_text以及小图文组合列表weui-media-box_small-appmsg
body部分根据不同业务可自定义不同的内容。foot部分默认支持“查看更多”的样式,需要在weui-panel扩展一个weui-panel_access的类。

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

  1. <template>
  2. <divclass="page">
  3. <divclass="page__hd">
  4. <divclass="page__title">Panel</div>
  5. <divclass="page__desc">面板</div>
  6. </div>
  7. <divclass="page__bd">
  8. <!-- 图文组合列表 start -->
  9. <divclass="weui-panel weui-panel_access">
  10. <divclass="weui-panel__hd">图文组合列表</div>
  11. <divclass="weui-panel__bd">
  12. <navigatorurl=""class="weui-media-box weui-media-box_appmsg"hover-class="weui-cell_active">
  13. <divclass="weui-media-box__hd weui-media-box__hd_in-appmsg">
  14. <imageclass="weui-media-box__thumb" :src="icon60"/>
  15. </div>
  16. <divclass="weui-media-box__bd weui-media-box__bd_in-appmsg">
  17. <divclass="weui-media-box__title">标题一</div>
  18. <divclass="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</div>
  19. </div>
  20. </navigator>
  21. <navigatorurl=""class="weui-media-box weui-media-box_appmsg"hover-class="weui-cell_active">
  22. <divclass="weui-media-box__hd weui-media-box__hd_in-appmsg">
  23. <imageclass="weui-media-box__thumb" :src="icon60"/>
  24. </div>
  25. <divclass="weui-media-box__bd weui-media-box__bd_in-appmsg">
  26. <divclass="weui-media-box__title">标题二</div>
  27. <divclass="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</div>
  28. </div>
  29. </navigator>
  30. </div>
  31. <divclass="weui-panel__ft">
  32. <divclass="weui-cell weui-cell_access weui-cell_link">
  33. <divclass="weui-cell__bd">查看更多</div>
  34. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  35. </div>
  36. </div>
  37. </div>
  38. <!-- 图文组合列表 end -->
  39. <!-- 文字组合列表 start -->
  40. <divclass="weui-panel weui-panel_access">
  41. <divclass="weui-panel__hd">文字组合列表</div>
  42. <divclass="weui-panel__bd">
  43. <divclass="weui-media-box weui-media-box_text">
  44. <divclass="weui-media-box__title weui-media-box__title_in-text">标题一</div>
  45. <divclass="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</div>
  46. </div>
  47. <divclass="weui-media-box weui-media-box_text">
  48. <divclass="weui-media-box__title weui-media-box__title_in-text">标题二</div>
  49. <divclass="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</div>
  50. </div>
  51. </div>
  52. <divclass="weui-panel__ft">
  53. <divclass="weui-cell weui-cell_access weui-cell_link">
  54. <divclass="weui-cell__bd">查看更多</div>
  55. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- 文字组合列表 end -->
  60. <!-- 小图文组合列表 start -->
  61. <divclass="weui-panel">
  62. <divclass="weui-panel__hd">小图文组合列表</div>
  63. <divclass="weui-panel__bd">
  64. <divclass="weui-media-box weui-media-box_small-appmsg">
  65. <divclass="weui-cells weui-cells_in-small-appmsg">
  66. <navigatorurl=""class="weui-cell weui-cell_access"hover-class="weui-cell_active">
  67. <divclass="weui-cell__hd">
  68. <image :src="icon20"style="width:20px;height:20px;margin-right:5px"/>
  69. </div>
  70. <divclass="weui-cell__bd weui-cell_primary">
  71. <div>文字标题</div>
  72. </div>
  73. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  74. </navigator>
  75. <navigatorurl=""class="weui-cell weui-cell_access"hover-class="weui-cell_active">
  76. <divclass="weui-cell__hd">
  77. <image :src="icon20"style="width:20px;height:20px;margin-right:5px"/>
  78. </div>
  79. <divclass="weui-cell__bd weui-cell_primary">
  80. <div>文字标题</div>
  81. </div>
  82. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  83. </navigator>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- 小图文组合列表 end -->
  89. <!-- 文字列表附来源 start -->
  90. <divclass="weui-panel">
  91. <divclass="weui-panel__hd">文字列表附来源</div>
  92. <divclass="weui-panel__bd">
  93. <divclass="weui-media-box weui-media-box_text">
  94. <divclass="weui-media-box__title weui-media-box__title_in-text">标题一</div>
  95. <divclass="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</div>
  96. <divclass="weui-media-box__info">
  97. <divclass="weui-media-box__info__meta">文字来源</div>
  98. <divclass="weui-media-box__info__meta">时间</div>
  99. <divclass="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <!-- 文字列表附来源 end -->
  105. </div>
  106. </div>
  107. </template>
  108. <script>
  109. import base64 from '../../../static/images/base64';
  110. exportdefault{
  111. data(){
  112. return{
  113. icon20: base64.icon20,
  114. icon60: base64.icon60
  115. }
  116. }
  117. }
  118. </script>
  119. <style>
  120. </style>

效果

panel01