页面调整优化

zxl

昨天 b7ce92d35fde3704297163010c320e336a5dd681

 pages/tabbar/user/my.vue

@@ -1,159 +1,140 @@
<template>
  <view class="user">
    <!-- 个人信息 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="header"  @click="userDetail" :style="{ backgroundImage: `url(${base64image2.userInfoBg})` }">
      <view class="head-1">
        <image v-if="userInfo.face" :src="endpoint + '/' + userInfo.face"></image>
        <image v-else :src="userImage"></image>
    <view class="header-wrapper" @click="userDetail"
      :style="{ backgroundColor: '#e9cc80', backgroundImage: `url(${base64image2.userInfoBg})` }">
      <view class="status_bar">
        <!-- 这里是状态栏 -->
      </view>
      <view class="head-2" v-if="userInfo.id">
        <view class="user-name">{{ userInfo.nickName }}</view>
      <view class="header">
        <view class="head-1">
          <image v-if="userInfo.face" :src="endpoint + '/' + userInfo.face"></image>
          <image v-else :src="userImage"></image>
        </view>
        <view class="head-2" v-if="userInfo.id">
          <view class="user-name">{{ userInfo.nickName }}</view>
          <!-- <view class="member-name"> 会员名: {{ userInfo.username ? userInfo.username : '未设置' }}</view> -->
        </view>
        <view class="head-2" v-else>
          <view class="user-name">登录/注册</view>
        </view>
        <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
      </view>
      <view class="head-2" v-else>
        <view class="user-name">登录/注册</view>
      </view>
      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
    </view>
   <!-- <button  type="default" @click="goTOSuccess">立即查看</button> -->
   <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'" 
  :style="{ backgroundImage: `url(${base64image.prizeActivityBg})` }" 
  >
    <view class="member-gradient-bg" @click="gotoPrizeActivity" >
      <!-- <view class="activity-content">
    
        <view class="activity-icon">
          <view class="floating-btn-content">
            <text class="floating-btn-icon">🎁</text>

      <!-- 积分，优惠券，关注， -->
      <div class="pointBox1">
        <view class="point">
          <view class="point-col" @click="navigateTo('/pages/cart/coupon/myCoupon')">
            <view class="point-item">
              <text class="label">优惠券</text>
              <text class="value">{{ couponNum || 0 }}</text>
              <text class="label">张</text>
            </view>
          </view>

          <view class="point-col" @click="navigateTo('/pages/mine/deposit/operation')">
            <view class="point-item">
              <text class="label">余额</text>
              <text class="value">{{ walletNum | unitPrice }}</text>
            </view>
          </view>
        </view>
    
        <view class="activity-info">
          <p class="activity-name">{{ prizeActivity.activityName }}</p>
          <p class="activity-desc">{{ prizeActivity.activityDes }}</p>
          <p class="activity-desc">{{ formatDate(prizeActivity.beginTime) }} - {{ formatDate(prizeActivity.endTime)}}</p>
        <!-- 我的订单，代付款 -->
        <view class="order">
          <view class="order-header" @click="navigateTo('/pages/order/myOrder?status=0')">
            <view class="left">我的订单</view>
            <view class="right">
              <text>全部订单</text>
              <u-icon name="arrow-right" size="24" color="#999"></u-icon>
            </view>
          </view>
          <view class="order-content">
            <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
              <view class="icon-box">
                <image src="/static/tool/待付款.png" mode="aspectFit"></image>
              </view>
              <view>待付款</view>
            </view>
            <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=2')">
              <view class="icon-box">
                <image src="/static/tool/待发货.png" mode="aspectFit"></image>
              </view>
              <view>待发货</view>
            </view>
            <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
              <view class="icon-box">
                <image src="/static/tool/待收货.png" mode="aspectFit"></image>
              </view>
              <view>待收货</view>
            </view>
            <view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
              <view class="icon-box">
                <image src="/static/tool/评价中心.png" mode="aspectFit"></image>
              </view>
              <view>待评价</view>
            </view>
            <view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
              <view class="icon-box">
                <image src="/static/tool/我的订单-退货_售后.png" mode="aspectFit"></image>
              </view>
              <view>售后</view>
            </view>
          </view>
        </view>
        <view class="activity-enter">
          <text class="enter-text">立即参与</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view> -->
      </div>
    </view>
   </view>
    <!-- 积分，优惠券，关注， -->
    <div class="pointBox box">
      <u-row text-align="center" gutter="16" class="point">
        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
          <view>余额</view>
          <view class="money">{{ walletNum | unitPrice }}</view>
        </u-col>
    <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'"
      :style="{ backgroundImage: `url(${base64image.prizeActivityBg})` }">
      <view class="member-gradient-bg" @click="gotoPrizeActivity">
      </view>
    </view>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
          <view>优惠券</view>
          <view>{{ couponNum || 0 }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
          <view>足迹</view>
          <view>{{ footNum || 0 }}</view>
        </u-col>
      </u-row>
      <!-- 我的订单，代付款 -->
      <view class="order">
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
          <div class="bag bag2">
            <u-icon name="bag-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待付款</view>
    <!-- 视频相关， -->
    <!-- <div class="pointBox box" style="margin-top: 20rpx;">
      <view class="order-content">
        <view class="order-item" @click="jumpToVideoHome()">
          <view class="icon-box">
            <text class="iconfont">&#xe676;</text>
          </view>
          <view>我的视频</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
          <div class="bag bag3">
            <u-icon name="car-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待收货</view>
        <view class="order-item" @click="navigateTo('/pages/mine/myAttention')">
          <view class="icon-box">
            <image src="/static/mine/myfavorite.png" mode="aspectFit"></image>
          </view>
          <view>我的关注</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
          <div class="bag bag4">
            <u-icon name="star-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待评价</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
          <div class="bag bag5">
            <u-icon name="server-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>售后</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
          <div class="bag bag1">
            <u-icon name="order" size="35" color="#fff"></u-icon>
          </div>
          <view>我的订单</view>
        <view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
          <view class="icon-box">
            <image src="/static/mine/prize-activity.png" mode="aspectFit"></image>
          </view>
          <view>我的活动</view>
        </view>
      </view>
    </div>
	
   <!-- 视频相关， -->
   <div class="pointBox box" style="margin-top: 20rpx;">
     <view class="order">
       <view class="order-item" @click="jumpToVideoHome()">
         <view>
           <text class="iconfont">&#xe676;</text>
         </view>
         <view>我的视频</view>
       </view>
       <view class="order-item" @click="navigateTo('/pages/mine/myAttention')">
         <view>
           <text class="iconfont">&#xe66f;</text>
         </view>
         <view>我的关注</view>
       </view>
<!--        <view class="order-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
         <view>
           <text class="iconfont">&#xe608;</text>
         </view>
         <view>收藏列表</view>
       </view -->
      <view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
        <view>
          <text class="iconfont">&#xe635;</text>
        </view>
        <view>我的活动</view>
      </view>
<!--       <view class="order-item" @click="navigateTo('/pages/mine/myTracks')">
        <view>
          <text class="iconfont">&#xe738;</text>
        </view>
        <view>浏览记录</view>
      </view> -->
     </view>
   </div>
	
    </div> -->

    <!-- 常用工具 -->
   <view class="pointBox box" style="margin-top: 20rpx;">
      <tool />
   </view>
    <view class="pointBox box" style="margin-top: 20rpx;">
      <tool />
    </view>
    <!-- 撑起下方 -->
   <view style="height:64px;">
		
   </view>
  <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
  
    <view style="height:64px;">

    </view>
    <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>

  </view>
</template>
<script>
import '@/pages/subComponents/uview-components/uview-ui';
import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getSTSToken } from "@/api/common.js";
import { getCouponsNum, getFootprintNum,bindMemberAndStore } from "@/api/members.js";
import { getCouponsNum, getFootprintNum, bindMemberAndStore } from "@/api/members.js";
import { getUserWallet } from "@/api/members";
import configs from '@/config/config'
import storage from '@/utils/storage.js'
import { getSessionId, userAction } from "@/api/userAction.js";
import {getONPrizeActivity} from "@/api/prize-activity";
import { getONPrizeActivity } from "@/api/prize-activity";
import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
import base64image from '@/static/mine/base64image.js';
import base64image2 from '@/static/mine/base64image2.js';
@@ -164,12 +145,12 @@
  },
  data() {
    return {
       base64image,
       base64image2,
      base64image,
      base64image2,
      prizeActivity: {},
     endpoint: '',
      endpoint: '',
      configs,
      userImage:configs.defaultUserPhoto,
      userImage: configs.defaultUserPhoto,
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false,
@@ -177,16 +158,16 @@
      couponNum: "",
      footNum: "",
      walletNum: "",
     pageSessionNo:"",
     actionParam:{
         sessionId:'',
         actionType:"PAGE",
         joinType:"SELF",
         pageCode:"TBA_BAR_MY",
         pageParams:"{}",
         pageStatus:"JOIN",
         pageType:"DETAIL"
      }
      pageSessionNo: "",
      actionParam: {
        sessionId: '',
        actionType: "PAGE",
        joinType: "SELF",
        pageCode: "TBA_BAR_MY",
        pageParams: "{}",
        pageStatus: "JOIN",
        pageType: "DETAIL"
      }
    };
  },
  onLoad(option) {
@@ -224,35 +205,35 @@
      }
    }
    this.initCOS()
   },
  },
  onUnload() {
    let   param = Object.assign({}, this.actionParam);
    if (this.sendOnShow)return
    let param = Object.assign({}, this.actionParam);
    if (this.sendOnShow) return
    param.pageStatus = "LEAVE"
    userAction(param)
  },
  onHide() {
    this.startHidenTime = Date.now()
    let   param =Object.assign({}, this.actionParam);
    let param = Object.assign({}, this.actionParam);
    this.sendOnShow = true;
    param.pageStatus = "LEAVE"
    userAction(param)
  },
  // onLoad(options) {
   //
   //   this.initCOS()
  //
  //   this.initCOS()
  // },
  onShow() {
    this.getONPrizeActivity();
     getSessionId().then(res=>{
      this.pageSessionNo = res.data.data
      this.actionParam.sessionId = res.data.data
      if(this.pageSessionNo){
      let   param = Object.assign({}, this.actionParam);
         param.sessionId = this.pageSessionNo
         userAction(param)
      }
     })
    getSessionId().then(res => {
      this.pageSessionNo = res.data.data
      this.actionParam.sessionId = res.data.data
      if (this.pageSessionNo) {
        let param = Object.assign({}, this.actionParam);
        param.sessionId = this.pageSessionNo
        userAction(param)
      }
    })

    this.userInfo = this.$options.filters.isLogin() || {};
    if (this.$options.filters.isLogin("auth")) {
@@ -263,15 +244,15 @@
      this.footNum = 0;
    }

   let shareStoreId = uni.getStorageSync('shareStoreId');
   let shareTime = uni.getStorageSync('shareTime');
   console.log('从缓存读取参数:', { shareStoreId, shareTime });
   if (shareStoreId && shareTime) {
     console.log('检测到有效参数，调用后端接口');
     this.bindMemberAndStore(shareStoreId, shareTime);
   } else {
     console.log('无有效参数，执行正常逻辑');
   }
    let shareStoreId = uni.getStorageSync('shareStoreId');
    let shareTime = uni.getStorageSync('shareTime');
    console.log('从缓存读取参数:', { shareStoreId, shareTime });
    if (shareStoreId && shareTime) {
      console.log('检测到有效参数，调用后端接口');
      this.bindMemberAndStore(shareStoreId, shareTime);
    } else {
      console.log('无有效参数，执行正常逻辑');
    }
  },
  onPullDownRefresh() {
    this.getUserOrderNum();
@@ -297,42 +278,42 @@
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`; // 转换为中文格式
    },
    getONPrizeActivity(){
      getONPrizeActivity().then(res =>{
        if(res.statusCode=== 200){
    getONPrizeActivity() {
      getONPrizeActivity().then(res => {
        if (res.statusCode === 200) {
          //后端没查到开启的抽奖活动 res.data.data.id值为null
          this.prizeActivity = res.data.data; // 存储完整活动数据
          if (this.prizeActivity.endTime) {
          }else {
          } else {
            this.prizeActivity = {}; // 无活动时清空
          }
        }
      })
    },
    gotoPrizeActivity(){
    gotoPrizeActivity() {
      uni.navigateTo({
        url:'/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
        url: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
      });
    },
     // 解析URL参数
     parseUrlParams(url) {
        const params = {};
        // 处理可能存在的hash（如果有的话）
        const cleanUrl = url.split('#')[0];
        const queryStr = cleanUrl.split('?')[1] || '';
    // 解析URL参数
    parseUrlParams(url) {
      const params = {};
      // 处理可能存在的hash（如果有的话）
      const cleanUrl = url.split('#')[0];
      const queryStr = cleanUrl.split('?')[1] || '';

        queryStr.split('&').forEach(pair => {
           const [key, value] = pair.split('=');
           if (key) {
              // 如果值存在，则解码，否则设为空字符串
              params[key] = value ? decodeURIComponent(value) : '';
           }
        });
      queryStr.split('&').forEach(pair => {
        const [key, value] = pair.split('=');
        if (key) {
          // 如果值存在，则解码，否则设为空字符串
          params[key] = value ? decodeURIComponent(value) : '';
        }
      });

        return params;
     },
    async bindMemberAndStore(shareStoreId, shareTime){
      let form ={
      return params;
    },
    async bindMemberAndStore(shareStoreId, shareTime) {
      let form = {
        shareStoreId: shareStoreId,
        shareTime: shareTime
      }
@@ -342,36 +323,36 @@
      // }
      try {
        const res = await bindMemberAndStore(form);
        if(res.statusCode === 200){
        if (res.statusCode === 200) {
          //清除缓存
          uni.removeStorageSync('shareStoreId');
          uni.removeStorageSync('shareTime');
        }
      }
      catch(error) {
      catch (error) {
        console.error('出错:', error);
      };
    },
     // goTOSuccess(){
     //        uni.redirectTo({
     //           url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
     //                    "&payPrice=" +
     //                    10,
     //                });
     // },
     // 初始化腾讯云cos客户端
     initCOS() {
        // 调用后端获取sts临时访问凭证
        getSTSToken().then(res => {
            this.endpoint = res.data.data.endpoint
        })
     },
     // 跳转视频主页
     jumpToVideoHome() {
        uni.navigateTo({
          url: '/pages/video/home-page?authorId=' + storage.getUserInfo().id
        });
     },
    // goTOSuccess(){
    //        uni.redirectTo({
    //           url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
    //                    "&payPrice=" +
    //                    10,
    //                });
    // },
    // 初始化腾讯云cos客户端
    initCOS() {
      // 调用后端获取sts临时访问凭证
      getSTSToken().then(res => {
        this.endpoint = res.data.data.endpoint
      })
    },
    // 跳转视频主页
    jumpToVideoHome() {
      uni.navigateTo({
        url: '/pages/video/home-page?authorId=' + storage.getUserInfo().id
      });
    },
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
@@ -404,48 +385,56 @@
</script>

<style lang="scss" scoped>
   @import url("/pages/subComponents/static/bgStyle.css");
@import url("/pages/subComponents/static/bgStyle.css");

html,
body {
  overflow: auto;
}
  .floating-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
  }
  .floating-btn-icon {
    font-size: 75rpx;
    color: white;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
    margin-bottom: 5rpx;
  }
  .floating-btn-text {
    font-size: 20rpx;
    color: white;
    z-index: 1;
    position: relative;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
    white-space: nowrap;
  }

.floating-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
}

.floating-btn-icon {
  font-size: 75rpx;
  color: white;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  margin-bottom: 5rpx;
}

.floating-btn-text {
  font-size: 20rpx;
  color: white;
  z-index: 1;
  position: relative;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.member-gradient-bg {
   width: 98%;
   height: 250rpx;
   margin: 1% 1%;
    border-radius: 24rpx;
     box-shadow: 0 8rpx 30rpx rgba(255, 82, 82, 0.3);
     transition: all 0.3s ease;
        background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
     &:active {
       transform: scale(0.98);
     }
  width: 98%;
  height: 250rpx;
  margin: 1% 1%;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 30rpx rgba(255, 82, 82, 0.3);
  transition: all 0.3s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  &:active {
    transform: scale(0.98);
  }

  cursor: pointer; // 增加点击指针样式
  overflow: hidden; // 防止内容溢出

  .activity-content {
    width: 100%;
    height: 100%;
@@ -462,6 +451,7 @@
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
@@ -472,16 +462,18 @@
  // 活动信息区域
  .activity-info {
    flex: 1;

    .activity-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
      margin: 0 0 8rpx 0;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    .activity-desc {
      font-size: 22rpx;
      color: rgba(255,255,255,0.9);
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }
  }
@@ -491,27 +483,31 @@
    display: flex;
    align-items: center;
    margin-top: 12rpx;

    .countdown-label {
      font-size: 20rpx;
      color: rgba(255,255,255,0.8);
      color: rgba(255, 255, 255, 0.8);
      margin-right: 8rpx;
    }

    .countdown-box {
      display: flex;
      align-items: center;
    }

    .countdown-item {
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      line-height: 36rpx;
      background: rgba(255,255,255,0.3);
      background: rgba(255, 255, 255, 0.3);
      border-radius: 8rpx;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      margin: 0 4rpx;
    }

    .countdown-sep {
      color: #fff;
      font-size: 22rpx;
@@ -523,6 +519,7 @@
  .activity-enter {
    display: flex;
    align-items: center;

    .enter-text {
      font-size: 24rpx;
      color: #fff;
@@ -541,9 +538,11 @@
  padding: 0 40rpx;
  box-sizing: border-box;
}

/* 会员信息 */
.vip-info {
  flex: 1;

  .vip-level {
    font-size: 40rpx;
    font-weight: bold;
@@ -552,7 +551,7 @@
    line-height: 1;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
  

  .vip-validity {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
@@ -576,6 +575,7 @@
  width: 60rpx;
  height: 60rpx;
}

/* 特权标识 */
.vip-badge {
  padding: 8rpx 20rpx;
@@ -597,34 +597,37 @@
}

.user {
   background: #e7e7e7;
  background: #e7e7e7;

  .header-wrapper {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .header {
    max-width: 100%;
    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
    height: calc(360rpx);
    background-size: cover;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
    color: #ffffff;
    padding: 100rpx 30rpx 0 5%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .head-1 {
      text-align: center;
      width: 152rpx;
      width: 140rpx;
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      image {
        width: 152rpx;
        height: 144rpx;
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        margin-bottom: 30rpx;
        border: 3px solid #fff;
        box-sizing: border-box;
      }

      .edti-head {
@@ -657,30 +660,52 @@
  }

  .point {
    text-align: center;
    height: 160rpx;
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;

    font-size: $font-sm;
    // #ifdef MP-WEIXIN
    padding: 24rpx;
    .point-col {
      flex: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

    // #endif
    .u-col {
      view {
        color: $u-main-color;
        font-size: 28rpx;
      &:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 40rpx;
        width: 1rpx;
        background-color: #ccc;
      }

      view:last-child {
        margin-top: 8rpx;
        color: $main-color;
        font-size: $font-lg;
      .point-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;

        .value {
          color: #1f1b13;
          font-size: 34rpx;
          font-weight: bold;
          margin: 0 20rpx 0 20rpx;
        }

        .label {
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }

  .order {
    height: 140rpx;
  .order-content {
    height: 160rpx;
    text-align: center;
    font-size: $font-sm;
    display: flex;
@@ -688,62 +713,91 @@
    align-items: center;
    padding: 0 3%;
    color: #666;

    .order-item {
      position: relative;
      line-height: 1.5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon-box {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .order {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
    margin: 0 20rpx;
	
    .order-item {
      position: relative;
      line-height: 2em;
      width: 96rpx;
    padding-bottom: 20rpx;

      :first-child {
        font-size: 48rpx;
        margin-bottom: 12rpx;
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 30rpx 10rpx 30rpx;

      .left {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        text {
          margin-right: 4rpx;
        }
      }
    }
  }

}

.pointBox1 {
  position: relative;
  z-index: 10;
  background: #f5f5f5;
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0 -4rpx 24rpx 0 rgba(0, 0, 0, 0.05);
  margin-top: 40rpx;
}

.box {
   width: 95%;
   margin: auto;
   background: #fff;
   border-radius: 20rpx;
   box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
  width: 95%;
  margin: auto;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
}

.user-name {
  font-size: 34rpx;
  font-weight: bolder;
  color: #1f1b13;
}

.bag {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.bag1 {
  background: #ff4a48;
}

.bag2 {
  background: #ff992f;
}

.bag3 {
  background: #009ee0;
}

.bag4 {
  background: #00d5d5;
}

.bag5 {
  background: #28ccb0;
.member-name {
  margin-top: 25rpx;
  font-size: 28rpx;
  color: #8d867a;
}
</style>