baozhida-hardware-development/src/components/widgets/SceneButton.vue

<template>
    <div class="center_in">
        <div class="card_btn center_in" :style="{ width: config.css.width + 'px', height: config.css.height + 'px' }">
            <div class="bg_item_btn center_in">
                <el-icon :size="config.config.size" :color="config.css.iconColor">
                    <BellFilled />
                </el-icon>
            </div>
            <div>{{ config.name }}</div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { defineProps } from "vue";
defineProps(["config", "sendSon"])
</script>
 
<style lang="scss" scoped>
.card_btn {
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.bg_item_btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(21, 140, 251, 0.1);
}
</style>