<template>
    <div class="container9">
        <div class="title">
            <div class="one">排名</div>
            <div class="one">姓名</div>
            <div class="one">积分</div>
            <div class="text">所属党支部</div>
        </div>
        <marquee direction=up scrollamount="3" v-if="show" >
             <div class="content" v-for="(item,index) in data" :key="index">
                <div class="one">{{item[0]}}</div>
                <div class="one">{{item[1]}}</div>
                <div class="one">{{item[2]}}</div>
                <div class="text">{{item[3]}}</div>
            </div> 
            <!-- <div class="content">
                <div class="one">h哈</div>
                <div class="one">h哈</div>
                <div class="one">h哈</div>
                <div class="text">h哈</div>
            </div> -->
        </marquee>
    </div>
</template>

<script>
import { getDyjfpm } from '@/api/zhdjxt.js'
export default {
    data () {
        return{
           data:[],
           show:false
        }
    },
    created() {
        this.getDyjfpm()
    },
    methods: {
        async getDyjfpm() {
            try {
                const res = await getDyjfpm()
                //  console.log(res);
                 this.data = res.data.list
                 this.show = true
            } catch (error) {
                console.log('数据获取失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container9 {
    width: 22.8125vw;
    height: 24.5161vh;
    overflow: hidden;
    // border:1px solid #00ffff ;
    marquee {
        width: 22.8125vw;
        height: 23.4408vh;

        // text-align: left;

        // display: flex;
        // margin-left: 50px;

    }

    .title {
        width: 22.8125vw;
        // text-align: left;
        display: flex;
        color: #fff;
        // justify-content: space-around;
        font-size: .8vw;
        background-color: rgba(255, 255, 255, .1);
    }

    .content {
        width: 22.8125vw;
        // text-align: left;
        display: flex;
        color: #fff;
        //  justify-content: space-around;
        font-size: .8vw;
    }

    .one {
        width: 20%;
        text-align: center;
    }

    .text {
        width: 40%;
        text-align: center;
    }

}
</style>