<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- S罐体 -->
        <i class="icon iconfont-colour icon-initialTank3 tank_s" :style="{ fontSize: iconSize + 'px' }">
            <div class="tank_title" v-if="title">{{ title }}</div>
        </i>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    iconSize: {
        type: Number,
        default: 400
    },
})

</script>

<style lang="scss" scoped>
.tank {
    position: relative;
    z-index: 10;

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

        //罐子名称
        .tank_title {
            position: absolute;
            top: 6%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: #FFA500;
            font-weight: bold;
        }
    }
}
</style>