|
|
@@ -30,7 +30,7 @@
|
|
|
<div class="item_ctx">
|
|
|
<div class="item_ctx_title">{{ item.name }}</div>
|
|
|
<div class="item_ctx_author">{{ item.author }}</div>
|
|
|
- <div class="item_ctx_text">{{ item.brief }}</div>
|
|
|
+ <!-- <div class="item_ctx_text">{{ item.brief }}</div> -->
|
|
|
<div class="item_ctx_read" @click.stop="readBook(item.uploadFile, item.linkAddress)">
|
|
|
{{ isRead(item.uploadFile, item.linkAddress) }}
|
|
|
<span class="msly">></span>
|
|
|
@@ -50,7 +50,7 @@
|
|
|
show-quick-jumper
|
|
|
@showSizeChange="sizeChange"
|
|
|
@change="cuerrchange"
|
|
|
- ></a-pagination>
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-icon" v-else>
|
|
|
@@ -91,352 +91,191 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { useRouter, useRoute } from 'vue-router';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
|
|
|
-import book from '../../api/book';
|
|
|
+ import { useRouter, useRoute } from 'vue-router';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
|
|
|
+ import book from '../../api/book';
|
|
|
|
|
|
-const router = useRouter();
|
|
|
-const explainModel = ref();
|
|
|
-const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
|
|
|
-const pkglist = ref<any>({});
|
|
|
-const bookType = ref([
|
|
|
- { label: '全部', id: 0 },
|
|
|
- { label: '电子图书', id: 1 },
|
|
|
- { label: '文献资料', id: 2 },
|
|
|
- { label: '学术论文', id: 3 },
|
|
|
-]);
|
|
|
+ const router = useRouter();
|
|
|
+ const explainModel = ref();
|
|
|
+ const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
|
|
|
+ const pkglist = ref<any>({});
|
|
|
+ const bookType = ref([
|
|
|
+ { label: '全部', id: 0 },
|
|
|
+ { label: '电子图书', id: 1 },
|
|
|
+ { label: '文献资料', id: 2 },
|
|
|
+ { label: '学术论文', id: 3 },
|
|
|
+ ]);
|
|
|
|
|
|
-const selctType = ref<number>(0);
|
|
|
+ const selctType = ref<number>(0);
|
|
|
|
|
|
-const current = ref<number>(1);
|
|
|
-const pageSize = ref<number>(9);
|
|
|
-let total = ref<any>(0);
|
|
|
+ const current = ref<number>(1);
|
|
|
+ const pageSize = ref<number>(9);
|
|
|
+ let total = ref<any>(0);
|
|
|
|
|
|
-// 搜索
|
|
|
-const search_icon = ref<boolean>(true);
|
|
|
-const search_iconFlag = ref<boolean>(false);
|
|
|
+ // 搜索
|
|
|
+ const search_icon = ref<boolean>(true);
|
|
|
+ const search_iconFlag = ref<boolean>(false);
|
|
|
|
|
|
-function goToPage(path, id) {
|
|
|
- router.push({
|
|
|
- path: path,
|
|
|
- query: {
|
|
|
- id: id,
|
|
|
+ function goToPage(path, id) {
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {
|
|
|
+ id: id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const refbookName = ref<string>('');
|
|
|
+ const refTYpe = ref<number>(0);
|
|
|
+ // 图书列表
|
|
|
+ const getbookList = () => {
|
|
|
+ let params = {
|
|
|
+ bookName: refbookName.value || '',
|
|
|
+ pageNum: current.value,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ // type: refTYpe.value || '',
|
|
|
+ // subType: selctType.value ? selctType.value : '',
|
|
|
+ currentCateId: selctType.value && selctType.value != 999999 ? selctType.value : '',
|
|
|
+ };
|
|
|
+ book
|
|
|
+ .bookRetrieval(params)
|
|
|
+ .then((res) => {
|
|
|
+ const { data, code, message } = res.data;
|
|
|
+ if (code === 200) {
|
|
|
+ pkglist.value = data.records;
|
|
|
+ total.value = data.total;
|
|
|
+ if (search_iconFlag.value) {
|
|
|
+ search_icon.value = false;
|
|
|
+ } else {
|
|
|
+ search_icon.value = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ message.info(err.data.message);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const subTypeList = ref([
|
|
|
+ {
|
|
|
+ name: '全部',
|
|
|
+ id: 0,
|
|
|
},
|
|
|
+ ]);
|
|
|
+ const getSubType = () => {
|
|
|
+ if (refTYpe.value) {
|
|
|
+ book.listCategory({ pid: refTYpe.value }).then((res) => {
|
|
|
+ const { code, data } = res.data;
|
|
|
+ subTypeList.value = [{ name: '全部', id: 0 }];
|
|
|
+ if (code === 200) {
|
|
|
+ subTypeList.value.push(...data);
|
|
|
+ }
|
|
|
+ console.log(subTypeList.value);
|
|
|
+ getbookList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ getSubType();
|
|
|
});
|
|
|
-}
|
|
|
+ const selectType = (id) => {
|
|
|
+ selctType.value = id;
|
|
|
+ getbookList();
|
|
|
+ // let arry = data.filter((item) => item.id == id);
|
|
|
+ // console.log(arry, 'aaa');
|
|
|
+ // pkglist.value = arry[0].data;
|
|
|
+ // total.value = pkglist.value.length;
|
|
|
+ // showBookList.value = true;
|
|
|
+ };
|
|
|
|
|
|
-const refbookName = ref<string>('');
|
|
|
-const refTYpe = ref<number>(0);
|
|
|
-// 图书列表
|
|
|
-const getbookList = () => {
|
|
|
- let params = {
|
|
|
- bookName: refbookName.value || '',
|
|
|
- pageNum: current.value,
|
|
|
- pageSize: pageSize.value,
|
|
|
- // type: refTYpe.value || '',
|
|
|
- // subType: selctType.value ? selctType.value : '',
|
|
|
- currentCateId: selctType.value && selctType.value != 999999 ? selctType.value : '',
|
|
|
+ // 分页
|
|
|
+ const cuerrchange = (num) => {
|
|
|
+ current.value = num;
|
|
|
+ getbookList();
|
|
|
};
|
|
|
- book
|
|
|
- .bookRetrieval(params)
|
|
|
- .then((res) => {
|
|
|
- const { data, code, message } = res.data;
|
|
|
- if (code === 200) {
|
|
|
- pkglist.value = data.records;
|
|
|
- total.value = data.total;
|
|
|
- if (search_iconFlag.value) {
|
|
|
- search_icon.value = false;
|
|
|
- } else {
|
|
|
- search_icon.value = true;
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- message.info(err.data.message);
|
|
|
- });
|
|
|
-};
|
|
|
-const subTypeList = ref([
|
|
|
- {
|
|
|
- name: '全部',
|
|
|
- id: 0,
|
|
|
- },
|
|
|
-]);
|
|
|
-const getSubType = () => {
|
|
|
- if (refTYpe.value) {
|
|
|
- book.listCategory({ pid: refTYpe.value }).then((res) => {
|
|
|
- const { code, data } = res.data;
|
|
|
- subTypeList.value = [{ name: '全部', id: 0 }];
|
|
|
- if (code === 200) {
|
|
|
- subTypeList.value.push(...data);
|
|
|
+ const sizeChange = (page, size) => {
|
|
|
+ pageSize.value = size;
|
|
|
+ getbookList();
|
|
|
+ };
|
|
|
+ const emit = defineEmits(['showDesc']);
|
|
|
+ const clickDesc = (id) => {
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ emit('showDesc', id);
|
|
|
+ };
|
|
|
+ const readBook = (file, url) => {
|
|
|
+ window.open(file || url);
|
|
|
+ //console.log(file||url)
|
|
|
+ };
|
|
|
+ const isRead = (file, url) => {
|
|
|
+ if (file) {
|
|
|
+ var index = file.lastIndexOf('.');
|
|
|
+ //获取后缀
|
|
|
+ var ext = file.substr(index + 1);
|
|
|
+ console.log(ext);
|
|
|
+ if (ext == 'pdf' || ext == 'PDF') {
|
|
|
+ return '立即阅读';
|
|
|
+ } else {
|
|
|
+ return '立即下载';
|
|
|
}
|
|
|
- console.log(subTypeList.value);
|
|
|
- getbookList();
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-onMounted(() => {
|
|
|
- getSubType();
|
|
|
-});
|
|
|
-const selectType = (id) => {
|
|
|
- selctType.value = id;
|
|
|
- getbookList();
|
|
|
- // let arry = data.filter((item) => item.id == id);
|
|
|
- // console.log(arry, 'aaa');
|
|
|
- // pkglist.value = arry[0].data;
|
|
|
- // total.value = pkglist.value.length;
|
|
|
- // showBookList.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-// 分页
|
|
|
-const cuerrchange = (num) => {
|
|
|
- current.value = num;
|
|
|
- getbookList();
|
|
|
-};
|
|
|
-const sizeChange = (page, size) => {
|
|
|
- pageSize.value = size;
|
|
|
- getbookList();
|
|
|
-};
|
|
|
-const emit = defineEmits(['showDesc']);
|
|
|
-const clickDesc = (id) => {
|
|
|
- window.scrollTo(0, 0);
|
|
|
- emit('showDesc', id);
|
|
|
-};
|
|
|
-const readBook = (file, url) => {
|
|
|
- window.open(file || url);
|
|
|
- //console.log(file||url)
|
|
|
-};
|
|
|
-const isRead = (file, url) => {
|
|
|
- if (file) {
|
|
|
- var index = file.lastIndexOf('.');
|
|
|
- //获取后缀
|
|
|
- var ext = file.substr(index + 1);
|
|
|
- console.log(ext);
|
|
|
- if (ext == 'pdf' || ext == 'PDF') {
|
|
|
+ } else if (url) {
|
|
|
return '立即阅读';
|
|
|
} else {
|
|
|
return '立即下载';
|
|
|
}
|
|
|
- } else if (url) {
|
|
|
- return '立即阅读';
|
|
|
- } else {
|
|
|
- return '立即下载';
|
|
|
- }
|
|
|
-};
|
|
|
-//改变悬浮求样式
|
|
|
-const moveStyle = ref<boolean>(false);
|
|
|
-const mouseOver = () => {
|
|
|
- moveStyle.value = true;
|
|
|
-};
|
|
|
-const mouseLeave = () => {
|
|
|
- moveStyle.value = false;
|
|
|
-};
|
|
|
+ };
|
|
|
+ //改变悬浮求样式
|
|
|
+ const moveStyle = ref<boolean>(false);
|
|
|
+ const mouseOver = () => {
|
|
|
+ moveStyle.value = true;
|
|
|
+ };
|
|
|
+ const mouseLeave = () => {
|
|
|
+ moveStyle.value = false;
|
|
|
+ };
|
|
|
|
|
|
-const explainVisible = ref<boolean>(false);
|
|
|
+ const explainVisible = ref<boolean>(false);
|
|
|
|
|
|
-defineExpose({
|
|
|
- getSubType,
|
|
|
- refbookName,
|
|
|
- refTYpe,
|
|
|
- current,
|
|
|
- pageSize,
|
|
|
- search_iconFlag,
|
|
|
- selctType,
|
|
|
-});
|
|
|
+ defineExpose({
|
|
|
+ getSubType,
|
|
|
+ refbookName,
|
|
|
+ refTYpe,
|
|
|
+ current,
|
|
|
+ pageSize,
|
|
|
+ search_iconFlag,
|
|
|
+ selctType,
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.model_btn {
|
|
|
- :deep(.ant-btn-primary) {
|
|
|
- background: #1677ff;
|
|
|
- border-color: #1677ff;
|
|
|
- }
|
|
|
-}
|
|
|
-.suspension {
|
|
|
- position: fixed;
|
|
|
- cursor: pointer;
|
|
|
- top: 50%;
|
|
|
- right: 35px;
|
|
|
- padding: 1px 8px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- .book_svg_div {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-}
|
|
|
-.main-icon {
|
|
|
- width: 100%;
|
|
|
- background: white;
|
|
|
- padding-top: 60px;
|
|
|
- .no-data {
|
|
|
- text-align: center;
|
|
|
- padding-top: 200px;
|
|
|
- img {
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- div {
|
|
|
- color: #cccccc;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.pkg-main {
|
|
|
- width: 100%;
|
|
|
- background: white;
|
|
|
- background: url('@/assets/images/bookbg.svg');
|
|
|
- background-size: 100% 608px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding-top: 98px;
|
|
|
- .no-data {
|
|
|
- text-align: center;
|
|
|
- padding-top: 80px;
|
|
|
- padding-bottom: 40px;
|
|
|
- img {
|
|
|
- padding: 0px auto;
|
|
|
- }
|
|
|
- div {
|
|
|
- color: #cccccc;
|
|
|
- margin-top: 10px;
|
|
|
+ .model_btn {
|
|
|
+ :deep(.ant-btn-primary) {
|
|
|
+ background: #1677ff;
|
|
|
+ border-color: #1677ff;
|
|
|
}
|
|
|
}
|
|
|
- .content {
|
|
|
- width: 1160px;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: start;
|
|
|
- .item {
|
|
|
- width: 378px;
|
|
|
- height: 200px;
|
|
|
- background: none;
|
|
|
- margin-right: 6px;
|
|
|
- margin-bottom: 20px;
|
|
|
- cursor: pointer;
|
|
|
- .item_bj {
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #eeeeee;
|
|
|
- width: 378px;
|
|
|
- height: 200px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- .item_img {
|
|
|
- margin-top: 20px;
|
|
|
- margin-left: 10px;
|
|
|
- width: 114px;
|
|
|
- height: 160px;
|
|
|
- .item_cover {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .item_ctx {
|
|
|
- margin-top: 19px;
|
|
|
- margin-left: 10px;
|
|
|
- width: 212px;
|
|
|
- height: 200px;
|
|
|
- .item_ctx_title {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- min-height: 50px;
|
|
|
- color: #333333;
|
|
|
- white-space: normal;
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .item_ctx_author {
|
|
|
- margin-top: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- white-space: normal;
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- line-clamp: 1;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .item_ctx_text {
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- white-space: normal;
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
- line-clamp: 3;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .item_ctx_read {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .msly {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item_bj:hover {
|
|
|
- background: #edf4fe;
|
|
|
- .item_ctx_read {
|
|
|
- color: #1677ff;
|
|
|
- }
|
|
|
- .msly {
|
|
|
- color: #1677ff;
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .suspension {
|
|
|
+ position: fixed;
|
|
|
+ cursor: pointer;
|
|
|
+ top: 50%;
|
|
|
+ right: 35px;
|
|
|
+ padding: 1px 8px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ .book_svg_div {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.pagination {
|
|
|
- text-align: center;
|
|
|
- padding-bottom: 40px;
|
|
|
- margin-top: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (max-width: 600px) {
|
|
|
- .pagination {
|
|
|
- text-align: center;
|
|
|
- padding-bottom: 40px;
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
- /deep/ .ant-pagination-total-text {
|
|
|
- display: none;
|
|
|
- }
|
|
|
.main-icon {
|
|
|
- width: 100% !important;
|
|
|
+ width: 100%;
|
|
|
background: white;
|
|
|
padding-top: 60px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
.no-data {
|
|
|
text-align: center;
|
|
|
- padding-top: 400px;
|
|
|
+ padding-top: 200px;
|
|
|
img {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
@@ -447,14 +286,16 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
.pkg-main {
|
|
|
- width: 100% !important;
|
|
|
+ width: 100%;
|
|
|
background: white;
|
|
|
- padding-top: 9.25rem;
|
|
|
- margin: 0 !important;
|
|
|
+ background: url('@/assets/images/bookbg.svg');
|
|
|
+ background-size: 100% 608px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding-top: 140px;
|
|
|
.no-data {
|
|
|
text-align: center;
|
|
|
padding-top: 80px;
|
|
|
- padding-bottom: 80px;
|
|
|
+ padding-bottom: 40px;
|
|
|
img {
|
|
|
padding: 0px auto;
|
|
|
}
|
|
|
@@ -464,26 +305,26 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
- width: 100% !important;
|
|
|
+ width: 1160px;
|
|
|
margin: 0 auto;
|
|
|
- padding-top: 0px;
|
|
|
+
|
|
|
display: flex;
|
|
|
- flex-flow: column nowrap;
|
|
|
- justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: start;
|
|
|
.item {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
+ width: 378px;
|
|
|
height: 200px;
|
|
|
background: none;
|
|
|
- padding: 0 20px;
|
|
|
+ margin-right: 6px;
|
|
|
margin-bottom: 20px;
|
|
|
cursor: pointer;
|
|
|
.item_bj {
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #eeeeee;
|
|
|
- width: 100%;
|
|
|
+ width: 378px;
|
|
|
height: 200px;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
.item_img {
|
|
|
margin-top: 20px;
|
|
|
@@ -498,9 +339,8 @@ defineExpose({
|
|
|
.item_ctx {
|
|
|
margin-top: 19px;
|
|
|
margin-left: 10px;
|
|
|
- width: auto;
|
|
|
- flex: 1;
|
|
|
- height: 200px;
|
|
|
+ width: 212px;
|
|
|
+ // height: 200px;
|
|
|
.item_ctx_title {
|
|
|
font-size: 16px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
@@ -574,45 +414,206 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.head {
|
|
|
- width: 1160px;
|
|
|
- margin: 20px auto;
|
|
|
- display: flex;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- min-height: 62px;
|
|
|
- .navBox {
|
|
|
- display: flex;
|
|
|
- line-height: 62px;
|
|
|
- flex-wrap: wrap;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 62px;
|
|
|
- color: #999999;
|
|
|
- width: 100px;
|
|
|
+ .pagination {
|
|
|
text-align: center;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ margin-top: 40px;
|
|
|
}
|
|
|
- .booke_type {
|
|
|
- display: inline-block;
|
|
|
- // width: 50px;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- line-height: 48px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- padding: 0 11px;
|
|
|
+
|
|
|
+ @media screen and (max-width: 600px) {
|
|
|
+ .pagination {
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ /deep/ .ant-pagination-total-text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .main-icon {
|
|
|
+ width: 100% !important;
|
|
|
+ background: white;
|
|
|
+ padding-top: 60px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .no-data {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 400px;
|
|
|
+ img {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ color: #cccccc;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pkg-main {
|
|
|
+ width: 100% !important;
|
|
|
+ background: white;
|
|
|
+ padding-top: 9.25rem;
|
|
|
+ margin: 0 !important;
|
|
|
+ .no-data {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 80px;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ img {
|
|
|
+ padding: 0px auto;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ color: #cccccc;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column nowrap;
|
|
|
+ justify-content: center;
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ height: 200px;
|
|
|
+ background: none;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ .item_bj {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .item_img {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 114px;
|
|
|
+ height: 160px;
|
|
|
+ .item_cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_ctx {
|
|
|
+ margin-top: 19px;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: auto;
|
|
|
+ flex: 1;
|
|
|
+ height: 200px;
|
|
|
+ .item_ctx_title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ min-height: 50px;
|
|
|
+ color: #333333;
|
|
|
+ white-space: normal;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .item_ctx_author {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ white-space: normal;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .item_ctx_text {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ white-space: normal;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .item_ctx_read {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .msly {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_bj:hover {
|
|
|
+ background: #edf4fe;
|
|
|
+ .item_ctx_read {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ .msly {
|
|
|
+ color: #1677ff;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .booke_type_color {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1677ff;
|
|
|
+ .head {
|
|
|
+ width: 1160px;
|
|
|
+ margin: 20px auto;
|
|
|
+ display: flex;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ min-height: 62px;
|
|
|
+ .navBox {
|
|
|
+ display: flex;
|
|
|
+ line-height: 62px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 62px;
|
|
|
+ color: #999999;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .booke_type {
|
|
|
+ display: inline-block;
|
|
|
+ // width: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 0 11px;
|
|
|
+ }
|
|
|
+ .booke_type_color {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
gaozhangdian