a

src/assets/less/home.less

@@ -1,37 +1,105 @@
 .home-wrap {
-  background-color: #fff;
+  background-color: #f5f5f5;
   flex-direction: column;
-  padding-top: 20px;
-  .type-item {
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-
+  .home_title {
+    height: 112px;
+    background-color: #fff;
     text {
-      font-size: 30px;
-      color: #999;
-      // padding: 34px 0;
-    }
-
-    .cur {
-      color: #fff;
+      padding: 0 30px;
       font-size: 36px;
-      font-weight: bold;
+      color:  #61A9C0;
     }
+  }
+  .feebar-text{
+    color: #fff;
+    margin-left: 40px;
+  }
+  .type-wrap_content {
+    background-color:  #61A9C0;
+    .type-wrap {
+      background-color:  #61A9C0;;
+      margin: 20px 0;
+      flex-direction: row;
+      .type-item {
+        padding: 0 15px;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        text {
+          font-size: 30px;
+          color: #fff;
+        }
+
+        .cur {
+          color: #fff;
+          font-size: 36px;
+          font-weight: bold;
+        }
 
-    .choose-bar {
-      width: 38px;
-      height: 4px;
-      background-color: #E5401C;
-      border-radius: 2px;
-      margin-top: 10px;
+        .choose-bar {
+          width: 38px;
+          height: 4px;
+          background-color: #fff;
+          border-radius: 2px;
+          margin-top: 10px;
+        }
+      }
     }
   }
-  .type-bar {
-    background-color: #fff;
+  .free {
+    background-color: #ffffff;
+    width: 100%;
+    padding-top: 10px;
+    .free_warp {
+      margin: 0 auto;
+    }
   }
+  .entrance_block {
+    background-color: #ffffff;
+    width: 100%;
+    padding: 30px;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    div {
+      flex-direction: column;
+      text {
+        margin-top: 10px;
+        text-align: center;
+      }
+      image {
+        margin: 0 auto;
+        height: 80px;
+        width: 80px;
+      }
+    }
+  }
+
+  .type-bar {
+    background-color: #ffffff;
+    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;
+      }
+    }
+  }
   .search-bar {
     padding: 24px;
 
@@ -59,11 +127,9 @@
 
   .swipe-bar {
     height: 260px;
-    // background-color: #fff;
-
+    background-color: #fff;
     .swipe-item {
       padding: 0px 24px;
-
       .swipe-item__info {
         flex: 1;
         flex-direction: column;
@@ -101,18 +167,25 @@
   }
 
   .book-list__wrap {
-    background-color: #fff;
-    // margin-top: 24px;
     padding: 0 24px;
     flex-direction: column;
-
-    .book-list__title {
-      padding: 30px 0;
-      align-items: center;
-
-      text {
-        color: #333;
-        font-size: 32px;
+    .book-list_content {
+      border-radius: 20px;
+      padding: 0 24px;
+      flex-direction: column;
+      background-color: white;
+      margin-top: 30px;
+      .book-list__title {
+        background-color: #fff;
+        padding: 40px 0 30px 0;
+        align-items: center;
+        font-size: 30px;
+
+        text {
+          color: #333;
+          font-size: 32px;
+          font-weight: 900;
+        }
       }
     }
   }
@@ -125,7 +198,6 @@
   }
 
   .book-list__multi {
-    margin-top: 30px;
     flex-direction: column;
 
     .book-item {
@@ -163,4 +235,4 @@
     align-items: flex-start;
     border-bottom: 2px solid #f7f7f7;
   }
-}
+}

src/manifest.json

@@ -145,7 +145,7 @@
     "widgets": {}
   },
   "display": {
-    "titleBarBackgroundColor": "#61A9C0",
+    "titleBarBackgroundColor": "#fff",
     "titleBarTextColor": "#333",
     "menu": true,
     "themeMode": 0,

src/views/Home/index.ux

@@ -12,6 +12,7 @@
             <text class="choose-bar" show="{{type.index === current}}"></text>
           </div>
         </block>
+        <text class="feebar-text"  @click="toPage('Free')">限时免费</text>
       </div>
     </div>
 
@@ -225,239 +226,6 @@ export default {
 </script>
 
 <style lang="less">
-/* @import "../../assets/less/home.less"; */
-.home-wrap {
-  background-color: #f5f5f5;
-  flex-direction: column;
-  .home_title {
-    height: 112px;
-    background-color: #fff;
-    text {
-      padding: 0 30px;
-      font-size: 36px;
-      color: #E5401C;
-    }
-  }
-  .type-wrap_content {
-    background-color: #fff;
-    .type-wrap {
-      background-color: #fff;
-      margin: 20px 0;
-      flex-direction: row;
-      .type-item {
-        padding: 0 15px;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        position: relative;
-        text {
-          font-size: 30px;
-          color: #d7d7ff;
-        }
-
-        .cur {
-          color: #E5401C;
-          font-size: 36px;
-          font-weight: bold;
-        }
-
-        .choose-bar {
-          width: 38px;
-          height: 4px;
-          background-color: #E5401C;
-          border-radius: 2px;
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-  .free {
-    background-color: #ffffff;
-    width: 100%;
-    padding-top: 10px;
-    .free_warp {
-      margin: 0 auto;
-    }
-  }
-  .entrance_block {
-    background-color: #ffffff;
-    width: 100%;
-    padding: 30px;
-    display: flex;
-    justify-content: space-around;
-    text-align: center;
-    div {
-      flex-direction: column;
-      text {
-        margin-top: 10px;
-        text-align: center;
-      }
-      image {
-        margin: 0 auto;
-        height: 80px;
-        width: 80px;
-      }
-    }
-  }
-
-  .type-bar {
-    background-color: #ffffff;
-    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;
-      }
-    }
-  }
-  .search-bar {
-    padding: 24px;
-
-    .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;
-      }
-    }
-  }
-
-  .swipe-bar {
-    height: 260px;
-    background-color: #fff;
-    .swipe-item {
-      padding: 0px 24px;
-      .swipe-item__info {
-        flex: 1;
-        flex-direction: column;
-        padding-right: 32px;
+@import "../../assets/less/home.less";
 
-        .name {
-          font-size: 32px;
-          color: #333;
-        }
-
-        .intro {
-          font-size: 26px;
-          color: #666;
-          margin-top: 36px;
-          lines: 4;
-          text-overflow: ellipsis;
-        }
-
-        .category {
-          font-size: 24px;
-          color: #32a1ff;
-          margin-top: 10px;
-        }
-      }
-
-      .cover {
-        width: 100%;
-        height: 260px;
-        // flex-basis: 180px;
-        // flex-shrink: 0;
-        // height: 240px;
-        border-radius: 6px;
-      }
-    }
-  }
-
-  .book-list__wrap {
-    padding: 0 24px;
-    flex-direction: column;
-    .book-list_content {
-      border-radius: 20px;
-      padding: 0 24px;
-      flex-direction: column;
-      background-color: white;
-      margin-top: 30px;
-      .book-list__title {
-        background-color: #fff;
-        padding: 40px 0 30px 0;
-        align-items: center;
-        font-size: 30px;
-
-        text {
-          color: #333;
-          font-size: 32px;
-          font-weight: 900;
-        }
-      }
-    }
-  }
-
-  .book-list {
-    flex: 1;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .book-list__multi {
-    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;
-  }
-}
 </style>

src/views/Index/index.ux

@@ -185,7 +185,7 @@ export default {
     this.back_alert = sign_out_app_show
     this.getCoustom()
     this.getUser()
-     this.current = 2;
+    //  this.current = 2;
   },
   goActicity() {
     router.push({