去掉头部/书架效果

2 years ago · 7636a49fb4
10 changed files with 91 additions and 38 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "core-js": "^3.6.4",
    "echarts": "^4.6.0",
    "element-ui": "^2.15.9",
+    "swiper": "^8.4.2",
    "vue": "^2.6.11",
    "vue-awesome": "^4.0.2",
    "vue-router": "^3.1.5",
@ -31,6 +32,7 @@
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
+    "vue-awesome-swiper": "^3.1.3",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <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">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -1,11 +1,12 @@
 #bookshelf{
  width: 100%;
-  height: 1920px;
-  padding-top: 60px;
+  height: 100vh;
+  // padding-top: 60px;
  font-size: 30px;
  background: url('~@/assets/images/home/bg.png') no-repeat left top;
  background-size: cover;
  overflow: hidden;
+  overflow-y: auto;
 }

 //c-s壳占位
@ -237,7 +238,7 @@
      width: 1080px;
      background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
      overflow: hidden;
-      overflow-x: auto;
+      // overflow-x: auto;
      white-space: nowrap;
      .list-item{
        margin-right: 1.7px;
@ -280,6 +281,7 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
+    z-index: 999;
    .icon-l,.icon-r{
      font-size: 24px;
    }
--- a/src/views/authorRecommend.vue
+++ b/src/views/authorRecommend.vue
@ -1,7 +1,5 @@
 <template>
  <div id="bookshelf">
-    <HeaderTop />
-    <!-- <div class="top-bg" /> -->
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
@ -21,12 +19,10 @@
 </template>

 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import data1 from './data1.json'
 export default {
  name: 'AuthorRecommend',
  components: {
-    HeaderTop
  },
  data() {
    return {
--- a/src/views/bookRackList.vue
+++ b/src/views/bookRackList.vue
@ -1,7 +1,5 @@
 <template>
  <div id="bookshelf">
-    <HeaderTop />
-    <!-- <div class="top-bg" /> -->
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
@ -14,18 +12,44 @@
    </div>
    <div class="rack-box">
      <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)">
            <div class="box-txt">
              <span class="book-name">{{ eitem.title }}</span>
              <span class="book-writer">{{ eitem.author }}</span>
            </div>
          </li>
-        </ul>
-        <div class="rack-floor">
+        </ul> -->
+        <!-- <div class="rack-floor">
          <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>
@ -36,20 +60,29 @@
 <script>
 import data1 from './data1.json'
 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 {
  name: 'CurrentRackBook',
  components: {
-    BookDetails,
-    HeaderTop
+    BookDetails
  },
  data() {
    return {
      listData: [],
      bookList: [],
      classnameL: 'rack-direct-active',
-      classnameR: null
+      classnameR: null,
+      swiperOption: {
+        slidesPerView: 'auto',
+        slidesPerGroup: 15,
+        observer: true,
+        navigation: {
+          nextEl: '.icon-r',
+          prevEl: '.icon-l'
+        }
+      }
    }
  },
  created() {
@ -57,8 +90,25 @@ export default {
    this.bookList = data1.rackBook
  },
  mounted() {
+    this.initSwiper1()
  },
  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) {
      this.$refs.detailDom.bookData = this.bookList[index]
      this.$refs.detailDom.dialogVisible = true
@ -87,5 +137,11 @@ export default {

 <style lang="scss">
@import "~@/assets/styles/index.scss";
-
+.swiper-container{
+  position: relative;
+  width: 100%;
+}
+.swiper-slide{
+  width: 65px !important;
+}
 </style>
--- a/src/views/data1.json
+++ b/src/views/data1.json
@ -149,6 +149,18 @@
    {"id":1017,"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":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"}
  ]
 }
--- a/src/views/digitalResource.vue
+++ b/src/views/digitalResource.vue
@ -1,7 +1,5 @@
 <template>
  <div id="bookshelf">
-    <HeaderTop />
-    <!-- <div class="top-bg" /> -->
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
@ -22,12 +20,10 @@
 </template>

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

 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
 import data1 from './data1.json'
 export default {
  name: 'HotBook',
  components: {
-    HeaderTop,
    BookList
  },
  data() {
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -1,7 +1,5 @@
 <template>
  <div id="bookshelf">
-    <!-- <div class="top-bg" /> -->
-    <HeaderTop />
    <div class="bookshelf-header">
      <h2>RFID智慧书架</h2>
      <span class="shelf-num">01架</span>
@ -66,12 +64,10 @@
 <script>
 import data from './data'
 import BookListItem from '@/views/module/bookListItem.vue'
-import HeaderTop from '@/views/module/headerTop.vue'
 export default {
  name: 'Home',
  components: {
-    BookListItem,
-    HeaderTop
+    BookListItem
  },
  data() {
    return {
--- a/src/views/newBook.vue
+++ b/src/views/newBook.vue
@ -1,7 +1,5 @@
 <template>
  <div id="bookshelf">
-    <HeaderTop />
-    <!-- <div class="top-bg" /> -->
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
@ -13,12 +11,11 @@
 </template>

 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
 import data1 from './data1.json'
 export default {
  name: 'NewBook',
-  components: { HeaderTop, BookList },
+  components: { BookList },
  data() {
    return {