大数据展示系统-前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

82 lines
1.8 KiB

<template>
<div id="bookshelf">
<div class="bookshelf-header" style="height:120px">
<router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span>
</router-link>
<h2>数字资源</h2>
</div>
<div class="main">
<div v-for="(item,index) in srcList" :key="index" class="main-item" @click="jump(item.nrsUrl)">
<img :src="'data:image/png;base64,' + item.nrsImages" />
<div class="title" :style="{ fontSize: item.nrsTitle.length >6 ? '60px' : '80px'}">
{{ item.nrsTitle }}
</div>
</div>
</div>
</div>
</template>
<script>
import { initNumberResoures } from '@/api/bookshelf'
export default {
name: 'DigitalResource',
components: {
},
data() {
return {
srcList: []
}
},
created() {
this.getInfo()
},
methods: {
getInfo() {
initNumberResoures({ libcode: this.libcode }).then(data => {
this.srcList = data
})
},
jump(url) {
window.location.href = url
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
.main{
padding-top: 40px;
height: calc(100vh - 180px);
overflow: hidden;
overflow-y:auto ;
.main-item{
// height: 387px;
margin-bottom: 40px;
padding: 0 40px;
// overflow: hidden;
position: relative;
img{
width: 100%;
}
.title{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-family: "HuXiaoBoNanShenTi";
font-size: 80px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
text-align: center;
}
}
}
</style>