ui

src/assets/less/category.less

@@ -1,5 +1,5 @@
 .category-wrap {
-  background-color: #f7f7f7;
+  background-color: #fff;
   flex-direction: column;
 
   .search-bar {
@@ -7,7 +7,7 @@
 
     .search-bar__wrap {
       flex: 1;
-      background-color: #fff;
+      background-color: #f7f7f7;
       height: 62px;
       padding: 0 14px;
       border-radius: 30px;
@@ -30,7 +30,7 @@
   .filter-wrap {
     background-color: #fff;
     flex-direction: column;
-    margin-bottom: 24px;
+    border-bottom: 24px solid #f7f7f7;
 
     .filter-item {
       flex: 1;
@@ -66,25 +66,27 @@
 
       & .cur {
         font-weight: bold;
-        color: #3284ff;
+        color: #EF5952;
       }
     }
   }
 
   .books-item__wrap {
     background-color: #fff;
-    padding: 24px;
+    padding: 0px 24px;
+    margin-bottom: 30px;
     flex-direction: column;
 
     .book-info {
       flex: 1;
       flex-direction: column;
-      justify-content: space-between;
+      justify-content: flex-start;
+      align-items: flex-start;
       padding-left: 40px;
 
       .name {
         color: #333;
-        font-size: 30px;
+        font-size: 32px;
         lines: 1;
         text-overflow: ellipsis;
       }
@@ -114,6 +116,18 @@
         }
       }
 
+      .intro {
+        font-size: 24px;
+        color: #666;
+        margin-top: 36px;
+        lines: 3;
+        text-overflow: ellipsis;
+        line-height: 36px;
+      }
     }
   }
+
+  .book-item__wrap--first {
+    padding-top: 38px;
+  }
 }

src/assets/less/home.less

@@ -1,31 +1,35 @@
 .home-wrap {
-  background-color: #f7f7f7;
+  background-color: #fff;
   flex-direction: column;
 
   .type-bar {
-    background-color: #3284ff;
+    background-color: #fff;
 
     .type-item {
       flex: 1;
       justify-content: center;
       align-items: center;
       flex-direction: column;
+      position: relative;
 
       text {
         font-size: 30px;
-        color: #BBE0FF;
-        padding: 34px 0;
+        color: #999;
+        // padding: 34px 0;
       }
 
       .cur {
-        color: #fff;
-        font-size: 32px;
+        color: #EF5952;
+        font-size: 36px;
         font-weight: bold;
       }
 
-      image {
-        width: 52px;
-        height: 18px;
+      .choose-bar {
+        width: 38px;
+        height: 4px;
+        background-color: #EF5952;
+        border-radius: 2px;
+        margin-top: 10px;
       }
     }
   }
@@ -35,7 +39,7 @@
 
     .search-bar__wrap {
       flex: 1;
-      background-color: #fff;
+      background-color: #f7f7f7;
       height: 62px;
       padding: 0 14px;
       border-radius: 30px;
@@ -56,11 +60,11 @@
   }
 
   .swipe-bar {
-    height: 350px;
-    background-color: #fff;
+    height: 260px;
+    // background-color: #fff;
 
     .swipe-item {
-      padding: 30px 24px;
+      padding: 0px 24px;
 
       .swipe-item__info {
         flex: 1;
@@ -88,9 +92,11 @@
       }
 
       .cover {
-        flex-basis: 180px;
-        flex-shrink: 0;
-        height: 240px;
+        width: 100%;
+        height: 260px;
+        // flex-basis: 180px;
+        // flex-shrink: 0;
+        // height: 240px;
         border-radius: 6px;
       }
     }
@@ -98,31 +104,17 @@
 
   .book-list__wrap {
     background-color: #fff;
-    margin-top: 24px;
+    // margin-top: 24px;
     padding: 0 24px;
     flex-direction: column;
 
     .book-list__title {
-      padding: 38px 0;
+      padding: 30px 0;
       align-items: center;
-      
-      span {
-        width: 6px;
-        height: 34px;
-        background-color: #32a1ff;
-      }
 
       text {
-        color: #32a1ff;
-        font-size: 30px;
-      }
-
-      .border {
-        background-color: #32a1ff;
-        width: 6px;
-        height: 100%;
-        border-radius: 2px;
-        margin-right: 20px;
+        color: #333;
+        font-size: 32px;
       }
     }
   }
@@ -133,4 +125,44 @@
     flex-wrap: wrap;
     justify-content: space-between;
   }
+
+  .book-list__multi {
+    margin-top: 30px;
+    flex-direction: column;
+
+    .book-item {
+      margin-bottom: 30px;
+    }
+
+    .book-info__multi {
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-left: 38px;
+      // margin-bottom: 40px;
+
+      .name {
+        font-size: 32px;
+        color: #333;
+        lines: 1;
+        text-overflow: ellipsis;
+      }
+
+      .intro {
+        font-size: 24px;
+        color: #666;
+        lines: 3;
+        text-overflow: ellipsis;
+        margin-top: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+
+  .book-list__line {
+    justify-content: space-between;
+    align-items: flex-start;
+    border-bottom: 2px solid #f7f7f7;
+  }
 }

src/assets/less/index.less

@@ -24,7 +24,7 @@
       }
 
       .tabbar-name__cur {
-        color: #3284ff;
+        color: #EF5952;
       }
     }
   }

src/assets/less/pay.less

@@ -170,7 +170,6 @@
           border: 2px solid #ff9470;
           border-radius: 50px;
           background-color: #ff9470;
-          overflow: hidden;
 
           image {
             width: 32px;

src/components/book/book.ux

@@ -1,11 +1,11 @@
 <template>
-  <div class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}" @click="getBooks(book)">
+  <div class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}" style="{{bookSimpleStyle()}}" @click="getBooks(book)">
     <block if="!multi">
