xuhuajiao
/
qy_bigScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

three

master
xuhuajiao 6 months ago
parent
314f0279a6
commit
21a30cefc6
1 changed files with 42 additions and 35 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. 77
      src/views/pageThree/index.vue

77
src/views/pageThree/index.vue
View File

@ -34,7 +34,7 @@
<li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul>
<!-- <ul class="ranking-list">
<ul class="ranking-list">
<li v-for="(item,index) in rankingYearWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: .625rem; 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>
@ -43,9 +43,8 @@
</div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
</li>
</ul> -->
<!-- :options="swiperOptionThumbs" -->
<swiper v-if="rankingYearWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
</ul>
<!-- <swiper v-if="rankingYearWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingYearWithPercentage" :key="index">
<div class="ranking-item">
<div style="width: .625rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
@ -56,7 +55,7 @@
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
</div>
</swiper-slide>
</swiper>
</swiper> -->
</div>
</div>
</div>
@ -93,7 +92,7 @@
<li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul>
<!-- <ul class="ranking-list">
<ul class="ranking-list">
<li v-for="(item,index) in rankingTodayWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 0.625rem; 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.75rem; text-align: left;">{{ item.name }}</div>
@ -102,8 +101,8 @@
</div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
</li>
</ul> -->
<swiper v-if="rankingTodayWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
</ul>
<!-- <swiper v-if="rankingTodayWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingTodayWithPercentage" :key="index">
<div class="ranking-item">
<div style="width: .625rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
@ -114,7 +113,7 @@
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
</div>
</swiper-slide>
</swiper>
</swiper> -->
</div>
</div>
</div>
@ -141,17 +140,17 @@ import LineChart from '@/components/echart/lineChart'
import BarEcharts from '@/components/echart/barEcharts'
import YearCircle from '@/components/echart/yearCircle'
import TodayCircle from '@/components/echart/todayCircle'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'
export default {
name: 'PageThree',
components: {
LineChart,
BarEcharts,
YearCircle,
TodayCircle,
swiper,
swiperSlide
TodayCircle
// swiper,
// swiperSlide
},
data() {
return {
@ -305,10 +304,18 @@ export default {
})
// 2. 根据JCC_YEAR的值进行降序排序
this.rankingYearData = newDataArray.sort((a, b) => b.JCC_YEAR - a.JCC_YEAR)
this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
// this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
// 不滚动只显示6条
this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR').splice(0, 6)
// 3. 根据JCC_DAY的值进行降序排序
this.rankingTodayData = newDataArray.sort((a, b) => b.JCC_DAY - a.JCC_DAY)
this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY')
// this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
// 不滚动只显示6条
this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY').splice(0, 6)
// 不滚动只显示6条
this.rankInterval = setInterval(() => {
this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
}, 1000)
}
}).catch(error => {
console.error('Error', error)
@ -434,26 +441,26 @@ export default {
@import "~@/assets/styles/index.scss";
@import "~@/assets/styles/font-some.css";
.swiper {
width: 100%;
height: 3rem !important;
// .swiper {
// width: 100%;
// height: 3rem !important;
.swiper-slide {
height: .5rem !important;
}
.swiper-slide-active,
.swiper-slide-duplicate-active{
// background-color: #142B76;
// border-radius: .05rem;
// animation: myListScale 1s forwards;
}
}
// .swiper-slide {
// height: .5rem !important;
// }
// .swiper-slide-active,
// .swiper-slide-duplicate-active{
// // background-color: #142B76;
// // border-radius: .05rem;
// // animation: myListScale 1s forwards;
// }
// }
@keyframes myListScale {
to {
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
}
// @keyframes myListScale {
// to {
// -webkit-transform: scaleX(1) scaleY(1);
// transform: scaleX(1) scaleY(1);
// }
// }
</style>
Write Preview
Loading…
Cancel
Save