页面

MrShi

2 天以前 cfeeba575b1a9934bec9e57141a21f17ad96a6ac

 small-program/pages/mine/mine.vue

@@ -1,141 +1,68 @@
<template>
   <view class="index">
      <view class="index-c">
         <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
         <view class="index-c-title" :style="{ height: navHeight + 'px' }">
            <text class="index-c-title-logo">我的</text>
         </view>
         <view class="info">
            <view class="info-box">
               <view class="info-box-head" >
                  <view class="info-box-head-image" @click="jump(isLogin?1:5)">
                     <image v-if="userInfo.fullCoverImage&&userInfo.fullCoverImage !=''" :src="userInfo.fullCoverImage" mode="widthFix"></image>
                     <image v-else src="/static/icon/img@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="info-box-head-info" v-if="isLogin">
                     <view class="info-box-head-info-name"  @click="jump(1)">{{userInfo.nickName||'匿名'}}</view>
                     <view class="info-box-head-info-type" > 
                        <view class="info-box-head-info-type-val1" v-if="userInfo.useIdentity==1">用工接单方</view>
                        <view class="info-box-head-info-type-val" v-else>用工发布方</view>
                        <!-- <view class="info-box-head-info-type-wz" @click="editUseIdentity">切换</view> -->
                     </view> 
                  </view>
                  <view class="info-box-head-info" v-else @click="jump(5)">
                     <view class="info-box-head-info-name">点击登录</view> 
                     <view class="info-box-head-info-type">
                        <view class="info-box-head-info-type-wz">微信授权登录</view>
                     </view>
                  </view>
                  <view class="info-box-head-qiehuan" @click="editUseIdentity">
                     <image src="/static/icon/ic_change@2x.png" mode="widthFix"></image>
                     <text>切换身份</text>
                  </view>
   <view class="mine-page">
      <view class="top-bg"></view>
      <view class="nav-wrap">
         <view :style="{ height: statusbarHeight + 'px' }"></view>
         <view class="nav-bar" :style="{ height: navHeight + 'px' }">
            <view class="nav-spacer"></view>
            <view class="nav-actions">
               <view class="nav-action-item">
                  <u-icon name="more-dot-fill" size="30" color="#222222"></u-icon>
               </view>
               <view class="info-box-label">账户余额</view>
               <view class="info-box-price">
                  <text>￥{{isLogin?((userInfo.amount|| 0)/100).toFixed(2) :0.00}}</text>
                  <view class="info-box-price-btn" @click="jump(isLogin?6:5)">去提现</view>
               <view class="nav-divider"></view>
               <view class="nav-action-item">
                  <u-icon name="scan" size="24" color="#222222"></u-icon>
               </view>
            </view>
         </view>
         <view class="statistics">
            <view class="statistics-box" v-if="!isLogin || userInfo.useIdentity !=1">
               <view class="statistics-item" @click="jumpOrderList('0')" >
                  <text>{{isLogin?(userInfo.userCenterVO.releaseTaskTotal||0):'-'}}</text>
                  <text>总发单数</text>
      </view>

      <view class="page-scroll">
         <view class="page-content">
            <view class="profile-card">
               <image class="avatar" src="/static/image/tx@2x.png" mode="widthFix"></image>
               <view class="profile-copy">
                  <text class="login-text">{{ isLoggedIn ? maskedMobile : '点击登录' }}</text>
                  <text v-if="isLoggedIn" class="user-name">{{ userName }}</text>
               </view>
               <view class="statistics-x"></view>
               <view class="statistics-item" @click="jumpOrderList('1')" >
                  <text class="redtxt">{{isLogin?(userInfo.userCenterVO.waitReceiveTotal||0):'-'}}</text>
                  <text>待接单</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('2')" >
                  <text>{{isLogin?(userInfo.userCenterVO.doingTotal||0):'-'}}</text>
                  <text>进行中</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('3')" >
                  <text>{{isLogin?(userInfo.userCenterVO.waitCommentTotal||0):'-'}}</text>
                  <text>待评价</text>
               </view>
            </view>
            <view class="statistics-box" v-else>
               <view class="statistics-item" @click="jumpOrderList('4')" >
                  <text>{{isLogin?(userInfo.userCenterVO.receiveTotal||0):'-'}}</text>
                  <text>已接单</text>
               </view>
               <view class="statistics-x"></view>
               <view class="statistics-item" @click="jumpOrderList('5')">
                  <text>{{isLogin?(userInfo.userCenterVO.taskingTotal||0):'-'}}</text>
                  <text>进行中</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('6')">
                  <text>{{isLogin?(userInfo.userCenterVO.doneTotal||0):'-'}}</text>
                  <text>已完成</text>
               </view> 
            </view>
         </view>
         <view class="guanggao">
            <view class="guanggao-image">
               <image src="/static/image/share@2x.png" mode="widthFix"></image>
               <button  mode="widthFix"class='sharebtn' open-type="share"></button>
            </view>
         </view>
         <view class="paidan"  v-if="isLogin && userInfo.useIdentity ==1">
            <view class="paidan-box">
               <view class="paidan-label">接受系统自动派单</view>
               <view class="paidan-right">
                  <text>关闭</text>
                  <u-switch activeColor="#00BC12"  @change="updateMemberInfo" v-model="autoReceiveStatus"></u-switch>
               </view>
            </view>
         </view>
         <view class="list">
            <view class="list-hz">
               <view class="list-hz-item"@click="jumpService(1)">
                  <text>服务介绍</text>
                  <u-icon name="arrow-right"   color="#111111" size="18"></u-icon>
               </view>
               <view class="list-hz-item" @click="jumpService(2)">
                  <text>收费标准</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?2:5)">
                  <text>工人赚钱</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.workerIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.workerIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.workerIdentity === 3">认证失败</text>
                     <text v-else>可接用工订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               <view v-if="isLoggedIn" class="profile-tools">
                  <view class="tool-item">
                     <image class="tool-icon" src="/static/icon/ic_option@2x.png" mode="aspectFit"></image>
                  </view>
                  <view class="tool-item has-badge">
                     <image class="tool-icon" src="/static/icon/ic_notice@2x.png" mode="aspectFit"></image>
                     <view class="tool-badge"></view>
                  </view>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?3:5)">
                  <text>司机赚钱</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.driverIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.driverIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.driverIdentity === 3">认证失败</text>
                     <text v-else>可接运货订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
            </view>

            <view class="order-card section-card">
               <view class="section-head">
                  <text class="section-title">我的订单</text>
                  <view class="more-wrap">
                     <text class="more-text">全部订单</text>
                     <u-icon name="arrow-right" size="13" color="#999999"></u-icon>
                  </view>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?4:5)">
                  <text>我能供餐</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.chefIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.chefIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.chefIdentity === 3">认证失败</text>
                     <text v-else>可接用餐订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               <view class="order-grid">
                  <view v-for="item in orderMenus" :key="item.label" class="order-item">
                     <image class="order-icon" :src="item.url" mode="widthFix"></image>
                     <view v-if="item.badge && isLoggedIn" class="order-badge">{{ item.badge }}</view>
                     <text class="order-label">{{ item.label }}</text>
                  </view>
               </view>
               <view class="list-hz-item" @click="jumpService(3)">
                  <text>关于我们</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
            </view>
            <view class="setup-sub" v-if="isLogin" @click="logOffDo">退出登录</view>
            <view class="setup-sub" v-if="!isLogin" @click="jump(5)">去登录</view>

            <view class="banner-card">
               <image class="banner-image" src="/static/image/share@2x.png" mode="widthFix"></image>
            </view>

            <view class="menu-card section-card">
               <view v-for="item in menuList" :key="item.label" class="menu-row">
                  <text class="menu-label">{{ item.label }}</text>
                  <u-icon name="arrow-right" size="18" color="#B5BBC5"></u-icon>
               </view>
            </view>
         </view>
      </view>
   </view>
