|
@@ -42,11 +42,18 @@
|
|
|
</div>
|
|
|
<div v-else style="height: 30px"></div>
|
|
|
</div>
|
|
|
+ <div class="switchBox" v-if="refTYpe == 1 && total">
|
|
|
+ <div :class="{ isActive: isSwitch == 1 }" @click="onSwitch(1)"
|
|
|
+ ><appstore-outlined />大图 </div
|
|
|
+ ><div :class="{ isActive: isSwitch == 2 }" @click="onSwitch(2)"
|
|
|
+ ><unordered-list-outlined />列表
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="no-data" v-if="!total">
|
|
|
<img src="@/assets/images/kongdata.svg" />
|
|
|
<div>暂时还没有内容哦</div>
|
|
|
</div>
|
|
|
- <div class="content" v-else>
|
|
|
+ <div class="content" v-if="isSwitch == 1 && total">
|
|
|
<div class="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)">
|
|
|
<div class="item_bj">
|
|
|
<div class="item_img">
|
|
@@ -67,6 +74,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="listBox" v-if="isSwitch == 2 && total">
|
|
|
+ <div class="list-head">
|
|
|
+ <div class="isbn">isbn</div>
|
|
|
+ <div class="name">图书名称</div>
|
|
|
+ <div class="author">作者</div>
|
|
|
+ </div>
|
|
|
+ <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="author">{{ item.author || '-' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="pagination" v-if="total">
|
|
|
<a-pagination
|
|
|
:show-total="(total) => `总共 ${total} 条`"
|
|
@@ -123,6 +142,7 @@
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
|
|
|
+ import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
|
|
|
import book from '../../api/book';
|
|
|
|
|
|
const router = useRouter();
|
|
@@ -141,7 +161,7 @@
|
|
|
const current = ref<number>(1);
|
|
|
const pageSize = ref<number>(9);
|
|
|
let total = ref<any>(0);
|
|
|
-
|
|
|
+ const isSwitch = ref<number>(1);
|
|
|
// 搜索
|
|
|
const search_icon = ref<boolean>(true);
|
|
|
const search_iconFlag = ref<boolean>(false);
|
|
@@ -213,6 +233,9 @@
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
+ const onSwitch = (val) => {
|
|
|
+ isSwitch.value = val;
|
|
|
+ };
|
|
|
onMounted(() => {
|
|
|
getSubType();
|
|
|
});
|
|
@@ -711,4 +734,78 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .switchBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-right: 6%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ span {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ margin: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .isActive {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .listBox {
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 20px;
|
|
|
+ width: 920px;
|
|
|
+ .list-head {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 0 40px;
|
|
|
+ & > div {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 0 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ & > div {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: #1677ff !important;
|
|
|
+ background: rgba(22, 119, 255, 0.09);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .isbn {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .author {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|