li-guang
2020-12-17 b16d36e2a314efc42f99d484e5291a78a95fcd8e
hive-app/pages/member/detail.vue
@@ -6,72 +6,72 @@
      <!-- #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-18 mt-5">333</text>
         <text class="font-14 mt-5">会员编号: 101010</text>
         <view class="flex align-center mt-5">
            <text class="font-12 white mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
            <text class="icon iconfont  white" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
            <text class="font-12 mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
            <text class="icon iconfont" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
         </view>   
         <view class="flex align-center mt-10">
            <view class="icon-box flex justify-center align-center mr-20">
         <view class="flex mt-10">
            <view class="icon-box mr-20">
               <text class="icon iconfont icondianhua blue"></text>
            </view>
            <view class="icon-box flex justify-center align-center">
            <view class="icon-box">
               <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">
         <view class="content-row flex justify-around">
            <view class="center">
               <text class="font-18 red">600.00</text>
               <text class="font-14 mt-10">余额</text>
               <text class="font-14 mt-10 block">余额</text>
            </view>
            <view class="flex flex-v align-center">
            <view class="center">
               <text class="font-18 green">600.00</text>
               <text class="font-14 mt-10">赠送余额</text>
               <text class="font-14 mt-10 block">赠送余额</text>
            </view>
            <view class="flex flex-v align-center">
            <view class="center">
               <text class="font-18 blue">600.00</text>
               <text class="font-14 mt-10">累计消费</text>
               <text class="font-14 mt-10 block">累计消费</text>
            </view>
         </view>
         <view class="content-row mt-10">
            <view class="flex">
               <view class="detail-item flex flex-v align-center justify-center">
         <view class="content-row flex flex-wrap">
            <view class="detail-item">
               <navigator url="./editMember" hover-class="none" >
                  <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
                  <text class="font-14 mt-5">会员信息</text>
               </navigator>
               </view>
               <view class="detail-item flex flex-v align-center justify-center">
            <view class="detail-item">
                  <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">
            <view class="detail-item">
               <navigator url="./membershipCard" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>                  
                  <text class="font-14 mt-5">卡项</text>
               </navigator>
               </view>
               <view class="detail-item flex flex-v align-center justify-center">
            <view class="detail-item">
                  <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">
            <view class="detail-item">
                  <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">
            <view class="detail-item">
                  <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">
            <view class="detail-item">
                  <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 class="flex content-btn justify-around">
      <view class="sticky-footer flex justify-between">
         <button class="white-btn btn">开单</button>
         <button class="blue-btn btn">预约</button>
      </view>
@@ -107,6 +107,7 @@
   }
   .header{
      background: #518EFF;
      color: #FFFFFF;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      padding: 15px;
@@ -119,6 +120,8 @@
   .icon-box{
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: #FFFFFF;
      border-radius: 50%;
   }
@@ -131,23 +134,27 @@
   .content-row{
      border: 1px solid #EDEAF4;
      background: #FFFFFF;
      margin-top: 10px;
      padding: 15px 0;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .detail-item{
      width: 25%;
      margin: 10px 0;
      text-align: center;
   }
   .detail-icon{
      width: 28px;
      height: 28px;
      display: block;
      width: 26px;
      height: 26px;
      margin: 0 auto;
   }
   .content-btn{
      position: absolute;
      bottom: 15px;
      width: 100%;
   .sticky-footer{
      margin: 0 -8px;
   }
   .btn{
      width: 45%;
      width: 100%;
      margin: 0 8px;
   }
</style>