11 changed files with 431 additions and 45 deletions
-
69src/assets/styles/index.scss
-
4src/main.js
-
25src/router/index.js
-
31src/views/authorRecommend.vue
-
53src/views/bookRackList.vue
-
6src/views/data1.json
-
31src/views/hotBook.vue
-
21src/views/index.vue
-
156src/views/module/bookDetails.vue
-
51src/views/module/headerTop.vue
-
29src/views/newBook.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"></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> |
|||
@ -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"></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> |
|||
@ -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> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<div class="header-time"> |
|||
<div class="header-text header-date">{{ nowDate }}</div> |
|||
<span class="icon iconfont"></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> |
|||
@ -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"></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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue