|
@@ -1,22 +1,27 @@
|
|
<template>
|
|
<template>
|
|
<view class="bookshelf-content">
|
|
<view class="bookshelf-content">
|
|
- <view style="position: fixed; z-index: 10; width: 100%; ">
|
|
|
|
- <z-tabs
|
|
|
|
- ref="tabs"
|
|
|
|
- :tabs-style="{height:tab_height + 'rpx'}"
|
|
|
|
- bg-color="#fff"
|
|
|
|
- bar-height="0"
|
|
|
|
- active-color="#FF8EBB"
|
|
|
|
- :active-style="{'font-size': '60rpx', 'font-weight': '500'}"
|
|
|
|
- inactive-color="#3D3D3D"
|
|
|
|
- :inactive-style="{'font-size': '30rpx', 'font-weight': '500'}"
|
|
|
|
- scroll-count="1"
|
|
|
|
- :bottomLineIsShow="false"
|
|
|
|
- :list="tab_list"
|
|
|
|
- :current="tab_current"
|
|
|
|
- @change="tabsChange" />
|
|
|
|
|
|
+ <view class="bookshelf-content__top" :style="{height:top_height+'px'}">
|
|
|
|
+ <view class="bookshelf-content__top__bg">
|
|
|
|
+ <image class="image" src="../../static/imgs/public/img_bg_1.png"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view :style="{marginTop: safeArea_top+'px'}">
|
|
|
|
+ <z-tabs
|
|
|
|
+ ref="tabs"
|
|
|
|
+ :tabs-style="{height:tab_height + 'px'}"
|
|
|
|
+ bg-color="transparent"
|
|
|
|
+ bar-height="0"
|
|
|
|
+ active-color="#FF8EBB"
|
|
|
|
+ :active-style="{'font-size': '60rpx', 'font-weight': '500'}"
|
|
|
|
+ inactive-color="#3D3D3D"
|
|
|
|
+ :inactive-style="{'font-size': '30rpx', 'font-weight': '500'}"
|
|
|
|
+ scroll-count="1"
|
|
|
|
+ :bottomLineIsShow="false"
|
|
|
|
+ :list="tab_list"
|
|
|
|
+ :current="tab_current"
|
|
|
|
+ @change="tabsChange" />
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- <view :style="{marginTop: tab_height + 'rpx'}">
|
|
|
|
|
|
+ <view :style="{marginTop: top_height + 'px'}">
|
|
<bookList :class="tab_current==0?'style_show':'style_hide'"
|
|
<bookList :class="tab_current==0?'style_show':'style_hide'"
|
|
:book_list='data_book_list'
|
|
:book_list='data_book_list'
|
|
@clickBook='gotoReadBook'
|
|
@clickBook='gotoReadBook'
|
|
@@ -43,10 +48,17 @@
|
|
import { ReadRecord } from '../../stores/readRecordManager';
|
|
import { ReadRecord } from '../../stores/readRecordManager';
|
|
import { util } from '../../framework/util';
|
|
import { util } from '../../framework/util';
|
|
|
|
|
|
- let tab_height = ref(100)
|
|
|
|
|
|
+ let tab_height = ref(50)
|
|
let tab_list = ref(['书架','阅读历史'])
|
|
let tab_list = ref(['书架','阅读历史'])
|
|
let tab_current = ref(0) //0:书架 1:阅读历史
|
|
let tab_current = ref(0) //0:书架 1:阅读历史
|
|
|
|
|
|
|
|
+ let safeArea_top = ref(0)
|
|
|
|
+ let top_height = ref(0)
|
|
|
|
+ if(tools.platform == config.Platform.WEIXIN) {
|
|
|
|
+ safeArea_top.value = uni.getSystemInfoSync().safeArea.top
|
|
|
|
+ }
|
|
|
|
+ top_height.value = safeArea_top.value + tab_height.value
|
|
|
|
+
|
|
let data_book_list = ref<Array<book_item_data>>([])
|
|
let data_book_list = ref<Array<book_item_data>>([])
|
|
let data_read_history_list = ref<Array<book_item_data>>([])
|
|
let data_read_history_list = ref<Array<book_item_data>>([])
|
|
|
|
|
|
@@ -260,7 +272,23 @@
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
.bookshelf-content{
|
|
.bookshelf-content{
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column;
|
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ &__top{
|
|
|
|
+ position: fixed;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ &__bg{
|
|
|
|
+ position: absolute;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ width:100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ .image{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.style_show{
|
|
.style_show{
|
|
display: flex;
|
|
display: flex;
|