app/pages/mine/mydistribution/index.vue

<template>
  <div class="distribution-container">
    <!-- Header section -->
    <div class="distribution-header">
      <div class="total-earnings">
        <div class="total">
          <h2 :style="{ fontSize: '15px' }">总收益(元)</h2>
          <h2 :style="{ fontSize: '15px' }" @click="show = true">
            <u-icon name="question-circle" color="#fff" size="28"></u-icon>
            提现规则
          </h2>
        </div>
        <p class="amount" :style="{ fontSize: '30px' }">1164</p>
      </div>
      <div class="hr"></div>
      <div class="withdrawable" :style="{ padding: '10px 0px' }">
        <div class="itox">可提现金额：<span class="amount">94.26元</span></div>
        <div class="buto" @click="goToDepositPage">提现</div>
      </div>
    </div>

    <!-- Main content card -->
    <div class="distribution-card">
      <!-- Stats grid -->
      <div class="stats-grid">
        <h2>当月数据</h2>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-value">197</div>
            <div class="stat-label">我的邀请</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">100.00</div>
            <div class="stat-label">现金奖励</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">200.00</div>
            <div class="stat-label">待入账</div>
          </div>
        </div>
      </div>
    </div>
     <!-- 新增的菜单列表 -->
     <div class="menu-list">
      <div class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="touni(item.url)">
        <div class="menu-text">{{ item.name }}</div>
        <u-icon name="arrow-right" color="#999" size="16"></u-icon>
      </div>
    </div>
    <!-- Withdrawal Rules Popup -->
    <u-popup
      v-model="show"
      mode="right"
      border-radius="14"
      width="500rpx"
      height="100%"
    >
      <view class="rules-popup">
        <div class="rules-header">
          <h1>提现规则</h1>
        </div>
        <div class="rules-content">
          <ol class="rules-list">
            <li class="rule-item">
              每次可提现10%的现金额度到余额账户，手续费从提现金额里扣除8%。
            </li>
            <li class="rule-item">提现后8～7天内到账</li>
            <li class="rule-item">每个用户同时只能发起1笔提现订单</li>
          </ol>
        </div>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "MyDistribution",
  data() {
    return {
      show: false,
      menuItems: [
        {name:"我的用户",url:'/pages/mine/mydistribution/my/myindex'},
        {name:"消费记录",url:'/pages/mine/mydistribution/my/consumption'},
        {name:"收益明细",url:''},
        {name:"我的邀请码",url:'/pages/mine/invite'},
      ]
    };
  },
  methods: {
    touni(e){
        uni.navigateTo({ url:e });
    },
    goToDepositPage() {
      uni.navigateTo({ url: '/pages/mine/deposit/operation' });
    }
  },
};
</script>

<style lang="scss" scoped>
.menu-list {
  background-color: white;
  border-radius: 8px;
  margin: 15px;
  padding: 0 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-text {
      font-size: 15px;
      color: #333;
    }
    
    .u-icon {
      margin-left: 10px;
    }
  }
}
.hr {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.distribution-container {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  width: 100%;
  color: #333;

  .distribution-header {
    background-color: #ff7d00;
    color: white;
    padding: 25px 20px;

    .total-earnings {
      margin-bottom: 15px;

      .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .withdrawable {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .buto {
        padding: 4px 12px;
        border: 1px solid #fff;
        border-radius: 4px;
        font-size: 14px;
      }

      .itox {
        display: flex;
        align-items: center;

        .amount {
          color: #fff;
          font-weight: bold;
          margin-left: 4px;
        }
      }
    }
  }

  .distribution-card {
    background-color: white;
    border-radius: 8px;
    margin: -25px 15px 20px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;

    h2 {
      font-size: 16px;
      margin: 0 0 15px 0;
      font-weight: 600;
    }

    .stats-grid {
      h2 {
        margin-bottom: 10px;
      }

      .stats-row {
        display: flex;
        justify-content: space-between;

        .stat-item {
          flex: 1;
          text-align: center;

          .stat-value {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
  }

  /* Withdrawal Rules Popup Styles */
  .rules-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ff7d00;
    .rules-header {
      color: white;
      padding: 15px 20px;

      h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .rules-content {
      background-color: #ff7d00;
      flex: 1;
      color: white;
      padding: 20px;
      //   background-color: #fff;
      overflow-y: auto;

      .rules-list {
        padding-left: 20px;
        margin: 0;

        .rule-item {
          margin-bottom: 15px;
          font-size: 14px;
          line-height: 1.5;
        //   color: #333;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>