-      <image class="book-cover__simple" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
-      <text class="book-name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
+      <image style="height: {{width * 1.33}}px" class="book-cover__simple" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
+      <text class="book-name {{lines ? 'book-name__line2' : ''}}">惊世妖娆凤凰月惊世妖娆凤凰月</text>
     </block>
     <block else>
-      <image class="book-cover__multi" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
+      <image style="{{bookMultiStyle()}}" class="book-cover__multi" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
       <slot>
         <div class="book-info__multi">
           <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
@@ -36,6 +36,29 @@ export default {
     book: {
       type: Object,
       default: {}
+    },
+    width: {
+      type: Number,
+      default: 200
+    },
+    lines: {
+      type: Boolean,
+      default: false
+    }
+  },
+  bookSimpleStyle() {
+    if (!this.multi) {
+      return {
+        width: this.width + 'px'
+      }
+    }
+  },
+  bookMultiStyle() {
+    if (this.multi) {
+      return {
+        width: this.width + 'px',
+        height: this.width * 1.33 + 'px'
+      }
     }
   },
   getBooks(book) {
@@ -78,6 +101,10 @@ export default {
     margin-bottom: 36px;
     lines: 1;
     text-overflow: ellipsis;
+
+    &__line2 {
+      lines: 2;
+    }
   }
 }
 

src/manifest.json

