样式修改

package-lock.json

@@ -2110,6 +2110,8 @@
     },
     "babel-eslint": {
       "version": "10.1.0",
+      "resolved": "https://registry.npmmirror.com/babel-eslint/download/babel-eslint-10.1.0.tgz",
+      "integrity": "sha1-aWjlaKkQt4+zd5zdi2rC9HmUMjI=",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -2955,6 +2957,8 @@
     },
     "cross-env": {
       "version": "7.0.3",
+      "resolved": "https://registry.nlark.com/cross-env/download/cross-env-7.0.3.tgz",
+      "integrity": "sha1-hlJkspZ33AFbqEGJGJZd0jL8VM8=",
       "dev": true,
       "requires": {
         "cross-spawn": "^7.0.1"
@@ -3492,6 +3496,8 @@
     },
     "eslint": {
       "version": "5.16.0",
+      "resolved": "https://registry.npmmirror.com/eslint/download/eslint-5.16.0.tgz",
+      "integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -3534,6 +3540,8 @@
     },
     "eslint-plugin-hybrid": {
       "version": "0.0.5",
+      "resolved": "https://registry.npm.taobao.org/eslint-plugin-hybrid/download/eslint-plugin-hybrid-0.0.5.tgz",
+      "integrity": "sha1-lSIFllFVQmAKrj8L+0P2GPYBCMQ=",
       "dev": true,
       "requires": {
         "htmlparser2": "3.10.0",
@@ -3889,6 +3897,8 @@
     },
     "flyio": {
       "version": "0.6.14",
+      "resolved": "https://registry.npm.taobao.org/flyio/download/flyio-0.6.14.tgz",
+      "integrity": "sha1-xdg+t6m0/ByRWkY9LqbfznVcLW8=",
       "requires": {
         "request": "^2.85.0"
       }
@@ -4049,6 +4059,8 @@
     },
     "hap-toolkit": {
       "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/hap-toolkit/download/hap-toolkit-0.7.1.tgz",
+      "integrity": "sha1-kjZOYShx54rRpa2GUXPtOrqXoFM=",
       "requires": {
         "@babel/core": "^7.1.6",
         "@babel/plugin-syntax-jsx": "^7.0.0",
@@ -4887,6 +4899,8 @@
     },
     "less": {
       "version": "3.13.1",
+      "resolved": "https://registry.npmmirror.com/less/download/less-3.13.1.tgz",
+      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
       "dev": true,
       "requires": {
         "copy-anything": "^2.0.1",
@@ -4902,6 +4916,8 @@
     },
     "less-loader": {
       "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/less-loader/download/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
       "dev": true,
       "requires": {
         "clone": "^2.1.1",
@@ -6180,6 +6196,8 @@
     },
     "sass-loader": {
       "version": "8.0.2",
+      "resolved": "https://registry.npmmirror.com/sass-loader/download/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
       "dev": true,
       "requires": {
         "clone-deep": "^4.0.1",

src/assets/less/detail.less

@@ -2,7 +2,7 @@
   flex-direction: column;
 
   .book-wrap {
-    padding: 24px;
+    padding: 30px;
     flex-direction: column;
   }
 

src/assets/less/index.less

@@ -1,7 +1,6 @@
 .index-wrap {
   flex-direction: column;
-  
-  
+
   .fixed-tabbar {
     flex-direction: column;
 
@@ -28,7 +27,7 @@
       }
 
       .tabbar-name__cur {
-        color: #EF5952;
+        color: #3aacff;
       }
     }
   }
@@ -39,7 +38,7 @@
 }
 
 .stack-popup {
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -57,62 +56,65 @@
       font-size: 30px;
       text-align: center;
       color: #333;
-      line-height:104px;
+      line-height: 104px;
       border-bottom: 2px solid #f7f7f7;
     }
-    .desc{
-      margin:40px 80px;
-      font-size:28px;
-      color:#666;
+    .desc {
+      margin: 40px 80px;
+      font-size: 28px;
+      color: #666;
       text-align: center;
-
     }
     image {
       margin: 0 auto 10px;
       width: 280px;
       height: 280px;
     }
-    .duplication{
+    .duplication {
       margin-bottom: 40px;
     }
-    .duplication-text{
-      font-size:24px;
+    .duplication-text {
+      font-size: 24px;
     }
-    .duplication-button{
-      color:#EF5952;
-      border:2px solid #EF5952;
-      padding:2px 8px;
+    .duplication-button {
+      color: #ef5952;
+      border: 2px solid #ef5952;
+      padding: 2px 8px;
       border-radius: 20px;
-      font-size:20px;
-     margin-left:10px;
-
+      font-size: 20px;
+      margin-left: 10px;
     }
   }
 }
-.sign-icon{
+.sign-icon {
   position: fixed;
-  width:150px;
-  height:150px;
-  right:20px;
+  width: 150px;
+  height: 150px;
+  right: 20px;
   bottom: 300px;
 }
-.mask{
+.mask {
   position: fixed;
   width: 100%;
-  height:100%;
+  height: 100%;
   flex-direction: column;
   z-index: 9999;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, .6);
-  .banner{
-    margin-top: - 200px;
-    width:600px;
-
+  background-color: rgba(0, 0, 0, 0.6);
+  .banner {
+    margin-top: -200px;
+    width: 600px;
   }
-  .close-pop{
-    width:70px;
-    height:70px;
-    margin-top:24px;
+  .close-pop {
+    width: 70px;
+    height: 70px;
+    margin-top: 24px;
   }
-}
+}
+.mode-text {
+  margin-left: 10px;
+}
+.modeimage {
+  padding: 10px;
+}

src/assets/less/reader.less

@@ -2,11 +2,11 @@
   flex-direction: column;
   background-color: #e6e6e6;
   width: 100%;
-  .banner-list{
-    height:300px;
-    image{
+  .banner-list {
+    height: 300px;
+    image {
       width: 100%;
-      margin:10px 0;
+      margin: 10px 0;
     }
   }
   .reader-title {
@@ -36,64 +36,64 @@
   .reader-content {
     margin: 0 24px;
     flex-direction: column;
-      .readContent{
-        width:100%;
-        flex-direction: column;
+    .readContent {
+      width: 100%;
+      flex-direction: column;
+    }
+    .bottom-setting {
+      height: 400px;
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      padding: 40px 30px;
+      flex-direction: column;
+      justify-content: flex-start;
+      left: 0;
+      .item-page {
+        padding-top: 100px;
+        justify-content: space-between;
       }
-     .bottom-setting{ 
-       height:332px;
-       position: fixed;
-       bottom: 0; 
-       width: 100%;
-       padding:40px 30px;
-       flex-direction: column;
-       justify-content:flex-start;
-       left:0;
-       .item-page{
-         padding-top:40px;
-         justify-content: space-between;
-       }
-       .item-color{
-         justify-content: space-between;
-         margin-top:30px;
-        .colori{
+      .item-color {
+        justify-content: space-between;
+        margin-top: 30px;
+        .colori {
           border-radius: 100%;
           width: 70px;
           height: 70px;
           border-width: 2px;
         }
-        .color-icon{
+        .color-icon {
           border-radius: 100%;
           width: 70px;
           height: 70px;
           background-size: 100%;
           background-repeat: no-repeat;
         }
-        .night{
-          background-image:url('../../assets/imgs/sun.png') ;
+        .night {
+          background-image: url("../../assets/imgs/sun.png");
           border-radius: 100%;
           border-width: 2px;
-          border-color: #EE6159;
+          border-color: #ee6159;
         }
-        .sun{
-          background-image:url('../../assets/imgs/moo.png') ;
+        .sun {
+          background-image: url("../../assets/imgs/moo.png");
         }
-       }
-       .item-content{
-         height:60px;
-         slider{
-           flex:1;
-         }
-       }
-       .label-min{
-         padding-right:40px;
-         font-size:30px;
-       }
-       .label-max{
-        padding-left:40px;
-        font-size:48px;
       }
-     }
+      .item-content {
+        height: 60px;
+        slider {
+          flex: 1;
+        }
+      }
+      .label-min {
+        padding-right: 40px;
+        font-size: 30px;
+      }
+      .label-max {
+        padding-left: 40px;
+        font-size: 48px;
+      }
+    }
     .chapter-text {
       font-size: 19px;
       color: #1a1a1a;
@@ -103,23 +103,6 @@
       line-height: 60px;
     }
   }
-
-  .reader-operator {
-    margin: 50px 24px 40px;
-    justify-content: space-between;
-    align-items: center;
-
-    text {
-      font-size: 32px;
-      width: 214px;
-      height: 80px;
-      color: #1a1a1a;
-      background-color: #e6e6e6;
-      border: 2px solid #666;
-      border-radius: 6px;
-      text-align: center;
-    }
-  }
 }
 .toast {
   position: fixed;
@@ -135,62 +118,101 @@
     border-radius: 5px;
   }
 }
-.setting-top{
+.setting-top {
   position: fixed;
-  top:0;
-  left:0;
-  width:100%;
-  height:120px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
   line-height: 120px;
-  color:#999;
-  font-size:30px;
+  color: #999;
+  font-size: 30px;
   padding: 0 30px;
   justify-content: space-between;
   align-items: center;
-  .back-icon{
-    width:30px;
-    height:30px;
+  .back-icon {
+    width: 30px;
+    height: 30px;
   }
 }
-.mustToask{
+.mustToask {
   position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: rgba(0, 0, 0, 0.56);
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.56);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   z-index: 2;
-  .mustBox{
+  .mustBox {
     background-color: #fff;
-    width:600px;
-    height:400px;
+    width: 600px;
+    height: 400px;
     flex-direction: column;
     border-radius: 15px;
     text-align: center;
     justify-content: center;
     align-items: center;
-    .title-must{
+    .title-must {
       text-align: center;
-      font-size:40px;
+      font-size: 40px;
       padding-top: 50px;
       font-weight: bold;
     }
-    .content{
+    .content {
       text-align: center;
-      margin:60px 0;
-      color:#666;
+      margin: 60px 0;
+      color: #666;
     }
-    .button-must{
+    .button-must {
       text-align: center;
-      color:#fff;
-      margin:0 auto;
-      width:250px;
-      height:80px;
-      background-color:#fd555d;
+      color: #fff;
+      margin: 0 auto;
+      width: 250px;
+      height: 80px;
+      background-color: #fd555d;
       border-radius: 20px;
     }
   }
-}
+}
+.reader-bottom {
+  flex-direction: column;
+  margin-bottom: 220px;
+  align-items: center;
+  .reader-operator-next {
+    margin-bottom: 30px;
+    display: flex;
+    width: 640px;
+    height: 80px;
+    background-color: #f34d2c;
+    border-radius: 40px;
+    opacity: 0.9;
+    margin-left: 32px;
+    align-items: center;
+    text {
+      width: 640px;
+      height: 80px;
+      color: white;
+      text-align: center;
+    }
+  }
+  .reader-operator {
+    width: 640px;
+    height: 80px;
+    border-radius: 100px;
+    opacity: 0.9;
+    border: 1px solid #46300f;
+    margin-left: 32px;
+    display: flex;
+    justify-content: space-around;
+    text {
+      font-size: 32px;
+      width: 214px;
+      height: 80px;
+      color: #1a1a1a;
+      text-align: center;
+    }
+  }
+}

src/assets/less/shelf.less

@@ -1,13 +1,14 @@
 .shelf-wrap {
   // border-top: 36px solid #f7f7f7;
+
   flex-direction: column;
-  .blank_img{
-    width:100%;
-    height:100%;
+  .blank_img {
+    width: 100%;
+    height: 100%;
     align-items: center;
     justify-content: center;
-    image{
-      width:500px;
+    image {
+      width: 500px;
     }
   }
   .type-bar {
@@ -80,10 +81,10 @@
     flex-wrap: wrap;
 
     .book-item__wrap {
-      margin-right: 50px;
+      margin: 0 10px;
 
       .book-del__wrap {
-        background-color: rgba(255, 255, 255, 0.6);
+        background-color: rgba(0, 0, 0, 0.4);
         width: 200px;
         height: 264px;
         border-radius: 6px;
@@ -96,7 +97,7 @@
         }
 
         text {
-          color: #4d4d4d;
+          color: white;
           margin-top: 20px;
         }
       }
@@ -124,7 +125,7 @@
 
   .recent-list {
     padding: 0 22px;
-
+    margin-top: 30px;
     .recent-item {
       padding: 30px 0;
       border-bottom: 2px solid #f7f7f7;
@@ -136,17 +137,12 @@
       justify-content: space-between;
       align-items: flex-start;
 
-      text {
-        font-size: 26px;
-        color: #999;
-        lines: 1;
-        text-overflow: ellipsis;
-      }
-
-      .name {
-        font-size: 30px;
-        color: #333;
-      }
+      // text {
+      //   font-size: 26px;
+      //   color: #999;
+      //   lines: 1;
+      //   text-overflow: ellipsis;
+      // }
 
       .shelf-status {
         font-size: 24px;
@@ -161,7 +157,7 @@
       align-items: center;
       flex-direction: column;
       width: 100%;
-      background-color: rgba(255, 255, 255, 0.6);
+      background-color: rgba(24, 22, 22, 0.6);
       image {
         width: 40px;
       }
@@ -172,4 +168,20 @@
       }
     }
   }
+  .item_wrap {
+    flex-direction: column;
+    padding-bottom: 50px ;
+    .last-read {
+      font-size: 24px;
+      color: #999999;
+      margin-top: 15px;
+    }
+    .name {
+      font-size: 26px;
+      color: #333;
+      font-weight: 400;
+      line-height: 37px;
+      margin-top: 15px;
+    }
+  }
 }

src/components/book/book.ux

@@ -1,16 +1,32 @@
 <template>
-  <div class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}" style="{{bookSimpleStyle()}}" @click="getBooks(book)">
+  <div
+    class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}"
+    style="{{bookSimpleStyle()}}"
+    @click="getBooks(book)"
+  >
     <block if="!multi">
-      <image style="height: {{width * 1.33}}px" class="book-cover__simple" src="{{book.cover_url}}"></image>
-      <text class="book-name {{lines ? 'book-name__line2' : ''}}">{{book.book_name}}</text>
+      <image
+        style="height: {{width * 1.33}}px"
+        class="book-cover__simple"
+        src="{{book.cover_url}}"
+      ></image>
+      <text
+        class="book-name {{lines ? 'book-name__line2' : ''}}"
+        if="{{isshowtext}}"
+        >{{ book.book_name }}</text
+      >
       <slot></slot>
     </block>
     <block else>
-      <image style="{{bookMultiStyle()}}" class="book-cover__multi" src="{{book.cover_url}}"></image>
+      <image
+        style="{{bookMultiStyle()}}"
+        class="book-cover__multi"
+        src="{{book.cover_url}}"
+      ></image>
       <slot>
         <div class="book-info__multi">
-          <text class="name">{{book.book_name}}</text>
-          <text class="intro">{{book.book_summary}}</text>
+          <text class="name">{{ book.book_name }}</text>
+          <text class="intro">{{ book.book_summary }}</text>
         </div>
       </slot>
     </block>
@@ -49,6 +65,10 @@ export default {
     lines: {
       type: Boolean,
       default: false
+    },
+    isshowtext: {
+      type: Boolean,
+      default: true
     }
   },
   bookSimpleStyle() {

src/views/Detail/index.ux

@@ -4,38 +4,69 @@
 <template>
   <div class="detail-wrap">
     <div class="book-wrap">
-      <x-book multi="{{true}}" width="{{180}}" book="{{book}}" prevent="{{true}}">
+      <x-book
+        multi="{{true}}"
+        width="{{180}}"
+        book="{{book}}"
+        prevent="{{true}}"
+      >
         <div class="book-info">
-          <text class="name">{{book.book_name}}</text>
+          <text class="name">{{ book.book_name }}</text>
           <div class="category">
-            <text>{{book.book_category}}</text>
-            <text class="status">{{book.book_end_status ? '完结': '连载'}}</text>
+            <text>{{ book.book_category }}</text>
+            <text class="status">{{
+              book.book_end_status ? "完结" : "连载"
+            }}</text>
           </div>
-          <text class="words">字数：{{bookWordsFormat(book.book_word_count)}}</text>
+          <text class="words"
+            >字数：{{ bookWordsFormat(book.book_word_count) }}</text
+          >
           <div class="user-operator">
             <!-- <text class="add" @click="addShelf">{{book.is_on_user_shelf ? '已加入' : '加入书架'}}</text> -->
-            <text class="read" @click="toRead(book.record_chapter_id?book.record_chapter_id:book.first_cid)">立即阅读</text>
+            <text
+              class="read"
+              @click="
+                toRead(
+                  book.record_chapter_id
+                    ? book.record_chapter_id
+                    : book.first_cid
+                )
+              "
+              >立即阅读</text
+            >
           </div>
         </div>
       </x-book>
       <stack class="book-intro">
-        <text class="short-info__text">{{substrInfoText()}}</text>
-        <div class="intro-div"><text class="toggle" @click="toggleTextStatus">{{showLongText ? '收起' : '展开'}}</text></div>
+        <text class="short-info__text">{{ substrInfoText() }}</text>
+        <div class="intro-div">
+          <text class="toggle" @click="toggleTextStatus">{{
+            showLongText ? "收起" : "展开"
+          }}</text>
+        </div>
       </stack>
     </div>
-    <text class="lastest-chapter" @click="toRead(book.last_cid,book.is_need_charge)">最新章节：{{book.last_chapter}}</text>
+    <text
+      class="lastest-chapter"
+      @click="toRead(book.last_cid, book.is_need_charge)"
+      >最新章节：{{ book.last_chapter }}</text
+    >
     <div class="box-wrap short-chapter__list">
       <div class="small-title">
         <div class="wrap-left">
           <!-- <text class="border-left"></text> -->
           <text class="title">目录</text>
-          <text class="total">共{{book.book_chapter_total}}章</text>
+          <text class="total">共{{ book.book_chapter_total }}章</text>
         </div>
-        <text class="wrap-right">{{book.update_time}}</text>
+        <text class="wrap-right">{{ book.update_time }}</text>
       </div>
       <div class="chapter-list">
         <block for="chapters">
-          <text class="chapter-item" @click="toRead($item.chapter_id,$item.is_need_charge)">{{$item.chapter_name}}</text>
+          <text
+            class="chapter-item"
+            @click="toRead($item.chapter_id, $item.is_need_charge)"
+            >{{ $item.chapter_name }}</text
+          >
         </block>
       </div>
       <text class="more-chapters" @click="toBookCatalog">更多目录 &gt;</text>
@@ -65,7 +96,7 @@ export default {
   public: {
     push_id: '',
     bid: " "
-	},
+  },
   private: {
     showLongText: false,
     book: {},
@@ -104,7 +135,7 @@ export default {
       uri: "/views/Reader",
       params: {
         bid: this.book.book_id,
-        chapter_id: chapter_id, 
+        chapter_id: chapter_id,
       }
     })
   },
@@ -130,10 +161,10 @@ export default {
     this.getBooksInfo(this.bid);
   },
   async onInit() {
-    // console.log("book bid", this.bid);
+    console.log("book bid", this.bid);
     // this.getBooksInfo(this.bid);
-    if(this.push_id){
-       await storage.set({ key: "push_id", value: this.push_id });
+    if (this.push_id) {
+      await storage.set({ key: "push_id", value: this.push_id });
     }
   },
 }

src/views/Home/index.ux

@@ -58,7 +58,7 @@
           <div class="book-list__multi">
             <block for="book in bookObj.books.slice(4)">
               <div class="book-item">
-                <x-book multi="{{true}}" width="{{150}}" book="{{book}}">
+                <x-book multi="{{true}}" width="{{150}}" book="{{book}}" >
                   <div class="book-info__multi">
                     <text class="name">{{book.book_name}}</text>
                     <text class="intro">{{book.book_summary}}</text>

src/views/Index/index.ux

@@ -77,28 +77,28 @@ export default {
   },
   home_alert: [],
   private: {
-    tabbar: [
-      {
-        name: "首页",
-        title: "追书云",
-        icon: "../../assets/imgs/home.png",
-        active_icon: "../../assets/imgs/home_choose.png",
-        index: 0
-      },
-      {
-        name: "书架",
-        title: "我的书架",
-        icon: "../../assets/imgs/shelf.png",
-        active_icon: "../../assets/imgs/shelf_choose.png",
-        index: 1
-      },
-      {
-        name: "我的",
-        title: "个人中心",
-        icon: "../../assets/imgs/my.png",
-        active_icon: "../../assets/imgs/my_choose.png",
-        index: 2
-      }
+    tabbar: [{
+      name: "书架",
+      title: "我的书架",
+      icon: "../../assets/imgs/shelf.png",
+      active_icon: "../../assets/imgs/shelf_choose.png",
+      index: 1
+    },
+    {
+      name: "精选",
+      title: "追书云",
+      icon: "../../assets/imgs/home.png",
+      active_icon: "../../assets/imgs/home_choose.png",
+      index: 0
+    },
+
+    {
+      name: "我的",
+      title: "个人中心",
+      icon: "../../assets/imgs/my.png",
+      active_icon: "../../assets/imgs/my_choose.png",
+      index: 2
+    }
     ],
     // current: 0,
     showPopup: false,
@@ -150,7 +150,7 @@ export default {
   closeAcitivity() {
     this.showActivitys = false;
   },
-  toMyRead(evt){
+  toMyRead(evt) {
     console.log(evt.detail.count)
   },
   async onShow() {
@@ -160,9 +160,9 @@ export default {
     }
     it.getShortCut((value) => {
       this.showShortPop = !value;
-      if(value){
+      if (value) {
         this.$app.$def.data.backClickCount = 1
-      }else{
+      } else {
         this.$app.$def.data.backClickCount = 0
       }
     })

src/views/Reader/index.ux

@@ -31,11 +31,7 @@
               <image src="{{getImgUrl}}" class="back-icon"></image> <text style="color:{{isNight=='night'?'#666':'#333'}}">{{bookinfo.chapter_name}}</text><text style="text-indent:-999px">1</text>
             </div>
           </div>
-          <div class="reader-operator">
-            <text class="operator prev" @click="getPrevChapter">上一章</text>
-            <text class="operator catalog" @click="toCatalog">目录</text>
-            <text class="operator next" @click="getNextChapter">下一章</text>
-          </div>
+  
           <div class="banner-list" if="{{reader_banner.length>0}}">
             <swiper class="swipe-bar" autoplay="true" indicator="false">
               <block for="reader_banner">
@@ -52,6 +48,14 @@
           <text>正在加载中...</text>
         </div>
     </stack>
+    <div class="reader-bottom">
+        <div class="reader-operator-next" @click="getNextChapter"><text class="operator">下一章</text></div>
+          <div class="reader-operator">
+                  <text class="operator prev" @click="getPrevChapter">上一章</text>
+                  <text>|</text>
+                 <text class="operator catalog" @click="toCatalog">目录</text>
+          </div>
+    </div>
     <div class="mustToask" show="{{showMustTost}}">
       <div class="mustBox">
         <text class="title-must">
@@ -101,10 +105,12 @@ export default {
     showMustTost: false,
     back_reader: 0,
     colorList: [
+      { color: '#DFDAC7', borderColor: '#6090AE', btColor: '#E8F6FF', isIcon: false },
       { color: '#E6E6E6', borderColor: '#CCC', btColor: '#F2F2F2', isIcon: false },
       { color: '#EED9BB', borderColor: '#C6A473', btColor: '#FFFBE8', isIcon: false },
       { color: '#B3E2CB', borderColor: '#68AA8A', btColor: '#D5F2D8', isIcon: false },
       { color: '#B3D0E2', borderColor: '#6090AE', btColor: '#E8F6FF', isIcon: false },
+
     ],
     currentBorder: '#EE6159',
     nightColor: {
@@ -113,7 +119,7 @@ export default {
       color: '#1a1a1a'
     },
     currentColor: {
-      color: '#E6E6E6', btColor: '#F2F2F2', fontColor: '#1a1a1a'
+      color: '#DFDAC7', btColor: '#F2F2F2', fontColor: '#1a1a1a'
     }
   },
   computed: {
@@ -172,13 +178,13 @@ export default {
           }
         }
       });
-    }else{
-       if (router.getLength() === 1) {
-            router.replace({ uri: "/views/Index" });
-            return true;
-          } else {
-            router.back()
-       }
+    } else {
+      if (router.getLength() === 1) {
+        router.replace({ uri: "/views/Index" });
+        return true;
+      } else {
+        router.back()
+      }
     }
   },
   async onShow() {
@@ -186,9 +192,9 @@ export default {
       this.showSetting = false;
       this.showShortPop = !value;
       this.hasShort = value;
-      if(value){
+      if (value) {
         this.$app.$def.data.backClickCount = 1
-      }else{
+      } else {
         this.$app.$def.data.backClickCount = 0
       }
     })
@@ -387,13 +393,13 @@ export default {
           }
         }
       });
-    }else{
-       if (router.getLength() === 1) {
-            router.replace({ uri: "/views/Index" });
-            return true;
-          } else {
-            router.back()
-       }
+    } else {
+      if (router.getLength() === 1) {
+        router.replace({ uri: "/views/Index" });
+        return true;
+      } else {
+        router.back()
+      }
     }
 
 

src/views/Shelf/index.ux

@@ -10,43 +10,60 @@
         </div>
       </block>
     </div> -->
-    <div class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}" if="{{mockList.length>0}}">
-      <text>共{{booksize}}本</text>
-      <text class="manager" @click="changeMode">{{modeText}}</text>
+    <div
+      class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}"
+      if="{{mockList.length>0}}"
+    >
+      <text>共{{ booksize }}本</text>
+      <div>
+        <text>
+          <image src="../../assets/imgs/manage.png" class="modeimage"></image>
+        </text>
+        <text @click="changeMode" class="mode-text">{{ modeText }}</text>
+      </div>
     </div>
     <div if="{{mockList.length<=0 && isinit}}" class="blank_img">
-      <image src="https://cdn-novel.iycdm.com/quickapp/activity/white_shelf.png"></image>
+      <image
+        src="https://cdn-novel.iycdm.com/quickapp/activity/white_shelf.png"
+      ></image>
     </div>
     <block if="current === 0">
       <div class="shelf-books__wrap">
         <block for="mockList">
           <div class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
             <stack>
-              <x-book book='{{$item}}' read='{{true}}'></x-book>
-              <div class="book-del__wrap" show="{{isDelMode}}" @click='deleteBook($item)'>
-                <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"></image>
+              <x-book book="{{$item}}" read="{{true}}"></x-book>
+              <div
+                class="book-del__wrap"
+                show="{{isDelMode}}"
+                @click="deleteBook($item)"
+              >
+                <image
+                  src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"
+                ></image>
                 <text>删除</text>
               </div>
             </stack>
           </div>
         </block>
         <div class="book-item__wrap book-item__add m0" @click="toCategory">
-          <image class="add-cover" src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"></image>
+          <image
+            class="add-cover"
+            src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"
+          ></image>
           <text>添加书籍</text>
         </div>
       </div>
     </block>
     <block else>
       <list class="recent-list" if="{{mockList.length>0 && isinit}}">
-        <block for="mockList">
-          <list-item type="recent-item" class="recent-item">
+        <!-- <list-item type="recent-item" class="recent-item">
             <stack>
               <x-book multi="{{true}}" book='{{$item}}' read='{{true}}' width="{{150}}">
                 <div class="book-info__wrap">
                   <text class="name">{{$item.book_name}}</text>
                   <text class="lastest">最新 {{$item.last_chapter}}</text>
                   <text class="last-read">最近阅读 {{$item.chapter_name}}</text>
-                  <!-- <text class="shelf-status">❤️ 已加入书架</text> -->
                 </div>
               </x-book>
               <div class="book-del__item" show="{{isDelMode}}" @click='deleteBook($item)'>
@@ -54,15 +71,45 @@
                 <text>删除</text>
               </div>
             </stack>
-          </list-item>
-        </block>
+          </list-item> -->
+        <div class="shelf-books__wrap">
+          <block for="mockList">
+            <div class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
+              <stack>
+                <x-book book="{{$item}}" read="{{true}}" isshowtext="{{false}}">
+                  <div class="item_wrap">
+                    <text class="name">{{ $item.book_name }}</text>
+                    <text class="last-read">读到 {{ $item.chapter_name }}</text>
+                  </div>
+                </x-book>
+                <div
+                  class="book-del__wrap"
+                  show="{{isDelMode}}"
+                  @click="deleteBook($item)"
+                >
+                  <image
+                    src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"
+                  ></image>
+                  <text>删除</text>
+                </div>
+              </stack>
+            </div>
+          </block>
+          <div class="book-item__wrap book-item__add m0" @click="toCategory">
+            <image
+              class="add-cover"
+              src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"
+            ></image>
+            <text>添加书籍</text>
+          </div>
+        </div>
       </list>
     </block>
   </div>
 </template>
 
 <script>
-import { getUserShelfBooks, deleteShelfBook ,getReadrecord } from "../../api";
+import { getUserShelfBooks, deleteShelfBook, getReadrecord } from "../../api";
 
 export default {
   props: {
@@ -73,9 +120,9 @@ export default {
   },
   data() {
     return {
-      isInit:false,
+      isInit: false,
       current: 1,
-      isinit:false,
+      isinit: false,
       isDelMode: false,
       modeText: "管理",
       mockList: [],
@@ -97,21 +144,21 @@ export default {
     // this.getUserShelfBooks()
     this.$watch('isDelMode', 'listenMode')
     this.$watch('tabindex', 'watchPropsChange');
-    this.$on('refreshData',this.broadevt);
+    this.$on('refreshData', this.broadevt);
   },
   watchPropsChange(newV, oldV) {
     if (newV == 1) {
       this.getUserShelfBooks()
     }
   },
-   broadevt(evt){
-    if(evt.detail.current==1){
+  broadevt(evt) {
+    if (evt.detail.current == 1) {
       this.getUserShelfBooks()
     }
   },
   getUserShelfBooks(isDel = false) {
     getReadrecord().then(r => {
-      if(!isDel){
+      if (!isDel) {
         this.isDelMode = false;
       }
       r.map(m => {