<!--  -->
<template>
    <div class="menus">
        <div class="menus-main">
            <div class="menus-main-img">
                <img src="@/assets/img/icon-1.png" style="width: 100%;height: 100%;">
            </div>
            <div class="menus-main-img">
                <img src="@/assets/img/icon-2.png" style="width: 100%;height: 100%;">
            </div>
            <div class="menus-main-img">
                <img src="@/assets/img/icon-3.png" style="width: 100%;height: 100%;">
            </div>
            <div class="menus-main-img">
                <img src="@/assets/img/icon-4.png" style="width: 100%;height: 100%;">
            </div>
            <div class="menus-main-img">
                <img src="@/assets/img/icon-5.png" style="width: 100%;height: 100%;">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>
<style lang="scss">
/* @import url(); 引入css类 */
.menus{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    &-main{
        min-width: 40%;
        height: 100%;
        background: rgba(#fff, 0.2);
        border-radius: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        &-img{
            width: 60px;
            height: 60px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 1px 0 #000;
        }
    }
}
</style>