<template>
    <view class="pkRecord">
        <view>返回</view>
        <view>pk记录</view>
        <view></view>
    </view>
    <view class="Navigation">
            <view class="PkPosted">我发布的PK</view>
            <view>我邀请的PK</view>
            </view>
    <scroll-view
    scroll-y="true"
    class="scroll"
    refresher-enabled="true"
    refresher-threshold="40"
    @refresherrefresh="onRefresherRefresh"
    lower-threshold="100"
    @scrolltolower="onScrollToLower"
  > 
  <uni-card v-for="(item, index) in list">
    <view class="content">
        <view class="Anchor">
            <view class="avatar">主播1头像(赢方头像框王冠)</view>
            <view class="AnchorInfo">
                <view>主播昵称</view>
                <view>pk时间</view>
                <view>实际打了多少金币</view>
            </view>
        </view>
        <view>
            VS
        </view>
        <view class="Anchor">
            <view class="AnchorInfo">
                <view>主播昵称</view>
                <view>pk时间</view>
                <view>实际打了多少金币</view>
            </view>
            <view class="avatar">主播1头像</view>
        </view>

    </view>
  </uni-card>
  </scroll-view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {},
                    {},
                    {}, 
                    {}, 
                    {},      
                    {}, 
                    {}, 
                    {}, 
                ]
            }
        },
        onLoad() {
            // 页面加载时执行
        },
        methods: {
            // 方法定义
        }
    }
</script>

<style scoped>
    .pkRecord{
        width: 100vw;
        height: 200rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        padding-top: 40rpx;
        border-bottom: 1px solid #000000;
    }
   .content{
        width: 100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 20rpx;
        background-color: aqua;
    }
    .Anchor{
        display: flex;
    }
   .AnchorInfo{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 10rpx;
        font-size: 20rpx;
   }
   .PkPosted{
        text-align: center;
        font-size: 30rpx;
        height: 100rpx;
        line-height: 100rpx;
        width: 45%;
        border-right: 1px solid #000000;
    }
    .Navigation{
        width: 100vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100rpx;
        background-color: #ffffff;
        border-bottom: 1px solid #000000;
    }
</style>