本地图书 图书详情 当前时间 / 其他各基础页面 / 样式恢复

src/assets/styles/index.scss

@@ -120,6 +120,7 @@
 }
 
 .list-item{
+  border: 1px solid #A2CCFF;
   border-radius: 4px;
   overflow: hidden;
   .book-info{
@@ -195,17 +196,42 @@
   }
 }
 
+// 新书推荐
+.new-recommend{
+  height: 448px;
+  margin: 30px 40px 0 40px;
+}
+
+.list-small{
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  .list-item{
+    width: 200px;
+    border: none;
+    img{
+      display: block;
+      width: 100%;
+      height: 240px;
+      margin-bottom: 10px;
+    }
+    .book-title{
+      margin-bottom: 0;
+    }
+  }
+}
+
 //本架图书页面
 .rack-box{
   padding: 30px 0;
   width: 100%;
-  overflow: hidden;
   .rack-item{
     position: relative;
     margin-bottom: 30px;
+    overflow: hidden;
     .rack-box-list{
-      display: flex;
-      justify-content: space-between;
+      // display: flex;
+      // justify-content: space-between;
       height: 314px;
       padding: 0 40px;
       width: 1080px;
@@ -214,6 +240,9 @@
       overflow-x: auto;
       white-space: nowrap;
       .list-item{
+        margin-right: 1.7px;
+        display: inline-block;
+        border: none;
         height: 254px;
         width: 65px;
         background-size: 93px 266px;
@@ -253,6 +282,14 @@
   }
 }
 
+.bookshelf-header .icon-l{
+  color: #fff;
+  font-size: 40px;
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .bookshelf-header .rack-direct{
     position: absolute;
     top: 30px;
@@ -327,28 +364,4 @@
   }
 }
 
-// 新书推荐
-.new-recommend{
-  height: 448px;
-  margin: 30px 40px 0 40px;
-}
-
-.list-small{
-  display: flex;
-  justify-content: space-between;
-  justify-items: center;
-  .list-item{
-    width: 200px;
-    border: none;
-    img{
-      display: block;
-      width: 100%;
-      height: 240px;
-      margin-bottom: 10px;
-    }
-    .book-title{
-      margin-bottom: 0;
-    }
-  }
-}
-
+// 新书推荐页面

src/main.js

@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+// element-ui
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
 // 适配flex
 import '@/common/flexible.js'
 

src/router/index.js

@@ -19,7 +19,32 @@ const routes = [
     meta: {
       title: '本架图书'
     }
+  },
+  {
+    path: '/NewBook',
+    name: 'NewBook',
+    component: () => import('@/views/newBook.vue'),
+    meta: {
+      title: '新书推荐'
+    }
+  },
+  {
+    path: '/HotBook',
+    name: 'HotBook',
+    component: () => import('@/views/hotBook.vue'),
+    meta: {
+      title: '热门图书'
     }
+  },
+  {
+    path: '/AuthorRecommend',
+    name: 'AuthorRecommend',
+    component: () => import('@/views/authorRecommend.vue'),
+    meta: {
+      title: '作者推荐'
+    }
+  }
+
 ]
 
 const router = new VueRouter({

src/views/authorRecommend.vue

@@ -0,0 +1,31 @@
+<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>
+      </router-link>
+      <h2>作者推荐</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'AuthorRecommend',
+  components: {
+    HeaderTop
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>

src/views/bookRackList.vue

@@ -1,19 +1,23 @@
 <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>
+      </router-link>
       <h2>本架图书</h2>
       <div class="rack-direct">
-        <span class="rack-direct-active">左</span>
-        <span>右</span>
+        <span :class="classnameL" @click="handleDirect(-1)">左</span>
+        <span :class="classnameR" @click="handleDirect(1)">右</span>
       </div>
     </div>
     <div class="rack-box">
       <div v-for="(item) in listData" :key="item" class="rack-item">
         <ul class="rack-box-list">
-          <li class="list-item">
+          <li class="list-item" @click="handleDetails">
             <div class="box-txt">
-              <span class="book-name">书书书</span>
+              <span class="book-name">书名书名书名</span>
               <span class="book-writer">作者</span>
             </div>
           </li>
@@ -32,31 +36,37 @@
           <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>
-          <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-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>
         </div>
       </div>
     </div>
+    <BookDetails ref="detailDom" />
   </div>
 </template>
 
 <script>
 import data1 from './data1.json'
+import BookDetails from './module/bookDetails.vue'
+import HeaderTop from '@/views/module/headerTop.vue'
+
 export default {
   name: 'CurrentRackBook',
   components: {
+    BookDetails,
+    HeaderTop
   },
   data() {
     return {
-      listData: [
-
-      ]
+      listData: [],
+      classnameL: 'rack-direct-active',
+      classnameR: null
     }
   },
   created() {
@@ -65,6 +75,27 @@ export default {
   mounted() {
   },
   methods: {
+    handleDetails() {
+      this.$refs.detailDom.dialogVisible = true
+    },
+    // 翻页
+    handlePage(page) {
+      if (page === 1) {
+        // 下一页
+      } else {
+        // 上一页
+      }
+    },
+    // 控制左右
+    handleDirect(n) {
+      if (n === -1) { // 左
+        this.classnameR = null
+        this.classnameL = 'rack-direct-active'
+      } else { // 右
+        this.classnameL = null
+        this.classnameR = 'rack-direct-active'
+      }
+    }
   }
 }
 </script>

src/views/data1.json

@@ -1,6 +1,10 @@
 {
   "listData":[
-    { "id": 1 },
+    [
+      {
+        "id":1
+      }
+    ],
     { "id": 2 },
     { "id": 3 },
     { "id": 4 },

src/views/hotBook.vue

@@ -0,0 +1,31 @@
+<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>
+      </router-link>
+      <h2>热门图书</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'HotBook',
+  components: {
+    HeaderTop
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>

src/views/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="bookshelf">
     <!-- <div class="top-bg" /> -->
+    <HeaderTop />
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
       <span class="shelf-num">01架</span>
@@ -16,11 +17,11 @@
         <img src="~@/assets/images/home/nav1.png">
         <p>图书检索</p>
       </li>
-      <li>
+      <li @click="toHotBook">
         <img src="~@/assets/images/home/nav2.png">
         <p>热门图书</p>
       </li>
-      <li>
+      <li @click="toAuthor">
         <img src="~@/assets/images/home/nav3.png">
         <p>作者推荐</p>
       </li>
@@ -55,7 +56,7 @@
         <div class="list-top-title">
           <p>新书推荐</p>
         </div>
-        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
+        <span class="more" @click="toNewBook">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
       <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
     </div>
@@ -65,11 +66,12 @@
 <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
+    BookListItem,
+    HeaderTop
   },
   data() {
     return {
@@ -89,6 +91,15 @@ export default {
   methods: {
     toCurrentRackMore() {
       this.$router.push('/CurrentRackBook')
+    },
+    toNewBook() {
+      this.$router.push('/newBook')
+    },
+    toHotBook() {
+      this.$router.push('/hotBook')
+    },
+    toAuthor() {
+      this.$router.push('/authorRecommend')
     }
   }
 }

src/views/module/bookDetails.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <el-dialog
+      title="图书详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+    >
+      <!-- :before-close="handleClose" -->
+      <div class="dialog-setting">
+        <div class="book-details-box">
+          <div class="book-details">
+            <div class="book-cover">
+              <img :src="bookData.img" alt="">
+            </div>
+            <div class="book-desc">
+              <h3>{{ bookData.title }}</h3>
+              <p class="book-from">作者：{{ bookData.author }}</p>
+              <p class="book-from">出版社：{{ bookData.author }}</p>
+              <p class="book-brief">简介：哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈</p>
+            </div>
+          </div>
+          <div class="book-local">
+            位置
+          </div>
+        </div>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from '../data.json'
+export default {
+  name: 'BookDetails',
+  data() {
+    return {
+      dialogVisible: false,
+      bookData: null
+    }
+  },
+  created() {
+    this.bookData = data.bookList[0]
+  },
+  methods: {
+    // handleClose() {
+
+    // }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%);
+  border-radius: 24px;
+  .el-dialog__body{
+  padding: 0 40px 40px 40px ;
+  }
+}
+::v-deep .el-dialog__header{
+  text-align: center;
+  padding-top:0 ;
+  padding-bottom:4px ;
+  .el-dialog__title{
+    display: inline-block;
+    font-family: "ZhenyanGB";
+    font-size: 40px;
+    width: 494px;
+    height: 76px;
+    line-height: 76px;
+      background: url('~@/assets/images/list/list-title.png') no-repeat 0 0;
+  }
+}
+::v-deep .el-dialog__headerbtn{
+  background-color: #3F92F6;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  .el-dialog__close{
+    color: #fff;
+    font-size: 30px;
+  }
+}
+.book-details-box{
+  .book-details{
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0;
+    .book-cover{
+      width: 318px;
+      height: 382px;
+      margin-right: 40px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .book-desc{
+      flex: 1;
+      color: #333;
+      overflow: hidden;
+      h3{
+        font-size: 40px;
+        font-weight: normal;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 20px;
+      }
+      .book-from{
+        width: 100%;
+        font-size: 30px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .book-brief{
+        font-size: 24px;
+        margin-bottom: 20px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .book-local{
+    border: 1px solid #3F92F6;
+    background: #D0E0F9;
+    border-radius: 52px;
+    height: 64px;
+    line-height: 64px;
+    text-align: center;
+    font-size: 30px;
+    color: #333;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>

src/views/module/headerTop.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="header-time">
+    <div class="header-text header-date">{{ nowDate }}</div>
+    <span class="icon iconfont">&#xe634;</span>
+  </div>
+</template>
+
+<script>
+import { getCurrentTime } from '@/utils/index'
+
+export default {
+  name: 'HeaderTop',
+  data() {
+    return {
+      nowDate: ''
+    }
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.nowDate = getCurrentTime()
+    }, 1000)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-time{
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #3F92F6;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  font-size: 30px;
+  color: #fff;
+  padding: 0 40px;
+  span{
+    width: 35px;
+    height: 45px;
+    font-size: 30px;
+    z-index: 1;
+  }
+}
+</style>

src/views/newBook.vue

@@ -0,0 +1,29 @@
+<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>
+      </router-link>
+      <h2>新书推荐</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'NewBook',
+  components: { HeaderTop }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>