|
@@ -1,16 +1,21 @@
|
|
<import name="x-book" src="../../components/book/book.ux"></import>
|
|
<import name="x-book" src="../../components/book/book.ux"></import>
|
|
-
|
|
+
|
|
<template>
|
|
<template>
|
|
<div class="home-wrap">
|
|
<div class="home-wrap">
|
|
|
|
+ <div class="type-wrap_content">
|
|
|
|
+ <div class="type-wrap">
|
|
|
|
+ <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>
|
|
|
|
+
|
|
<div class="type-bar">
|
|
<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 class="search-bar__wrap">
|
|
<div class="search-bar__wrap">
|
|
<text @click="toCategory">请输入书名或者作者名</text
|
|
<text @click="toCategory">请输入书名或者作者名</text
|
|
><image
|
|
><image
|
|
@@ -18,6 +23,7 @@
|
|
></image>
|
|
></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<list class="list-content">
|
|
<list class="list-content">
|
|
<list-item type="swipe">
|
|
<list-item type="swipe">
|
|
<swiper class="swipe-bar" autoplay="true" indicator="false">
|
|
<swiper class="swipe-bar" autoplay="true" indicator="false">
|
|
@@ -36,43 +42,42 @@
|
|
<div class="entrance_block">
|
|
<div class="entrance_block">
|
|
<div>
|
|
<div>
|
|
<image
|
|
<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"
|
|
src="../../assets/imgs/home_free.png"
|
|
@click="jump('Free')"
|
|
@click="jump('Free')"
|
|
- ></image
|
|
+ ></image>
|
|
- ><text>限时免费</text>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <image
|
|
|
|
- src="../../assets/imgs/home_pre.png"
|
|
|
|
- @click="toMyRead"
|
|
|
|
- ></image
|
|
|
|
- ><text>最近阅读</text>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</list-item>
|
|
</list-item>
|
|
|
|
+
|
|
<block for="bookObj in list">
|
|
<block for="bookObj in list">
|
|
- <list-item type="simple" class="book-list__wrap" if="$idx % 2 === 0">
|
|
+ <list-item type="simple" class="book-list__wrap" if="$idx % 3 === 0">
|
|
- <div class="book-list__title">
|
|
+ <div class="book-list_content">
|
|
- <text>{{ bookObj.lable }}</text>
|
|
+ <div class="book-list__title">
|
|
- </div>
|
|
+ <text class="border"></text>
|
|
- <div class="book-list">
|
|
+ <text>{{ bookObj.lable }}</text>
|
|
- <block for="book in bookObj.books">
|
|
+ </div>
|
|
- <x-book multi="{{false}}" book="{{book}}"></x-book>
|
|
+ <div class="book-list__multi">
|
|
- </block>
|
|
+ <block for="book in bookObj.books.slice(4)">
|
|
|
|
+ <div class="book-item">
|
|
|
|
+ <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>
|
|
|
|
+ </div>
|
|
|
|
+ </x-book>
|
|
|
|
+ </div>
|
|
|
|
+ </block>
|
|
|
|
+ </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>
|
|
|
|
+ </block>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</list-item>
|
|
</list-item>
|
|
<list-item
|
|
<list-item
|
|
@@ -80,31 +85,15 @@
|
|
class="book-list__wrap book-list__wrap--multi"
|
|
class="book-list__wrap book-list__wrap--multi"
|
|
else
|
|
else
|
|
>
|
|
>
|
|
- <div class="book-list__title">
|
|
+ <div class="book-list_content">
|
|
- <text class="border"></text>
|
|
+ <div class="book-list__title">
|
|
- <text>{{ bookObj.lable }}</text>
|
|
+ <text>{{ bookObj.lable }}</text>
|
|
- </div>
|
|
+ </div>
|
|
- <div class="book-list__line">
|
|
+ <div class="book-list">
|
|
- <block for="book in bookObj.books.slice(0, 4)">
|
|
+ <block for="book in bookObj.books">
|
|
- <x-book
|
|
+ <x-book multi="{{false}}" book="{{book}}"></x-book>
|
|
- multi="{{false}}"
|
|
+ </block>
|
|
- width="{{150}}"
|
|
+ </div>
|
|
- 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}}">
|
|
|
|
- <div class="book-info__multi">
|
|
|
|
- <text class="name">{{ book.book_name }}</text>
|
|
|
|
- <text class="intro">{{ book.book_summary }}</text>
|
|
|
|
- </div>
|
|
|
|
- </x-book>
|
|
|
|
- </div>
|
|
|
|
- </block>
|
|
|
|
</div>
|
|
</div>
|
|
</list-item>
|
|
</list-item>
|
|
</block>
|
|
</block>
|
|
@@ -112,12 +101,11 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-
|
|
|
|
<script>
|
|
<script>
|
|
-import { getHomeList } from "../../api";
|
|
+import { getHomeList } from '../../api'
|
|
|
|
|
|
-import storage from '@system.storage';
|
|
+import storage from '@system.storage'
|
|
-import router from '@system.router';
|
|
+import router from '@system.router'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
props: {
|
|
props: {
|
|
@@ -130,11 +118,11 @@ export default {
|
|
return {
|
|
return {
|
|
typeList: [
|
|
typeList: [
|
|
{
|
|
{
|
|
- name: "男生",
|
|
+ name: '男生',
|
|
index: 0
|
|
index: 0
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: "女生",
|
|
+ name: '女生',
|
|
index: 1
|
|
index: 1
|
|
}
|
|
}
|
|
],
|
|
],
|
|
@@ -144,26 +132,26 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
async onInit() {
|
|
async onInit() {
|
|
- await this.getCityListByTabChange();
|
|
+ await this.getCityListByTabChange()
|
|
- this.$on('refreshData', this.broadevt);
|
|
+ this.$on('refreshData', this.broadevt)
|
|
- this.$watch('current', 'getCityListByTabChange');
|
|
+ this.$watch('current', 'getCityListByTabChange')
|
|
- this.$watch('tabindex', 'watchPropsChange');
|
|
+ this.$watch('tabindex', 'watchPropsChange')
|
|
},
|
|
},
|
|
typeChange(index) {
|
|
typeChange(index) {
|
|
- this.current = index;
|
|
+ this.current = index
|
|
},
|
|
},
|
|
watchPropsChange(v) {
|
|
watchPropsChange(v) {
|
|
- if (v === 0) this.getCityListByTabChange(this.current);
|
|
+ if (v === 0) this.getCityListByTabChange(this.current)
|
|
},
|
|
},
|
|
async broadevt(evt) {
|
|
async broadevt(evt) {
|
|
if (evt.detail.current == 0) {
|
|
if (evt.detail.current == 0) {
|
|
- await this.getCityListByTabChange(this.current);
|
|
+ await this.getCityListByTabChange(this.current)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
toCategory() {
|
|
toCategory() {
|
|
//this.$emit('change');
|
|
//this.$emit('change');
|
|
router.push({
|
|
router.push({
|
|
- uri: '/views/Search',
|
|
+ uri: '/views/Search'
|
|
})
|
|
})
|
|
},
|
|
},
|
|
pageRouter(page) {
|
|
pageRouter(page) {
|
|
@@ -176,19 +164,19 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
toMyRead() {
|
|
toMyRead() {
|
|
- this.$emit('change');
|
|
+ this.$emit('change')
|
|
},
|
|
},
|
|
jump(page) {
|
|
jump(page) {
|
|
router.push({
|
|
router.push({
|
|
- uri: '/views/' + page,
|
|
+ uri: '/views/' + page
|
|
})
|
|
})
|
|
},
|
|
},
|
|
async getCityListByTabChange(index = 1) {
|
|
async getCityListByTabChange(index = 1) {
|
|
- await storage.set({ key: "sex", value: index || 0 });
|
|
+ await storage.set({ key: 'sex', value: index || 0 })
|
|
- let sex = index ? "female" : "male";
|
|
+ let sex = index ? 'female' : 'male'
|
|
- let ret = await getHomeList(sex);
|
|
+ let ret = await getHomeList(sex)
|
|
- this.banner = ret.slice(0, 1)[0];
|
|
+ this.banner = ret.slice(0, 1)[0]
|
|
- this.list = ret.slice(1);
|
|
+ this.list = ret.slice(1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -196,10 +184,44 @@ export default {
|
|
<style lang="less">
|
|
<style lang="less">
|
|
/* @import "../../assets/less/home.less"; */
|
|
/* @import "../../assets/less/home.less"; */
|
|
.home-wrap {
|
|
.home-wrap {
|
|
- background-color: #fff;
|
|
+ background-color: #f5f5f5;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- padding-top: 20px;
|
|
+ .type-wrap_content {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ .type-wrap {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ 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: #999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .cur {
|
|
|
|
+ color: #000000;
|
|
|
|
+ font-size: 36px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .choose-bar {
|
|
|
|
+ width: 38px;
|
|
|
|
+ height: 4px;
|
|
|
|
+ background-color: #1082fe;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.entrance_block {
|
|
.entrance_block {
|
|
|
|
+ background-color: #ffffff;
|
|
width: 100%;
|
|
width: 100%;
|
|
padding: 30px;
|
|
padding: 30px;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -210,11 +232,10 @@ export default {
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
- }
|
|
+ image {
|
|
- image {
|
|
+ height: 83px;
|
|
- width: 80px;
|
|
+ width: 690px;
|
|
- height: 80px;
|
|
+ }
|
|
- margin: 0 auto;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -241,32 +262,6 @@ export default {
|
|
color: #999;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .type-item {
|
|
|
|
- padding: 0 15px;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- flex-direction: column;
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- text {
|
|
|
|
- font-size: 30px;
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .cur {
|
|
|
|
- color: #3aacff;
|
|
|
|
- font-size: 36px;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .choose-bar {
|
|
|
|
- width: 38px;
|
|
|
|
- height: 4px;
|
|
|
|
- background-color: #3aacff;
|
|
|
|
- border-radius: 2px;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.search-bar {
|
|
.search-bar {
|
|
@@ -296,8 +291,8 @@ export default {
|
|
|
|
|
|
.swipe-bar {
|
|
.swipe-bar {
|
|
height: 260px;
|
|
height: 260px;
|
|
- // background-color: #fff;
|
|
+ background-color: #fff;
|
|
-
|
|
+ border-radius: 20px;
|
|
.swipe-item {
|
|
.swipe-item {
|
|
padding: 0px 24px;
|
|
padding: 0px 24px;
|
|
|
|
|
|
@@ -338,18 +333,25 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.book-list__wrap {
|
|
.book-list__wrap {
|
|
- background-color: #fff;
|
|
|
|
- // margin-top: 24px;
|
|
|
|
padding: 0 24px;
|
|
padding: 0 24px;
|
|
flex-direction: column;
|
|
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;
|
|
|
|
|
|
- .book-list__title {
|
|
+ text {
|
|
- padding: 30px 0;
|
|
+ color: #333;
|
|
- align-items: center;
|
|
+ font-size: 32px;
|
|
-
|
|
+ font-weight: 900;
|
|
- text {
|
|
+ }
|
|
- color: #333;
|
|
|
|
- font-size: 32px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -362,7 +364,6 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.book-list__multi {
|
|
.book-list__multi {
|
|
- margin-top: 30px;
|
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
|
|
.book-item {
|
|
.book-item {
|