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>
相关推荐
Bellafu66626 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
bdawn3 小时前
Vue3 项目首屏加载性能优化全攻略
性能优化·vue·策略·分包
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构