@@ -143,492 +70,278 @@

<script>
   import { mapState } from 'vuex'

   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid'])
         ...mapState(['navHeight', 'statusbarHeight']),
         maskedMobile() {
            if (!this.isLoggedIn || !this.mobile) {
               return '点击登录'
            }
            return `${this.mobile.slice(0, 3)}****${this.mobile.slice(-4)}`
         }
      },
      data() {
         return {
            changing:false,
            changing1:false,
            autoReceiveStatus: false,
            isLogin:false,
            useIdentity:0,
            qrcode:''
            isLoggedIn: true,
            mobile: '18166669990',
            userName: '蔡子瑄',
            orderMenus: [
               { label: '待支付', url: '/static/icon/mine_ic_daifukuan@2x.png', badge: 12 },
               { label: '待收货', url: '/static/icon/mine_ic_daishouhuo@2x.png', badge: 2 },
               { label: '退款/售后', url: '/static/icon/mine_ic_tuikuan@2x.png' }
            ],
            menuList: [
               { label: '门店入驻' },
               { label: '我的门店' },
               { label: '规范须知' },
               { label: '在线客服' },
               { label: '关于我们' }
            ]
         }
      },
      onShow(options){ 
         this.isLogin=false
         this.autoReceiveStatus=false;
         this.useIdentity =0
			
         if(this.token &&this.token!='' && this.userInfo && JSON.stringify(this.userInfo) != '{}'){
            this.isLogin=true
            this.getUserInfo()
            this.autoReceiveStatus = this.userInfo.autoReceiveStatus === 1 
            this.useIdentity = this.userInfo.useIdentity
         }
      },
      methods: {
         jumpOrderList(flag){
            const app = getApp();
            app.globalData.orderStatus = flag; 
            uni.switchTab({
               url: '/pages/demand-hall/demand-hall'
            })
         }, 
         getUserInfo() {
            var that = this;
            this.$u.api.getMemberInfo({}).then(res =>{ 
               if (res&&res.code ===200) { 
                  that.$store.commit('setUserInfo', res.data)
                  that.$isResolve()
               }else{
                  that.$store.commit('setToken','')
                  that.$store.commit('setUserInfo',{})
                  that.$isResolve()
               }
            })
         },
         jumpService(flag) {
            uni.navigateTo({
               url: '/pages/rich-text-page/rich-text-page?flag='+flag
            })
         },
         jump(type) {
            switch(type) {
               case 1:
                  uni.navigateTo({
                     url: '/packageA/pages/set-up/set-up'
                  })
                  break;
               case 2:
                  if(!this.userInfo.workerIdentity ||this.userInfo.workerIdentity ==0){
                     uni.navigateTo({
                        url:  '/packageA/pages/employment-certification/employment-certification?flag=0'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=0'
                     })
                  }
                  break;
                  break;
               case 3:
                  if(!this.userInfo.driverIdentity ||this.userInfo.driverIdentity ==0){
                     uni.navigateTo({
                        url: '/packageA/pages/employment-certification/employment-certification?flag=1'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=1'
                     })
                  }
                  break;
               case 4:
                  if(!this.userInfo.chefIdentity ||this.userInfo.chefIdentity ==0){
                     uni.navigateTo({
                        url: '/packageA/pages/employment-certification/employment-certification?flag=2'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=2'
                     })
                  }
                  break;
               case 5:
                  uni.navigateTo({
                     url: '/pages/login/login'
                  })
                  break;
               case 6:
                  uni.navigateTo({
                     url: '/packageA/pages/withdrawal/withdrawal'
                  })
                  break;
               case 7:
                  uni.navigateTo({
                     url: '/packageA/pages/certification-results/certification-results'
                  })
                  break;
            }
         },
         logOffDo() {
           var that = this
           this.$u.api.logOff({}).then(res =>{
                //退出登录成功
               that.isLogin =false
                that.$store.commit("empty") 
            })
         } , 
         editUseIdentity() {
           if(this.changing1){
               return
           }
           this.changing1 = true
           var that = this
           var param ={useIdentity:this.userInfo.useIdentity==1?0:1}
           that.$u.api.editUseIdentity(param)
           .then(res =>{
                console.log(222,res)
               if(res.code ===200){
                  that.userInfo.useIdentity = param.useIdentity
                  that.$store.commit('setUserInfo', that.userInfo)
                  uni.$emit('refresh')
               } 
            }).finally(() => {
               that.changing1 = false
            })
         } ,
         saoyisao(){
            var that =this
            // 允许从相机和相册扫码
            wx.scanCode({
              // scanType:['barCode'],
              success (res) {
               that.qrcode =res.result
                console.log(res)
              },
              fail(e){
                 console.error(e)
              }
            })
         },
         updateMemberInfo(e) {
            if(this.changing){
               return
            }
           this.changing = true
           var that = this 
           var param ={ autoReceiveStatus:that.autoReceiveStatus?1:0}
           this.$u.api.editMemberInfo(param).then(res =>{
              if(res.code ===200){
                that.userInfo.autoReceiveStatus = param.autoReceiveStatus
               }
            }).finally(() => {
                   that.changing = false
               })
         } 
      }
   }
