114 lines
4.4 KiB
Vue
114 lines
4.4 KiB
Vue
<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> |