<template>
    <div class="result">
        <img class="topBg" src="@assets/png-depeat-bg.png" alt="" />

        <div class="topBox" :style="{ top: barHeight + 'px' }">
            <div class="top-info">
                <div class="text1">defeat</div>
                <div class="text2">比赛失败</div>
                <div class="text3">无奖励</div>
            </div>
            <img src="@assets/png-defeat.png" alt="" class="img" />
        </div>

        <div class="result-content">
            <div class="result-title">比赛截图</div>
        </div>
    </div>
</template>

<script>
export default {
    inject: ['barHeight'],
    data() {
        return {
            roomId: 0
        };
    },
    mounted() {
        if (this.$route.query.roomId) {
            this.roomId = this.$route.query.roomId;
        }
    }
};
</script>

<style lang="less" scoped>
.result {
    background-color: #fff;
}
.topBg {
    width: 100%;
    display: block;
}
.topBox {
    position: absolute;
    padding: 20px 30px 0 20px;
    .flex();
    left: 0;
    right: 0;
    justify-content: space-between;

    .img {
        width: 146px;
        height: 178px;
    }
    .top-info {
        .text1 {
            font-size: 38px;
            font-family: SourceHanSans-Medium;
            font-weight: bolder;
            color: #ff7f1f;
            line-height: 38px;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: linear-gradient(295deg, #b5b5b5 0%, #434343 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text2 {
            font-size: 20px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            margin-top: 24px;
        }

        .text3 {
            font-size: 14px;
            color: #939599;
            line-height: 24px;
            margin-top: 8px;
        }
    }
}

.result-content {
    padding: 0 20px;
    .result-title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        padding: 0 4px;
    }
}
</style>
