02.可视化大屏分解动画

javascript 复制代码
<script setup lang="ts">
import { ref } from 'vue'
const dataList = ref([
  {
    name: '香蕉',
    value: 50
  },
  {
    name: '香蕉',
    value: 20
  },
  {
    name: '香蕉',
    value: 30
  }
])
const rankingTotal = ref(100)
</script>

<template>
  <div class="box-data">
    <div class="title">
      <span class="textTitle">水果排名</span>
    </div>
    <div style="width: 100%; height: 233px; color: #fff">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" style="margin-top: 13px">
          <div style="margin: 0 0 10px 0">
            <span class="rank"
              ><i>TOP.{{ index + 1 }}</i></span
            >
            <span class="name">{{ item.name }}</span>
            <span class="progress">{{ item.value }}</span>
          </div>
          <div class="elProgress">
            <el-progress :percentage="(item.value / rankingTotal) * 100" :show-text="false" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
.box-data {
  width: 355px;
  background-color: #031237;
  padding: 16px;
}
.title {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  font-family: '微软雅黑';
  align-items: center;
  background-image: url(../assets/images2/Frame10053.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin-bottom: 5px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 25px;
    background-image: linear-gradient(to right, transparent 0%, #3894c3 100%);
    animation: scanning 4s infinite linear;
    opacity: 0.5;
    border-radius: 5px;
  }

  .textTitle {
    display: inline-block;
    margin: 5px 0 0 20px;
  }
}

.rank {
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 23px;
  text-align: center;
  background-color: #031237;
  border: 1px solid #2e6fb3;
  font-family: '隶书';
  color: #aec3dc;
  font-size: 14px;
}
.name {
  margin-left: 20px;
  font-size: 14px;
  color: #aec3dc;
}
.progress {
  font-size: 15px;
  font-weight: bold;
  color: #d6e9fd;
  float: right;
  margin-right: 10px;
}
.elProgress {
  animation: elPro 4s infinite;
}

// 进度条样式
::v-deep .el-progress {
  margin-left: 5px;
}
// 进度条底色
::v-deep .el-progress-bar__outer {
  background-color: #1c2a45;
  height: 3px !important;
  width: 98%;
}
// 进度条颜色
::v-deep .el-progress-bar__inner {
  background: linear-gradient(
    to right,
    rgba(22, 41, 82, 0.4) 10%,
    rgba(20, 67, 141, 0.5) 20%,
    rgba(37, 126, 227, 0.4) 30%,
    rgba(58, 151, 255, 0.8) 60%,
    rgba(132, 190, 255, 0.9) 70%
  );
}

@keyframes scanning {
  0% {
    left: 0;
    opacity: 0.7;
  }
  100% {
    left: 20%;
    opacity: 0;
  }
}

@keyframes elPro {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>