<template>
    <div class="regular-box">
        <div class="btn-s first-bg" @click="choicePopState = true">
            <img src="../../assets/homeImage/indexRegularFirst.png" class="first" alt="">
        </div>
        <div class="btn-s other-bg mg-t-15">
            <img src="../../assets/homeImage/indexRegularSecond.svg" class="other-img" alt="">
        </div>
        <div class="btn-s other-bg mg-t-15">
            <img src="../../assets/homeImage/indexRegularThird.svg" class="other-img" alt="">
        </div>
        <el-badge :value="12" class="mg-t-15">
            <div class="btn-s other-bg">
                <img src="../../assets/homeImage/indexRegularFourth.svg" class="other-img" alt="">
            </div>
        </el-badge>
    </div>
    <!-- 身份弹窗 -->
    <choosing-identity v-if="choicePopState" @close="choicePopState = false"></choosing-identity>
</template>
  
<script setup>
import { ref } from 'vue'
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
let choicePopState = ref(false)
</script>
<script>
export default {
    props: {
        List: {
            type: Array,
            default: function () {
                return []
            }
        }
    }
}
</script>
<style scoped>
.regular-box {
    position: fixed;
    right: 30px;
    bottom: 60px;
    z-index: 555;

    .first-bg {
        background: #fdda55;
    }

    .other-bg {
        background: #62b1ff;
    }

    .btn-s {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        .first {
            width: 20px;
            height: 20px;
        }

        .other-img {
            width: 30px;
            height: 30px;
        }
    }

    .mg-t-15 {
        margin-top: 15px;
    }
}
</style>
  