</script>

<style>
   page {
      background: #F7F7F7;
   }
</style>

<style lang="scss" scoped>
   .index {
      width: 100%;
      .index-c {
         width: 100%;
         height: 520rpx;
         background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
         .list {
            width: 100%;
            padding: 0 30rpx;
            padding-bottom: 30px;
            box-sizing: border-box;
            .list-hz {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               background: #FFFFFF;
               border-radius: 20rpx;
               overflow: hidden;
               .list-hz-item {
                  width: 100%;
                  height: 102rpx;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #E5E5E5;
                  .list-hz-item-r {
                     display: flex;
                     align-items: center;
                     text {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #00BC12;
                        margin-right: 20rpx;
                     }
                  }
               }
            }
         }
         .paidan {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .paidan-box {
               width: 100%;
               height: 100rpx;
               background: #FFFFFF;
               border-radius: 20rpx;
               padding: 0 30rpx;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .paidan-label {
                  font-weight: 400;
                  font-size: 30rpx;
                  color: #222222;
               }
               .paidan-right {
                  display: flex;
                  align-items: center;
                  text {
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #888888;
                     margin-right: 20rpx;
                  }
               }
            }
         }
         .guanggao {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .guanggao-image {
               width: 100%;
               height: 140rpx;
               image {
                  width: 100%;
                  height: 100%;
                  z-index: 999;
               }
               .sharebtn{
                  position: relative;
                  top: -150rpx;
                  left: 0;
                  outline:none;
                  padding:0px;
                  cursor: pointer;
                  border: none; 
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 1000;
               }
            }
         }
         .statistics {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .statistics-box {
               width: 100%;
               height: 168rpx;
               background: #FFFFFF;
               border-radius: 20rpx;
               display: flex;
               align-items: center;
               .statistics-x {
                  width: 1rpx;
                  height: 100rpx;
                  border-right: 1rpx dashed #E5E5E5;
               }
               .statistics-item {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #888888;
                        margin-top: 18rpx;
                     }
                  }
               }
            }
         }
         .info {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            .info-box {
               width: 100%;
               height: 336rpx;
               padding: 40rpx;
               box-sizing: border-box;
               background: #FFFFFF;
               border-radius: 20rpx;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               .info-box-price {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     font-weight: 600;
                     font-size: 48rpx;
                     color: #222222;
                  }
                  .info-box-price-btn {
                     width: 148rpx;
                     height: 60rpx;
                     line-height: 60rpx;
                     text-align: center;
                     background: #00BC12;
                     border-radius: 30rpx;
                     font-weight: 500;
                     font-size: 28rpx;
                     color: #FFFFFF;
                  }
               }
               .info-box-label {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #888888;
                  margin-bottom: 16rpx;
               }
               .info-box-head {
                  width: 100%;
                  height: 108rpx;
                  display: flex;
                  margin-bottom: 30rpx;
                  .info-box-head-image {
                     width: 108rpx;
                     height: 100%;
                     flex-shrink: 0;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     margin-right: 24rpx;
                     image {
                        width: 100%;
                     }
                  }
                  .info-box-head-qiehuan {
                     flex-shrink: 0;
                     display: flex;
                     image {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 10rpx;
                     }
                     text {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #00BC12;
                     }
                  }
                  .info-box-head-info {
                     flex: 1;
                     height: 100%;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
                     .info-box-head-info-name {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #222222;
                     }
                     .info-box-head-info-type {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        .info-box-head-info-type-val {
                           width: 144rpx;
                           height: 42rpx;
                           line-height: 42rpx;
                           text-align: center;
                           background: rgba(253,158,36,0.06);
                           border-radius: 8rpx;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #FF7200;
                           border: 2rpx solid #FD9E24;
                           margin-right: 20rpx;
                        }
                        .info-box-head-info-type-val1 {
                           width: 144rpx;
                           height: 42rpx;
                           line-height: 42rpx;
                           text-align: center;
                           background: rgba(91,190,56,0.06);
                           border-radius: 8rpx;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #00BC12;
                           border: 2rpx solid #00BC12;
                           margin-right: 20rpx;
                        }
                        .info-box-head-info-type-wz {
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #999999;
                        }
                     }
                  }
               }
            }
				
         }
         .index-c-title {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .index-c-title-logo {
               font-weight: bold;
               font-size: 36rpx;
               color: #FFFFFF;
            }
            .dingwei {
               width: 36rpx;
               height: 36rpx;
               margin-right: 8rpx;
            }
            .qu {
               width: 22rpx;
               height: 22rpx;
            }
         }
      }
   .mine-page {
      position: relative;
      min-height: 100vh;
      background: #f6f8fb;
   }
   .setup-sub {

   .top-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16);
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #5BBE38;
      margin-top: 80rpx;
      border: 1rpx solid #15CF52;
      bottom: 50px;
      height: 450rpx;
      background: linear-gradient(180deg, #B9E9FF 0%, #ffffff 100%);
      z-index: 0;
   }
   .bluetxt{
      color:blue !important ;
   } 
   .redtxt{
      color:#FF0000 !important ;
   }   
   .orangetxt{
      color: #FF7200 !important ;

   .nav-wrap,
   .page-scroll {
      position: relative;
      z-index: 1;
   }

   .nav-bar {
      padding: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
   }

   .nav-spacer {
      width: 52rpx;
      height: 52rpx;
   }

   .nav-actions {
      min-width: 112rpx;
      height: 52rpx;
      padding: 0 10rpx;
      background: rgba(255, 255, 255, 0.86);
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
   }

   .nav-action-item {
      width: 38rpx;
      height: 38rpx;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .nav-divider {
      width: 1rpx;
      height: 24rpx;
      background: #e5e7eb;
   }

   .page-content {
      padding: 30rpx;
      box-sizing: border-box;
   }

   .profile-card {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
   }

   .avatar {
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 24rpx;
   }

   .login-text {
      font-weight: 600;
      font-size: 36rpx;
      color: #111111;
   }

   .profile-copy {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .user-name {
      margin-top: 12rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #7d8792;
   }

   .profile-tools {
      display: flex;
      align-items: center;
      gap: 20rpx;
   }

   .tool-item {
      position: relative;
      width: 40rpx;
      height: 40rpx;
   }

   .tool-icon {
      width: 100%;
      height: 100%;
   }

   .tool-badge {
      position: absolute;
      right: -4rpx;
      top: -4rpx;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background: #ff3b30;
   }

   .section-card {
      background: #ffffff;
      border-radius: 18rpx;
   }

   .order-card {
      padding: 30rpx;
      box-sizing: border-box;
   }

   .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
   }

   .section-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #222222;
   }

   .more-wrap {
      display: flex;
      align-items: center;
      gap: 4rpx;
   }

   .more-text {
      font-size: 24rpx;
      color: #b5bbc5;
   }

   .order-grid {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 8rpx 14rpx 0;
   }

   .order-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .order-badge {
      position: absolute;
      top: -6rpx;
      right: -15rpx;
      min-width: 28rpx;
      height: 28rpx;
      padding: 0 6rpx;
      border-radius: 14rpx;
      background: #ff2d55;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18rpx;
      line-height: 1;
      color: #ffffff;
      box-sizing: border-box;
   }

   .order-icon {
      width: 60rpx;
      height: 60rpx;
   }

   .order-label {
      margin-top: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
   }

   .banner-card {
      position: relative;
      margin-top: 30rpx;
      width: 100%;
      overflow: hidden;
   }

   .banner-image {
      width: 100%;
   }

   .menu-card {
      margin-top: 30rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
   }

   .menu-row {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #E5E5E5;
   }

   .menu-row:last-child {
      border-bottom: none;
   }

   .menu-label {
      font-weight: 400;
      font-size: 30rpx;
      color: #222222;
   }
</style>