From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_qiun/components/ranking-list/ranking-list.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/src/pages_qiun/components/ranking-list/ranking-list.vue b/src/pages_qiun/components/ranking-list/ranking-list.vue
new file mode 100644
index 0000000..cc3eb93
--- /dev/null
+++ b/src/pages_qiun/components/ranking-list/ranking-list.vue
@@ -0,0 +1,93 @@
+<template>
+ <view>
+ <view class="ranking">
+ <view class="ranking-item" v-for="(content,index) in content" :key="index">
+ <view class="name">{{content.name}}</view>
+ <view class="progress" >
+ <text :style="{backgroundImage:'linear-gradient(to top right,'+getColor(0,index)+','+getColor(1,index)+')',width:content.width + '%'}"></text>
+ </view>
+ <view class="num">{{content.num}}</view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default{
+ name:'ranking-list',
+ props:{
+ content:{
+ type: Array,
+ default() {
+ return []
+ }
+ }
+ },
+ methods:{
+ init(){
+ if(this.content && this.content.length >0){
+ this.content = this.content.sort((a,b) => b.num - a.num);
+ let max = this.content[0].num;
+ this.content.map((item,index) =>{
+ item.width = this.computeWidth(max,item.num);
+ });
+ this.$emit("updateRanking",this.content)
+ }
+ },
+ computeWidth(max,current){
+ let num = (current / max) * 100;
+ return num.toFixed(2);
+ },
+ getColor(id,index){
+ let color = "";
+ switch(index){
+ case 0:
+ color = id == 0 ? "#fff":"#A80BFC";
+ break;
+ case 1:
+ color = id == 0 ? "#fff":"#740CFF";
+ break;
+ case 2:
+ color = id == 0 ? "#fff":"#4A08DC";
+ break;
+ default :
+ color = id == 0 ? "#fff":"#1936DA";
+ break;
+ }
+ return color;
+ },
+ },
+ mounted() {
+ this.init();
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ .ranking-item{
+ display: flex;
+ margin-bottom: 13rpx;
+ padding: 10rpx;
+ align-content: center;
+
+ .name{
+ padding-right: 10rpx;
+ color: #868688;
+ }
+ .progress{
+ flex:5;
+ text-align: left;
+ padding-right: 10rpx;
+
+ text{
+ display: inline-block;
+ height: 100%;
+ }
+
+ }
+ .num{
+ font-size: 26rpx;
+ color: #3EB2F5;
+ }
+ }
+</style>
--
Gitblit v1.9.3