4 changed files with 366 additions and 367 deletions
-
34.env.development
-
132src/api/inquiryMachine.js
-
106src/utils/request.js
-
461src/views/newBookRecommend.vue
@ -1,19 +1,15 @@ |
|||||
ENV = 'development' |
|
||||
|
|
||||
# 接口地址 |
|
||||
|
|
||||
#内网服务地址 |
|
||||
#VUE_APP_BASE_API = 'http://120.76.47.59:8080' |
|
||||
VUE_APP_BASE_API = 'http://192.168.99.84:8080' |
|
||||
VUE_APP_WS_API = 'ws://192.168.99.84:8080' |
|
||||
|
|
||||
# 刘力-本地服地址 |
|
||||
#VUE_APP_BASE_API = 'http://192.168.99.65:7070' |
|
||||
#VUE_APP_WS_API = 'ws://192.168.99.65:7071' |
|
||||
|
|
||||
# 许镇-本地服地址 |
|
||||
#VUE_APP_BASE_API = 'http://192.168.99.84:7070' |
|
||||
#VUE_APP_WS_API = 'ws://192.168.99.84:7070' |
|
||||
|
|
||||
# 是否启用 babel-plugin-dynamic-import-node插件 |
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true |
|
||||
|
ENV = 'development' |
||||
|
|
||||
|
# 接口地址 |
||||
|
|
||||
|
#内网服务地址 |
||||
|
#VUE_APP_BASE_API = 'http://120.76.47.59:8080' |
||||
|
# VUE_APP_BASE_API = 'http://192.168.99.84:8080' |
||||
|
# VUE_APP_WS_API = 'ws://192.168.99.84:8080' |
||||
|
|
||||
|
# 许镇-本地服地址 |
||||
|
VUE_APP_BASE_API = 'http://192.168.99.67:8080' |
||||
|
VUE_APP_WS_API = 'ws://192.168.99.67:8081' |
||||
|
|
||||
|
# 是否启用 babel-plugin-dynamic-import-node插件 |
||||
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true |
||||
@ -1,66 +1,66 @@ |
|||||
import request from '@/utils/request' |
|
||||
// import qs from 'qs'
|
|
||||
|
|
||||
// 活动资讯/活动预告
|
|
||||
export function activityInquiry(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/activityInquiry', |
|
||||
method: 'get', |
|
||||
params: params |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 图书馆简介
|
|
||||
export function libraryIntro(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/libraryIntro', |
|
||||
method: 'get', |
|
||||
params: params |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 数字资源
|
|
||||
export function initNumberResoures(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/initNumberResoures', |
|
||||
method: 'get', |
|
||||
params: params |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 新书推荐
|
|
||||
export function FetchNewBookRecommend(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/newBookRecommend', |
|
||||
method: 'get', |
|
||||
params: params |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 通过isbn获取图书封面
|
|
||||
export function FetchCoverByISBN(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/getCoverByISBN', |
|
||||
method: 'get', |
|
||||
params: params, |
|
||||
responseType: 'blob' |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 图书详情
|
|
||||
export function getBookDetailsByISBN(params) { |
|
||||
return request({ |
|
||||
url: '/dxhtsg/getBookDetailsByISBN', |
|
||||
method: 'get', |
|
||||
params: params |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
activityInquiry, |
|
||||
libraryIntro, |
|
||||
FetchNewBookRecommend, |
|
||||
FetchCoverByISBN, |
|
||||
initNumberResoures, |
|
||||
getBookDetailsByISBN |
|
||||
} |
|
||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
// 活动资讯/活动预告
|
||||
|
export function activityInquiry(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/activityInquiry', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 图书馆简介
|
||||
|
export function libraryIntro(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/libraryIntro', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 数字资源
|
||||
|
export function initNumberResoures(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initNumberResoures', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 新书推荐
|
||||
|
export function FetchNewBookRecommend(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/newBookRecommend', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通过isbn获取图书封面
|
||||
|
export function FetchCoverByISBN(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getCoverByISBN', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
// responseType: 'blob'
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 图书详情
|
||||
|
export function getBookDetailsByISBN(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getBookDetailsByISBN', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
activityInquiry, |
||||
|
libraryIntro, |
||||
|
FetchNewBookRecommend, |
||||
|
FetchCoverByISBN, |
||||
|
initNumberResoures, |
||||
|
getBookDetailsByISBN |
||||
|
} |
||||
@ -1,52 +1,54 @@ |
|||||
import axios from 'axios' |
|
||||
import { Message } from 'element-ui' |
|
||||
|
|
||||
// 创建axios实例
|
|
||||
const service = axios.create({ |
|
||||
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
|
|
||||
timeout: 1000 * 30, // 请求超时时间
|
|
||||
headers: { |
|
||||
'Content-Type': 'application/json' |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// request拦截器
|
|
||||
service.interceptors.request.use( |
|
||||
config => { |
|
||||
// if (getToken()) {
|
|
||||
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
|
||||
// }
|
|
||||
const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
|
|
||||
config.headers['Authorization'] = token || '' |
|
||||
return config |
|
||||
}, |
|
||||
error => { |
|
||||
console.error('error: ', error) |
|
||||
Promise.reject(error) |
|
||||
} |
|
||||
) |
|
||||
|
|
||||
// response 拦截器
|
|
||||
service.interceptors.response.use( |
|
||||
response => { |
|
||||
const errorMsg = response.data.errMsg |
|
||||
if (response.status === 200) { |
|
||||
// console.log(response.data.data)
|
|
||||
if (response.data instanceof Blob) { |
|
||||
return response.data |
|
||||
} else { |
|
||||
return response.data.data |
|
||||
} |
|
||||
} else { |
|
||||
Message.error({ |
|
||||
message: errorMsg, |
|
||||
duration: 5000 |
|
||||
}) |
|
||||
Promise.reject() |
|
||||
} |
|
||||
}, |
|
||||
error => { |
|
||||
return Promise.reject(error) |
|
||||
} |
|
||||
) |
|
||||
export default service |
|
||||
|
import axios from 'axios' |
||||
|
import { Message } from 'element-ui' |
||||
|
|
||||
|
// 创建axios实例
|
||||
|
const service = axios.create({ |
||||
|
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
|
||||
|
timeout: 1000 * 30, // 请求超时时间
|
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// request拦截器
|
||||
|
service.interceptors.request.use( |
||||
|
config => { |
||||
|
// if (getToken()) {
|
||||
|
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
|
// }
|
||||
|
const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
|
||||
|
config.headers['Authorization'] = token || '' |
||||
|
return config |
||||
|
}, |
||||
|
error => { |
||||
|
console.error('error: ', error) |
||||
|
Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
// response 拦截器
|
||||
|
service.interceptors.response.use( |
||||
|
response => { |
||||
|
const errorMsg = response.data.errMsg |
||||
|
if (response.status === 200) { |
||||
|
// console.log(response.data.data)
|
||||
|
if (response.data instanceof Blob) { |
||||
|
return response.data |
||||
|
} else if (response.data.data) { |
||||
|
return response.data.data |
||||
|
} else { |
||||
|
return response.data |
||||
|
} |
||||
|
} else { |
||||
|
Message.error({ |
||||
|
message: errorMsg, |
||||
|
duration: 5000 |
||||
|
}) |
||||
|
Promise.reject() |
||||
|
} |
||||
|
}, |
||||
|
error => { |
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
export default service |
||||
@ -1,230 +1,231 @@ |
|||||
<template> |
|
||||
<!-- 新书推荐 --> |
|
||||
<div class="content-main new-main"> |
|
||||
<div class="swiper-container"> |
|
||||
<div class="swiper-wrapper new-book-list"> |
|
||||
<div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)"> |
|
||||
<div class="book-list-item"> |
|
||||
<div class="book-img"> |
|
||||
<img :src="item.cover" :onerror="defaultImg"> |
|
||||
</div> |
|
||||
<div class="book-info"> |
|
||||
<h4 class="title-item">{{ item.nbName }}</h4> |
|
||||
<p>作者：{{ item.nbAuthor }}</p> |
|
||||
<p>出版社：{{ item.nbPublisher }}</p> |
|
||||
<p>出版年份：{{ item.nbPublisherdate }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="icon iconfont prev-btn"> |
|
||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-zuohua" /> |
|
||||
</svg> |
|
||||
</div> |
|
||||
<div class="icon iconfont next-btn"> |
|
||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-youhua" /> |
|
||||
</svg> |
|
||||
</div> |
|
||||
</div> |
|
||||
<BookDetails ref="detailDom" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { Swiper } from 'vue-awesome-swiper' |
|
||||
import 'swiper/swiper-bundle.css' |
|
||||
import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine' |
|
||||
import BookDetails from './module/bookDetails.vue' |
|
||||
export default { |
|
||||
name: 'NewBookRecommend', |
|
||||
components: { |
|
||||
BookDetails |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
||||
coverUrl: null, |
|
||||
rankingList: [] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getBookList() |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
initSwiper() { |
|
||||
this.$nextTick(() => { |
|
||||
new Swiper('.swiper-container', { |
|
||||
touchEventsTarget: '.swiper-container', |
|
||||
slidesPerView: 5, |
|
||||
spaceBetween: 20, |
|
||||
centeredSlides: true, |
|
||||
observer: true, |
|
||||
// loop: true, |
|
||||
centeredSlidesBounds: true, |
|
||||
watchSlidesVisibility: true, |
|
||||
navigation: { |
|
||||
nextEl: '.next-btn', |
|
||||
prevEl: '.prev-btn' |
|
||||
} |
|
||||
// on: { |
|
||||
// click: function() { |
|
||||
// alert(this.clickedIndex) |
|
||||
// } |
|
||||
// } |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
getBookList() { |
|
||||
const params = { |
|
||||
libcode: this.libcode, |
|
||||
pageNo: 1, |
|
||||
pageSize: 10 |
|
||||
} |
|
||||
FetchNewBookRecommend(params).then(res => { |
|
||||
console.log(res) |
|
||||
let data = [] |
|
||||
data = res.newbookList |
|
||||
data.forEach(item => { |
|
||||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|
||||
}) |
|
||||
}).catch(() => { |
|
||||
this.$message.error('接口错误') |
|
||||
}) |
|
||||
}, |
|
||||
getCoverByISBN(isbn, item) { |
|
||||
const params = { |
|
||||
isbn: isbn |
|
||||
} |
|
||||
FetchCoverByISBN(params).then((res) => { |
|
||||
item.cover = window.URL.createObjectURL(res) |
|
||||
this.rankingList.push(item) |
|
||||
this.initSwiper() |
|
||||
}) |
|
||||
}, |
|
||||
// 详情 |
|
||||
handleDetails(index) { |
|
||||
const params = { |
|
||||
isbn: this.rankingList[index].isbn.replace(/\-/g, '') |
|
||||
} |
|
||||
getBookDetailsByISBN(params).then(res => { |
|
||||
this.$refs.detailDom.bookData = res |
|
||||
this.$refs.detailDom.dialogVisible = true |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
.new-main{ |
|
||||
position: relative; |
|
||||
padding: 0 50px; |
|
||||
} |
|
||||
.new-book-list{ |
|
||||
color: #333; |
|
||||
.book-list-item{ |
|
||||
width: 100%; |
|
||||
box-shadow: 0px 0px 20px 1px #D2D2D2; |
|
||||
border-radius: 2px 2px 2px 2px; |
|
||||
} |
|
||||
.book-img{ |
|
||||
height: 6.575rem; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
overflow: hidden; |
|
||||
img{ |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
// height: 100%; |
|
||||
} |
|
||||
} |
|
||||
.book-info{ |
|
||||
padding: 10px 20px; |
|
||||
h4{ |
|
||||
font-weight: normal; |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
p{ |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.icon{ |
|
||||
height: 1.1em; |
|
||||
} |
|
||||
.prev-btn, |
|
||||
.next-btn{ |
|
||||
position: absolute; |
|
||||
bottom: 60px; |
|
||||
font-size: 60px; |
|
||||
// color: #71C09E; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
|
|
||||
.prev-btn{ |
|
||||
left: 100px; |
|
||||
} |
|
||||
|
|
||||
.next-btn{ |
|
||||
right: 100px; |
|
||||
} |
|
||||
|
|
||||
.swiper-container { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.swiper-slide { |
|
||||
display: -webkit-box; |
|
||||
display: -ms-flexbox; |
|
||||
display: -webkit-flex; |
|
||||
display: flex; |
|
||||
-webkit-box-pack: center; |
|
||||
-ms-flex-pack: center; |
|
||||
-webkit-justify-content: center; |
|
||||
justify-content: center; |
|
||||
-webkit-box-align: center; |
|
||||
-ms-flex-align: center; |
|
||||
-webkit-align-items: center; |
|
||||
align-items: center; |
|
||||
transition: 300ms; |
|
||||
transform: scale(0.84); |
|
||||
.book-info{ |
|
||||
line-height: 20px; |
|
||||
font-size: 16px; |
|
||||
h4{ |
|
||||
font-size: 20px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.swiper-slide.swiper-slide-prev, |
|
||||
.swiper-slide.swiper-slide-next { |
|
||||
font-size: 28px; |
|
||||
transform: scale(0.9); |
|
||||
.book-info{ |
|
||||
line-height: 28px; |
|
||||
font-size: 22px; |
|
||||
h4{ |
|
||||
font-size: 28px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.swiper-slide-active,.swiper-slide-duplicate-active { |
|
||||
transform: scaleX(1); |
|
||||
.book-info{ |
|
||||
line-height: 40px; |
|
||||
font-size: 28px; |
|
||||
h4{ |
|
||||
font-size: 40px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
<template> |
||||
|
<!-- 新书推荐 --> |
||||
|
<div class="content-main new-main"> |
||||
|
<div class="swiper-container"> |
||||
|
<div class="swiper-wrapper new-book-list"> |
||||
|
<div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)"> |
||||
|
<div class="book-list-item"> |
||||
|
<div class="book-img"> |
||||
|
<img :src="item.cover" :onerror="defaultImg"> |
||||
|
</div> |
||||
|
<div class="book-info"> |
||||
|
<h4 class="title-item">{{ item.nbName }}</h4> |
||||
|
<p>作者：{{ item.nbAuthor }}</p> |
||||
|
<p>出版社：{{ item.nbPublisher }}</p> |
||||
|
<p>出版年份：{{ item.nbPublisherdate }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="icon iconfont prev-btn"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-zuohua" /> |
||||
|
</svg> |
||||
|
</div> |
||||
|
<div class="icon iconfont next-btn"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-youhua" /> |
||||
|
</svg> |
||||
|
</div> |
||||
|
</div> |
||||
|
<BookDetails ref="detailDom" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Swiper } from 'vue-awesome-swiper' |
||||
|
import 'swiper/swiper-bundle.css' |
||||
|
import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine' |
||||
|
import BookDetails from './module/bookDetails.vue' |
||||
|
export default { |
||||
|
name: 'NewBookRecommend', |
||||
|
components: { |
||||
|
BookDetails |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
||||
|
coverUrl: null, |
||||
|
rankingList: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getBookList() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
initSwiper() { |
||||
|
this.$nextTick(() => { |
||||
|
new Swiper('.swiper-container', { |
||||
|
touchEventsTarget: '.swiper-container', |
||||
|
slidesPerView: 5, |
||||
|
spaceBetween: 20, |
||||
|
centeredSlides: true, |
||||
|
observer: true, |
||||
|
// loop: true, |
||||
|
centeredSlidesBounds: true, |
||||
|
watchSlidesVisibility: true, |
||||
|
navigation: { |
||||
|
nextEl: '.next-btn', |
||||
|
prevEl: '.prev-btn' |
||||
|
} |
||||
|
// on: { |
||||
|
// click: function() { |
||||
|
// alert(this.clickedIndex) |
||||
|
// } |
||||
|
// } |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
getBookList() { |
||||
|
const params = { |
||||
|
libcode: this.libcode, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10 |
||||
|
} |
||||
|
FetchNewBookRecommend(params).then(res => { |
||||
|
console.log(res) |
||||
|
let data = [] |
||||
|
data = res.newbookList |
||||
|
data.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
}, |
||||
|
getCoverByISBN(isbn, item) { |
||||
|
const params = { |
||||
|
isbn: isbn |
||||
|
} |
||||
|
FetchCoverByISBN(params).then((res) => { |
||||
|
// item.cover = window.URL.createObjectURL(res) |
||||
|
item.cover = res |
||||
|
this.rankingList.push(item) |
||||
|
this.initSwiper() |
||||
|
}) |
||||
|
}, |
||||
|
// 详情 |
||||
|
handleDetails(index) { |
||||
|
const params = { |
||||
|
isbn: this.rankingList[index].isbn.replace(/\-/g, '') |
||||
|
} |
||||
|
getBookDetailsByISBN(params).then(res => { |
||||
|
this.$refs.detailDom.bookData = res |
||||
|
this.$refs.detailDom.dialogVisible = true |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.new-main{ |
||||
|
position: relative; |
||||
|
padding: 0 50px; |
||||
|
} |
||||
|
.new-book-list{ |
||||
|
color: #333; |
||||
|
.book-list-item{ |
||||
|
width: 100%; |
||||
|
box-shadow: 0px 0px 20px 1px #D2D2D2; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
} |
||||
|
.book-img{ |
||||
|
height: 6.575rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
// height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.book-info{ |
||||
|
padding: 10px 20px; |
||||
|
h4{ |
||||
|
font-weight: normal; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
p{ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon{ |
||||
|
height: 1.1em; |
||||
|
} |
||||
|
.prev-btn, |
||||
|
.next-btn{ |
||||
|
position: absolute; |
||||
|
bottom: 60px; |
||||
|
font-size: 60px; |
||||
|
// color: #71C09E; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.prev-btn{ |
||||
|
left: 100px; |
||||
|
} |
||||
|
|
||||
|
.next-btn{ |
||||
|
right: 100px; |
||||
|
} |
||||
|
|
||||
|
.swiper-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.swiper-slide { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: -webkit-flex; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: center; |
||||
|
-ms-flex-pack: center; |
||||
|
-webkit-justify-content: center; |
||||
|
justify-content: center; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
-webkit-align-items: center; |
||||
|
align-items: center; |
||||
|
transition: 300ms; |
||||
|
transform: scale(0.84); |
||||
|
.book-info{ |
||||
|
line-height: 20px; |
||||
|
font-size: 16px; |
||||
|
h4{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-slide.swiper-slide-prev, |
||||
|
.swiper-slide.swiper-slide-next { |
||||
|
font-size: 28px; |
||||
|
transform: scale(0.9); |
||||
|
.book-info{ |
||||
|
line-height: 28px; |
||||
|
font-size: 22px; |
||||
|
h4{ |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-slide-active,.swiper-slide-duplicate-active { |
||||
|
transform: scaleX(1); |
||||
|
.book-info{ |
||||
|
line-height: 40px; |
||||
|
font-size: 28px; |
||||
|
h4{ |
||||
|
font-size: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue