<template>
    <div class="container center-content">
        <div class="title">我的 NFT</div>
        <div class="tabs">
            <div
                class="tab"
                :class="{ active: active === item }"
                v-for="(item, index) in tabs"
                :key="index"
                @click="tab(item)"
            >
                {{ item }}
            </div>
        </div>
        <div class="border"></div>
        <search-info></search-info>
        <goods-info></goods-info>
        <!-- <div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            >
            </el-pagination>
        </div> -->
    </div>
</template>
<script>
import GoodsInfo from '../components/GoodsInfo.vue';
import SearchInfo from '../components/SearchInfo.vue';
export default {
    components: { GoodsInfo, SearchInfo },
    data() {
        return {
            tabs: ['我拥有的(10)', '我卖出的(5)', '我铸造的(8)'],
            active: '我拥有的(10)',
            currentPage4: 4
        };
    },
    methods: {
        tab(item) {
            this.active = item;
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        padding: 60px 0;
    }
    .tabs {
        display: flex;
        align-items: center;
        padding-bottom: 30px;
        text-align: center;
        .tab {
            width: 140px;
            border: 1px solid #939599;
            height: 42px;
            font-size: 18px;
            font-weight: bold;
            color: #949699;
            line-height: 42px;
            &.active {
                color: #ffffff;
                background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
            }
            &:first-child {
                border-radius: 8px 0px 0px 8px;
            }
            &:last-child {
                border-radius: 0px 8px 8px 0px;
            }
        }
    }
    .border {
        height: 1px;
        background: #494a4d;
        border-radius: 1px;
    }

    // .footer {
    //     flex-shrink: 0;
    // }
}
</style>
