<script setup lang="ts">
import './index.less'
import SmallTitle from '../smallTitle/smallTitle.vue'



</script>

<template>
    <div class="MemberMallBox">
        <!-- 会员总数 -->
        <div class="MemberSumBox">
            <div class="MemberSumBoxLeft">会员总数</div>
            <div class="memberSumTotal">12733</div>
            <div class="MemberSumBoxRight">本月新增 56 个</div>
        </div>

        <!-- 近30天数据 -->
        <SmallTitle title="近30天数据" style="margin-top: 22px;" />

        <div class="recentData">
            <div class="recentDataTop">
                <div class="recentDataTopItem" style="left: 22px;top: 31px;">
                    <div class="recentDataTopValue">94</div>
                    <div class="recentDataTopLabel">新增会员数</div>
                </div>

                <div class="recentDataTopItem" style="left: 30%;top: 0;">
                    <div class="recentDataTopValue">2716</div>
                    <div class="recentDataTopLabel">打开次数</div>
                </div>

                <div class="recentDataTopItem" style="right: 30%;top: 0;">
                    <div class="recentDataTopValue">624</div>
                    <div class="recentDataTopLabel">新增人数</div>
                </div>

                <div class="recentDataTopItem" style="right: 8px;top: 31px;">
                    <div class="recentDataTopValue">884</div>
                    <div class="recentDataTopLabel">访问人数</div>
                </div>

            </div>
            <div class="recentDataBottom"></div>
        </div>

        <!-- 会员消费情况 -->
        <SmallTitle title="会员消费情况" />

        <div class="MemberConsumption">
            <div class="MemberConsumptionItem">
                <div class="MemberConsumptionLabel">会员消费笔数</div>
                <div class="MemberConsumptionProgress"></div>
                <div class="MemberConsumptionValue">133</div>
            </div>

            <div class="MemberConsumptionItem" style="margin-top: 18px;">
                <div class="MemberConsumptionLabel">会员总销售额</div>
                <div class="MemberConsumptionProgress2"></div>
                <div class="MemberConsumptionValue">27,734.10</div>
            </div>
        </div>

        <div class="MemberContentBox">
            <div class="MemberContentBoxItem">
                <div class="MemberContentBoxItemBox">
                    <div class="MemberContentBoxItemLabel">工会会员</div>
                    <div class="MemberContentBoxItemValue">512</div>
                </div>
                <div class="MemberContentBoxItemBox" style="margin-top: 18px;">
                    <div class="MemberContentBoxItemLabel">会员占比</div>
                    <div class="MemberContentBoxItemValue">4.02%</div>
                </div>
            </div>

            <div class="MemberContentBoxItem">
                <div class="MemberContentBoxItemBox">
                    <div class="MemberContentBoxItemLabel">会员转化率</div>
                    <div class="MemberContentBoxItemValue">15.06%</div>
                </div>
                <div class="MemberContentBoxItemBox" style="margin-top: 18px;">
                    <div class="MemberContentBoxItemLabel">会员增长率</div>
                    <div class="MemberContentBoxItemValue">0.74%</div>
                </div>
            </div>
        </div>


        <!-- 会员消费情况 -->
        <SmallTitle title="会员消费数据概览" style="margin-top: 25px;" />

        <div class="MemberOverview">
            <div class="MemberOverviewItem">
                <div class="MemberOverviewItemTop">23</div>
                <div class="MemberOverviewItemBottom">购买人数</div>
            </div>

            <div class="MemberOverviewItem">
                <div class="MemberOverviewItemTop">23</div>
                <div class="MemberOverviewItemBottom">1,205.83</div>
            </div>

            <div class="MemberOverviewItem">
                <div class="MemberOverviewItemTop">208.53</div>
                <div class="MemberOverviewItemBottom">客单价</div>
            </div>

            <div class="MemberOverviewItem">
                <div class="MemberOverviewItemTop">29.17%</div>
                <div class="MemberOverviewItemBottom">会员复购率</div>
            </div>
        </div>
    </div>
</template>