CEES-CMD/ant-design-jeecg-vue/src/components/chart/RankList.vue

81 lines
1.6 KiB
Java
Raw Normal View History

2019-02-25 15:58:05 +08:00
<template>
<div class="rank">
<h4 class="title">{{ title }}</h4>
2019-04-14 16:20:04 +08:00
<ul class="list" :style="{height:height?`${height}px`:'auto',overflow:'auto'}">
2019-02-25 15:58:05 +08:00
<li :key="index" v-for="(item, index) in list">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span>{{ item.name }}</span>
<span>{{ item.total }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "RankList",
// ['title', 'list']
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: null
2019-04-14 16:20:04 +08:00
},
height: {
type: Number,
default: null
2019-02-25 15:58:05 +08:00
}
}
}
</script>
<style lang="scss" scoped>
.rank {
padding: 0 32px 32px 72px;
.list {
margin: 25px 0 0;
padding: 0;
list-style: none;
li {
margin-top: 16px;
span {
color: rgba(0, 0, 0, .65);
font-size: 14px;
line-height: 22px;
&:first-child {
background-color: #f5f5f5;
border-radius: 20px;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-right: 24px;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
}
&.active {
background-color: #314659;
color: #fff;
}
&:last-child {
float: right;
}
}
}
}
}
.mobile .rank {
padding: 0 32px 32px 32px;
}
</style>