update

pages/index/index.js

@@ -2,7 +2,27 @@
     data: {
         inputShowed: false,
         inputVal: "",
-        array:[{itemName:'new'},2,3,4,5,6]
+      array: [{
+        status: 'enable', 
+        desc: '众生皆苦，我的行家兄弟，把这些苦一点点揿进书里，就像在墙上揿灭了一个个烟头。奇怪的是，我这样的读者，从中获得了不可理喻的～～～安慰。生活潦草地对待每一个人，而作者一笔一画记录下这些潦草，这是对每个人的最深刻的善待。他写下他要写的，上帝帮他校对了一遍，然后一字不改，只是亲手按下了“发送”。',
+        title:'潦草',
+        src: 'https://img1.doubanio.com/view/subject/l/public/s29825949.jpg'
+      }, {
+          status: 'disable',
+          desc: '本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集，以便你能用它创建真正可扩展的和高效的代码。',
+          title:'JavaScript语言精粹',
+          src: 'https://img3.doubanio.com/view/subject/l/public/s3651235.jpg'
+        }, {
+          status: 'enable',
+          desc: 'JavaScript语言有很多复杂的概念，但却用简单的方式体现出来（比如回调函数），因此，JavaScript开发者无需理解语言内部的原理，就能编写出功能全面的程序；就像收音机一样，你无需理解里面的管子和线圈都是做什么用的，只要会操作收音机上的按键，就可以收听你喜欢的节目。然而，JavaScript的这些复杂精妙的概念才是语言的精髓，即使是经验丰富的JavaScript开发者，如果没有认真学习也无法真正理解语言本身的特性。正是因为绝大多数人不求甚解，一遇到出乎意料的行为就认为是语言本身有缺陷，进而把相关的特性加入黑名单，久而久之就排除了这门语言的多样性，人为地使它变得不完整、不安全。',
+          title:'你不知道的JavaScript',
+          src: 'https://img3.doubanio.com/view/subject/l/public/s28033372.jpg'
+        }, {
+          status: 'enable',
+          desc: '人生的枷锁》是英国作家毛姆被公认的杰作，也是一部带有自传色彩的小说。本书问世至今，曾三次被搬上大荧幕，并入选了“20世纪百大英文小说”。',
+          title:'人生的枷锁',
+          src: 'https://img1.doubanio.com/view/ark_article_cover/retina/public/55174419.jpg?v=1533181999.0'
+        }]
     },
     onLoad: function () {
       this.setData({

pages/index/index.wxml

@@ -22,33 +22,25 @@
           <view>实时搜索文本</view>
         </view>
       </navigator>
-      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
-        <view class="weui-cell__bd">
-          <view>实时搜索文本</view>
-        </view>
-      </navigator>
-      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
-        <view class="weui-cell__bd">
-          <view>实时搜索文本</view>
-        </view>
-      </navigator>
-      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
-        <view class="weui-cell__bd">
-          <view>实时搜索文本</view>
-        </view>
-      </navigator>
     </view>
   </view>
 </view>
 <view class="weui-panel weui-panel_access">
-  <view class="weui-panel__bd" wx:for="{{array}}" wx:for-item="itemName" wx:for-index="idx">
+  <view class="weui-panel__bd" wx:for="{{array}}" wx:for-item="item" wx:for-index="idx">
     <view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
       <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
-        <image class="weui-media-box__thumb" src="{{icon60}}" />
+        <image class="weui-media-box__thumb" src="{{item.src}}" />
       </view>
       <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
-        <view class="weui-media-box__title">{{idx}}</view>
-        <view class="weui-media-box__desc">{{itemName.itemName||itemName}}</view>
+       <view class="top-detail">
+         <view class="status">
+            <icon type="{{item.status=='enable'?'success':'waiting'}}"  size="15" />
+            <text>{{item.status=="enable"?'可借':'在借'}}</text>
+         </view>
+         <button class="weui-btn mini-btn" type="default" size="mini">查看</button>
+         <button class="weui-btn mini-btn" type="default" size="mini">借阅</button>
+       </view>  
+        <view class="weui-media-box__desc">{{item.title}} 简介:{{item.desc}}</view>
       </view>
     </view>
     

pages/index/index.wxss

@@ -26,7 +26,39 @@ overflow:hidden;
 text-overflow:ellipsis;
 display:-webkit-box;
 -webkit-box-orient:vertical;
--webkit-line-clamp:2;
+-webkit-line-clamp:4;
+margin-top: 0.2em;
+}
+.weui-media-box__bd_in-appmsg {
+  -webkit-box-flex:1;
+-webkit-flex:1;
+flex:1;
+min-width:0;
+width: 100px;
+height: 100px; 
+}
 
+.top-detail{
+  display: flex;
+  flex-direction: row;
+  align-items:center; 
+  align-self: flex-start;
+}
+.top-detail .goDetail{ 
+  flex-grow:1;
+}
+.top-detail .status{
+  flex-grow:4;
 }
+.top-detail .status text{
+  font-size: 11px;
+}
+button[size=mini] {
+display:inline-block;
+line-height:1.7;
+font-size:11px;
+padding:0 0.84em;
+margin:0.1em 0.2em;
+}
+