|
@@ -22,12 +22,12 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="rightBox">
|
|
|
|
|
|
+ <div class="rightBox" :class="refTYpe == 1 ? '' : 'rBox'">
|
|
<div v-if="refTYpe == 1">
|
|
<div v-if="refTYpe == 1">
|
|
<div class="classification"
|
|
<div class="classification"
|
|
- >中图分类法:<span v-for="item in anchorList" :key="item.id"
|
|
|
|
- >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} </span>
|
|
|
|
- </span></div
|
|
|
|
|
|
+ >中图分类法:<span v-for="item in anchorList" :key="item.id"
|
|
|
|
+ >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} </span>
|
|
|
|
+ </span></div
|
|
>
|
|
>
|
|
<div class="threeLevel" v-if="listChildCategory && listChildCategory.length">
|
|
<div class="threeLevel" v-if="listChildCategory && listChildCategory.length">
|
|
<span
|
|
<span
|
|
@@ -42,11 +42,11 @@
|
|
</div>
|
|
</div>
|
|
<div v-else style="height: 30px"></div>
|
|
<div v-else style="height: 30px"></div>
|
|
</div>
|
|
</div>
|
|
- <div class="switchBox" v-if="refTYpe == 1 && total">
|
|
|
|
|
|
+ <div class="switchBox" v-if="total">
|
|
<div :class="{ isActive: isSwitch == 1 }" @click="onSwitch(1)"
|
|
<div :class="{ isActive: isSwitch == 1 }" @click="onSwitch(1)"
|
|
- ><appstore-outlined />大图 </div
|
|
|
|
|
|
+ ><appstore-outlined />大图 </div
|
|
><div :class="{ isActive: isSwitch == 2 }" @click="onSwitch(2)"
|
|
><div :class="{ isActive: isSwitch == 2 }" @click="onSwitch(2)"
|
|
- ><unordered-list-outlined />列表
|
|
|
|
|
|
+ ><unordered-list-outlined />列表
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="no-data" v-if="!total">
|
|
<div class="no-data" v-if="!total">
|
|
@@ -76,13 +76,13 @@
|
|
</div>
|
|
</div>
|
|
<div class="listBox" v-if="isSwitch == 2 && total">
|
|
<div class="listBox" v-if="isSwitch == 2 && total">
|
|
<div class="list-head">
|
|
<div class="list-head">
|
|
- <div class="isbn">isbn</div>
|
|
|
|
<div class="name">图书名称</div>
|
|
<div class="name">图书名称</div>
|
|
|
|
+ <div class="isbn">isbn</div>
|
|
<div class="author">作者</div>
|
|
<div class="author">作者</div>
|
|
</div>
|
|
</div>
|
|
<div v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)" class="list-item">
|
|
<div v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)" class="list-item">
|
|
- <div class="isbn">{{ item.isbn || '-' }}</div>
|
|
|
|
<div class="name">{{ item.name || '-' }}</div>
|
|
<div class="name">{{ item.name || '-' }}</div>
|
|
|
|
+ <div class="isbn">{{ item.isbn || '-' }}</div>
|
|
<div class="author">{{ item.author || '-' }}</div>
|
|
<div class="author">{{ item.author || '-' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -120,13 +120,13 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div :style="moveStyle ? 'color: #1677FF;' : 'color: rgba(102, 102, 102, 0.85);'"
|
|
<div :style="moveStyle ? 'color: #1677FF;' : 'color: rgba(102, 102, 102, 0.85);'"
|
|
- >阅读说明</div
|
|
|
|
|
|
+ >阅读说明</div
|
|
>
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="model_div" ref="explainModel">
|
|
<div class="model_div" ref="explainModel">
|
|
<a-modal v-model:visible="explainVisible" title="阅读说明">
|
|
<a-modal v-model:visible="explainVisible" title="阅读说明">
|
|
<div class="model_conter"
|
|
<div class="model_conter"
|
|
- >若是文件格式为docx、doc、ppt、pptx、xls、ppsx可以使用office软件打开;若是文件格式为avi、rmvb、flv、swf、wmv、f4v、rm、IFO、mp4、VOB、MTS属于视频文件,可以使用视频播放器打开,其中MTS需要使用索尼软件播放视频;rar、zip为压缩文件,可以用winrar或7-Zip等解压缩软件解压查看;mp3、wma音频文件需要音频软件播放;mobi、chm、pdg、epub、azw3、pdz属于电子书格式,可以使用对应电子书阅读器阅读,例如EPUB电子书阅读器或超星阅读器;psd、MPG、jpeg可以直接用图片工具查看;若是djvu文件需使用djvu阅读器阅读,cfg文件需使用记事本打开,pps文件需要安装pps网络电视查看;若是exe文件,请直接下载安装。</div
|
|
|
|
|
|
+ >若是文件格式为docx、doc、ppt、pptx、xls、ppsx可以使用office软件打开;若是文件格式为avi、rmvb、flv、swf、wmv、f4v、rm、IFO、mp4、VOB、MTS属于视频文件,可以使用视频播放器打开,其中MTS需要使用索尼软件播放视频;rar、zip为压缩文件,可以用winrar或7-Zip等解压缩软件解压查看;mp3、wma音频文件需要音频软件播放;mobi、chm、pdg、epub、azw3、pdz属于电子书格式,可以使用对应电子书阅读器阅读,例如EPUB电子书阅读器或超星阅读器;psd、MPG、jpeg可以直接用图片工具查看;若是djvu文件需使用djvu阅读器阅读,cfg文件需使用记事本打开,pps文件需要安装pps网络电视查看;若是exe文件,请直接下载安装。</div
|
|
>
|
|
>
|
|
<template #footer>
|
|
<template #footer>
|
|
<div class="model_btn">
|
|
<div class="model_btn">
|
|
@@ -703,7 +703,8 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rightBox {
|
|
.rightBox {
|
|
- flex: 1;
|
|
|
|
|
|
+ // flex: 1;
|
|
|
|
+ width: 940px;
|
|
.classification {
|
|
.classification {
|
|
.anchor {
|
|
.anchor {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
@@ -717,7 +718,7 @@
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
padding: 16px 20px;
|
|
padding: 16px 20px;
|
|
margin: 16px 0;
|
|
margin: 16px 0;
|
|
- width: 94%;
|
|
|
|
|
|
+ // width: 94%;
|
|
|
|
|
|
span {
|
|
span {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
@@ -762,8 +763,8 @@
|
|
}
|
|
}
|
|
.listBox {
|
|
.listBox {
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
- margin: 20px;
|
|
|
|
- width: 920px;
|
|
|
|
|
|
+ // margin: 20px;
|
|
|
|
+ // width: 920px;
|
|
.list-head {
|
|
.list-head {
|
|
display: flex;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
@@ -795,17 +796,27 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.isbn {
|
|
.isbn {
|
|
- width: 200px;
|
|
|
|
|
|
+ width: 180px;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
.name {
|
|
.name {
|
|
- width: 450px;
|
|
|
|
|
|
+ // width: 360px;
|
|
|
|
+ flex: 1;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
- display: -webkit-box;
|
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.author {
|
|
.author {
|
|
- width: 120px;
|
|
|
|
|
|
+ width: 300px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-align: center;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ // display: -webkit-box;
|
|
|
|
+ white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .rBox {
|
|
|
|
+ width: 100% !important;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|