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

首页

master
xuhuajiao 2 years ago
parent
51eee74cfd
commit
797e42819f
7 changed files with 309 additions and 127 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. 4
      src/App.vue
  2. 175
      src/assets/styles/index.scss
  3. 24
      src/router/index.js
  4. 32
      src/views/bookRackList.vue
  5. 55
      src/views/data.json
  6. 80
      src/views/index.vue
  7. 66
      src/views/module/bookListItem.vue

4
src/App.vue
View File

@ -1,6 +1,8 @@
<template>
<div id="app">
<router-view />
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>

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

@ -1,9 +1,11 @@
#bookshelf{
width: 100%;
height: 100vh;
height: 1920px;
padding-top: 60px;
font-size: 30px;
background: url('~@/assets/images/home/bg.png') no-repeat left top;
background-size: cover;
overflow: hidden;
}
//c-s壳占位
@ -76,75 +78,79 @@
}
}
.current-rack{
// 本架图书
.book-rack{
height: 770px;
margin: 0 40px;
padding: 0 40px 40px 40px;
background-color: #fff;
border-radius: 30px;
box-shadow: 0px 0px 20px 1px #B8D3FF;
.rack-top{
}
.list-top{
display: flex;
justify-content: space-between;
justify-items: center;
align-items: center;
padding: 30px 0 25px 0;
font-size: 36px;
.list-top-title{
display: flex;
justify-content: space-between;
justify-items: center;
align-items: center;
padding: 30px 0 25px 0;
font-size: 36px;
.rack-top-title{
display: flex;
justify-content: flex-start;
font-size: 40px;
line-height: 50px;
.icon{
width: 50px;
height: 50px;
margin-right: 20px;
}
justify-content: flex-start;
font-size: 40px;
line-height: 50px;
.icon{
width: 50px;
height: 50px;
margin-right: 20px;
}
.more{
.iconfont{
font-size: 30px;
margin-left: 20px;
}
}
.more{
.iconfont{
font-size: 30px;
margin-left: 20px;
}
}
}
// 本架图书list
.rack-list{
display: flex;
justify-content: space-between;
}
.list-item{
border: 1px solid #A2CCFF;
border-radius: 4px;
overflow: hidden;
.book-info{
position: relative;
}
.book-title{
font-weight: normal;
line-height: 40px;
margin-bottom: 10px;
}
.book-author{
font-size: 24px;
}
.book-num{
position: absolute;
bottom: 20px;
display: flex;
justify-content: flex-start;
font-size: 20px;
color: #999;
.icon{
width: 20px;
height: 22px;
margin-right: 10px;
}
.list-item{
border: 1px solid #A2CCFF;
border-radius: 4px;
overflow: hidden;
.book-info{
position: relative;
}
.book-title{
font-weight: normal;
line-height: 40px;
margin-bottom: 10px;
}
.book-author{
font-size: 24px;
}
.book-num{
position: absolute;
bottom: 20px;
display: flex;
justify-content: flex-start;
font-size: 20px;
color: #999;
.icon{
width: 20px;
height: 22px;
margin-right: 10px;
}
}
}
.list-big{
.list-big{
.list-item{
width: 435px;
height: 625px;
margin-right: 45px;
@ -161,30 +167,55 @@
right: 16px;
}
}
}
.list-right{
flex: 1;
.list-middle{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 625px;
.list-item{
display: flex;
flex-direction: column;
height: calc(100%/2 - 20px);
justify-content: space-between;
height: 625px;
.list-middle{
display: flex;
height: calc(100%/2 - 20px);
justify-content: space-between;
img{
display: block;
width: 244px;
height: 100%;
margin-right: 20px;
}
.book-info{
padding: 20px 0 0 0;
}
.book-num{
left: 0;
bottom: 12px;
}
img{
display: block;
width: 244px;
height: 100%;
margin-right: 20px;
}
.book-info{
padding: 20px 0 0 0;
}
.book-num{
left: 0;
bottom: 12px;
}
}
}
// 新书推荐
.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;
}
}
}

24
src/router/index.js
View File

@ -3,14 +3,24 @@ import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'index',
component: () => import('../views/index.vue'),
meta: {
title: '智慧大屏'
const routes = [
{
path: '/',
name: 'index',
component: () => import('@/views/index.vue'),
meta: {
title: '智慧书架'
}
},
{
path: '/CurrentRackBook',
name: 'CurrentRackBook',
component: () => import('@/views/bookRackList.vue'),
meta: {
title: '本架图书'
}
}
}]
]
const router = new VueRouter({
mode: 'history',

32
src/views/bookRackList.vue
View File

@ -0,0 +1,32 @@
<template>
<div id="bookshelf">
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header">
<h2>本架图书</h2>
<span>01架</span>
</div>
</div>
</template>
<script>
export default {
name: 'CurrentRackBook',
components: {
},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>

55
src/views/data.json
View File

@ -0,0 +1,55 @@
{
"bookList":[
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定1",
"ranking": 1,
"num": 2000
},
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定2",
"ranking": 2,
"num": 1200
},
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定3",
"ranking": 3,
"num": 1100
}
],
"newList":[
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定1",
"ranking": 1,
"num": 2000
},
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定2",
"ranking": 2,
"num": 1200
},
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定3",
"ranking": 3,
"num": 1100
},
{
"img":"https://qiniu.aiyxlib.com/bg.png",
"title": "大个子狗与小个子猫",
"author": "高小定4",
"ranking": 4,
"num": 1100
}
]
}

80
src/views/index.vue
View File

@ -1,14 +1,16 @@
<template>
<div id="bookshelf">
<div class="top-bg" />
<!-- <div class="top-bg" /> -->
<div class="bookshelf-header">
<h2>RFID智慧书架</h2>
<span>01架</span>
</div>
<!-- 本架分类 -->
<div class="book-category">
<p>近代文学类</p>
<p>古代文学类</p>
</div>
<!-- 智慧书架导航 -->
<ul class="book-nav">
<li>
<img src="~@/assets/images/home/nav1.png">
@ -31,83 +33,67 @@
<p>场馆导航</p>
</li>
</ul>
<div class="current-rack">
<div class="rack-top">
<div class="rack-top-title">
<!-- 本架图书 -->
<div class="book-rack">
<div class="list-top">
<div class="list-top-title">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-benjiatushu" />
</svg>
<p>本架图书</p>
</div>
<span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
<span class="more" @click="toCurrentRackMore">更多<i class="iconfont icon-zuo rotate" /></span>
</div>
<div class="rack-list">
<div class="list-item list-big">
<img src="https://qiniu.aiyxlib.com/bg.png">
<div class="book-info">
<h4 class="book-title title-item">大个子狗与小个子猫</h4>
<p class="book-author">作者姓名</p>
<div class="book-num">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-remen" />
</svg>
<p>200135</p>
</div>
</div>
</div>
<div class="list-right">
<div class="list-item list-middle">
<img src="https://qiniu.aiyxlib.com/bg.png">
<div class="book-info">
<h4 class="book-title">大个子狗与小个子猫</h4>
<p class="book-author">作者姓名</p>
<div class="book-num">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-remen" />
</svg>
<p>200135</p>
</div>
</div>
</div>
<div class="list-item list-middle">
<img src="https://qiniu.aiyxlib.com/bg.png">
<div class="book-info">
<h4 class="book-title">大个子狗与小个子猫</h4>
<p class="book-author">作者姓名</p>
<div class="book-num">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-remen" />
</svg>
<p>200135</p>
</div>
</div>
</div>
<BookListItem class="list-big" :list-data.sync="rackList" />
<BookListItem class="list-middle" :list-data.sync="otherList" :is-other-book="true" />
</div>
</div>
<!-- 新书推荐 -->
<div class="book-rack new-recommend">
<div class="list-top">
<div class="list-top-title">
<p>新书推荐</p>
</div>
<span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
</div>
<BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
</div>
</div>
</template>
<script>
import data from './data'
import BookListItem from '@/views/module/bookListItem.vue'
export default {
name: 'Home',
components: {
BookListItem
},
data() {
return {
rackList: [], // 本架图书排行第一
otherList: [], // 本架图书排行后两本
newList: [] // 新书推荐
}
},
created() {
this.rackList = data.bookList.splice(0, 1)
this.otherList = data.bookList.splice(-2)
this.newList = data.newList
},
mounted() {
},
methods: {
toCurrentRackMore() {
this.$router.push('/CurrentRackBook')
}
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>

66
src/views/module/bookListItem.vue
View File

@ -0,0 +1,66 @@
<template>
<div>
<div v-for="item in listData" :key="item.ranking" class="list-item">
<img :src="item.img">
<div class="book-info">
<h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.title }}</h4>
<p class="book-author">{{ item.author }}</p>
<div v-if="!isNewBook" class="book-num">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-remen" />
</svg>
<p>{{ item.num }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BookListItem',
props: {
listData: {
type: Array,
default: function() {
return []
}
},
isOtherBook: {
type: Boolean,
default: function() {
return false
}
},
isNewBook: {
type: Boolean,
default: function() {
return false
}
}
},
data() {
return {
}
},
watch: {
listData: function(newValue, oldValue) {
},
isOtherBook: function(newValue, oldValue) {
},
isNewBook: function(newValue, oldValue) {
}
},
created() {
console.log(this.listData)
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>
Write Preview
Loading…
Cancel
Save