40 changed files with 1286 additions and 1120 deletions
-
1package.json
-
BINsrc/assets/fonts/DingTalk_JinBuTi_Regular.ttf
-
7src/assets/fonts/fonts.css
-
BINsrc/assets/images/database-middle.png
-
BINsrc/assets/images/header-bg.png
-
BINsrc/assets/images/header-bg2.png
-
BINsrc/assets/images/header_03.png
-
BINsrc/assets/images/header_05.png
-
BINsrc/assets/images/header_07.png
-
BINsrc/assets/images/header_13.png
-
BINsrc/assets/images/header_13_b.png
-
BINsrc/assets/images/map-bg.png
-
BINsrc/assets/images/page4_02.png
-
BINsrc/assets/images/page4_03.png
-
BINsrc/assets/images/page4_06.png
-
BINsrc/assets/images/poster.png
-
116src/assets/styles/ball-running-animate.css
-
4src/assets/styles/font-some.css
-
547src/assets/styles/index.scss
-
35src/components/echart/barEcharts.vue
-
37src/components/echart/lineChartService.vue
-
8src/router/index.js
-
136src/views/accessToLibrary/index.vue
-
33src/views/header/index.vue
-
107src/views/index.vue
-
102src/views/lengingRanking/index.vue
-
91src/views/map/index.vue
-
181src/views/newBookRecommend/index.vue
-
73src/views/notice/index.vue
-
210src/views/pageFour/index.vue
-
289src/views/pageFour/module/video.vue
-
0src/views/pageOne/data.json
-
63src/views/pageOne/index.vue
-
27src/views/pageThree/index.vue
-
38src/views/pageThree/module/todayCircle.vue
-
21src/views/pageThree/module/yearCircle.vue
-
74src/views/readStar/index.vue
-
51src/views/todayBorrowed/index.vue
-
91src/views/totalLending/index.vue
-
64src/views/video/index.vue
|
After Width: 466 | Height: 512 | Size: 418 KiB |
|
Before Width: 1446 | Height: 100 | Size: 85 KiB After Width: 1451 | Height: 85 | Size: 72 KiB |
|
After Width: 1446 | Height: 100 | Size: 85 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 64 | Height: 5 | Size: 1.3 KiB |
|
After Width: 196 | Height: 6 | Size: 1.5 KiB |
|
Before Width: 554 | Height: 760 | Size: 443 KiB |
|
After Width: 1265 | Height: 3 | Size: 1.1 KiB |
|
After Width: 1330 | Height: 871 | Size: 28 KiB |
|
After Width: 467 | Height: 170 | Size: 53 KiB |
|
After Width: 1261 | Height: 710 | Size: 525 KiB |
@ -1,116 +0,0 @@ |
|||
.ball-running-dots { |
|||
position: absolute; |
|||
top: 0.2rem; |
|||
} |
|||
.left-dots { |
|||
left: 136px; |
|||
} |
|||
.right-dots { |
|||
right: 200px; |
|||
} |
|||
.ball-running-dots > div { |
|||
position: relative; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ball-running-dots { |
|||
display: block; |
|||
font-size: 0; |
|||
color: #316fd9; |
|||
} |
|||
.ball-running-dots > div { |
|||
display: inline-block; |
|||
float: none; |
|||
background-color: currentColor; |
|||
border: 0 solid currentColor; |
|||
} |
|||
.ball-running-dots { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
.ball-running-dots > div { |
|||
position: absolute; |
|||
margin-left: 30px; |
|||
border-radius: 100%; |
|||
} |
|||
.left-dots > div { |
|||
animation: ball-running-dots-animate 2s linear infinite; |
|||
} |
|||
.right-dots > div { |
|||
animation: ball-running-dots-animate2 2s linear infinite; |
|||
} |
|||
.ball-running-dots > div:nth-child(1) { |
|||
animation-delay: 0s; |
|||
} |
|||
.ball-running-dots > div:nth-child(2) { |
|||
animation-delay: -0.8s; |
|||
} |
|||
.ball-running-dots > div:nth-child(3) { |
|||
animation-delay: -1.2s; |
|||
} |
|||
.ball-running-dots > div:nth-child(4) { |
|||
animation-delay: -1.6s; |
|||
} |
|||
@keyframes ball-running-dots-animate { |
|||
0%{ |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(0) translateX(-500%) scale(-.1); |
|||
opacity: 0.5; |
|||
} |
|||
80% { |
|||
transform: translateY(0) translateX(0); |
|||
} |
|||
85% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(-125%) translateX(0); |
|||
} |
|||
90% { |
|||
width: 200%; |
|||
height: 75%; |
|||
} |
|||
95% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(-100%) translateX(-500%); |
|||
} |
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(0) translateX(-500%); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes ball-running-dots-animate2 { |
|||
0%{ |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(0) translateX(500%) scale(-.1); |
|||
opacity: 0.5; |
|||
} |
|||
80% { |
|||
transform: translateY(0) translateX(0); |
|||
} |
|||
85% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(-125%) translateX(0); |
|||
} |
|||
90% { |
|||
width: 200%; |
|||
height: 75%; |
|||
} |
|||
95% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(-100%) translateX(500%); |
|||
} |
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: translateY(0) translateX(500%); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@ -1,136 +0,0 @@ |
|||
<template> |
|||
<div class="accessToLib-container"> |
|||
<div class="accessToLib-item"> |
|||
<span>总进馆人数</span> |
|||
<count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="!isSelfService" class="accessToLib-item"> |
|||
<span>月进馆人数</span> |
|||
<count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div class="accessToLib-item"> |
|||
<span>今日进馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="isSelfService" class="accessToLib-item"> |
|||
<span>今日出馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayOutNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitIntoNum } from '@/api/library' |
|||
import CountTo from 'vue-count-to' |
|||
|
|||
export default { |
|||
name: 'AccessToLibrary', |
|||
components: { |
|||
CountTo |
|||
}, |
|||
props: { |
|||
isSelfService: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
dayNum: 0, |
|||
dayOutNum: 0, |
|||
monthNum: 0, |
|||
totalNum: 0, |
|||
otherDoorOther: null |
|||
} |
|||
}, |
|||
created() { |
|||
// 获取数据 |
|||
this.getInitIntoNum() |
|||
}, |
|||
mounted() { |
|||
// 每15秒获取一次 |
|||
this.timer = setInterval(() => { |
|||
this.getInitIntoNum() |
|||
}, 15000) |
|||
}, |
|||
beforeDestroy() { |
|||
// 销毁定时器 |
|||
this.$once('hook:beforeDestroy', () => { |
|||
clearInterval(this.timer) |
|||
}) |
|||
}, |
|||
methods: { |
|||
getInitIntoNum() { |
|||
// this.otherDoorOther = window.location.href.split('?')[1]?.split('=')[1] |
|||
const currentURL = window.location.href |
|||
console.log(currentURL) |
|||
if (currentURL.indexOf('?') !== -1) { |
|||
const query = currentURL.split('?')[1] |
|||
console.log(query) |
|||
console.log(query.indexOf('startTime')) |
|||
if (query.indexOf('startTime') !== -1 || query.indexOf('endTime') !== -1) { |
|||
const paramsUrl = query.split('&') |
|||
console.log(paramsUrl) |
|||
let startTimeIndex = -1 |
|||
for (let i = 0; i < paramsUrl.length; i++) { |
|||
const [key] = paramsUrl[i].split('=') |
|||
if (key === 'startTime' || key === 'endTime') { |
|||
startTimeIndex = i |
|||
break |
|||
} |
|||
} |
|||
// 去除 startTime 参数及其后面的参数 |
|||
const filteredParams = startTimeIndex >= 0 ? paramsUrl.slice(0, startTimeIndex) : params |
|||
const newQueryString = filteredParams.join('&') |
|||
this.otherDoorOther = newQueryString.split('=')[1] |
|||
} else { |
|||
this.otherDoorOther = query.split('=')[1] |
|||
} |
|||
} else { |
|||
this.otherDoorOther = null |
|||
} |
|||
|
|||
const startTime = this.$route.query.startTime |
|||
const endTime = this.$route.query.endTime |
|||
|
|||
if (this.otherDoorOther && this.otherDoorOther !== '' && this.otherDoorOther.indexOf('&')) { |
|||
this.otherDoorOther = this.otherDoorOther.replace(/\&/g, '、') |
|||
} else { |
|||
this.otherDoorOther = null |
|||
} |
|||
|
|||
let params |
|||
if (!this.isSelfService) { |
|||
params = { |
|||
doorCodes: this.otherDoorOther, |
|||
startTime: startTime, |
|||
endTime: endTime |
|||
} |
|||
} else { |
|||
params = { |
|||
doorCodes: 'D001', |
|||
startTime: startTime, |
|||
endTime: endTime |
|||
} |
|||
} |
|||
FetchInitIntoNum(params).then((res) => { |
|||
if (res.errCode === 0) { |
|||
this.dayNum = res.data.dayPeopleNum |
|||
this.monthNum = res.data.monthPeopleNum |
|||
this.totalNum = res.data.historyPeopleNum |
|||
this.dayOutNum = res.data.dayOutNUm |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<!-- 借阅排行榜 --> |
|||
<div class="screen-item lending-ranking"> |
|||
<div class="common-title">借阅排行榜</div> |
|||
<vue-seamless-scroll |
|||
ref="listData" |
|||
:data="rankingList" |
|||
:class-option="defaultOption" |
|||
class="big-module module-content" |
|||
> |
|||
<div |
|||
v-for="(item, index) in rankingList" |
|||
:key="index" |
|||
class="book-list-item" |
|||
> |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
<div class="book-info"> |
|||
<h4 class="title-item">{{ item.bookName }}</h4> |
|||
<p>{{ item.author }}</p> |
|||
</div> |
|||
<div class="ranking-num"> |
|||
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no1" /> |
|||
</svg> |
|||
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no21" /> |
|||
</svg> |
|||
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no3" /> |
|||
</svg> |
|||
<p>NO.{{ index + 1 }}</p> |
|||
</div> |
|||
</div> |
|||
</vue-seamless-scroll> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchBorrowRank, FetchCoverByISBN } from '@/api/library' |
|||
|
|||
export default { |
|||
name: 'LengingRanking', |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
rankingList: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultOption() { |
|||
return { |
|||
step: 1.1, // 滚动的速度 |
|||
hoverStop: false, // 是否开启鼠标悬停stop |
|||
singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|||
openWatch: true, |
|||
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBorrowRank() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getBorrowRank() { |
|||
FetchBorrowRank().then((res) => { |
|||
if (res.errCode === 0) { |
|||
this.rankingList = res.data |
|||
this.rankingList.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
FetchCoverByISBN(params).then((res) => { |
|||
console.log('RES', res) |
|||
if (res) { |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
console.log(item.cover) |
|||
this.$refs.listData.reset() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~@/assets/styles/index.scss'; |
|||
</style> |
|||
@ -1,181 +0,0 @@ |
|||
<template> |
|||
<!-- 新书推荐 --> |
|||
<div class="screen-item lending-ranking"> |
|||
<div class="common-title">图书推荐</div> |
|||
<div ref="newbook" class="big-module module-content"> |
|||
<swiper v-if="rankingList.length > 1" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs"> |
|||
<swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1"> |
|||
<div class="newbook-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> |
|||
</div> |
|||
<!-- <div class="ranking-num"> |
|||
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no1" /> |
|||
</svg> |
|||
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no21" /> |
|||
</svg> |
|||
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no3" /> |
|||
</svg> |
|||
<p>NO.{{ index+1 }}</p> |
|||
</div> --> |
|||
</div> |
|||
</swiper-slide> |
|||
</swiper> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library' |
|||
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|||
import 'swiper/dist/css/swiper.css' |
|||
// import data from './data.json' |
|||
export default { |
|||
name: 'NewBookRecommend', |
|||
components: { |
|||
swiper, |
|||
swiperSlide |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
rankingList: [], |
|||
swiperOptionThumbs: { |
|||
loopedSlides: 6, |
|||
direction: 'vertical', |
|||
slidesPerView: 6, |
|||
slidesPerGroup: 6, |
|||
slidesPerColumn: 2, |
|||
autoplay: true |
|||
// centeredSlides: true, |
|||
// autoScrollOffset: true |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
swiper() { |
|||
return this.$refs.swiperThumbs.swiper |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
// this.rankingList = data |
|||
this.getNewBookRecommend() |
|||
}, |
|||
methods: { |
|||
getNewBookRecommend() { |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: 1, |
|||
pageSize: 100 |
|||
} |
|||
FetchNewBookRecommend(params).then(res => { |
|||
if (res.errCode === 0) { |
|||
let data = [] |
|||
data = res.data.newbookList |
|||
data.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
FetchCoverByISBN(params).then((res) => { |
|||
console.log(res) |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
if (res) { |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
this.rankingList.push(item) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
// .screen-main .lending-ranking .module-content{ |
|||
// padding: 0 .25rem !important; |
|||
// } |
|||
.swiper-container{ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.swiper { |
|||
width: 100%; |
|||
height: 6rem !important; |
|||
margin: .4rem 0; |
|||
overflow: hidden; |
|||
.swiper-wrapper{ |
|||
// display: flex; |
|||
// flex-wrap: wrap; |
|||
// flex-direction: row !important; |
|||
// justify-content: flex-start; |
|||
|
|||
} |
|||
&.gallery-thumbs { |
|||
// margin: 0.4rem 0; |
|||
} |
|||
&.gallery-thumbs .swiper-slide { |
|||
width: calc(100% / 3); |
|||
height: 2.8rem !important; |
|||
// padding: .1rem 0 0 0; |
|||
margin-top: 0.1rem; |
|||
margin-bottom: 0.1rem; |
|||
} |
|||
// &.gallery-thumbs .swiper-slide-active { |
|||
// // background-color: #09194B; |
|||
// } |
|||
} |
|||
|
|||
.newbook-list-item{ |
|||
.book-img{ |
|||
width: 1.325rem; |
|||
height: 1.775rem; |
|||
background: url('~@/assets/images/default-img.png') no-repeat center center; |
|||
background-size: contain; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
margin: 0 auto 0.25rem auto; |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
// height: 100%; |
|||
} |
|||
} |
|||
.book-info{ |
|||
h4{ |
|||
font-size: 0.25rem; |
|||
line-height: .3rem; |
|||
font-weight: normal; |
|||
} |
|||
p{ |
|||
font-size: 0.2rem; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -1,73 +0,0 @@ |
|||
<template> |
|||
<!-- 通知公告 --> |
|||
<div class="screen-item notice"> |
|||
<div class="common-title">通知公告</div> |
|||
<div class="small-module module-content"> |
|||
<span class="notice-icon-gif" /> |
|||
<div class="seamless-warp"> |
|||
<div class="notice-txt" v-html="content" /> |
|||
</div> |
|||
<!-- <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp"> |
|||
<p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p> |
|||
</vue-seamless-scroll> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitNotice } from '@/api/library' |
|||
export default { |
|||
name: 'Notice', |
|||
data() { |
|||
return { |
|||
noticeData: [], |
|||
content: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultOption() { |
|||
return { |
|||
step: 0.3, // 数值越大速度滚动越快 |
|||
limitMoveNum: 1, // 开始无缝滚动的数据量 |
|||
hoverStop: false, // 是否开启鼠标悬停stop |
|||
direction: 1, // 0向下 1向上 2向左 3向右 |
|||
openWatch: true // 开启数据实时监控刷新dom |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getInitNotice() |
|||
}, |
|||
methods: { |
|||
// 处理方法 |
|||
escapeHtml(str) { |
|||
var arrEntities = { |
|||
'lt': '<', |
|||
'gt': '>', |
|||
'nbsp': ' ', |
|||
'amp': '&', |
|||
'quot': '"' |
|||
} |
|||
return str.replace(/&(lt|gt|nbsp|amp|quot|pre);/ig, function(all, t) { |
|||
return arrEntities[t] |
|||
}) |
|||
}, |
|||
getInitNotice() { |
|||
FetchInitNotice().then((res) => { |
|||
if (res.errCode === 0) { |
|||
this.content = this.escapeHtml(res.data) |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
|
|||
</style> |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div class="page-wrapper page-four-wrapper"> |
|||
<div class="page-four"> |
|||
<div class="four-video"> |
|||
<h4>{{ slideData[videoIndex].title }}</h4> |
|||
<el-carousel |
|||
ref="carousel" |
|||
height="710px" |
|||
indicator-position="none" |
|||
:autoplay="false" |
|||
:autoplay-hover-pause="true" |
|||
@change="carouselChange" |
|||
> |
|||
<div v-if="slideData && slideData.length > 0"> |
|||
<el-carousel-item v-for="(item, index) in slideData" :key="index"> |
|||
<video |
|||
ref="videos" |
|||
class="tsgz-video" |
|||
width="100%" |
|||
height="100%" |
|||
controls="controls" |
|||
:src="item.videoSrc" |
|||
:poster="poster" |
|||
autoplay |
|||
type="video/mp4" |
|||
muted |
|||
@ended="playNextVideo(index)" |
|||
> |
|||
您的浏览器不支持 video 标签。 |
|||
</video> |
|||
</el-carousel-item> |
|||
</div> |
|||
<el-empty |
|||
v-else |
|||
description="暂无视频" |
|||
style="height: 710px" |
|||
:image-size="40" |
|||
image="" |
|||
/> |
|||
</el-carousel> |
|||
</div> |
|||
<div class="four-right"> |
|||
<div class="four-notice"> |
|||
<div class="database-title">重要通知</div> |
|||
<!-- <div class="notice-text"> |
|||
<p>本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!</p> |
|||
<span>管理员 2020/08/12</span> |
|||
</div> --> |
|||
<div class="seamless-warp"> |
|||
<div ref="marquee" class="notice-text" :style="{ top: position + 'px' }" v-html="content" /> |
|||
</div> |
|||
</div> |
|||
<div class="four-ranking lending-ranking"> |
|||
<div class="database-title">图书借阅排行榜</div> |
|||
<div class="ranking-cont"> |
|||
<ul class="ranking-title"> |
|||
<li style="width: 0.725rem;">排名</li> |
|||
<li style="width: 1.5rem; text-align: left;">图书馆名称</li> |
|||
<li style="flex:1;" /> |
|||
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li> |
|||
</ul> |
|||
<ul class="ranking-list"> |
|||
<li v-for="(item,index) in rankingWithPercentage" :key="index"> |
|||
<div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div> |
|||
<div style="width: 1.5rem; text-align: left;">{{ item.name }}</div> |
|||
<div class="ranking-progress" style="flex:1; align-self: center;"> |
|||
<el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" /> |
|||
</div> |
|||
<div style="width: 1.25rem; padding-right: .25rem; text-align: right;">{{ item.num }}<i style="padding-left:.0625rem;">本</i></div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="four-contact"> |
|||
<div class="wechat-img"> |
|||
二维码 |
|||
</div> |
|||
<span>扫一扫关注我们</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'PageFour', |
|||
data() { |
|||
return { |
|||
content: '本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!', |
|||
poster: require('@/assets/images/poster.png'), |
|||
videoIndex: 0, |
|||
slideData: [ |
|||
{ |
|||
title: '第一个视频', |
|||
videoSrc: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') |
|||
// videos: [{ video: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') }] |
|||
}, |
|||
{ |
|||
title: '第二个视频', |
|||
videoSrc: require('@/assets/video/1608277325000.mp4') |
|||
// videos: [{ video: require('@/assets/video/1608277325000.mp4') }] |
|||
}, |
|||
{ |
|||
title: '第三个视频', |
|||
videoSrc: require('@/assets/video/20220414085212.mp4') |
|||
// videos: [{ video: require('@/assets/video/20220414085212.mp4') }] |
|||
} |
|||
], |
|||
rankingData: [ |
|||
{ id: 1, num: 718, name: '少儿图书馆' }, |
|||
{ id: 2, num: 447, name: '大村店分馆' }, |
|||
{ id: 3, num: 261, name: '邵家岭分馆' }, |
|||
{ id: 4, num: 242, name: '复兴路分馆' }, |
|||
{ id: 5, num: 165, name: '白竹湖分馆' }, |
|||
{ id: 6, num: 140, name: '资源环境学院' } |
|||
], |
|||
rankingWithPercentage: [], |
|||
timer: null, |
|||
position: 0, |
|||
speed: 2 // 滚动速度，可根据需要调整 |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
beforeDestroy() { |
|||
this.stopScrolling() |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.rankingDataComputed() |
|||
this.startScrolling() |
|||
}, |
|||
methods: { |
|||
// 通知滚动 |
|||
startScrolling() { |
|||
this.timer = setInterval(() => { |
|||
this.position -= this.speed |
|||
// 当文字完全滚出容器时，重置位置 |
|||
const containerHeight = document.getElementsByClassName('seamless-warp')[0].offsetHeight |
|||
const contentHeight = this.$refs.marquee.offsetHeight |
|||
if (contentHeight <= containerHeight) { |
|||
this.position = 20 |
|||
} else if (Math.abs(this.position) >= contentHeight) { |
|||
this.position = containerHeight |
|||
} |
|||
}, 40) |
|||
}, |
|||
stopScrolling() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer) |
|||
} |
|||
}, |
|||
carouselChange(index) { |
|||
const videos = this.$refs.videos |
|||
this.videoIndex = index |
|||
videos.forEach((video) => { |
|||
video.currentTime = 0 // 将视频回到起始时间 |
|||
video.pause() // 暂停视频播放 |
|||
}) |
|||
videos[index].play() |
|||
}, |
|||
playNextVideo(index) { |
|||
const videos = this.$refs.videos |
|||
let nextIndex = index |
|||
this.videoIndex = nextIndex |
|||
if (index < this.slideData.length - 1) { |
|||
nextIndex = nextIndex + 1 |
|||
} else { |
|||
nextIndex = 0 |
|||
} |
|||
|
|||
const carousel = this.$refs.carousel |
|||
carousel.setActiveItem(nextIndex) |
|||
const nextVideo = videos[nextIndex] |
|||
videos.forEach((video) => { |
|||
video.pause() |
|||
video.currentTime = 0 |
|||
}) |
|||
console.log('this.videoIndex.length ', this.videoIndex) |
|||
console.log('this.slideData.length ', this.slideData.length) |
|||
if (this.videoIndex === this.slideData.length - 1) { |
|||
this.$parent.autoPagination(0) |
|||
} |
|||
setTimeout(() => { |
|||
nextVideo.play() |
|||
}, 1000) |
|||
}, |
|||
rankingDataComputed() { |
|||
const firstPlaceNum = this.rankingData[0].num |
|||
this.rankingWithPercentage = this.rankingData.map(item => { |
|||
const percentage = (item.num / firstPlaceNum) * 100 |
|||
return { ...item, percentage } |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.el-carousel{ |
|||
margin-top: 0.475rem; |
|||
} |
|||
video { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,289 @@ |
|||
<template> |
|||
<div id="carousel"> |
|||
<h4>{{ slideData[beginValue].title }}</h4> |
|||
<div |
|||
ref="carousel" |
|||
class="carousel" |
|||
:style="{ height: height + 'px' }" |
|||
> |
|||
<transition-group tag="ul" class="slide clearfix" :name="transitionName"> |
|||
<li |
|||
v-for="(item, index) in slideData" |
|||
v-show="index == beginValue" |
|||
:key="index" |
|||
:style="{ height: height + 'px' }" |
|||
style="display: flex" |
|||
> |
|||
<!-- 播放视频 --> |
|||
<div v-for="(v, e) in item.videos" :key="e" class="videos"> |
|||
<video |
|||
ref="videoPlay" |
|||
muted="" |
|||
:src="v.video" |
|||
controls="controls" |
|||
:autoplay="autoPlay" |
|||
loop="loop" |
|||
style="width: 100%; height: 100%" |
|||
@timeupdate="handleTimeUpdate" |
|||
/> |
|||
</div> |
|||
<!-- <div class="up" @click="up"> < </div> |
|||
<div class="next" @click="next"> ></div> --> |
|||
</li> |
|||
</transition-group> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import 'videojs-contrib-hls' |
|||
export default { |
|||
name: 'Carousel', |
|||
props: { |
|||
height: { |
|||
type: Number, |
|||
default: 710 |
|||
}, |
|||
dot: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
arrow: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
interval: { |
|||
type: Number, |
|||
default: 5000 |
|||
}, |
|||
begin: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
slideData: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
setInterval: '', |
|||
beginValue: 0, |
|||
transitionName: 'slide', |
|||
mytime_02: true, |
|||
videoDuration: 0, |
|||
currentTime: 0 |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 组件销毁前,清除监听器 |
|||
clearInterval(this.setInterval) |
|||
}, |
|||
mounted() { |
|||
// var box = this.$refs.carousel; //监听对象 |
|||
// box.addEventListener("mouseover", () => { |
|||
// this.mouseOver(); |
|||
// }); |
|||
// box.addEventListener("mouseout", () => { |
|||
// this.mouseOut(); |
|||
// }); |
|||
this.beginValue = this.begin |
|||
this.play() |
|||
}, |
|||
methods: { |
|||
handleTimeUpdate(e) { |
|||
this.currentTime = parseInt(e.target.currentTime) |
|||
this.videoDuration = Math.floor(e.target.duration) |
|||
if (!this.mytime_02) { |
|||
return |
|||
} // 首次进入能执行 |
|||
this.mytime_02 = false |
|||
setTimeout(() => { |
|||
console.log('currentTime', this.currentTime) |
|||
console.log('e.target.duration', this.videoDuration) |
|||
if (this.currentTime === this.videoDuration) { |
|||
this.next() |
|||
} |
|||
this.mytime_02 = true // 上次执行成功，下一次才可执行。 |
|||
}, 1000) |
|||
}, |
|||
// 改变前后 |
|||
change(key) { |
|||
if (key > this.slideData.length - 1) { |
|||
key = 0 |
|||
} |
|||
if (key < 0) { |
|||
key = this.slideData.length - 1 |
|||
} |
|||
this.beginValue = key |
|||
}, |
|||
autoPlay() { |
|||
this.transitionName = 'slide' |
|||
this.beginValue++ |
|||
console.log('this.beginValue', this.beginValue) |
|||
if (this.beginValue >= this.slideData.length) { |
|||
this.beginValue = 0 |
|||
return |
|||
} |
|||
}, |
|||
play() { |
|||
// this.setInterval = setInterval(this.autoPlay, this.interval); |
|||
this.autoPlay |
|||
}, |
|||
mouseOver() { |
|||
// 鼠标进入 |
|||
// console.log('over') |
|||
// clearInterval(this.setInterval); |
|||
}, |
|||
mouseOut() { |
|||
// 鼠标离开 |
|||
// console.log('out') |
|||
// this.play(); |
|||
}, |
|||
up() { |
|||
// 上一页 |
|||
--this.beginValue |
|||
this.transitionName = 'slideBack' |
|||
this.change(this.beginValue) |
|||
}, |
|||
next() { |
|||
console.log('next', this.beginValue) |
|||
// 下一页 |
|||
++this.beginValue |
|||
console.log('next2', this.beginValue) |
|||
this.transitionName = 'slide' |
|||
this.change(this.beginValue) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.slide { |
|||
position: relative; |
|||
margin: 0; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
height: 8.875rem; |
|||
margin-top: 0.475rem; |
|||
} |
|||
.slide li { |
|||
list-style: none; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 8.875rem; |
|||
} |
|||
.slide li img { |
|||
height: 8.875rem; |
|||
cursor: pointer; |
|||
} |
|||
.slide li .title { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
padding: 10px 20px; |
|||
width: 100%; |
|||
background: rgba(0, 0, 0, 0.35); |
|||
color: #fff; |
|||
font-size: larger; |
|||
text-align: center; |
|||
} |
|||
.videos { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.videos:nth-child(1) { |
|||
margin-right: 0.2rem; |
|||
} |
|||
|
|||
.slideDot { |
|||
position: absolute; |
|||
z-index: 999; |
|||
bottom: 0.2rem; |
|||
right: 1.85rem; |
|||
} |
|||
.slideDot span { |
|||
display: inline-block; |
|||
width: 0.07rem; |
|||
height: 0.07rem; |
|||
background: rgba(255, 255, 255, 0.65); |
|||
margin-left: 0.05rem; |
|||
} |
|||
.slideDot span.active { |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
.up, |
|||
.next { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
margin-top: 0; |
|||
cursor: pointer; |
|||
font-size: 50px; |
|||
width: 80px; |
|||
height: 80px; |
|||
background-repeat: no-repeat; |
|||
background-position: 50% 50%; |
|||
} |
|||
.up { |
|||
left: 0.25rem; |
|||
} |
|||
.next { |
|||
left: auto; |
|||
right: 0.25rem; |
|||
} |
|||
/* .up:hover { |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} */ |
|||
/* .next:hover { |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} */ |
|||
|
|||
/*进入过渡生效时的状态*/ |
|||
.slide-enter-active { |
|||
transform: translateX(0); |
|||
transition: all 1s ease; |
|||
} |
|||
|
|||
/*进入开始状态*/ |
|||
.slide-enter { |
|||
transform: translateX(-100%); |
|||
} |
|||
|
|||
/*离开过渡生效时的状态*/ |
|||
.slide-leave-active { |
|||
transform: translateX(100%); |
|||
transition: all 1s ease; |
|||
} |
|||
|
|||
/*离开过渡的开始状态*/ |
|||
.slide-leave { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
/*进入过渡生效时的状态*/ |
|||
.slideBack-enter-active { |
|||
transform: translateX(0); |
|||
transition: all 1s ease; |
|||
} |
|||
|
|||
/*进入开始状态*/ |
|||
.slideBack-enter { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
/*离开过渡生效时的状态*/ |
|||
.slideBack-leave-active { |
|||
transform: translateX(-100%); |
|||
transition: all 1s ease; |
|||
} |
|||
|
|||
/*离开过渡的开始状态*/ |
|||
.slideBack-leave { |
|||
transform: translateX(0); |
|||
} |
|||
</style> |
|||
@ -1,74 +0,0 @@ |
|||
<template> |
|||
<!-- 新书推荐 --> |
|||
<div class="screen-item read-star"> |
|||
<div class="common-title">阅读之星</div> |
|||
<div ref="starList" class="medium-module module-content"> |
|||
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
|||
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-1" /> |
|||
</svg> |
|||
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-21" /> |
|||
</svg> |
|||
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-3" /> |
|||
</svg> |
|||
<span v-else class="star-num">{{ index+1 }}</span> |
|||
<p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p> |
|||
<p class="star-date">{{ mondayDate }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchBorrowStar } from '@/api/library' |
|||
import { parseTime } from '@/utils/index.js' |
|||
export default { |
|||
name: 'ReadStar', |
|||
data() { |
|||
return { |
|||
readstarList: [], |
|||
mondayDate: null |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getBorrowStar() |
|||
}, |
|||
methods: { |
|||
// 获取list |
|||
getBorrowStar() { |
|||
FetchBorrowStar().then(res => { |
|||
if (res.errCode === 0) { |
|||
console.log(res) |
|||
this.readstarList = res.data |
|||
this.getMondayTime() |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
// 获取本周一 |
|||
getMondayTime() { |
|||
const today = new Date() |
|||
const year = today.getFullYear() |
|||
const month = today.getMonth() + 1 |
|||
const day = today.getDate() |
|||
const newDate = new Date(year + '-' + month + '-' + day + ' 00:00:00') |
|||
|
|||
const nowTime = newDate.getTime() |
|||
const weekDay = newDate.getDay() |
|||
const oneDayTime = 24 * 60 * 60 * 1000 |
|||
|
|||
const mondayTime = (1 - weekDay) * oneDayTime + nowTime |
|||
this.mondayDate = parseTime(mondayTime, '{y}-{m}-{d}') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,51 +0,0 @@ |
|||
<template> |
|||
<!-- 今日图书借还 --> |
|||
<div class="screen-item total-lending"> |
|||
<div class="common-title">今日图书借还</div> |
|||
<div class="small-module module-content"> |
|||
<div class="chart-wrapper" style="height: calc(100%);"> |
|||
<LineChartService :chart-data="chartData" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LineChartService from '@/components/echart/lineChartService' |
|||
import { FetchHalfYearBRNum } from '@/api/library' |
|||
export default { |
|||
name: 'TodayBorrowed', |
|||
components: { |
|||
LineChartService |
|||
}, |
|||
data() { |
|||
return { |
|||
chartData: { |
|||
returnData: [], |
|||
borrowedData: [] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getHalfYearBRNum() |
|||
}, |
|||
methods: { |
|||
getHalfYearBRNum() { |
|||
FetchHalfYearBRNum().then(res => { |
|||
if (res.errCode === 0) { |
|||
this.chartData.borrowedData = res.data.borrow |
|||
this.chartData.returnData = res.data.return |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<!-- 总借阅量 --> |
|||
<div class="screen-item total-lending"> |
|||
<div class="common-title">总借阅量</div> |
|||
<div class="small-module module-content"> |
|||
<div class="chartNum"> |
|||
<div id="TNum" class="box-items"> |
|||
<li v-for="(item,index) in chartNum" :key="index" class="number-item"> |
|||
<span><i ref="numberItem" class="item">0123456789</i></span> |
|||
</li> |
|||
</div> |
|||
</div> |
|||
<div class="chart-wrapper" style="height: calc(100% - 68px);"> |
|||
<LineChart :chart-data="chartData" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LineChart from '@/components/echart/lineChart' |
|||
import { FetchHalfYearBorrowNum } from '@/api/library' |
|||
|
|||
export default { |
|||
name: 'TotalLending', |
|||
components: { |
|||
LineChart |
|||
}, |
|||
data() { |
|||
return { |
|||
totalLendData: null, |
|||
chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0'], |
|||
chartData: { |
|||
totalLendMonth: [], |
|||
totalLendData: [] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getHalfYearBorrowNum() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getHalfYearBorrowNum() { |
|||
const params = { |
|||
ip: null |
|||
} |
|||
FetchHalfYearBorrowNum(params).then(res => { |
|||
if (res.errCode === 0) { |
|||
this.totalLendData = res.data.total |
|||
this.chartData.totalLendMonth = res.data.list.map(item => { |
|||
return item.date |
|||
}) |
|||
this.chartData.totalLendData = res.data.list.map(item => { |
|||
return item.total |
|||
}) |
|||
this.toOrderNum(this.totalLendData) |
|||
this.setNumberTransform() |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
toOrderNum(num) { |
|||
num = num.toString() |
|||
if (num.length < 9) { |
|||
num = '0' + num |
|||
this.toOrderNum(num) |
|||
} else if (num.length === 9) { |
|||
this.chartNum = num.split('') |
|||
} else { |
|||
console.log('借阅数据总数显示异常') |
|||
} |
|||
}, |
|||
setNumberTransform() { |
|||
var numberItems = document.getElementsByClassName('item') |
|||
const numberArr = this.chartNum.filter(item => !isNaN(item)) |
|||
for (var index = 0; index < numberItems.length; index++) { |
|||
const elem = numberItems[index] |
|||
elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
@import "~@/assets/styles/font-some.css"; |
|||
</style> |
|||
@ -1,64 +0,0 @@ |
|||
<template> |
|||
<div class="video-box"> |
|||
<video v-if="srcList[0].endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster"> |
|||
<source :src="srcList[0]" type="video/mp4"> |
|||
</video> |
|||
<el-carousel v-if="!srcList[0].endsWith('.mp4')" :interval="6000"> |
|||
<el-carousel-item v-for="src in srcList" :key="src"> |
|||
<img width="100%" height="100%" :src="src"> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchShowFileList } from '@/api/library' |
|||
export default { |
|||
name: 'Video', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg', |
|||
srcList: [''] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getShowFile() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getShowFile() { |
|||
const params = { |
|||
libcode: '1201' |
|||
} |
|||
// this.src = 'D://uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
|||
|
|||
FetchShowFileList(params).then(res => { |
|||
if (res.errCode === 0) { |
|||
// this.src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/') |
|||
this.srcList = res.data.map(x => x.filePath.replace('D://', 'http://172.22.0.23:8888/')) |
|||
// this.srcList = res.data.map(x => x.filePath.replace('D://uploadFile', 'http://localhost:8080/static/')) |
|||
// console.log(22222, this.srcList) |
|||
// this.src = 'D://uploadFile/11503339-b829-4357-8379-d2b49106431f.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
|||
// this.src = 'http://127.0.0.1:8888/uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4' |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.el-carousel__container { |
|||
position: relative; |
|||
height: 100%; |
|||
} |
|||
.el-carousel.el-carousel--horizontal { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue