30 changed files with 289 additions and 1029 deletions
-
54src/assets/iconfont/demo_index.html
-
16src/assets/iconfont/iconfont.css
-
2src/assets/iconfont/iconfont.js
-
16src/assets/iconfont/iconfont.json
-
4src/assets/iconfont/iconfont.svg
-
BINsrc/assets/iconfont/iconfont.ttf
-
BINsrc/assets/iconfont/iconfont.woff
-
BINsrc/assets/iconfont/iconfont.woff2
-
BINsrc/assets/images/default-img.png
-
BINsrc/assets/images/num-img.png
-
BINsrc/assets/images/star-1.png
-
BINsrc/assets/images/star-2.png
-
BINsrc/assets/images/star-3.png
-
BINsrc/assets/images/title.png
-
97src/assets/styles/_variables.scss
-
46src/assets/styles/font-some.css
-
236src/assets/styles/index.scss
-
1src/assets/styles/style.scss
-
185src/components/echart/lineChart.vue
-
2src/router/index.js
-
48src/views/accessToLibrary.vue
-
76src/views/digitalResource.vue
-
28src/views/digitalResourceJson.json
-
56src/views/header/index.vue
-
69src/views/lengingRanking.vue
-
181src/views/newBookRecommend.vue
-
52src/views/notice.vue
-
65src/views/readStar.vue
-
80src/views/totalLending.vue
-
2vue.config.js
2
src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
4
src/assets/iconfont/iconfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 66 | Height: 83 | Size: 6.8 KiB |
|
Before Width: 220 | Height: 68 | Size: 6.1 KiB |
|
Before Width: 700 | Height: 40 | Size: 6.4 KiB |
|
Before Width: 700 | Height: 40 | Size: 5.5 KiB |
|
Before Width: 700 | Height: 40 | Size: 6.7 KiB |
|
Before Width: 510 | Height: 38 | Size: 4.2 KiB |
@ -1,97 +0,0 @@ |
|||||
// 颜色 |
|
||||
$colors: ( |
|
||||
"primary": #db9e3f, |
|
||||
"info-1": #4394e4, |
|
||||
"info": #4b67af, |
|
||||
"white": #ffffff, |
|
||||
"light": #f9f9f9, |
|
||||
"grey-1": #999999, |
|
||||
"grey": #666666, |
|
||||
"dark-1": #5f5f5f, |
|
||||
"dark": #222222, |
|
||||
"black-1": #171823, |
|
||||
"black": #000000, |
|
||||
); |
|
||||
|
|
||||
// 字体大小 |
|
||||
$base-font-size: 0.2rem; |
|
||||
$font-sizes: ( |
|
||||
xxs: 0.1, |
|
||||
//8px |
|
||||
xs: 0.125, |
|
||||
//10px |
|
||||
sm: 0.2875, |
|
||||
//12px |
|
||||
md: 0.1625, |
|
||||
//13px |
|
||||
lg: 0.175, |
|
||||
//14px |
|
||||
xl: 0.2, |
|
||||
//16px |
|
||||
xxl: 0.225, |
|
||||
//18px |
|
||||
xxxl: 0.25 |
|
||||
); |
|
||||
|
|
||||
// 宽高 |
|
||||
.w-100 { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.h-100 { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
//flex |
|
||||
.d-flex { |
|
||||
display: flex; |
|
||||
} |
|
||||
.flex-column { |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.flex-wrap { |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.flex-nowrap { |
|
||||
flex-wrap: nowrap; |
|
||||
} |
|
||||
$flex-jc: ( |
|
||||
start: flex-start, |
|
||||
end: flex-end, |
|
||||
center: center, |
|
||||
between: space-between, |
|
||||
around: space-around, |
|
||||
evenly: space-evenly, |
|
||||
); |
|
||||
|
|
||||
$flex-ai: ( |
|
||||
start: flex-start, |
|
||||
end: flex-end, |
|
||||
center: center, |
|
||||
stretch: stretch, |
|
||||
); |
|
||||
|
|
||||
.flex-1 { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
//.mt-1 => margin top |
|
||||
//spacing |
|
||||
$spacing-types: ( |
|
||||
m: margin, |
|
||||
p: padding, |
|
||||
); |
|
||||
$spacing-directions: ( |
|
||||
t: top, |
|
||||
r: right, |
|
||||
b: bottom, |
|
||||
l: left, |
|
||||
); |
|
||||
$spacing-base-size: 0.2rem; |
|
||||
$spacing-sizes: ( |
|
||||
0: 0, |
|
||||
1: 0.25, |
|
||||
2: 0.5, |
|
||||
3: 1, |
|
||||
4: 1.5, |
|
||||
5: 3, |
|
||||
); |
|
||||
@ -1,46 +0,0 @@ |
|||||
.chartNum{ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
margin-top: 0.25rem; |
|
||||
} |
|
||||
.box-items { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
height: 0.6rem; |
|
||||
text-align: center; |
|
||||
} |
|
||||
/*滚动数字设置*/ |
|
||||
.number-item { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
text-align: center; |
|
||||
width: 0.45rem; |
|
||||
height: 0.6rem; |
|
||||
line-height: 0.6rem; |
|
||||
margin-right: 0.125rem; |
|
||||
border: 1px solid #2C75E0; |
|
||||
} |
|
||||
.number-item span{ |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
writing-mode: vertical-rl; |
|
||||
text-orientation: upright; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.number-item span i{ |
|
||||
font-style: normal; |
|
||||
position: absolute; |
|
||||
top: 0.1rem; |
|
||||
left: 50%; |
|
||||
font-size: 0.325rem; |
|
||||
font-weight: bold; |
|
||||
color: #1AC9FF; |
|
||||
transform: translate(-50%,0); |
|
||||
transition: transform 1s ease-in-out; |
|
||||
letter-spacing: 10px; |
|
||||
} |
|
||||
.number-item:last-child { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
@ -1,185 +0,0 @@ |
|||||
<template> |
|
||||
<div id="main" :style="{height:height,width:width}" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import echarts from 'echarts' |
|
||||
import resize from '@/utils/resizeMixins.js' |
|
||||
|
|
||||
export default { |
|
||||
name: 'AcrossEcharts', |
|
||||
mixins: [resize], |
|
||||
props: { |
|
||||
addArcivesData: { |
|
||||
type: Object, |
|
||||
require: true, |
|
||||
default: function() { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
width: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
chart: null |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
'addArcivesData': { |
|
||||
handler(val) { |
|
||||
setTimeout(() => { |
|
||||
this.drawChart() |
|
||||
}, 100) |
|
||||
}, |
|
||||
immediate: true, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.drawChart() |
|
||||
window.addEventListener('resize', this.__resizeHandler) |
|
||||
}, |
|
||||
methods: { |
|
||||
drawChart() { |
|
||||
const chartDom = document.getElementById('main') |
|
||||
this.chart = echarts.init(chartDom) |
|
||||
let option = null |
|
||||
option = { |
|
||||
grid: { // 边距 |
|
||||
left: '2%', |
|
||||
right: '2%', |
|
||||
bottom: '5%', |
|
||||
top: '8%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#339cff' |
|
||||
} |
|
||||
} |
|
||||
// formatter: function(params) { |
|
||||
// var res = "<div style='width:100%;height:24px;margin-bottom:5px;padding:0 12px;line-height:24px;'><p>" + echarts.format.formatTime('yyyy年M月', new Date(params[0].name)) + ' </p></div>' |
|
||||
// for (var i = 0; i < params.length; i++) { |
|
||||
// res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px"> |
|
||||
// <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span> |
|
||||
// ${params[i].seriesName} |
|
||||
// ${params[i].data} |
|
||||
// </div>` |
|
||||
// } |
|
||||
// return res |
|
||||
// } |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
// data: this.addArcivesData.addArcivesMonth, |
|
||||
data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06'], |
|
||||
axisLine: { // 轴线的颜色以及宽度 |
|
||||
lineStyle: { |
|
||||
color: 'rgba(17, 61, 114,0.5)' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { show: false }, |
|
||||
axisLabel: { // x轴文字的配置 |
|
||||
show: true, |
|
||||
textStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
// formatter: function(value) { |
|
||||
// return echarts.format.formatTime('M月', new Date(value)) |
|
||||
// } |
|
||||
} |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
min: 0, |
|
||||
max: 1000, |
|
||||
splitNumber: 5, |
|
||||
axisLine: { // 轴线的颜色以及宽度 |
|
||||
// lineStyle: { |
|
||||
// color: '#113D72' |
|
||||
// } |
|
||||
show: false |
|
||||
}, |
|
||||
axisLabel: { // x轴文字的配置 |
|
||||
show: true, |
|
||||
textStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { // 刻度线隐藏 |
|
||||
show: false |
|
||||
}, |
|
||||
splitLine: { // 分割线配置 |
|
||||
lineStyle: { |
|
||||
color: 'rgba(17, 61, 114,0.5)', |
|
||||
type: 'solid' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '新增档案', |
|
||||
// data: this.addArcivesData.addArcivesNum, |
|
||||
data: [100, 200, 300, 500, 600, 800], |
|
||||
type: 'line', |
|
||||
areaStyle: { |
|
||||
normal: { |
|
||||
color: { |
|
||||
x: 0, |
|
||||
y: 0, |
|
||||
x2: 0, |
|
||||
y2: 1, |
|
||||
colorStops: [ |
|
||||
{ |
|
||||
offset: 0.1, |
|
||||
color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色 |
|
||||
}, |
|
||||
{ |
|
||||
offset: 0.5, |
|
||||
color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色 |
|
||||
}, |
|
||||
{ |
|
||||
offset: 0.7, |
|
||||
color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色 |
|
||||
}, |
|
||||
{ |
|
||||
offset: 0.9, |
|
||||
color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色 |
|
||||
} |
|
||||
] |
|
||||
// globalCoord: false // 缺省为 false |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: '#339CFF', // 改变折线点的颜色 |
|
||||
lineStyle: { |
|
||||
color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
option && this.chart.setOption(option) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.h{ |
|
||||
color: rgb(26, 201, 255); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,48 +0,0 @@ |
|||||
<template> |
|
||||
<div class="accessToLib-container"> |
|
||||
<div class="accessToLib-item"> |
|
||||
<span>总进馆人数</span> |
|
||||
<p>2,125,462</p> |
|
||||
</div> |
|
||||
<div class="accessToLib-item"> |
|
||||
<span>月进馆人数</span> |
|
||||
<p>10,062</p> |
|
||||
</div> |
|
||||
<div class="accessToLib-item"> |
|
||||
<span>今日进馆人数</span> |
|
||||
<p>2,462</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'AccessToLibrary', |
|
||||
data() { |
|
||||
return { |
|
||||
timer: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 获取数据 |
|
||||
}, |
|
||||
mounted() { |
|
||||
// 每15秒获取一次 |
|
||||
this.timer = setInterval(() => { |
|
||||
// |
|
||||
}, 15000) |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
// 销毁定时器 |
|
||||
this.$once('hook:beforeDestroy', () => { |
|
||||
clearInterval(this.timer) |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,56 +0,0 @@ |
|||||
<template> |
|
||||
<div class="header-container"> |
|
||||
<!-- <ul class="header-nav"> |
|
||||
<li> |
|
||||
<img src="~@/assets/images/top.png"> |
|
||||
<p>图书检索</p> |
|
||||
</li> |
|
||||
<li @click="toHotBook"> |
|
||||
<img src="~@/assets/images/top.png"> |
|
||||
<p>热门图书</p> |
|
||||
</li> |
|
||||
<li @click="toAuthor"> |
|
||||
<img src="~@/assets/images/top.png"> |
|
||||
<p>作者推荐</p> |
|
||||
</li> |
|
||||
<li @click="toDigital"> |
|
||||
<img src="~@/assets/images/top.png"> |
|
||||
<p>数字资源</p> |
|
||||
</li> |
|
||||
<li> |
|
||||
<img src="~@/assets/images/top.png"> |
|
||||
<p>场馆导航</p> |
|
||||
</li> |
|
||||
</ul> --> |
|
||||
<div class="header-text header-date">{{ nowDate }}</div> |
|
||||
<!-- <div class="header-title"><h2>东西湖区图书馆</h2></div> |
|
||||
<div class="header-text header-weather"> |
|
||||
天气api: https://www.tianqi.com/plugin --> |
|
||||
<!-- <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" /> --> |
|
||||
<!-- </div> --> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getCurrentTime } from '@/utils/index' |
|
||||
export default { |
|
||||
name: 'Header', |
|
||||
data() { |
|
||||
return { |
|
||||
nowDate: '' |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.timer = setInterval(() => { |
|
||||
this.nowDate = getCurrentTime() |
|
||||
}, 1000) |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
</style> |
|
||||
@ -1,69 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 借阅排行榜 --> |
|
||||
<div class="screen-item lending-ranking"> |
|
||||
<div class="common-title">借阅排行榜</div> |
|
||||
<div ref="lendList" class="big-module module-content"> |
|
||||
<div v-for="(item,index) in rankingList" :key="index" class="book-list-item"> |
|
||||
<img class="book-img" :src="item.img"> |
|
||||
<div class="book-info"> |
|
||||
<h4 class="title-item">{{ item.title }}</h4> |
|
||||
<p>{{ item.author }}</p> |
|
||||
</div> |
|
||||
<div class="ranking-num"> |
|
||||
<svg v-if="item.ranking === 1" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no1" /> |
|
||||
</svg> |
|
||||
<svg v-if="item.ranking === 2" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no21" /> |
|
||||
</svg> |
|
||||
<svg v-if="item.ranking === 3" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no3" /> |
|
||||
</svg> |
|
||||
<p>NO.{{ item.ranking }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import data from './data' |
|
||||
import scrollMixins from '@/common/scrollMixins' |
|
||||
|
|
||||
export default { |
|
||||
name: 'LengingRanking', |
|
||||
mixins: [scrollMixins], |
|
||||
data() { |
|
||||
return { |
|
||||
rankingList: [] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.rankingList = data.ranking |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.dataCompleteFun() |
|
||||
}, |
|
||||
destroyed() { |
|
||||
// 清理定时器 |
|
||||
clearTimeout(this.pauseTimer) |
|
||||
this.pauseTimer = null |
|
||||
clearInterval(this.scrollTimer) |
|
||||
this.scrollTimer = null |
|
||||
}, |
|
||||
methods: { |
|
||||
dataCompleteFun() { |
|
||||
this.scrollDom = this.$refs.lendList |
|
||||
this.interval = 50 |
|
||||
this.timeout = 2000 |
|
||||
this.step = 1 |
|
||||
// 开启滚动 |
|
||||
this.autoScroll() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,52 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 通知公告 --> |
|
||||
<div class="screen-item notice"> |
|
||||
<div class="common-title">通知公告</div> |
|
||||
<div class="small-module module-content"> |
|
||||
<i class="iconfont icon-tongzhi" /> |
|
||||
<p ref="noticetxt">经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import scrollMixins from '@/common/scrollMixins' |
|
||||
export default { |
|
||||
name: 'Notice', |
|
||||
mixins: [scrollMixins], |
|
||||
data() { |
|
||||
return { |
|
||||
// interval: 3000, |
|
||||
// scrollTimer: null, // 滚动定时器 |
|
||||
// pauseTimer: null // 暂停定时器 |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.dataCompleteFun() |
|
||||
}, |
|
||||
destroyed() { |
|
||||
// 清理定时器 |
|
||||
clearTimeout(this.pauseTimer) |
|
||||
this.pauseTimer = null |
|
||||
clearInterval(this.scrollTimer) |
|
||||
this.scrollTimer = null |
|
||||
}, |
|
||||
methods: { |
|
||||
// 数据加载完成方法 |
|
||||
dataCompleteFun() { |
|
||||
this.scrollDom = this.$refs.noticetxt |
|
||||
this.interval = 150 |
|
||||
this.timeout = 5000 |
|
||||
this.step = 1 |
|
||||
// 开启滚动 |
|
||||
this.autoScroll() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,65 +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':item.ranking===1}, {'star2-bg':item.ranking===2}, {'star3-bg':item.ranking===3}]"> |
|
||||
<svg v-if="item.ranking === 1" class="icon icon-star-1" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-1" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="item.ranking === 2" class="icon icon-star-2" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-21" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="item.ranking === 3" class="icon icon-star-3" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-3" /> |
|
||||
</svg> |
|
||||
<span v-else class="star-num">{{ item.ranking }}</span> |
|
||||
<p class="star-info title-item">{{ item.des }}</p> |
|
||||
<p class="star-date">{{ item.date }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import scrollMixins from '@/common/scrollMixins' |
|
||||
import data from './data' |
|
||||
export default { |
|
||||
name: 'ReadStar', |
|
||||
mixins: [scrollMixins], |
|
||||
data() { |
|
||||
return { |
|
||||
readstarList: [] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.readstarList = data.readstar |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.dataCompleteFun() |
|
||||
}, |
|
||||
destroyed() { |
|
||||
// 清理定时器 |
|
||||
clearTimeout(this.pauseTimer) |
|
||||
this.pauseTimer = null |
|
||||
clearInterval(this.scrollTimer) |
|
||||
this.scrollTimer = null |
|
||||
}, |
|
||||
methods: { |
|
||||
// 数据加载完成方法 |
|
||||
dataCompleteFun() { |
|
||||
this.scrollDom = this.$refs.starList |
|
||||
this.interval = 50 |
|
||||
this.timeout = 2000 |
|
||||
this.step = 1 |
|
||||
// 开启滚动 |
|
||||
// this.autoScroll() |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,80 +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 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 /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import LineChart from '@/components/echart/lineChart' |
|
||||
export default { |
|
||||
name: 'TotalLending', |
|
||||
components: { |
|
||||
LineChart |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0'] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.$nextTick(() => { |
|
||||
this.start() |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
start() { |
|
||||
var strHtml = '' |
|
||||
for (var i = 0; i < this.chartNum.length; i++) { |
|
||||
strHtml += '<li class="number-item">\n' + |
|
||||
' <span><i class="item" ref="numberItem">0123456789</i></span>\n' + |
|
||||
' </li>' |
|
||||
} |
|
||||
document.getElementById('TNum').innerHTML = strHtml |
|
||||
// 定时改变数字 |
|
||||
const _this = this |
|
||||
setInterval(() => { |
|
||||
_this.toOrderNum('123456') |
|
||||
_this.setNumberTransform() |
|
||||
}, 1000) |
|
||||
}, |
|
||||
toOrderNum(num) { |
|
||||
num = num.toString() // 数字变成字符串 |
|
||||
if (num.length < 9) { // 如未满位数，添加"0"补位 |
|
||||
num = '0' + num |
|
||||
this.toOrderNum(num) // 递归添加"0"补位 |
|
||||
} else if (num.length === 9) { // 数中加入逗号 |
|
||||
this.chartNum = num.split('') // 将其便变成数据 |
|
||||
} else { |
|
||||
alert('显示异常') |
|
||||
} |
|
||||
}, |
|
||||
setNumberTransform() { |
|
||||
var numberItems = document.getElementsByClassName('item') |
|
||||
// console.log(numberItems) |
|
||||
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> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue