第一版

src/assets/less/shelf.less

@@ -4,6 +4,7 @@
   height: 100%;
   .shelf_title {
     height: 112px;
+    background-color: #fddc00;
     text {
       padding: 0 30px;
       font-size: 36px;
@@ -22,16 +23,41 @@
       background: -webkit-linear-gradient(#ed591e, #f5f5f5);
     }
     .shelf-wrap {
-      background-color: #f7f7f7;
+      background-color: white;
       border-radius: 20px;
       // border-top: 36px solid #f7f7f7;
       width: 95%;
       margin: 0 auto;
       flex-direction: column;
+
+      .type-bar {
+        background-color: #fff;
+        padding: 20px;
+        .search-bar__wrap {
+          flex: 1;
+          background-color: #f7f7f7;
+          height: 62px;
+          padding: 0 14px;
+          border-radius: 30px;
+          align-items: center;
+
+          image {
+            margin-right: 20px;
+            width: 36px;
+            height: 36px;
+          }
+
+          text {
+            flex: 1;
+            font-size: 24px;
+            color: #999;
+          }
+        }
+      }
+
       .blank_img {
         width: 100%;
         height: 900px;
-        background-color: #fff;
         align-items: center;
         justify-content: center;
         image {
@@ -63,7 +89,7 @@
           .choose-bar {
             width: 38px;
             height: 4px;
-            background-color: #ef5952;
+            background-color: #000000;
             border-radius: 2px;
             margin-top: 10px;
           }
@@ -89,6 +115,19 @@
           color: #ef5952;
           font-size: 25px;
           border: 1px solid #ef5952;
+          background-color: #fddc00;
+          margin-bottom: 20px;
+        }
+        .administration-btn {
+          width: 80px;
+          height: 35px;
+          background-color: #fff;
+          border-radius: 20px;
+          align-items: center;
+          text-align: center;
+          color: #ef5952;
+          font-size: 25px;
+          border: 1px solid #ef5952;
           margin-bottom: 20px;
         }
         text {
@@ -226,11 +265,4 @@
       }
     }
   }
-  .shelf_bottom {
-      margin-bottom: 30px;
-    image{
-      height: 10px;
-      width:100%;
-    }
-  }
 }

src/views/Shelf/index.ux

@@ -5,6 +5,15 @@
     <div class="shelf_title"><text>书架</text></div>
     <stack class="shelf">
       <div class="shelf-wrap">
+        <div class="type-bar">
+          <div class="search-bar__wrap">
+            <text @click="toSearch">请输入书名或者作者名</text
+            ><image
+              src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"
+            ></image>
+          </div>
+        </div>
+
         <div
           class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}"
           if="{{mockList.length>0}}"
@@ -12,7 +21,7 @@
           <text>共{{ booksize }}本</text>
           <div if="modeText" @click="changeMode">
             <text> </text>
-            <text class="complete-btn">{{ modeText }}</text>
+            <text class="administration-btn">{{ modeText }}</text>
           </div>
           <div if="!modeText" @click="changeMode">
             <text class="complete-btn">完成</text>
@@ -84,9 +93,6 @@
                       </div>
                     </stack>
                   </div>
-                  <div if="(($idx + 1)%3 === 0)" class="shelf_bottom">
-                    <image src="../../assets/imgs/shelfbottom.png"></image>
-                  </div>
                 </block>
                 <div
                   class="book-item__wrap book-item__add m0"
@@ -109,7 +115,7 @@
 
 <script>
 import { getUserShelfBooks, deleteShelfBook, getReadrecord } from '../../api'
-
+import router from '@system.router'
 export default {
   props: {
     tabindex: {
@@ -186,6 +192,11 @@ export default {
   toCategory() {
     this.$emit('change')
   },
+  toSearch() {
+    router.push({
+      uri: '/views/Search'
+    })
+  },
   typeChange(index) {
     this.current = index
   }