PC-mj/components/RankingBox.vue

<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 class="bottom flexcenter">
                <div class="bottom-item flexcenter" @click="coinrankingState = false">关闭</div>
                <div class="bottom-item green flexcenter" @click="wantCoin()">我要投币</div>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(["coinrankingList"])

let coinrankingState = inject("coinrankingState")
let openCoinOperation = inject("openCoinOperation")

const wantCoin = () => {
    coinrankingState.value = false
    openCoinOperation()
}
</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: 540px;
        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: 5px;
            // margin-right: 10px;
            &::-webkit-scrollbar {
                // margin-right: 10px !important;
                margin-right: -10px !important;
            }

            .item {
                height: 64px;
                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;
                    }
                }
            }
        }

        .bottom {
            height: 88px;
            .bottom-item {
                width: 128px;
                height: 38px;
                border: 1px solid rgba(121, 121, 121, 1);
                border-radius: 45px;
                font-size: 14px;
                color: #000000;
                cursor: pointer;

                &.green {
                    color: #fff;
                    border-color: rgba(114, 219, 134, 1);
                    background: rgba(114, 219, 134, 1);
                    margin-left: 21px;
                }
            }
        }
    }
}
</style>