You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
6.0 KiB
306 lines
6.0 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="书城"/>
|
|
|
|
<view class="tabs-container">
|
|
<scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
|
|
<view class="tabs">
|
|
<view class="tab-item" :class="{active: activeTab === 'ranking'}">
|
|
<text>排行榜</text>
|
|
</view>
|
|
<view class="tab-item">
|
|
<text>历史</text>
|
|
</view>
|
|
<view class="tab-item">
|
|
<text>科幻</text>
|
|
</view>
|
|
<view class="tab-item">
|
|
<text>异能</text>
|
|
</view>
|
|
<view class="tab-item">
|
|
<text>逆袭</text>
|
|
</view>
|
|
<view class="tab-item">
|
|
<text>娱乐圈</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="category">
|
|
<view class="left-menu">
|
|
<view class="menu-item active">
|
|
<text>推荐榜</text>
|
|
</view>
|
|
<view class="menu-item">
|
|
<text>完本榜</text>
|
|
</view>
|
|
<view class="menu-item">
|
|
<text>阅读榜</text>
|
|
</view>
|
|
<view class="menu-item">
|
|
<text>口碑榜</text>
|
|
</view>
|
|
<view class="menu-item">
|
|
<text>新书榜</text>
|
|
</view>
|
|
<view class="menu-item">
|
|
<text>高分榜</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right-content">
|
|
<view class="novel-list">
|
|
<view class="novel-item" v-for="(item, index) in novelList" :key="index">
|
|
<view class="rank-number" :class="{'top-rank': index < 3}">
|
|
{{index + 1}}
|
|
</view>
|
|
<view class="novel-cover">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="novel-info">
|
|
<view class="novel-title">{{item.title}}</view>
|
|
<view class="novel-tags">
|
|
<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
|
|
</view>
|
|
<view class="novel-author">{{item.author}}</view>
|
|
</view>
|
|
<view class="novel-status">
|
|
<text>{{item.status}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabber select="category" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: 'ranking',
|
|
novelList: [
|
|
{
|
|
title: '网游之绝世萧尊',
|
|
author: '星梦辰缘',
|
|
cover: '/static/image/novel/cover1.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '完结'
|
|
},
|
|
{
|
|
title: '网游：1级的我，偷窃神明',
|
|
author: '我是解药猫',
|
|
cover: '/static/image/novel/cover2.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '连载中'
|
|
},
|
|
{
|
|
title: '全民网游：我有神级造物主',
|
|
author: '我吃西红柿',
|
|
cover: '/static/image/novel/cover3.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '完结'
|
|
},
|
|
{
|
|
title: '潜伏传说的我，携西罗摩修',
|
|
author: '清风明月',
|
|
cover: '/static/image/novel/cover4.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '完结'
|
|
},
|
|
{
|
|
title: '网游之一杆定乾坤',
|
|
author: '香蕉流文',
|
|
cover: '/static/image/novel/cover5.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '连载中'
|
|
},
|
|
{
|
|
title: '网游之一杆定乾坤',
|
|
author: '香蕉流文',
|
|
cover: '/static/image/novel/cover5.jpg',
|
|
tags: ['玄幻', '校园', '热血'],
|
|
status: '连载中'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
changeTab(tab) {
|
|
this.activeTab = tab;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.tabs-container {
|
|
background-color: #fff;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tabs-scroll {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.tab-item {
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
&.active {
|
|
color: #2b5cff;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background-color: #2b5cff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.category {
|
|
display: flex;
|
|
height: calc(100vh - 240rpx);
|
|
|
|
.left-menu {
|
|
width: 180rpx;
|
|
background-color: #f5f5f5;
|
|
|
|
.menu-item {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
&.active {
|
|
background-color: #fff;
|
|
color: #2b5cff;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6rpx;
|
|
height: 36rpx;
|
|
background-color: #2b5cff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-content {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
overflow-y: auto;
|
|
|
|
.novel-list {
|
|
.novel-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.rank-number {
|
|
width: 40rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
font-weight: bold;
|
|
|
|
&.top-rank {
|
|
color: #ff6b00;
|
|
}
|
|
}
|
|
|
|
.novel-cover {
|
|
width: 120rpx;
|
|
height: 160rpx;
|
|
margin: 0 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.novel-info {
|
|
flex: 1;
|
|
|
|
.novel-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.novel-tags {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
|
|
.tag {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-right: 10rpx;
|
|
|
|
&::before {
|
|
content: '[';
|
|
}
|
|
|
|
&::after {
|
|
content: ']';
|
|
}
|
|
}
|
|
}
|
|
|
|
.novel-author {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.novel-status {
|
|
font-size: 24rpx;
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|