No.9可视化大屏--vite+vue3 主体部分modelFirst 编写

一、modelFirst

 

完整代码：

<script setup>
import { ref } from 'vue';

const modelfirstList = ref([
    { title: "爬山", num: 4, unit: "座" },
    { title: "徒步", num: 60, unit: "千米" },
    { title: "骑行", num: 469, unit: "千米" },
    { title: "打球", num: 31, unit: "场" },
    { title: "游泳", num: 9, unit: "次" },
    { title: "跑步", num: 5, unit: "次" }
]);
</script>

<template>
    <div class="modelfirst">
      <ul>
        <li v-for="(v, i) in modelfirstList" :key="i">
          <div class="modelfirst-title">{{ v.title }}</div>
          <div class="modelfirst-item">
            <span class="modelfirst-num">{{ v.num }}</span>
            <span class="modelfirst-unit">{{ v.unit }}</span>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  <style scoped>
  .modelfirst {
      background: rgba(3, 21, 100, 0.3);
      margin:  auto;  /* 居中 */
      width: 100%;  /* 适应父级 */
      overflow: hidden; /* 防止超出 */
  }
  
  .modelfirst ul {
      display: flex;
      height: 100%;
      justify-content: space-around;
      align-items: flex-start;
      padding: 0;
      list-style: none;
      width: 100%;  /* 避免超出 */
  }
  
  .modelfirst ul li {
      flex: 1;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 2px solid rgba(40, 6, 190, 0.799);
  }
  
  /* 取消最后一个 li 的右边框 */
  .modelfirst ul li:last-child {
      border-right: none;
  }
  
  .modelfirst-title {
      font-size: 20px;
      font-weight: 400;
      margin-bottom: 10px;
  }
  
  .modelfirst-num {
      font-size: 33px;
      font-weight: 800;
  }
  
  .modelfirst-unit {
      font-size: 20px;
      font-weight:400;
      margin-left: 10px;
  }
.modelfirst ul li:nth-child(3n+1) .modelfirst-num {
    color: chocolate;
}
.modelfirst ul li:nth-child(3n+2) .modelfirst-num {
    color: rgb(13, 161, 77);
}
.modelfirst ul li:nth-child(3n+3) .modelfirst-num {
    color: rgb(166, 203, 55);
}

  </style>

　　效果：