Browse Source

东西湖新书推荐显示问题

master
xuhuajiao 10 months ago
parent
commit
b068e40355
  1. 171
      src/views/newBookRecommend/index-old.vue
  2. 769
      src/views/newBookRecommend/index.vue

171
src/views/newBookRecommend/index-old.vue

@ -0,0 +1,171 @@
<template>
<!-- 新书推荐 -->
<div class="screen-item lending-ranking">
<div class="common-title">图书推荐</div>
<div ref="newbook" class="big-module module-content">
<swiper v-if="rankingList.length > 1" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
<div class="newbook-list-item">
<div class="book-img">
<img :src="item.cover" :onerror="defaultImg">
</div>
<div class="book-info">
<h4 class="title-item">{{ item.nbName }}</h4>
<p>{{ item.nbAuthor }}</p>
</div>
<!-- <div class="ranking-num">
<svg v-if="index === 0" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no1" />
</svg>
<svg v-if="index === 1" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no21" />
</svg>
<svg v-if="index === 2" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no3" />
</svg>
<p>NO.{{ index+1 }}</p>
</div> -->
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// import data from './data.json'
export default {
name: 'NewBookRecommend',
components: {
swiper,
swiperSlide
},
data() {
return {
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
rankingList: [],
swiperOptionThumbs: {
loopedSlides: 6,
direction: 'vertical',
slidesPerView: 6,
slidesPerGroup: 6,
slidesPerColumn: 2,
autoplay: true
// centeredSlides: true,
// autoScrollOffset: true
}
}
},
computed: {
swiper() {
return this.$refs.swiperThumbs.swiper
}
},
created() {
},
mounted() {
// this.rankingList = data
this.getNewBookRecommend()
},
methods: {
getNewBookRecommend() {
const params = {
libcode: this.libcode,
pageNo: 1,
pageSize: 100
}
FetchNewBookRecommend(params).then(res => {
if (res.errCode === 0) {
let data = []
data = res.data.newbookList
data.forEach(item => {
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
})
} else {
this.$message.error('接口错误')
}
})
},
getCoverByISBN(isbn, item) {
const params = {
isbn: isbn
}
FetchCoverByISBN(params).then((res) => {
console.log(res)
// item.cover = window.URL.createObjectURL(res)
if (res) {
// item.cover = window.URL.createObjectURL(res)
item.cover = res
} else {
item.cover = ''
}
this.rankingList.push(item)
})
}
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
// .screen-main .lending-ranking .module-content{
// padding: 0 .25rem !important;
// }
.swiper-container{
overflow: hidden;
}
.swiper {
width: 100%;
height: 6rem !important;
margin: .4rem 0;
overflow: hidden;
&.gallery-thumbs .swiper-slide {
width: calc(100% / 3);
height: 2.8rem !important;
// padding: .1rem 0 0 0;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
// &.gallery-thumbs .swiper-slide-active {
// // background-color: #09194B;
// }
}
.newbook-list-item{
.book-img{
width: 1.325rem;
height: 1.775rem;
background: url('~@/assets/images/default-img.png') no-repeat center center;
background-size: contain;
display: flex;
align-items: center;
overflow: hidden;
margin: 0 auto 0.25rem auto;
img{
display: block;
width: 100%;
// height: 100%;
}
}
.book-info{
h4{
font-size: 0.25rem;
line-height: .3rem;
font-weight: normal;
}
p{
font-size: 0.2rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>

769
src/views/newBookRecommend/index.vue

@ -3,31 +3,33 @@
<div class="screen-item lending-ranking"> <div class="screen-item lending-ranking">
<div class="common-title">图书推荐</div> <div class="common-title">图书推荐</div>
<div ref="newbook" class="big-module module-content"> <div ref="newbook" class="big-module module-content">
<swiper v-if="rankingList.length > 1" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
<div class="newbook-list-item">
<!-- 按6个一组拆分后渲染,每组是一屏(3列2行) -->
<swiper v-if="groupedList.length > 0" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
<swiper-slide v-for="(group, groupIndex) in groupedList" :key="groupIndex" class="screen-group">
<!-- 每组内部:3列2行布局 -->
<div class="book-grid">
<div v-for="(item) in group" :key="item.nbId" class="newbook-list-item">
<div class="book-img"> <div class="book-img">
<img :src="item.cover" :onerror="defaultImg">
<img :src="item.cover" :onerror="defaultImg" alt="图书封面">
</div> </div>
<div class="book-info"> <div class="book-info">
<h4 class="title-item">{{ item.nbName }}</h4> <h4 class="title-item">{{ item.nbName }}</h4>
<p>{{ item.nbAuthor }}</p>
<p class="author-item">{{ item.nbAuthor }}</p>
</div>
</div>
<!-- 补全空卡片:保证每组都是6个,布局整齐 -->
<div v-for="empty in 6 - group.length" :key="`empty-${groupIndex}-${empty}`" class="newbook-list-item empty-card">
<div class="book-img" />
<div class="book-info" />
</div> </div>
<!-- <div class="ranking-num">
<svg v-if="index === 0" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no1" />
</svg>
<svg v-if="index === 1" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no21" />
</svg>
<svg v-if="index === 2" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no3" />
</svg>
<p>NO.{{ index+1 }}</p>
</div> -->
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<!-- 数据不足兜底 -->
<div v-else class="empty-tip">
暂无推荐图书
</div>
</div> </div>
</div> </div>
</template> </template>
@ -36,136 +38,725 @@
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library' import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library'
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
// import data from './data.json'
export default { export default {
name: 'NewBookRecommend', name: 'NewBookRecommend',
components: {
swiper,
swiperSlide
},
components: { swiper, swiperSlide },
data() { data() {
return { return {
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
rankingList: [],
swiperOptionThumbs: {
loopedSlides: 6,
direction: 'vertical',
slidesPerView: 6,
slidesPerGroup: 6,
slidesPerColumn: 2,
autoplay: true
// centeredSlides: true,
// autoScrollOffset: true
}
rankingList: []
} }
}, },
computed: { computed: {
swiper() {
return this.$refs.swiperThumbs.swiper
// 核心:将原始数据按6个一组拆分(解决Swiper多行计算bug)
groupedList() {
const list = [...this.rankingList]
const groups = []
// 每6个拆成一组
for (let i = 0; i < list.length; i += 6) {
const group = list.slice(i, i + 6)
groups.push(group)
} }
return groups
}, },
created() {
// Swiper配置:竖向滚动,每次滑1组(1屏)
swiperOptionThumbs() {
return {
direction: 'vertical',
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 0, // 必须设为0,避免间距叠加
height: 540, // 与容器高度严格一致
loop: false,
autoplay: true,
observer: true,
observeParents: true,
autoHeight: false, // 强制关闭自动高度
roundLengths: true, // 四舍五入像素,避免小数偏移
preventClicks: false, // 防止点击干扰滚动计算
// 关键:关闭触摸滑动的惯性,避免手动滑动导致的偏移
freeMode: false,
freeModeMomentum: false,
// 强制滚动到整屏,不允许停在半屏
slidesOffsetBefore: 0,
slidesOffsetAfter: 0
}
},
swiper() {
return this.$refs.swiperThumbs?.swiper
}
}, },
mounted() { mounted() {
// this.rankingList = data
this.getNewBookRecommend() this.getNewBookRecommend()
}, },
methods: { methods: {
getNewBookRecommend() {
async getNewBookRecommend() {
try {
const params = { const params = {
libcode: this.libcode, libcode: this.libcode,
pageNo: 1, pageNo: 1,
pageSize: 100 pageSize: 100
} }
FetchNewBookRecommend(params).then(res => {
console.log('params', params)
const res = await FetchNewBookRecommend(params)
// const res = {
// 'errCode': 0,
// 'errMsg': 'ok',
// 'data': {
// 'newbookList': [
// {
// 'nbId': '2c96809799e5c33c019b073b5daf04f4',
// 'libcode': '1201',
// 'nbName': '1第二人生:找到重新定义人生的智慧',
// 'nbExplain': '本书是写给每一个需要进行人生转型的读者的原创作品,旨在通过“人生教练”这一独特的教练方式帮助读者重新认识自己,成功实现转型,更科学地去达成人生的蜕变和突破。书中不仅提供了一系列人生教练的专业工具、方法和练习,帮助读者进行人生转型的探索和实践;还探讨了人的力量从何而来,如何获得。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:27:33.313+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '秦加一',
// 'nbBooktype': '图书',
// 'sortmark': 'B821-49/1793',
// 'isbn': '978-7-5596-7891-1',
// 'nbPublisher': '北京联合出版公司',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073e896d04f6',
// 'libcode': '1201',
// 'nbName': '中国艺术常识',
// 'nbExplain': '本书辑录了李叔同先生对中西绘画、书法、篆刻历代经典名作的赏析讲评。同时,读者也可通过本书,学到先生亲授的绘画与书法技法,倾听先生论述文学与音乐的艺术。一代文化宗师李叔同先生,是第一位将西洋绘画、音乐、话剧、广告图案设计、现代木刻和西洋术史引进中国的文艺先驱者,也是最早采用“人体写生教学法”,首倡改良中国画的艺术教育家,同时也是我国著名的书画家、书法家、金石篆刻家,其书法、篆刻作品享誉中国,鲁迅、郭沫若等现代文化名人以得到先生的一幅字画为无上荣耀。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:26:54.420+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '李叔同',
// 'nbBooktype': '图书',
// 'sortmark': 'J12/13',
// 'isbn': '978-7-5020-9795-0',
// 'nbPublisher': '应急管理出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073fa8b404f7',
// 'libcode': '1201',
// 'nbName': '财富跃迁:实战手册',
// 'nbExplain': '本书分“认知篇”“方法篇”“周期篇”“实战篇”“误区篇”“未来篇”以及“番外篇”六大部分,是作者作为一个投资人多年的实战干货,在本书中作者深入浅出分析实战案例,教会普通人如何在守住金钱的基础上,快速掌握财富底层规律,让财富实现倍数跃迁。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:26:08.467+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '靳岩',
// 'nbBooktype': '图书',
// 'sortmark': 'F830.59/232',
// 'isbn': '978-7-5236-0600-1',
// 'nbPublisher': '中国科学技术出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0752c2b70508',
// 'libcode': '1201',
// 'nbName': '丛林故事',
// 'nbExplain': '《丛林故事》是英国第一位诺贝尔文学奖得主吉卜林的脍炙人口的世界文学名著,共16个短篇,分为“丛林故事”和“续集”两部分。第一部分的9篇讲述主人公狼孩毛葛利在动物世界中的成长经历,最后又回归文明世界的故事;第二部分的7篇相互独立,场景不再局限于热带丛林,故事发生地遍及极地冰原、海洋世界、南亚山麓、军营等。作品通过“兽语禽言”,以动物世界折射人类社会,其雄浑的思想、奇巧的想象,以及诗文并茂的文本形式,令这本书不仅可读,仿佛还可听、可吟、可视,百年来其魅力经久不衰,早已超越儿童文学的范畴。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:21:33.923+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '(英)鲁德亚德·吉卜林(Rudyard Kipling)著',
// 'nbBooktype': '图书',
// 'sortmark': 'I561.84/456',
// 'isbn': '978-7-5327-9277-1',
// 'nbPublisher': '上海译文出版社有限公司',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b075255670507',
// 'libcode': '1201',
// 'nbName': '闪闪的红星',
// 'nbExplain': '《闪闪的红星》讲述了潘冬子在革命前辈的指引和帮助下,由一个普通的农家少年逐渐成长为坚定的革命者的故事,情节感人至深、语言生动活泼,自问世以来,深受读者的喜爱,广为流传。小主人公潘冬子豪爽、善良、智勇双全,是我们小学生学习的楷模;潘冬子热爱祖国和大无畏的革命精神影响了一代又一代中国儿童。这本书有助于少年儿童继承光荣的革命传统,树立正确的价值观,培养勇敢、坚强、善良的优秀品质,是一部不可多得的红色经典名著。\r\n',
// 'createTime': '2025-12-10T08:13:14.983+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:13:14.983+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '李心田著',
// 'nbBooktype': '图书',
// 'sortmark': 'I287.45/2970',
// 'isbn': '978-7-5702-2851-5',
// 'nbPublisher': '长江文艺出版社',
// 'nbPublisherdate': '2022',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0751d1b50506',
// 'libcode': '1201',
// 'nbName': '揭秘长江黄河',
// 'nbExplain': '长江和黄河是中国的母亲河,中华民族的悠久历史离不开这两条河流的哺育。本书向孩子介绍了黄河和长江的概貌、历史文化、地域风俗等,包括地理知识、历史故事、神话传说、名胜古迹、动植物百科等,用全景式的插图再现黄河和长江各个流域的自然风貌,让孩子直观感受中国的地大物博和厚重历史。此外,书中还用超大折页和80多个趣味翻翻页,让孩子在互动阅读中了解江河文明,增强文化自信。\r\n',
// 'createTime': '2025-12-10T08:12:41.270+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:12:41.270+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨明,张晓红文',
// 'nbBooktype': '图书',
// 'sortmark': 'K928.42-49/7',
// 'isbn': ' 978-7-5417-7604-5',
// 'nbPublisher': '未来出版社',
// 'nbPublisherdate': '2023',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0750f3290504',
// 'libcode': '1201',
// 'nbName': '从统治天空的翼龙到称霸海洋的巨怪',
// 'nbExplain': '1亿年前,地球上除了恐龙以外,还充满了大量神奇而有趣的动物。统治天空的是翼龙类。其中不乏肉食性的庞然大物,比如哈特兹哥翼龙,当然也有靠捕食昆虫为生的小家伙,比如天生的空中杂技演员蛙嘴龙。海洋和河流中生活着各种各样的水生爬行动物。包括海豚一样的鱼龙类,拥有巨大颌部的沧龙类,以及长脖子的蛇颈龙类。其中一些体形超乎寻常的庞大,除了海怪,似乎再也找不到能够形容的合适词汇。现在,一起进入爬行动物的中生代,踏上从天空到海洋的奇幻之旅吧!\r\n',
// 'createTime': '2025-12-10T08:11:44.297+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:11:44.297+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '(瑞典)约翰·伊格克朗茨(Johan Egerkrans)绘著 ',
// 'nbBooktype': '图书',
// 'sortmark': 'Q915.864-49/89',
// 'isbn': '978-7-02-018036-3',
// 'nbPublisher': '人民文学出版社',
// 'nbPublisherdate': '2023',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b074ef9520502',
// 'libcode': '1201',
// 'nbName': '孩子常问的500个为什么.奇妙的科学',
// 'nbExplain': '《孩子常问的500个为什么:奇妙的科学》:消防车为什么要穿“红衣服”?高速公路上为什么很少有路灯?橡皮为什么可以擦掉铅笔字?让我们一起去奇妙的科学世界里寻找答案吧!五花八门的交通工具、便捷实用的电器、各式各样的生活用品……它们身上蕴藏着有趣的科学奥秘,让我们一起来了解身边的科学常识,尽情感受科学的魅力吧!\r\n',
// 'createTime': '2025-12-10T08:09:34.803+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:09:34.803+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '吕昀珊,曲美霞主编',
// 'nbBooktype': '图书',
// 'sortmark': 'Z228.1/733:6',
// 'isbn': '978-7-5736-1739-2',
// 'nbPublisher': '青岛出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b074c2f140501',
// 'libcode': '1201',
// 'nbName': '幽灵飞船',
// 'nbExplain': '本系列以小学1-3年级学生为读者对象,由知名少儿科幻作家马传思担任主编,精选了国内外经典的科幻小说,内容囊括未来科技、宇宙探索、星际文明等主题,旨在激发孩子的想象力和好奇心,初步培养科幻思维,激发他们对科学的热爱和对人类未来的思考,同时提升其阅读水平和科学素养。本册聚焦人工智能、机器人、虚拟现实等当前正在快速发展并深刻影响人类社会的新兴科技,精选吴岩、宝树、赵华等科幻作家的作品,如《来自外星人的报告》《出埃及记》《钻石透镜》《从天而降的雪花球》《幽灵飞船》《第一次接触》等。本书结构形式简洁自然,既能让读者享受自主阅读的乐趣,又能帮助其对作品主题、创意、背景等进行拓展理解。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:08:36.597+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '马传思主编',
// 'nbBooktype': '图书',
// 'sortmark': 'I287.45/3092:4',
// 'isbn': '978-7-5337-8997-8',
// 'nbPublisher': '安徽科学技术出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b074a79540500',
// 'libcode': '1201',
// 'nbName': '麦小米的100个烦恼.特别的心事',
// 'nbExplain': '“麦小米的100个烦恼”系列是专门写给小学生的校园成长故事。凯叔和麦大米根据一万多份小学生调查问卷,将小学生的烦恼用三个女孩的日记呈现出来,一篇一烦恼,一篇一成长。内容涉及儿童在前青春期(7-11岁)的情绪、学习、人际关系,比如亲子关系、同伴关系等方面,所烦恼的问题。小学生读者阅读此书,能够找到强烈的情感共鸣,纾解他们在学习和生活中的压力,培养积极乐观的思维方式,陪伴他们与烦恼和解,快乐成长。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:05:35.893+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '凯叔,麦大米著',
// 'nbBooktype': '图书',
// 'sortmark': 'I287.5/1296:11',
// 'isbn': '978-7-5148-8625-2',
// 'nbPublisher': '中国少年儿童新闻出版总社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0748f73104ff',
// 'libcode': '1201',
// 'nbName': '漫画二十四史:少年版',
// 'nbExplain': '《漫画二十四史》从我国各朝史书汇成的“二十四史”中选取精华篇目,用少年儿童喜爱的方式进行编写。在遵循原著的基础上,作者对语言进行了通俗化、趣味化处理,每篇文章前面都加入了独到的领读感想,带领小读者更快地进入故事之中;篇末设置了“知识链接”和“成语小课堂”栏目,帮助小读者掌握好历史文化小知识。文中的漫画插图为全书增添了更多趣味,写实又精美的插画还原了历史现场,幽默的人物对话活跃了气氛,更加吸引小读者进入沉浸式的阅读体验中。\r\n',
// 'createTime': null,
// 'creater': null,
// 'updateTime': '2025-12-10T08:04:07.553+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '李妍编著',
// 'nbBooktype': '图书',
// 'sortmark': 'K204.1/22:4',
// 'isbn': '978-7-5139-4167-9',
// 'nbPublisher': '民主与建设出版社有限责任公司',
// 'nbPublisherdate': '2023',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0747d96004fe',
// 'libcode': '1201',
// 'nbName': '沿着黄河学非遗',
// 'nbExplain': '保护好、传承好、弘扬好非遗,要从孩子们抓起,让他们懂得非遗是什么、各省的国家级非遗项目是怎样的,从而让非遗保护意识深入人心,让孩子们从非遗中汲取文化自信,成为有知识、有底蕴、有志向的中国少年。本系列丛书即是基于这些方面策划的。本书选择黄河流经部分地市的代表性非遗项目,以图文并茂的方式呈现,是为青少年量身打造的原创非物质文化遗产读物。\r\n',
// 'createTime': '2025-12-10T08:01:47.873+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:01:47.873+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '郑军,徐丽慧文',
// 'nbBooktype': '图书',
// 'sortmark': 'G127.2/3',
// 'isbn': '978-7-5474-4916-5',
// 'nbPublisher': '山东画报出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b07472c3304fd',
// 'libcode': '1201',
// 'nbName': '世界真奇妙:100+个你闻所未闻的妙趣事实.第二辑',
// 'nbExplain': '你知道这些知识吗?你知道吗?有时候月球上的温度比沸水的温度还高,蜗牛可以沿着刀锋爬行而不割伤自己,一些树栖蛇能在空中滑翔24米……全书内容丰富、包罗万象,涉及天文、地理、动物、植物、自然、人体、生活、历史、前沿科技等方方面面。上万幅实图、上万张手绘,脑洞大开的图片带孩子享受视觉的盛宴,一窥科学的真容。时尚前沿的设计版式,让孩子从小培养艺术审美。\r\n',
// 'createTime': '2025-12-10T08:01:03.537+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T08:01:03.537+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '美国国家地理学会著',
// 'nbBooktype': '图书',
// 'sortmark': 'Z271.2/12:1',
// 'isbn': '978-7-5583-3621-8',
// 'nbPublisher': '新世纪出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0744957004fc',
// 'libcode': '1201',
// 'nbName': '这本书可能救你的命:幽默有趣的人体维修指南:everyday health hacks to worry less and live better',
// 'nbExplain': '本书从肠道、心脏、肺、触觉、视觉、听觉、免疫系统等方方面面入手,总结了人体的一些奇怪而奇妙的功能,并提供了实用的建议来帮助你如何获得更健康的身体。\r\n',
// 'createTime': '2025-12-10T07:58:13.870+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:58:13.870+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '(英)卡兰·拉詹(Karan Rajan)著 , 胡小锐译',
// 'nbBooktype': '图书',
// 'sortmark': 'R161/239',
// 'isbn': '978-7-5217-6957-9 ',
// 'nbPublisher': '中信出版集团股份有限公司',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0742943604fb',
// 'libcode': '1201',
// 'nbName': '稳固的幸福感:阿德勒谈自我超越与人生课题',
// 'nbExplain': '本书从“目的论”出发,依次拆解了自卑与补偿、生活风格、社会兴趣、创造性自我、课题分离等阿德勒心理学中的核心观点。作者从自身的经验与理解出发,探讨了我们应该如何放弃全能幻想,学会做一个普通人;作为人格核心的四种生活风格是如何形成和影响我们的;如何建立滋养型而非消耗型的人际关系等。\r\n',
// 'createTime': '2025-12-10T07:56:02.487+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:56:02.487+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '胡慎之',
// 'nbBooktype': '图书',
// 'sortmark': 'C912.6-0/24',
// 'isbn': '978-7-5596-7508-8?',
// 'nbPublisher': '北京联合出版公司',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0741c9fe04fa',
// 'libcode': '1201',
// 'nbName': '养生有时节',
// 'nbExplain': '本书主要介绍运用中医理念进行养生保健的一些思想理论和操作方法, 包括了不同季节下的养生思路、不同节气中的养生方法、针对五脏的养生、在日常饮食起居中的养生建议等内容, 针对特定时令、特定身体状态、特定人群分别提出不同的养生方法, 让广大读者都能从书中获得适合自身的养生保健知识, 也对中医传统医理起到了普及与推广作用。\r\n',
// 'createTime': '2025-12-10T07:55:10.717+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:55:10.717+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '董洪涛',
// 'nbBooktype': '图书',
// 'sortmark': 'R212/191',
// 'isbn': '978-7-5551-2386-6',
// 'nbPublisher': '广西科学技术出版社',
// 'nbPublisherdate': '2025',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b0741474204f9',
// 'libcode': '1201',
// 'nbName': '22玩转视频号',
// 'nbExplain': '近几年,随着互联网技术的不断发展,短视频新媒体成为主流传播方式之一,其快速、生动、简洁的特点吸引着越来越多的用户。其所具有的商业化潜力和价值也得到越来越多的显现。《玩转视频号》一书,是作者基于个人微信视频号“@晴天讲段子”的账号经验和自身多年从事互联网相关工作的经验相结合而输出的,以短视频营销方法为主要内容的实用手册,适合懂互联网知识、有营销基础的读者学习,对互联网知识感兴趣、想要学习短视频营销的读者也可通过此书获得入门钥匙。\r\n',
// 'createTime': '2025-12-10T07:54:37.250+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:54:37.250+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '金满铮',
// 'nbBooktype': '图书',
// 'sortmark': 'F713.365.2/315',
// 'isbn': '978-7-5521-2482-8',
// 'nbPublisher': '内蒙古文化出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b074047f604f8',
// 'libcode': '1201',
// 'nbName': '山有扶苏:美得窒息的诗经:汉英对照',
// 'nbExplain': '2种语言的韵律融合,惊艳3000年的中国人赤诚性情与动人诗书;畅销书作家闫红新作,讲述诗经中的浪漫生活,细腻清澈,浪漫多情,描绘诗经挚美“思无邪”,在诗经的字里行间,知春秋之历史,感天地草木之灵,见流彩华章之美。本书分“云谁之思”“清扬婉兮”“幽幽南山”“绵绵瓜瓞”“维天之命”“于胥乐兮”六个部分,赏析诗经的美。\r\n',
// 'createTime': '2025-12-10T07:53:31.893+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:53:31.893+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '许渊冲译 , 闫红解析',
// 'nbBooktype': '图书',
// 'sortmark': 'H319.4:I/540',
// 'isbn': '978-7-5702-3295-6',
// 'nbPublisher': '长江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073c8e2804f5',
// 'libcode': '1201',
// 'nbName': '经济学与生活',
// 'nbExplain': '提起经济学,很多人会想到一连串枯燥乏味的数字,以及国家经济、产业结构、宏观调控等一系列专业术语,认为它和现实生活相距甚远。其实,这是对经济学的极大误解。实际上,经济学真实地存在于社会的各个领域,存在于日常生活中的每一天,与每一个人都息息相关。这本经济学的入门书,结合生活中常见的问题和现象,阐述经典的经济学原理,让读者切身感受到经济学与生活之间的密切联系,帮助读者在看待问题、思考决策时,多一个视角,多一重思考,学会在复杂世界做一个明白人。\r\n',
// 'createTime': '2025-12-10T07:49:27.720+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:49:27.720+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '贾润英',
// 'nbBooktype': '图书',
// 'sortmark': 'F0-49/197',
// 'isbn': '978-7-5229-1345-2',
// 'nbPublisher': '中国纺织出版社有限公司',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// },
// {
// 'nbId': '2c96809799e5c33c019b073ad6bd04f3',
// 'libcode': '1201',
// 'nbName': '111团圆记',
// 'nbExplain': '本书以细腻入微的笔法,用富有画面感的文字,栩栩如生地呈现了中国式复杂的家庭关系。既有血浓于水的深情,也有虚伪、不堪、软弱等那些不可言说的灰暗时刻。虽然原生家庭的创伤不可平复,但每个人都在试图用自己的方式与家族和解。或许读后会有强烈共鸣的部分,亲戚们的一颦一笑,一举一动似曾相识。这也是一本中国式家庭关系的特写,让我们感受到真正维系家庭纽带的并非血缘关系,而是生活中彼此之间的尊重和理解。\r\n',
// 'createTime': '2025-12-10T07:47:35.230+0000',
// 'creater': '297edff88354751d018359cd2e120000',
// 'updateTime': '2025-12-10T07:47:35.230+0000',
// 'updater': '297edff88354751d018359cd2e120000',
// 'nbAuthor': '杨云苏',
// 'nbBooktype': '图书',
// 'sortmark': 'I247.57/6741',
// 'isbn': '978-7-5339-7651-4',
// 'nbPublisher': '浙江文艺出版社',
// 'nbPublisherdate': '2024',
// 'nbRecno': '',
// 'nbImgPath': ''
// }
// ],
// 'page': {
// 'totalRows': 20,
// 'pageSize': 100,
// 'currentPage': 1,
// 'totalPages': 1,
// 'startRow': 0
// }
// }
// }
if (res.errCode === 0) { if (res.errCode === 0) {
let data = []
data = res.data.newbookList
data.forEach(item => {
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
const bookList = res.data.newbookList
const bookWithCovers = await Promise.all(
bookList.map(async(item) => {
const isbn = item.isbn.replace(/\-/g, '').trim()
try {
const coverRes = await FetchCoverByISBN({ isbn })
return { ...item, cover: coverRes || '' }
} catch (e) {
console.error(`获取ISBN:${isbn}封面失败`, e)
return { ...item, cover: '' }
}
}) })
} else {
this.$message.error('接口错误')
)
// 赋值原始数据(20条)
this.rankingList = bookWithCovers
// 数据更新后刷新swiper
this.$nextTick(() => {
if (this.swiper) {
this.swiper.update()
} }
}) })
},
getCoverByISBN(isbn, item) {
const params = {
isbn: isbn
}
FetchCoverByISBN(params).then((res) => {
console.log(res)
// item.cover = window.URL.createObjectURL(res)
if (res) {
// item.cover = window.URL.createObjectURL(res)
item.cover = res
} else { } else {
item.cover = ''
this.$message.error('获取推荐图书失败:' + res.errMsg)
}
} catch (error) {
console.error('接口请求异常', error)
this.$message.error('接口请求异常')
} }
this.rankingList.push(item)
})
} }
} }
} }
</script> </script>
<style lang="scss">
<style lang="scss" scoped>
@import "~@/assets/styles/index.scss"; @import "~@/assets/styles/index.scss";
// .screen-main .lending-ranking .module-content{
// padding: 0 .25rem !important;
// }
.swiper-container{
// 容器样式
.big-module {
box-sizing: border-box; // 关键:统一盒模型计算方式
overflow: hidden; overflow: hidden;
position: relative;
padding: 0; // 清空默认padding,避免基础间距不一致
margin: 0; // 清空默认margin
height: 520px;
} }
// Swiper容器
.swiper { .swiper {
width: 100%;
height: 6rem !important;
margin: .4rem 0;
width: 100% !important;
height: 100% !important;
box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
// 单个分组(一屏)
.swiper-slide.screen-group {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
// position: absolute !important; // 关键:绝对定位,固定位置
// top: 0 !important; // 强制置顶,避免偏移
// left: 0 !important;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden !important;
}
// 3列2行的网格布局(核心)
.book-grid {
width: calc(100% - 20px); // 左右各10px间距,用calc精准计算
height: calc(100% - 20px); // 上下各10px间距,避免高度溢出
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px; // 仅保留gap,无padding
box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
overflow: hidden; overflow: hidden;
&.gallery-thumbs .swiper-slide {
width: calc(100% / 3);
height: 2.8rem !important;
// padding: .1rem 0 0 0;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
// &.gallery-thumbs .swiper-slide-active {
// // background-color: #09194B;
// }
} }
.newbook-list-item{
.book-img{
// 图书卡片样式
.newbook-list-item {
box-sizing: border-box;
padding: 0;
margin: 0;
width: 100%;
height: 100%; // 卡片占满网格单元格,固定高度
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.empty-card {
visibility: hidden;
}
.book-img {
width: 1.325rem; width: 1.325rem;
height: 1.775rem; height: 1.775rem;
margin: 0 auto 0.25rem;
padding: 0;
background: url('~@/assets/images/default-img.png') no-repeat center center; background: url('~@/assets/images/default-img.png') no-repeat center center;
background-size: contain; background-size: contain;
display: flex;
align-items: center;
overflow: hidden;
margin: 0 auto 0.25rem auto;
img{
display: block;
img {
width: 100%; width: 100%;
// height: 100%;
height: 100%;
object-fit: cover;
} }
} }
.book-info{
h4{
.book-info {
width: 1.82rem;
padding: 0;
margin: 0 auto;
.title-item {
font-size: 0.25rem; font-size: 0.25rem;
line-height: .3rem; line-height: .3rem;
font-weight: normal; font-weight: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
} }
p{
.author-item {
font-size: 0.2rem; font-size: 0.2rem;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 14px;
} }
} }
} }
// 空数据提示
.empty-tip {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.25rem;
color: #ccc;
box-sizing: border-box;
}
</style> </style>
Loading…
Cancel
Save