<template>
<div class="screen3-right-2">
<div class="s3r2-title">
<div>节目名称</div>
<div>播放次数</div>
</div>
<vue-seamless-scroll :data="listData" class="s3r2-con" :class-option="optionSingleHeight">
<div class="s3r2-con-item" v-for="(item, inx) in listData" :key="inx">
<div>
<div class="s3r2-con-item-num">
<span>TOP</span>
<span :class="inx===0?'num1':inx===1?'num2':inx===2?'num3':inx===3?'num4':'numAll'">{{ formatStr(inx) }}</span>
</div>
<div class="s3r2-con-item-text">{{item.videoName}}</div>
<div class="s3r2-con-item-value" :style="'width:'+(item.playNumPro)+'%'"></div>
</div>
<div class="s3r2-con-item-ci">{{(item.playNum/10000).toFixed(1)}}万次</div>
</div>
</vue-seamless-scroll>
</div>
</template>
<script type="text/javascript">
import { getPlayTopSituation } from '@/api/XXXXXXScreen';
// import $ from 'jquery';
export default {
name: "screen3-right-2",
props: [],
components: {
},
data() {
return {
listData: [],
optionSingleHeight: {
singleHeight: 44,
waitTime: 2000
}
}
},
mounted() {
getPlayTopSituation({}).then(response => {
this.listData = response.data.rows;
});
},
methods: {
formatStr(inx) {
let rl = inx < 9 ? '0' + (inx + 1) : (inx + 1);
return rl;
}
}
}
</script>
<style lang="scss" scoped>
.screen3-right-2 {
width: 100%;
height: 100%;
padding: 20px 30px;
.s3r2-title {
display: flex;
font-size: 16px;
font-weight: 500;
color: #ffffff;
div {
&:nth-child(1) {
width: 70%;
text-indent: 65px;
}
&:nth-child(2) {
text-align: right;
width: 30%;
}
}
}
.s3r2-con {
height: calc(100% - 40px);
overflow: hidden;
margin: 15px 0 0 0;
.s3r2-con-item {
height: 44px;
line-height: 44px;
display: flex;
color: #ffffff;
font-size: 14px;
position: relative;
background: url("~@/assets/ssss/s3r2-con-item-bg.png") no-repeat 0px;
> div {
&:nth-child(1) {
width: 70%;
}
&:nth-child(2) {
width: 30%;
text-align: right;
}
}
.s3r2-con-item-ci {
margin: 5px 0 0 0;
}
.s3r2-con-item-num {
font-size: 12px;
position: absolute;
left: 5px;
top: -10px;
font-style: italic;
.num1 {
color: #fb255d;
}
.num2 {
color: #ff7529;
}
.num3 {
color: #fff601;
}
.num4 {
color: #29ff47;
}
.numAll {
color: #38f2d1;
}
}
.s3r2-con-item-text {
position: absolute;
left: 70px;
top: 5px;
}
.s3r2-con-item-value {
background-image: linear-gradient(to left, #ffa627, #494745);
height: 4px;
position: absolute;
left: 70px;
top: 10px;
border-radius: 4px;
}
}
}
}
</style>
大屏-模块列表-展示自动轮播滚动
最新推荐文章于 2024-07-14 02:36:05 发布