追书yun

src/assets/less/home.less

@@ -19,7 +19,7 @@
       }
 
       .cur {
-        color: #ef5952;
+        color: #3AACFF;
         font-size: 36px;
         font-weight: bold;
       }
@@ -27,7 +27,7 @@
       .choose-bar {
         width: 38px;
         height: 4px;
-        background-color: #ef5952;
+        background-color: #3AACFF;
         border-radius: 2px;
         margin-top: 10px;
       }

src/views/Free/index.ux

@@ -178,7 +178,6 @@ export default {
     align-items: center;
     flex-direction: column;
     position: relative;
-
     text {
       font-size: 30px;
       color: #999;
@@ -186,7 +185,7 @@ export default {
     }
 
     .cur {
-      color: #ef5952;
+      color: #3AACFF;
       font-size: 36px;
       font-weight: bold;
     }
@@ -194,7 +193,7 @@ export default {
     .choose-bar {
       width: 38px;
       height: 4px;
-      background-color: #ef5952;
+      background-color: #3AACFF;
       border-radius: 2px;
       margin-top: 10px;
     }

src/views/Home/index.ux

@@ -5,39 +5,69 @@
     <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="{{type.index === current ? 'cur' : ''}}">{{
+            type.name
+          }}</text>
           <text class="choose-bar" show="{{type.index === current}}"></text>
         </div>
       </block>
+      <div class="search-bar__wrap">
+        <text @click="toCategory">请输入书名或者作者名</text
+        ><image
+          src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"
+        ></image>
+      </div>
     </div>
     <list class="list-content">
-      <list-item type="search" class="search-bar">
-        <div class="search-bar__wrap">
-          <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"></image>
-          <text @click="toCategory">书名</text>
-        </div>
-      </list-item>
       <list-item type="swipe">
         <swiper class="swipe-bar" autoplay="true" indicator="false">
           <block for="b in banner.books">
             <div class="swipe-item">
-              <image class="cover" src="{{b.banner_url}}" @click="pageRouter(b)"></image>
+              <image
+                class="cover"
+                src="{{b.banner_url}}"
+                @click="pageRouter(b)"
+              ></image>
             </div>
           </block>
         </swiper>
       </list-item>
       <list-item type="entrance">
         <div class="entrance_block">
-          <div><image src="../../assets/imgs/home_fl.png" @click="jump('Category')"></image><text>分类</text></div>
-          <div><image src="../../assets/imgs/home_rank.png" @click="jump('Leaderboard')"></image><text>排行榜</text></div>
-          <div><image src="../../assets/imgs/home_free.png" @click="jump('Free')"></image><text>限时免费</text></div>
-          <div><image src="../../assets/imgs/home_pre.png" @click="toMyRead"></image><text>最近阅读</text></div>
+          <div>
+            <image
+              src="../../assets/imgs/home_fl.png"
+              @click="jump('Category')"
+            ></image
+            ><text>分类</text>
+          </div>
+          <div>
+            <image
+              src="../../assets/imgs/home_rank.png"
+              @click="jump('Leaderboard')"
+            ></image
+            ><text>排行榜</text>
+          </div>
+          <div>
+            <image
+              src="../../assets/imgs/home_free.png"
+              @click="jump('Free')"
+            ></image
+            ><text>限时免费</text>
+          </div>
+          <div>
+            <image
+              src="../../assets/imgs/home_pre.png"
+              @click="toMyRead"
+            ></image
+            ><text>最近阅读</text>
+          </div>
         </div>
       </list-item>
       <block for="bookObj in list">
         <list-item type="simple" class="book-list__wrap" if="$idx % 2 === 0">
           <div class="book-list__title">
-            <text>{{bookObj.lable}}</text>
+            <text>{{ bookObj.lable }}</text>
           </div>
           <div class="book-list">
             <block for="book in bookObj.books">
@@ -45,23 +75,32 @@
             </block>
           </div>
         </list-item>
-        <list-item type="multi" class="book-list__wrap book-list__wrap--multi" else>
+        <list-item
+          type="multi"
+          class="book-list__wrap book-list__wrap--multi"
+          else
+        >
           <div class="book-list__title">
             <text class="border"></text>
-            <text>{{bookObj.lable}}</text>
+            <text>{{ bookObj.lable }}</text>
           </div>
           <div class="book-list__line">
             <block for="book in bookObj.books.slice(0, 4)">
-              <x-book multi="{{false}}" width="{{150}}" lines="{{true}}" book="{{book}}"></x-book>
+              <x-book
+                multi="{{false}}"
+                width="{{150}}"
+                lines="{{true}}"
+                book="{{book}}"
+              ></x-book>
             </block>
           </div>
           <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>
+                    <text class="name">{{ book.book_name }}</text>
+                    <text class="intro">{{ book.book_summary }}</text>
                   </div>
                 </x-book>
               </div>
@@ -106,18 +145,18 @@ export default {
   },
   async onInit() {
     await this.getCityListByTabChange();
-    this.$on('refreshData',this.broadevt);
+    this.$on('refreshData', this.broadevt);
     this.$watch('current', 'getCityListByTabChange');
     this.$watch('tabindex', 'watchPropsChange');
   },
   typeChange(index) {
     this.current = index;
   },
-  watchPropsChange(v){
-     if (v === 0) this.getCityListByTabChange(this.current);
+  watchPropsChange(v) {
+    if (v === 0) this.getCityListByTabChange(this.current);
   },
-  async broadevt(evt){
-    if(evt.detail.current==0){
+  async broadevt(evt) {
+    if (evt.detail.current == 0) {
       await this.getCityListByTabChange(this.current);
     }
   },
@@ -136,7 +175,7 @@ export default {
       }
     })
   },
-  toMyRead(){
+  toMyRead() {
     this.$emit('change');
   },
   jump(page) {
@@ -157,7 +196,7 @@ export default {
 <style lang="less">
 /* @import "../../assets/less/home.less"; */
 .home-wrap {
-  background-color: #fff;  
+  background-color: #fff;
   flex-direction: column;
   padding-top: 20px;
   .entrance_block {
@@ -165,25 +204,45 @@ export default {
     padding: 30px;
     display: flex;
     justify-content: space-around;
-    div{
+    div {
       flex-direction: column;
-      text{
+      text {
         margin-top: 10px;
         text-align: center;
       }
     }
     image {
-      width:80px;
-      height:80px;
-      margin:0 auto;
+      width: 80px;
+      height: 80px;
+      margin: 0 auto;
     }
   }
 
   .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;
+      }
+    }
     .type-item {
-      flex: 1;
+      padding: 0 15px;
       justify-content: center;
       align-items: center;
       flex-direction: column;
@@ -192,11 +251,10 @@ export default {
       text {
         font-size: 30px;
         color: #999;
-        // padding: 34px 0;
       }
 
       .cur {
-        color: #ef5952;
+        color: #3aacff;
         font-size: 36px;
         font-weight: bold;
       }
@@ -204,7 +262,7 @@ export default {
       .choose-bar {
         width: 38px;
         height: 4px;
-        background-color: #ef5952;
+        background-color: #3aacff;
         border-radius: 2px;
         margin-top: 10px;
       }