<!--
 * @Author: PoJun
 * @Date: 2023-05-15 19:59:55
 * @LastEditors: PoJun
 * @LastEditTime: 2023-10-11 17:10:28
 * @Message: Nothing
-->
<template>
    <view class="index">
        <view style="min-height: 200px">
            <uv-image :src="BannerImg" height="240px" width="100%">
                <template v-slot:loading>
                    <uv-loading-icon></uv-loading-icon>
                </template>
            </uv-image>
        </view>

        <view class="content">
            <BoxWithTitle title="艾泽拉斯之谜" :list="MysteryOfAzeroth" />
            <BoxWithTitle title="工具" :list="TOOLS" />
            <!-- <BoxWithTitle title="资料" :list="RESOURCE" /> -->
        </view>
    </view>
</template>

<script>
import BoxWithTitle from "@/components/BoxWithTitle.vue";
// 暂时都是来自于前端的临时数据
import { MysteryOfAzeroth, TOOLS } from "@/static/js/constant";

import BannerImg from "@/static/img/banner.jpeg";

export default {
    components: { BoxWithTitle },
    data() {
        return {
            MysteryOfAzeroth,
            TOOLS,
            // RESOURCE,
            BannerImg,
        };
    },
};
</script>

<style lang="scss">
.index {
    .content {
        padding: 24rpx;
        transform: translateY(-40px);
        /* 增加个边距吧具体放下来 */
        margin-bottom: -50px;
    }
}
</style>
