ui done except personal

src/assets/less/catalog.less

@@ -1,20 +1,41 @@
-.catalog-wrap {
-  padding: 0 24px;
-
+.catalog-wrap {  
   .catalog-item {
-    height: 90px;
+    padding-left: 24px;
+    height: 105px;
     justify-content: space-between;
     align-items: center;
+    border-bottom: 2px solid #f7f7f7;
 
     .catalog-name {
-      color: #4c4c4c;
-      font-size: 28px;
+      color: #999;
+      font-size: 26px;
       lines: 1;
       text-overflow: ellipsis;
+      
+      &__check {
+        color: #EF5952;
+      }
+    }
+
+    .target-wrap {
+      justify-content: space-between;
+      align-items: center;
+
+      .border {
+        width: 4px;
+        height: 60px;
+        background-color: #fff;
+        border-radius: 2px;
+
+        &-show {
+          background-color: #EF5952;
+        }
+      }
     }
 
     image {
       width: 30px;
+      margin-right: 20px;
     }
   }
 }

src/assets/less/detail.less

@@ -15,40 +15,48 @@
     .name {
       lines: 1;
       text-overflow: ellipsis;
-      font-size: 30px;
+      font-size: 34px;
       color: #333;
     }
 
     .category {
+      justify-content: flex-start;
+      align-items: center;
+
       text {
-        color: #999;
-        font-size: 24px;
+        color: #EF5952;
+        font-size: 26px;
       }
 
       .status {
-        color: #ff6060;
-        margin-left: 120px;
+        color: #999;
+        margin-left: 32px;
+        font-size: 24px;
+        background-color: #f7f7f7;
+        border: 1px solid #e6e6e6;
+        border-radius: 18px;
+        padding: 0 14px;
       }
     }
 
     .words {
-      font-size: 24px;
-      color: #999;
+      font-size: 26px;
+      color: #666;
     }
 
     .user-operator {
       text {
-        width: 180px;
-        height: 55px;
+        width: 160px;
+        height: 60px;
         text-align: center;
-        border: 2px solid #ff6060;
+        border: 2px solid #EF5952;
         border-radius: 6px;
-        color: #ff6060;
-        font-size: 24px;
+        color: #EF5952;
+        font-size: 26px;
       }
 
       .read {
-        margin-left: 40px;
+        margin-left: 30px;
         color: #fff;
         background-color: #ff6060;
       }
@@ -57,7 +65,8 @@
 
   .book-intro {
     margin-top: 24px;
-    flex-direction: column;
+    justify-content: flex-end;
+    // flex-direction: column;
 
     text {
       font-size: 26px;
@@ -65,16 +74,15 @@
     }
 
     .short-info__text {
-      line-height: 45px;
-
-      .toggle {
-        color: #3284ff;
-      }
+      line-height: 45px
     }
 
     .toggle {
-      color: #3284ff;
-      align-self: center;
+      background-color: #fff;
+      padding: 0 15px;
+      color: #EF5952;
+      align-self: flex-end;
+      line-height: 45px;
     }
   }
 
@@ -83,9 +91,11 @@
     text-overflow: ellipsis;
     padding: 0 24px;
     font-size: 26px;
-    height: 90px;
-    color: #3284ff;
-    background-color: #f7f7f7;
+    height: 106px;
+    color: #333;
+    background-color: #fff;
+    border-top: 2px solid #f7f7f7;
+    border-bottom: 2px solid #f7f7f7;
   }
 
   .box-wrap {
@@ -111,9 +121,9 @@
       }
 
       .title {
-        font-size: 28px;
-        color: #3284ff;
-        margin-right: 10px;
+        font-size: 32px;
+        color: #333;
+        margin-right: 20px;
       }
 
       .total {
@@ -135,18 +145,19 @@
     padding: 0 24px;
 
     .chapter-item {
-      color: #4c4c4c;
-      font-size: 28px;
-      height: 90px;
+      color: #999;
+      font-size: 26px;
+      height: 85px;
       lines: 1;
       text-overflow: ellipsis;
+      border-bottom: 2px solid #f7f7f7;
     }
   }
 
   .more-chapters {
     text-align: center;
     background-color: #f7f7f7;
-    color: #3284ff;
+    color: #EF5952;
     font-size: 26px;
     height: 90px;
     padding: 0 24px;

src/assets/less/index.less

@@ -15,7 +15,7 @@
 
       image {
         width: 46px;
-        height: 46px;
+        // height: 46px;
       }
 
       text {

src/assets/less/reader.less

@@ -5,16 +5,16 @@
   .reader-title {
     margin: 0 24px;
     padding: 40px 0;
-    border-bottom: 2px solid #ccc;
+    // border-bottom: 2px solid #ccc;
     justify-content: space-between;
     align-items: center;
-
-    text {
-      color: #1a1a1a;
-    }
-
+    
     .title {
+      font-weight: bolder;
+      color: #1a1a1a;
+      font-size: 48px;
       font-size: 38px;
+      padding: 150px 0;
     }
 
     .add-shelf {
@@ -32,9 +32,10 @@
     flex-direction: column;
 
     .chapter-text {
+      color: #1a1a1a;
       text-indent: 2em;
       font-size: 32px;
-      margin-top: 30px;
+      margin-bottom: 30px;
       line-height: 60px;
     }
   }
@@ -45,6 +46,7 @@
     align-items: center;
 
     text {
+      font-size: 32px;
       width: 214px;
       height: 80px;
       color: #1a1a1a;

src/assets/less/shelf.less

@@ -2,6 +2,38 @@
   // border-top: 36px solid #f7f7f7;
   flex-direction: column;
 
+  .type-bar {
+    background-color: #fff;
+
+    .type-item {
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      text {
+        font-size: 30px;
+        color: #999;
+        // padding: 34px 0;
+      }
+
+      .cur {
+        color: #EF5952;
+        font-size: 36px;
+        font-weight: bold;
+      }
+
+      .choose-bar {
+        width: 38px;
+        height: 4px;
+        background-color: #EF5952;
+        border-radius: 2px;
+        margin-top: 10px;
+      }
+    }
+  }
+
   .border-bar {
     height: 36px;
     background-color: #f7f7f7;
@@ -18,15 +50,19 @@
     }
 
     .manager {
-      border: 2px solid #3284ff;
+      border: 2px solid #EF5952;
       border-radius: 6px;
       background-color: #fff;
       font-size: 26px;
-      color: #3284ff;
+      color: #EF5952;
       width: 88px;
       height: 38px;
       text-align: center;
     }
+
+    &__inRecent {
+      padding-bottom: 0;
+    }
   }
 
   .shelf-books__wrap {
@@ -76,6 +112,41 @@
     & .m0 {
       margin-right: 0;
     }
+  }
 
+  .recent-list {
+    padding: 0 22px;
+
+    .recent-item {
+      padding: 30px 0;
+      border-bottom: 2px solid #f7f7f7;
+    }
+
+    .book-info__wrap {
+      flex-direction: column;
+      margin-left: 30px;
+      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;
+      }
+
+      .shelf-status {
+        font-size: 24px;
+        color: #EF5952;
+        padding: 6px 17px;
+        background-color: #f7f7f7;
+        border-radius: 24px;
+      }
+    }
   }
 }

src/manifest.json

@@ -128,7 +128,9 @@
       },
       "views/Reader": {
         "titleBarText": "阅读器",
-        "menu": false
+        "menu": false,
+        "fullScreen": true,
+        "titleBar": false
       },
       "views/Catalog": {
         "titleBarText": "目录",

src/views/Catalog/index.ux

@@ -2,8 +2,11 @@
   <list id="catalog" class="catalog-wrap" @scrollbottom="loadCatalog" @scrolltop="loadPrev">
     <block for="list">
       <list-item type="catalog-item" class="catalog-item">
-        <text class="catalog-name">第{{$idx + 1}}章</text>
-        <image src="../../assets/imgs/book-vip.png"></image>
+        <text class="catalog-name {{$idx === 0 ? 'catalog-name__check' : ''}}">第{{$idx + 1}}章</text>
+        <div class="target-wrap">
+          <image src="../../assets/imgs/book-vip.png"></image>
+          <text class="border {{$idx === 0 ? 'border-show': ''}}"></text>
+        </div>
       </list-item>
     </block>
   </list>

src/views/Detail/index.ux

@@ -4,12 +4,12 @@
 <template>
   <div class="detail-wrap">
     <div class="book-wrap">
-      <x-book multi="{{true}}" prevent="{{true}}">
+      <x-book multi="{{true}}" width="{{180}}" prevent="{{true}}">
         <div class="book-info">
           <text class="name">一念阑珊，致辞中生</text>
           <div class="category">
             <text>豪门虐情</text>
-            <text class="status">完结</text>
+            <text class="status">已完结</text>
           </div>
           <text class="words">字数：123124</text>
           <div class="user-operator">
@@ -18,16 +18,16 @@
           </div>
         </div>
       </x-book>
-      <div class="book-intro">
+      <stack class="book-intro">
         <text class="short-info__text">{{substrInfoText()}}</text>
         <text class="toggle" @click="toggleTextStatus">{{showLongText ? '收起' : '展开'}}</text>
-      </div>
+      </stack>
     </div>
     <text class="lastest-chapter" @click="toRead(book.lastest_id)">最新章节：第307章 大结局大结局大结局大结局大结局大结局大结局</text>
     <div class="box-wrap short-chapter__list">
       <div class="small-title">
         <div class="wrap-left">
-          <text class="border-left"></text>
+          <!-- <text class="border-left"></text> -->
           <text class="title">目录</text>
           <text class="total">共307章</text>
         </div>
@@ -43,7 +43,7 @@
     <div class="box-wrap similar-list__wrap">
       <div class="small-title">
         <div class="wrap-left">
-          <text class="border-left"></text>
+          <!-- <text class="border-left"></text> -->
           <text class="title">同款推荐</text>
         </div>
       </div>

src/views/Index/index.ux

@@ -65,7 +65,7 @@ export default {
         index: 3
       }
     ],
-    current: 1,
+    current: 2,
     showPopup: false
   },
   onBackPress() {

src/views/Reader/index.ux

@@ -2,7 +2,7 @@
   <div class="reader-wrap">
     <div class="reader-title">
       <text class="title">第一章 冲头一次吧</text>
-      <text class="add-shelf" @click="addShelf">加入书架</text>
+      <!-- <text class="add-shelf" @click="addShelf">加入书架</text> -->
     </div>
     <div class="reader-content">
       <text class="chapter-text">一念的执着，倾世的阑珊。——笛音</text>

src/views/Shelf/index.ux

@@ -2,28 +2,53 @@
  
 <template>
   <div class="shelf-wrap">
-    <div class="border-bar"></div>
-    <div class="shelf-total">
+    <div class="type-bar">
+      <block for="type in typeList">
+        <div class="type-item" @click="typeChange(type.index)">
+          <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
+          <text class="choose-bar" show="{{type.index === current}}"></text>
+        </div>
+      </block>
+    </div>
+    <div class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}">
       <text>共35本</text>
       <text class="manager" @click="changeMode">{{modeText}}</text>
     </div>
