当前位置：首页 > news >正文

css实现排行榜样式（vue组件）

news 2025/7/1 2:22:05

先看效果图：
在这里插入图片描述

<template><div class="lawyer-refund-wrap"><div class="content"><divv-for="(item, index) in dataList" :key="index":style="{'width': `calc(100% - ${(index + 1) * 10}px)`}"class="card-item"><div class="left"><div class="number">{{ index + 1 }}</div><div class="team-name">{{ item.name }}</div></div><div class="right"><div class="case-num">结案数量：{{ item.num }}件</div><div class="refund-money">回款金额：{{ item.amount }}万元</div></div></div></div></div>
</template><script>
export default {data () {return {dataList: [{'name': '徐春雷团队','num': 900,'amount': 900},{'name': '张三团队','num': 800,'amount': 800},{'name': '李四团队','num': 700,'amount': 700},{'name': '王五团队','num': 600,'amount': 600},{'name': '徐春雷团队','num': 500,'amount': 500},{'name': '徐春雷团队','num': 900,'amount': 900},{'name': '张三团队','num': 800,'amount': 800},{'name': '李四团队','num': 700,'amount': 700},{'name': '王五团队','num': 600,'amount': 600},{'name': '徐春雷团队','num': 500,'amount': 500}]}}
}
</script><style scoped lang="scss">.lawyer-refund-wrap {background: #fff;border: 1px solid #ebeaf0;border-radius: 4px;.content {display: flex;flex-direction: column;gap: 10px;padding: 15px 50px;.card-item {position: relative;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between;background-color: #e7ebf1;padding: 10px 50px 10px 20px;border-radius: 4px;&::after {content: '';position: absolute;right: 0;bottom: 0;border-bottom: 40px solid white;border-left: 10px solid transparent;}&:nth-child(1) {.number {color: red;}}&:nth-child(2) {.number {color: #e5794a;}}&:nth-child(3) {.number {color: #2893e0;}}.left, .right {display: flex;}.number {margin-right: 10px;}.team-name {margin-right: 100px;}.case-num {margin-right: 20px;}.refund-money {}}}}
</style>