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

最新推荐文章于 2025-05-18 17:15:26 发布

原创

最新推荐文章于 2025-05-18 17:15:26 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #javascript

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

<template>
  <div class="lawyer-refund-wrap">
    <div class="content">
      <div
        v-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"