@@ -82,8 +82,8 @@
     "widgets": {}
   },
   "display": {
-    "titleBarBackgroundColor": "#3284ff",
-    "titleBarTextColor": "#fff",
+    "titleBarBackgroundColor": "#fff",
+    "titleBarTextColor": "#333",
     "menu": true,
     "pages": {
       "views/Index": {
@@ -91,7 +91,7 @@
         "menu": true
       },
       "views/Home": {
-        "titleBarText": "追书云",
+        "titleBarText": "书城",
         "menu": false
       },
       "views/Category": {

src/views/Category/index.ux

@@ -42,17 +42,18 @@
         </div>
       </list-item>
       <block for="mockList">
-        <list-item type="books-item" class="books-item__wrap">
-          <x-book multi="{{true}}">
+        <list-item type="books-item" class="books-item__wrap {{$idx === 0 ? 'book-item__wrap--first' : ''}}">
+          <x-book multi="{{true}}" width="{{150}}">
             <div class="book-info">
               <text class="name">惊世妖娆凤凰月惊123123世妖娆凤凰月</text>
-              <text class="status">豪门虐情 完结</text>
+              <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
+              <!-- <text class="status">豪门虐情 完结</text>
               <text class="words">字数：1231231</text>
               <div class="update">
                 <text>最新：</text>
                 <text class="lastest">第213章 我是最后一章</text>
                 <image src="../../assets/imgs/book-vip.png"></image>
-              </div>
+              </div> -->
             </div>
           </x-book>
         </list-item>

src/views/Home/index.ux

@@ -6,7 +6,7 @@
       <block for="type in typeList">
         <div class="type-item" @click="typeChange(type.index)">
           <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
-          <image show="{{type.index === current}}" src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/butt.png"></image>
+          <text class="choose-bar" show="{{type.index === current}}"></text>
         </div>
       </block>
     </div>
@@ -18,45 +18,22 @@
         </div>
       </list-item>
       <list-item type="swipe">
-        <swiper class="swipe-bar" autoplay="true">
-          <div class="swipe-item">
-            <div class="swipe-item__info">
-              <text class="name">爱的邂逅</text>
-              <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
-              <text class="category">都市生活</text>
+        <swiper class="swipe-bar" autoplay="true" indicator="false">
+          <block for="banner">
+            <div class="swipe-item">
+              <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_web_3nd/images/homebanners/夫人，魔尊大人盼你早点死呢1000390.jpg"></image>
             </div>
-            <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
-          </div>
-          <div class="swipe-item">
-            <div class="swipe-item__info">
-              <text class="name">爱的邂逅</text>
-              <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
-              <text class="category">都市生活</text>
-            </div>
-            <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
-          </div>
-          <div class="swipe-item">
-            <div class="swipe-item__info">
-              <text class="name">爱的邂逅</text>
-              <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
-              <text class="category">都市生活</text>
-            </div>
-            <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
-          </div>
+          </block>
         </swiper>
       </list-item>
       <list-item type="simple" class="book-list__wrap">
         <div class="book-list__title">
-          <text class="border"></text>
           <text>热门推荐</text>
         </div>
         <div class="book-list">
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
+          <block for="books">
+            <x-book multi="{{false}}"></x-book>
+          </block>
         </div>
       </list-item>
       <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
@@ -64,14 +41,22 @@
           <text class="border"></text>
           <text>神书直播</text>
         </div>
-        <x-book multi="{{true}}"></x-book>
-        <div class="book-list">
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
+        <div class="book-list__line">
+          <block for="books.slice(0, 4)">
+            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
+          </block>
+        </div>
+        <div class="book-list__multi">
+          <block for="books.slice(4)">
+            <div class="book-item">
+              <x-book multi="{{true}}" width="{{150}}">
+                <div class="book-info__multi">
+                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
+                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
+                </div>
+              </x-book>
+            </div>
+          </block>
         </div>
       </list-item>
       <list-item type="simple" class="book-list__wrap">
@@ -80,12 +65,9 @@
           <text>编辑推荐</text>
         </div>
         <div class="book-list">
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
+          <block for="books">
+            <x-book multi="{{false}}"></x-book>
+          </block>
         </div>
       </list-item>
       <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
@@ -93,14 +75,22 @@
           <text class="border"></text>
           <text>新书推荐</text>
         </div>
-        <x-book multi="{{true}}"></x-book>
-        <div class="book-list">
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
-          <x-book multi="{{false}}"></x-book>
+        <div class="book-list__line">
+          <block for="books.slice(0, 4)">
+            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
+          </block>
+        </div>
+        <div class="book-list__multi">
+          <block for="books.slice(4)">
+            <div class="book-item">
+              <x-book multi="{{true}}" width="{{150}}">
+                <div class="book-info__multi">
+                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
+                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
+                </div>
+              </x-book>
+            </div>
+          </block>
         </div>
       </list-item>
     </list>
@@ -123,6 +113,8 @@ export default {
           index: 1
         }
       ],
+      banner: [1, 2, 3],
+      books: [1, 2, 3, 4, 5, 6],
       current: 0
     }
   },

src/views/Index/index.ux

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