xuhuajiao
/
intelligent-bookshelf
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

本架图书

master
x_ying 2 years ago
parent
797e42819f
commit
794489e7a3
4 changed files with 184 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      src/assets/styles/index.scss
  2. 47
      src/views/bookRackList.vue
  3. 9
      src/views/data1.json
  4. 2
      src/views/index.vue

132
src/assets/styles/index.scss
View File

@ -29,7 +29,7 @@
font-weight: normal;
font-size: 60px;
}
span{
.shelf-num{
display: block;
position: absolute;
top: 30px;
@ -114,15 +114,66 @@
}
// 本架图书list
.rack-box{
padding: 30px 0;
width: 100%;
overflow: hidden;
}
.rack-item{
position: relative;
margin-bottom: 30px;
}
.rack-list{
display: flex;
justify-content: space-between;
height: 314px;
padding: 0 40px;
width: 1080px;
background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
overflow: hidden;
overflow-x: auto;
white-space: nowrap
}
.rack-floor{
position: absolute;
left: 0;
bottom: 2px;
height: 50px;
width: 100%;
display: flex;
color: #fff;
align-items: center;
justify-content: space-between;
padding: 0 40px;
.icon-l,.icon-r{
font-size: 24px;
}
}
.list-item{
border: 1px solid #A2CCFF;
height: 254px;
width: 65px;
// border: 1px solid #A2CCFF;
border-radius: 4px;
overflow: hidden;
background-size: 93px 266px;
position: relative;
.box-txt{
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-40%);
.book-name,.book-writer{
writing-mode:vertical-rl;
}
.book-name{
font-size: 20px;
}
.book-writer{
font-size: 18px;
}
}
.book-info{
position: relative;
}
@ -166,6 +217,7 @@
.book-num{
right: 16px;
}
}
}
@ -195,6 +247,79 @@
}
}
.bookshelf-header .rack-direct{
position: absolute;
top: 30px;
right: 40px;
width: 220px;
height: 60px;
line-height: 60px;
// background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
background: #fff;
border-radius: 30px;
display: flex;
padding: 6px;
span{
flex: 1;
text-align: center;
line-height: 48px;
&.rack-direct-active{
background: linear-gradient(267deg, #7285FB 0%, #7285FB 9%, #4377FE 55%, #2487FF 100%);
z-index: 1;
border-radius: 24px;
color: #fff;
}
}
}
.rack-list .list-item{
&:nth-child(15n+1){
background: url('~@/assets/images/list/1.png') no-repeat -15px -13px;
}
&:nth-child(15n+2){
background: url('~@/assets/images/list/2.png') no-repeat -15px -13px;
}
&:nth-child(15n+3){
background: url('~@/assets/images/list/3.png') no-repeat -15px -13px;
}
&:nth-child(15n+4){
background: url('~@/assets/images/list/4.png') no-repeat -15px -13px;
}
&:nth-child(15n+5){
background: url('~@/assets/images/list/5.png') no-repeat -15px -13px;
}
&:nth-child(15n+6){
background: url('~@/assets/images/list/6.png') no-repeat -15px -13px;
}
&:nth-child(15n+7){
background: url('~@/assets/images/list/7.png') no-repeat -15px -13px;
}
&:nth-child(15n+8){
background: url('~@/assets/images/list/8.png') no-repeat -15px -13px;
}
&:nth-child(15n+9){
background: url('~@/assets/images/list/9.png') no-repeat -15px -13px;
}
&:nth-child(15n+10){
background: url('~@/assets/images/list/10.png') no-repeat -15px -13px;
}
&:nth-child(15n+11){
background: url('~@/assets/images/list/11.png') no-repeat -15px -13px;
}
&:nth-child(15n+12){
background: url('~@/assets/images/list/12.png') no-repeat -15px -13px;
}
&:nth-child(15n+13){
background: url('~@/assets/images/list/13.png') no-repeat -15px -13px;
}
&:nth-child(15n+14){
background: url('~@/assets/images/list/14.png') no-repeat -15px -13px;
}
&:nth-child(15n+15){
background: url('~@/assets/images/list/15.png') no-repeat -15px -13px;
}
}
// 新书推荐
.new-recommend{
height: 448px;
@ -218,4 +343,5 @@
margin-bottom: 0;
}
}
}
}

47
src/views/bookRackList.vue
View File

@ -1,23 +1,66 @@
<template>
<div id="bookshelf">
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header">
<div class="bookshelf-header" style="height:120px">
<h2>本架图书</h2>
<span>01架</span>
<div class="rack-direct">
<span class="rack-direct-active">左</span>
<span>右</span>
</div>
</div>
<div class="rack-box">
<div v-for="(item) in listData" :key="item" class="rack-item">
<ul class="rack-list">
<li class="list-item">
<div class="box-txt">
<span class="book-name">书书书</span>
<span class="book-writer">作者</span>
</div>
</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
<!-- 15 -->
<li class="list-item">书</li>
<li class="list-item">书</li>
<li class="list-item">书</li>
</ul>
<div class="rack-floor">
<span class="icon iconfont icon-l">&#xe631;</span>
<p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
<span class="icon iconfont icon-r">&#xe62f;</span>
</div>
</div>
</div>
</div>
</template>
<script>
import data1 from './data1.json'
export default {
name: 'CurrentRackBook',
components: {
},
data() {
return {
listData: [
]
}
},
created() {
this.listData = data1.listData
},
mounted() {
},

9
src/views/data1.json
View File

@ -0,0 +1,9 @@
{
"listData":[
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 },
{ "id": 5 }
]
}

2
src/views/index.vue
View File

@ -3,7 +3,7 @@
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header">
<h2>RFID智慧书架</h2>
<span>01架</span>
<span class="shelf-num">01架</span>
</div>
<!-- 本架分类 -->
<div class="book-category">

Write Preview
Loading…
Cancel
Save