<template>
|
<!-- 会员详情 -->
|
<view>
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="header flex flex-v align-center">
|
<image class="header-img" src="../../static/images/head-img.jpg"></image>
|
<text class="font-18 white mt-5">333</text>
|
<text class="font-14 white mt-5">会员编号: 101010</text>
|
<text class="font-12 white mt-5">湖南 长沙 22</text>
|
<view class="flex align-center mt-10">
|
<view class="icon-box flex justify-center align-center mr-20">
|
<text class="icon iconfont icondianhua blue"></text>
|
</view>
|
<view class="icon-box flex justify-center align-center">
|
<text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text>
|
</view>
|
</view>
|
</view>
|
<view class="content">
|
<view class="content-row flex justify-around mt-10">
|
<view class="flex flex-v align-center">
|
<text class="font-18 red">600.00</text>
|
<text class="font-14 mt-10">余额</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 green">600.00</text>
|
<text class="font-14 mt-10">赠送余额</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 blue">600.00</text>
|
<text class="font-14 mt-10">累计消费</text>
|
</view>
|
</view>
|
<view class="content-row mt-10">
|
<view class="flex">
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
|
<text class="font-14 mt-5">会员信息</text>
|
</view>
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image>
|
<text class="font-14 mt-5">项目/套餐</text>
|
</view>
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail3.png"></image>
|
<text class="font-14 mt-5">卡项</text>
|
</view>
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image>
|
<text class="font-14 mt-5">皮肤监测</text>
|
</view>
|
</view>
|
<view class="flex justify-start mt-20">
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
|
<text class="font-14 mt-5">消费记录</text>
|
</view>
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image>
|
<text class="font-14 mt-5">服务记录</text>
|
</view>
|
<view class="detail-item flex flex-v align-center justify-center">
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
|
<text class="font-14 mt-5">跟进记录</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
</script>
|
|
<style>
|
.status_bar{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px;
|
}
|
.header-img{
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
}
|
.icon-box{
|
width: 28px;
|
height: 28px;
|
background: #FFFFFF;
|
border-radius: 50%;
|
}
|
.icon{
|
font-size: 18px;
|
}
|
.content{
|
padding: 0 10px;
|
}
|
.content-row{
|
border: 1px solid #EDEAF4;
|
background: #FFFFFF;
|
padding: 15px 0;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.detail-item{
|
width: 25%;
|
}
|
.detail-icon-box{
|
width: 32px;
|
height: 32px;
|
}
|
.detail-icon{
|
width: 32px;
|
height: 32px;
|
}
|
</style>
|
