<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- j1罐体 -->
        <div class="tank_j1">
            <i class="icon iconfont-colour icon-tank5" :style="{ fontSize: iconSize + 'px' }"></i>
            <div class="tank_title" v-if="title">{{ title }}</div>
        </div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    iconSize: {//罐体图标大小
        type: Number,
        default: 300,
    },
})

</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #0b172c;

    .tank {
        position: relative;
        z-index: 10;

        .tank_j1 {
            position: absolute;
            z-index: 10;

            .tank_title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 28px;
                color: #FFA500;
                font-weight: bold;
            }

        }

    }
}
</style>