PC-mj/components/RankingBox.vue
A1300399510 bb91a032e9
2024-01-05 18:20:39 +08:00

123 lines
3.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="pop-masking flexcenter">
<div class="box">
<img class="cross-icon" @click="coinrankingState = false" src="@/assets/img/cross-icon.png" />
<div class="header flexacenter">
<div class="total">{{ coinrankingList.length }}</div>
个寄友给作者投币表达了感谢
</div>
<div class="list">
<div class="item flexacenter" v-for="(item, index) in coinrankingList" :key="index">
<div class="number">{{ index + 1 }}</div>
<div class="middle flexacenter">
<img class="avatar" :src="item.avatar" />
<div class="nickname">{{ item.nickname }}</div>
</div>
<div class="value flexacenter">
<div class="">{{ item.coinnum }}</div>
<div class="bi"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps(["coinrankingList"])
let coinrankingState = inject("coinrankingState")
</script>
<style scoped lang="less">
.pop-masking {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10;
.box {
width: 552px;
height: 490px;
background-color: rgba(255, 255, 255, 1);
border-radius: 14px;
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.207843137254902);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.207843137254902);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.207843137254902);
position: relative;
.cross-icon {
width: 16px;
height: 16px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.header {
height: 76px;
font-size: 14px;
color: #333;
border-bottom: 1px solid #ebebeb;
padding-left: 30px;
.total {
color: #000;
font-weight: 650;
margin: 0 7px;
}
}
.list {
padding: 15px 30px;
height: 376px;
overflow: auto;
border-bottom: 1px solid #ebebeb;
// margin-right: 10px;
&::-webkit-scrollbar {
// margin-right: 10px !important;
margin-right: -10px !important;
}
.item {
height: 64px;
border-bottom: 1;
font-size: 13px;
color: #000;
border-bottom: 1px dotted #f2f2f2;
.number {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700;
color: #ffb600;
padding-left: 5.5px;
margin-right: 110px;
}
.middle {
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
margin-right: 12px;
}
.nickname {
color: #555555;
}
}
.value {
font-size: 16px;
line-height: 24px;
flex: 1;
justify-content: flex-end;
.bi {
font-size: 13px;
margin-left: 4px;
}
}
}
}
}
}
</style>