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

去掉头部/书架效果

master
xuhuajiao 2 years ago
parent
a37eb1e014
commit
7636a49fb4
10 changed files with 91 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 2
      public/index.html
  3. 8
      src/assets/styles/index.scss
  4. 4
      src/views/authorRecommend.vue
  5. 80
      src/views/bookRackList.vue
  6. 14
      src/views/data1.json
  7. 4
      src/views/digitalResource.vue
  8. 4
      src/views/hotBook.vue
  9. 6
      src/views/index.vue
  10. 5
      src/views/newBook.vue

2
package.json
View File

@ -16,6 +16,7 @@
"core-js": "^3.6.4", "core-js": "^3.6.4",
"echarts": "^4.6.0", "echarts": "^4.6.0",
"element-ui": "^2.15.9", "element-ui": "^2.15.9",
"swiper": "^8.4.2",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-awesome": "^4.0.2", "vue-awesome": "^4.0.2",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
@ -31,6 +32,7 @@
"eslint-plugin-vue": "^6.1.2", "eslint-plugin-vue": "^6.1.2",
"sass": "^1.25.0", "sass": "^1.25.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-awesome-swiper": "^3.1.3",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
"eslintConfig": { "eslintConfig": {

2
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>

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

@ -1,11 +1,12 @@
#bookshelf{ #bookshelf{
width: 100%; width: 100%;
height: 1920px;
padding-top: 60px;
height: 100vh;
// padding-top: 60px;
font-size: 30px; font-size: 30px;
background: url('~@/assets/images/home/bg.png') no-repeat left top; background: url('~@/assets/images/home/bg.png') no-repeat left top;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
overflow-y: auto;
} }
//c-s壳占位 //c-s壳占位
@ -237,7 +238,7 @@
width: 1080px; width: 1080px;
background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px; background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
overflow: hidden; overflow: hidden;
overflow-x: auto;
// overflow-x: auto;
white-space: nowrap; white-space: nowrap;
.list-item{ .list-item{
margin-right: 1.7px; margin-right: 1.7px;
@ -280,6 +281,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 40px; padding: 0 40px;
z-index: 999;
.icon-l,.icon-r{ .icon-l,.icon-r{
font-size: 24px; font-size: 24px;
} }

4
src/views/authorRecommend.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<HeaderTop />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header" style="height:120px"> <div class="bookshelf-header" style="height:120px">
<router-link to="/"> <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span> <span class="icon iconfont icon-l">&#xe631;</span>
@ -21,12 +19,10 @@
</template> </template>
<script> <script>
import HeaderTop from '@/views/module/headerTop.vue'
import data1 from './data1.json' import data1 from './data1.json'
export default { export default {
name: 'AuthorRecommend', name: 'AuthorRecommend',
components: { components: {
HeaderTop
}, },
data() { data() {
return { return {

80
src/views/bookRackList.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<HeaderTop />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header" style="height:120px"> <div class="bookshelf-header" style="height:120px">
<router-link to="/"> <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span> <span class="icon iconfont icon-l">&#xe631;</span>
@ -14,18 +12,44 @@
</div> </div>
<div class="rack-box"> <div class="rack-box">
<div v-for="(item,index) in listData" :key="index" class="rack-item"> <div v-for="(item,index) in listData" :key="index" class="rack-item">
<ul class="rack-box-list">
<!-- <ul class="rack-box-list">
<li v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)"> <li v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
<div class="box-txt"> <div class="box-txt">
<span class="book-name">{{ eitem.title }}</span> <span class="book-name">{{ eitem.title }}</span>
<span class="book-writer">{{ eitem.author }}</span> <span class="book-writer">{{ eitem.author }}</span>
</div> </div>
</li> </li>
</ul>
<div class="rack-floor">
</ul> -->
<!-- <div class="rack-floor">
<span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span> <span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span>
<p><span style="margin-right:25px" @click="handlePage(1)">第一层</span><span>(共15本)</span></p>
<span class="icon iconfont icon-r">&#xe62f;</span>
<p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
<span class="icon iconfont icon-r" @click="handlePage(1)">&#xe62f;</span>
</div> -->
<!-- <swiper
class="swiper rack-box-list"
:options="swiperOption"
>
<swiper-slide v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
<div class="box-txt">
<span class="book-name">{{ eitem.title }} {{ eindex+1 }}</span>
<span class="book-writer">{{ eitem.author }}</span>
</div>
</swiper-slide>
</swiper> -->
<div :class="['swiper'+index,'rack-box-list']">
<div class="swiper-wrapper">
<div v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eindex)">
<div class="box-txt">
<span class="book-name">{{ eitem.title }} {{ eindex+1 }}</span>
<span class="book-writer">{{ eitem.author }}</span>
</div>
</div>
</div>
</div>
<div :class="['swiper-nav'+index,'rack-floor']">
<span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
<p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共 {{ bookList.length }}本)</span></p>
<span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
</div> </div>
</div> </div>
</div> </div>
@ -36,20 +60,29 @@
<script> <script>
import data1 from './data1.json' import data1 from './data1.json'
import BookDetails from './module/bookDetails.vue' import BookDetails from './module/bookDetails.vue'
import HeaderTop from '@/views/module/headerTop.vue'
import { Swiper } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default { export default {
name: 'CurrentRackBook', name: 'CurrentRackBook',
components: { components: {
BookDetails,
HeaderTop
BookDetails
}, },
data() { data() {
return { return {
listData: [], listData: [],
bookList: [], bookList: [],
classnameL: 'rack-direct-active', classnameL: 'rack-direct-active',
classnameR: null
classnameR: null,
swiperOption: {
slidesPerView: 'auto',
slidesPerGroup: 15,
observer: true,
navigation: {
nextEl: '.icon-r',
prevEl: '.icon-l'
}
}
} }
}, },
created() { created() {
@ -57,8 +90,25 @@ export default {
this.bookList = data1.rackBook this.bookList = data1.rackBook
}, },
mounted() { mounted() {
this.initSwiper1()
}, },
methods: { methods: {
initSwiper1() {
this.$nextTick(() => {
// const objName = document.get
this.bookList.forEach((el, index) => {
new Swiper('.swiper' + index, {
slidesPerView: 'auto',
slidesPerGroup: 15,
observer: true,
navigation: {
nextEl: '.icon-r' + index,
prevEl: '.icon-l' + index
}
})
})
})
},
handleDetails(index) { handleDetails(index) {
this.$refs.detailDom.bookData = this.bookList[index] this.$refs.detailDom.bookData = this.bookList[index]
this.$refs.detailDom.dialogVisible = true this.$refs.detailDom.dialogVisible = true
@ -87,5 +137,11 @@ export default {
<style lang="scss"> <style lang="scss">
@import "~@/assets/styles/index.scss"; @import "~@/assets/styles/index.scss";
.swiper-container{
position: relative;
width: 100%;
}
.swiper-slide{
width: 65px !important;
}
</style> </style>

14
src/views/data1.json
View File

@ -149,6 +149,18 @@
{"id":1017,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}, {"id":1017,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1018,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}, {"id":1018,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1019,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}, {"id":1019,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
{"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1021,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1022,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1023,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1024,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1025,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1026,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1027,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1028,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1029,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1030,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1031,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
{"id":1032,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
] ]
} }

4
src/views/digitalResource.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<HeaderTop />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header" style="height:120px"> <div class="bookshelf-header" style="height:120px">
<router-link to="/"> <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span> <span class="icon iconfont icon-l">&#xe631;</span>
@ -22,12 +20,10 @@
</template> </template>
<script> <script>
import HeaderTop from '@/views/module/headerTop.vue'
import data1 from './data1.json' import data1 from './data1.json'
export default { export default {
name: 'DigitalResource', name: 'DigitalResource',
components: { components: {
HeaderTop
}, },
data() { data() {
return { return {

4
src/views/hotBook.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<HeaderTop />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header" style="height:120px"> <div class="bookshelf-header" style="height:120px">
<router-link to="/"> <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span> <span class="icon iconfont icon-l">&#xe631;</span>
@ -13,13 +11,11 @@
</template> </template>
<script> <script>
import HeaderTop from '@/views/module/headerTop.vue'
import BookList from '@/views/module/bookList.vue' import BookList from '@/views/module/bookList.vue'
import data1 from './data1.json' import data1 from './data1.json'
export default { export default {
name: 'HotBook', name: 'HotBook',
components: { components: {
HeaderTop,
BookList BookList
}, },
data() { data() {

6
src/views/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<!-- <div class="top-bg" /> -->
<HeaderTop />
<div class="bookshelf-header"> <div class="bookshelf-header">
<h2>RFID智慧书架</h2> <h2>RFID智慧书架</h2>
<span class="shelf-num">01架</span> <span class="shelf-num">01架</span>
@ -66,12 +64,10 @@
<script> <script>
import data from './data' import data from './data'
import BookListItem from '@/views/module/bookListItem.vue' import BookListItem from '@/views/module/bookListItem.vue'
import HeaderTop from '@/views/module/headerTop.vue'
export default { export default {
name: 'Home', name: 'Home',
components: { components: {
BookListItem,
HeaderTop
BookListItem
}, },
data() { data() {
return { return {

5
src/views/newBook.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div id="bookshelf"> <div id="bookshelf">
<HeaderTop />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header" style="height:120px"> <div class="bookshelf-header" style="height:120px">
<router-link to="/"> <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span> <span class="icon iconfont icon-l">&#xe631;</span>
@ -13,12 +11,11 @@
</template> </template>
<script> <script>
import HeaderTop from '@/views/module/headerTop.vue'
import BookList from '@/views/module/bookList.vue' import BookList from '@/views/module/bookList.vue'
import data1 from './data1.json' import data1 from './data1.json'
export default { export default {
name: 'NewBook', name: 'NewBook',
components: { HeaderTop, BookList },
components: { BookList },
data() { data() {
return { return {

Write Preview
Loading…
Cancel
Save