-    <div class="shelf-books__wrap">
-      <block for="mockList">
-        <div class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
-          <stack>
-            <x-book></x-book>
-            <div class="book-del__wrap" show="{{isDelMode}}">
-              <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"></image>
-              <text>删除</text>
-            </div>
-          </stack>
+    <block if="current === 0">
+      <div class="shelf-books__wrap">
+        <block for="mockList">
+          <div type="shelf-item" class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
+            <stack>
+              <x-book></x-book>
+              <div class="book-del__wrap" show="{{isDelMode}}">
+                <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"></image>
+                <text>删除</text>
+              </div>
+            </stack>
+          </div>
+        </block>
+        <div type="add-shelf" 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>
-      </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>
+    </block>
+    <block else>
+      <list class="recent-list">
+        <block for="mockList">
+          <list-item type="recent-item" class="recent-item">
+            <x-book multi="{{true}}" width="{{150}}">
+              <div class="book-info__wrap">
+                <text class="name">爱的邂逅</text>
+                <text class="lastest">最新 第2556章 又来了一个张老三</text>
+                <text class="last-read">上次阅读：第23章 张老三是个蓝精灵</text>
+                <text class="shelf-status">❤️ 已加入书架</text>
+              </div>
+            </x-book>
+          </list-item>
+        </block>
+      </list>
+    </block>
   </div>
 </template>
 
@@ -32,9 +57,20 @@ export default {
   props: {},
   data() {
     return {
+      current: 1,
       isDelMode: false,
       modeText: "管理",
-      mockList: [0, 1, 2, 3, 4]
+      mockList: [0, 1, 2, 3, 4],
+      typeList: [
+        {
+          name: "我的书架",
+          index: 0
+        },
+        {
+          name: "最近阅读",
+          index: 1
+        }
+      ],
     }
   },
   onInit() {
@@ -48,7 +84,10 @@ export default {
   },
   toCategory() {
     this.$emit('change');
-  }
+  },
+  typeChange(index) {
+    this.current = index;
+  },
 }
 </script>