201206030/novel-front-web
1
0
Fork 0
mirror of https://github.com/201206030/novel-front-web.git synced 2025-04-27 07:50:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 显示优化

Browse Source
This commit is contained in:
xiongxiaoyang 2022-05-16 18:58:03 +08:00
parent dc54f75baf
commit e254462964
2 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/BookClass.vue
View File

@ -164,7 +164,7 @@
<a <a
filter-value="visit_count" filter-value="visit_count"
href="javascript:void(0)" href="javascript:void(0)"
:class="`${sortOn == 'visitcount desc' ? 'on' : ''}`" :class="`${sortOn == 'visit_count desc' ? 'on' : ''}`"
@click="changeSort('visit_count desc')" @click="changeSort('visit_count desc')"
>点击量</a >点击量</a
> >

51
src/views/BookRank.vue
View File

@ -9,7 +9,7 @@
<div class="pad20"> <div class="pad20">
<div class="book_tit"> <div class="book_tit">
<div class="fl"> <div class="fl">
<h3 class="font26 mt5 mb5" id="rankName">{{rankName}}</h3> <h3 class="font26 mt5 mb5" id="rankName">{{ rankName }}</h3>
</div> </div>
<a class="fr"></a> <a class="fr"></a>
</div> </div>
@ -26,27 +26,36 @@
</tr> </tr>
</thead> </thead>
<tbody id="bookRankList"> <tbody id="bookRankList">
<tr v-for="(item,index) in books" :key="index"> <tr v-for="(item, index) in books" :key="index">
<td class="rank"><i :class="'num' + (Number(`${index}`) + 1)">{{index + 1}}</i></td> <td class="rank">
<i :class="'num' + (Number(`${index}`) + 1)">{{
index + 1
}}</i>
</td>
<td class="style"> <td class="style">
<a href="javascript:void(0)" @click="bookDetail(item.id)">[{{item.categoryName}}]</a> <a href="javascript:void(0)" @click="bookDetail(item.id)"
>[{{ item.categoryName }}]</a
>
</td> </td>
<td class="name"> <td class="name">
<a @click="bookDetail(item.id)" href="javascript:void(0)" <a
>{{item.bookName}}</a @click="bookDetail(item.id)"
href="javascript:void(0)"
>{{ item.bookName }}</a
> >
</td> </td>
<td class="chapter"> <td class="chapter">
<a @click="bookDetail(item.id)" href="javascript:void(0)" <a
>{{item.lastChapterName}}</a @click="bookDetail(item.id)"
href="javascript:void(0)"
>{{ item.lastChapterName }}</a
> >
</td> </td>
<td class="author"> <td class="author">
<a href="javascript:void(0)">{{item.authorName}}</a> <a href="javascript:void(0)">{{ item.authorName }}</a>
</td> </td>
<td class="word">{{wordCountFormat(item.wordCount)}}</td> <td class="word">{{ wordCountFormat(item.wordCount) }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -62,9 +71,17 @@
</div> </div>
<div class="rightList2"> <div class="rightList2">
<ul id="rankType"> <ul id="rankType">
<li><a class="on" href="javascript:void(0)" @click="visitRank">点击榜</a></li> <li>
<li><a href="javascript:void(0)" @click="newestRank">新书榜</a></li> <a :class="`${rankType == 1 ? 'on' : ''}`" href="javascript:void(0)" @click="visitRank"
<li><a href="javascript:void(0)" @click="updateRank">更新榜</a></li> >点击榜</a
>
</li>
<li>
<a :class="`${rankType == 2 ? 'on' : ''}`" href="javascript:void(0)" @click="newestRank">新书榜</a>
</li>
<li>
<a :class="`${rankType == 3 ? 'on' : ''}`" href="javascript:void(0)" @click="updateRank">更新榜</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -98,6 +115,7 @@ export default {
const state = reactive({ const state = reactive({
books: [], books: [],
rankName: "点击榜", rankName: "点击榜",
rankType: 1,
}); });
onMounted(() => { onMounted(() => {
visitRank(); visitRank();
@ -107,18 +125,21 @@ export default {
const { data } = await listVisitRankBooks(); const { data } = await listVisitRankBooks();
state.books = data; state.books = data;
state.rankName = "点击榜"; state.rankName = "点击榜";
state.rankType = 1;
}; };
const newestRank = async () => { const newestRank = async () => {
const { data } = await listNewestRankBooks(); const { data } = await listNewestRankBooks();
state.books = data; state.books = data;
state.rankName = "新书榜"; state.rankName = "新书榜";
state.rankType = 2;
}; };
const updateRank = async () => { const updateRank = async () => {
const { data } = await listUpdateRankBooks(); const { data } = await listUpdateRankBooks();
state.books = data; state.books = data;
state.rankName = "更新榜"; state.rankName = "更新榜";
state.rankType = 3;
}; };
const bookDetail = (bookId) => { const bookDetail = (bookId) => {
@ -130,7 +151,7 @@ export default {
bookDetail, bookDetail,
newestRank, newestRank,
visitRank, visitRank,
updateRank updateRank,
}; };
}, },
computed: { computed: {