130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
|
<div ref="refroll" class="demo roll-list" style="height: 100%">
|
|
<vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="datalist">
|
|
<div v-for="(item, index) in datalist" :key="index" class="list-item">
|
|
<div class="list-item-content">
|
|
<div class="list-item-l">
|
|
<div class="item-top">
|
|
<span class="label"> {{ item.title || '--' }}</span>
|
|
<span class="value"> {{ item.value || '0' }}</span>
|
|
</div>
|
|
<customProgress height="6px" :percent="item.percent" inactive-bg="#081931"></customProgress>
|
|
</div>
|
|
<div class="list-item-r">
|
|
{{ '0' + (index + 1) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue3ScrollSeamless>
|
|
</div>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
|
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
|
import customProgress from '@/components/customProgress.vue';
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
let list = reactive(props.items);
|
|
let refroll = ref(null);
|
|
|
|
const classOptions = {
|
|
singleHeight: 48,
|
|
};
|
|
|
|
let datalist = computed(() => {
|
|
let maxwidth = refroll.value && refroll.value.clientWidth;
|
|
return list.map((m) => {
|
|
//return { ...m, percent: parseInt(Number(parseInt(m.value) / max.value) * maxwidth) };
|
|
return {
|
|
...m,
|
|
percent: Number((Number(parseInt(m.value) / max.value) * 100).toFixed(0)),
|
|
};
|
|
});
|
|
});
|
|
|
|
let max = computed(() => {
|
|
let valueList = new Set(list.map((item) => parseInt(item.value)));
|
|
let sortValue = [...valueList].sort((a, b) => b - a) || [];
|
|
// console.info('valueList', sortValue);
|
|
return sortValue.length ? sortValue[0] : 0;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.roll-list {
|
|
.scroll-wrap {
|
|
height: 80%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-item {
|
|
// border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
|
line-height: 36px;
|
|
.list-item-content {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
position: relative;
|
|
.list-item-l,
|
|
.list-item-r {
|
|
color: #fff;
|
|
}
|
|
.list-item-l {
|
|
width: calc(100% - 0px);
|
|
.item-top {
|
|
width: 100%;
|
|
line-height: 16px;
|
|
.label,
|
|
.value {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.label {
|
|
font-size: 12px;
|
|
}
|
|
.value {
|
|
font-size: 10px;
|
|
color: #6beff9;
|
|
}
|
|
}
|
|
}
|
|
.list-item-r {
|
|
text-align: right;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #6beff9;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.ui-wrap {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.li-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.demo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|