<template>
|
<div class="base-box">
|
<div class="base-content">
|
<div class="base-content-header">
|
<div class="base-content-header-content">基本信息</div>
|
</div>
|
<div class="base-book-box">
|
<div class="base-book-item">
|
<img class="book-icon" src="../assets/images/book.png" alt="" />
|
<div class="base-book-item-feilds">
|
<div class="book-title">《月亮与六便士》</div>
|
<el-row v-if="screenWidth > 375">
|
<el-col :span="8">
|
<div class="grid-content ep-bg-purple">
|
<span>责任者：</span>
|
<span>袁雷，张云飞著</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>ISBN号：</span>
|
<span>978-7-300-25494-4</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>入档时间：</span>
|
<span>20220226</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>馆藏地：</span>
|
<span>外文图书馆2楼-1-8954</span>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content ep-bg-purple">
|
<span>出版社：</span>
|
<span>中国人民大学出版社</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>主题词：</span>
|
<span>月亮</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>索书号：</span>
|
<span>V1-18/12.3354(ENG)</span>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row v-else>
|
<el-col :span="8">
|
<div class="grid-content ep-bg-purple">
|
<span>责任者：</span>
|
<span>袁雷，张云飞著</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>ISBN号：</span>
|
<span>978-7-300-25494-4</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>入档时间：</span>
|
<span>20220226</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>馆藏地：</span>
|
<span>外文图书馆2楼-1-8954</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>出版社：</span>
|
<span>中国人民大学出版社</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>主题词：</span>
|
<span>月亮</span>
|
</div>
|
<div class="grid-content ep-bg-purple">
|
<span>索书号：</span>
|
<span>V1-18/12.3354(ENG)</span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="base-book-desc-box">
|
<div class="base-book-desc-title">图书简介：</div>
|
<p>
|
本书以生动笔触描绘了卡尔·马克思的一生，展现了他作为思想家革命家的非凡,历程。全书围绕马克思的学术探索、政治实践与个人生活展开，深入剖析其对资本主义的批判及对人类解放的追求。作者将马克思比作“人间的普罗米修斯”，凸显其为无产阶级和全人类福祉不懈奋斗的精神。语言通俗易懂，适合对马克思主义思想及其发展历程感兴趣的读者阅读。
|
</p>
|
<el-divider border-style="double" style="border-color: #e9d8bf" />
|
</div>
|
</div>
|
<div class="base-list-box">
|
<div class="base-list-header">
|
<div class="base-list-header-content">馆藏信息</div>
|
</div>
|
<div class="base-list-table">
|
<el-table
|
:data="tableData"
|
:height="tableData.length > 5 ? '240px' : null"
|
style="width: 100%"
|
border
|
>
|
<el-table-column prop="index" label="序号" width="80" />
|
<el-table-column prop="indexNum" label="索书号" width="180" />
|
<el-table-column prop="code" label="条形码" width="100" />
|
<el-table-column prop="year" label="年代" width="80" />
|
<el-table-column prop="address" label="馆藏地" />
|
<el-table-column prop="date" label="入档时间" width="100" />
|
<el-table-column prop="state" label="书刊状态" width="100" />
|
<el-table-column prop="remark" label="备注" />
|
</el-table>
|
</div>
|
<div class="base-pagination-block">
|
<el-pagination
|
size="small"
|
v-model:page-size="pageSize"
|
layout="prev, pager, next, sizes"
|
:page-sizes="[5, 25, 55, 100]"
|
:total="10"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted } from 'vue'
|
|
const screenWidth = ref(window.innerWidth)
|
|
const tableData = ref([
|
{
|
indexNum: 'V1-18112.3354(ENG)',
|
code: '04013439',
|
year: '2002',
|
address: '外文图书馆2楼-1-8954',
|
date: '20200226',
|
state: 'Normal',
|
remark: '',
|
},
|
{
|
indexNum: 'V1-18112.3354(ENG)',
|
code: '04013439',
|
year: '2002',
|
address: '外文图书馆2楼-1-8954',
|
date: '20200226',
|
state: 'Reject',
|
remark: '',
|
},
|
])
|
|
const pageSize = ref(5)
|
|
const handleSizeChange = (val: number) => {
|
console.log(`${val} items per page`)
|
}
|
|
const handleCurrentChange = (val: number) => {
|
console.log(`current page: ${val}`)
|
}
|
|
onMounted(() => {
|
const data = tableData.value.map((item: any, i: number) => {
|
return {
|
...item,
|
index: i + 1,
|
}
|
})
|
tableData.value = data
|
})
|
</script>
|
|
<style lang="less" scoped>
|
@media screen and (max-width: 750px) {
|
.base-box {
|
width: 100%;
|
background-image: url('@/assets/images/beijing2.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 10px 0;
|
.base-content {
|
width: 300px;
|
background-color: #fff;
|
border-radius: 20px;
|
.base-content-header {
|
width: 100%;
|
height: 60px;
|
background-color: #af8c56;
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
display: flex;
|
align-items: center;
|
padding-left: 15px;
|
box-sizing: border-box;
|
.base-content-header-content {
|
width: 155px;
|
height: 40px;
|
background-image: url('@/assets/images/jiben.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
line-height: 40px;
|
padding-left: 20px;
|
color: #fff;
|
font-weight: bloder;
|
font-size: 20px;
|
font-family: 'FFZHTJW';
|
}
|
}
|
|
.base-book-box {
|
flex: 1;
|
box-sizing: border-box;
|
|
.base-book-item {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
padding: 0 20px;
|
margin-bottom: 50px;
|
|
.book-icon {
|
width: 120px;
|
height: auto;
|
}
|
|
.base-book-item-feilds {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
|
.book-title {
|
width: 100%;
|
font-size: 18px;
|
font-family:
|
Microsoft YaHei,
|
Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: center;
|
color: #333333;
|
margin-bottom: 20px;
|
}
|
|
.el-row {
|
width: 100%;
|
padding-left: 10px;
|
|
.el-col {
|
margin-right: 0px;
|
.grid-content {
|
min-width: 280px;
|
padding: 0px 10px;
|
text-align: left;
|
span:nth-child(1) {
|
letter-spacing: 5px;
|
}
|
span:nth-child(2) {
|
color: #999;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.base-book-desc-box {
|
width: 100%;
|
padding: 0 20px;
|
|
.base-book-desc-title {
|
font-size: 18px;
|
font-family: 'FFZHTJW';
|
color: #af8c56;
|
}
|
p {
|
font-size: 14px;
|
font-family:
|
Microsoft YaHei,
|
Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #666666;
|
line-height: 26px;
|
text-indent: 2em;
|
}
|
}
|
}
|
|
.base-list-header {
|
width: 100%;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
padding-left: 15px;
|
box-sizing: border-box;
|
.base-list-header-content {
|
width: 155px;
|
height: 40px;
|
background-image: url('@/assets/images/guancang.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
line-height: 40px;
|
padding-left: 20px;
|
color: #fff;
|
font-weight: bloder;
|
font-size: 20px;
|
font-family: 'FFZHTJW';
|
}
|
}
|
|
::v-deep(.base-list-table) {
|
padding: 0px 25px;
|
|
.el-table th.el-table__cell {
|
background-color: #f7e4c8 !important;
|
}
|
|
/* 设置偶数行背景色 */
|
table tr:nth-child(even) {
|
background-color: #f7e4c8 !important;
|
}
|
|
/* 或者设置奇数行背景色 */
|
table tr:nth-child(odd) {
|
background-color: #fff4e2 !important; //fff4e2
|
}
|
}
|
|
.base-pagination-block {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding: 10px 25px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
@media screen and (min-width: 750px) {
|
.base-box {
|
width: 100%;
|
height: 100%;
|
background-image: url('@/assets/images/beijing2.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.base-content {
|
width: 1200px;
|
max-height: 830px;
|
background-color: #fff;
|
border-radius: 20px;
|
.base-content-header {
|
width: 100%;
|
height: 60px;
|
background-color: #af8c56;
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
display: flex;
|
align-items: center;
|
padding-left: 30px;
|
box-sizing: border-box;
|
.base-content-header-content {
|
width: 155px;
|
height: 40px;
|
background-image: url('@/assets/images/jiben.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
line-height: 40px;
|
padding-left: 20px;
|
color: #fff;
|
font-weight: bloder;
|
font-size: 20px;
|
font-family: 'FFZHTJW';
|
}
|
}
|
|
.base-book-box {
|
flex: 1;
|
padding-left: 48px;
|
padding: 47px 30px 0px 30px;
|
box-sizing: border-box;
|
|
.base-book-item {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 20px;
|
margin-bottom: 50px;
|
|
.book-icon {
|
width: 120px;
|
height: auto;
|
margin-right: 45px;
|
}
|
|
.base-book-item-feilds {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
|
.book-title {
|
font-size: 18px;
|
font-family:
|
Microsoft YaHei,
|
Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #333333;
|
margin-bottom: 20px;
|
}
|
|
.el-row {
|
width: 100%;
|
|
.el-col {
|
margin-right: 30px;
|
.grid-content {
|
min-width: 280px;
|
padding: 0px 10px;
|
text-align: left;
|
span:nth-child(1) {
|
letter-spacing: 5px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.base-book-desc-box {
|
width: 100%;
|
padding: 0 20px;
|
|
.base-book-desc-title {
|
font-size: 18px;
|
font-family: 'FFZHTJW';
|
color: #af8c56;
|
}
|
p {
|
font-size: 14px;
|
font-family:
|
Microsoft YaHei,
|
Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #666666;
|
line-height: 26px;
|
text-indent: 2em;
|
}
|
}
|
}
|
|
.base-list-header {
|
width: 100%;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
padding-left: 30px;
|
box-sizing: border-box;
|
.base-list-header-content {
|
width: 155px;
|
height: 40px;
|
background-image: url('@/assets/images/guancang.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
line-height: 40px;
|
padding-left: 20px;
|
color: #fff;
|
font-weight: bloder;
|
font-size: 20px;
|
font-family: 'FFZHTJW';
|
}
|
}
|
|
::v-deep(.base-list-table) {
|
padding: 0px 40px;
|
|
.el-table th.el-table__cell {
|
background-color: #f7e4c8 !important;
|
}
|
|
/* 设置偶数行背景色 */
|
table tr:nth-child(even) {
|
background-color: #f7e4c8 !important;
|
}
|
|
/* 或者设置奇数行背景色 */
|
table tr:nth-child(odd) {
|
background-color: #fff4e2 !important; //fff4e2
|
}
|
}
|
|
.base-pagination-block {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding: 10px 40px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
</style>
|
