baodeng_xcx/page_shanghu/device/tixian.vue

<template>
  <view class="tixian-container">
    <u-navbar title="提现" :border-bottom="false" :background="{ background: '#0B0B0B' }" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
	</u-navbar>
    <!-- 账户信息区域 -->
    <view class="account-info">
      <view class="balance-row">
        <view class="balance-item">
          <text class="balance-label">账户余额（元）</text>
          <text class="balance-value">6566.23</text>
        </view>
        <view class="balance-item">
          <text class="balance-label">未结算金额（元）</text>
          <text class="balance-value">66.23</text>
        </view>
      </view>
    </view>

    <!-- 提现金额输入区域 -->
    <view class="withdraw-section">
      <text class="section-title">提现金额</text>
      <view class="amount-input">
        <text class="currency-symbol">¥</text>
        <input type="number" placeholder="请输入提现金额" />
      </view>
      <text class="withdraw-all">全部提现</text>
    </view>

    <!-- 提现到账银行 -->
    <view class="bank-section">
      <text>提现至</text>
      <view class="bank-select">
        <text>建设银行</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 可提现金额提示 -->
    <text class="available-amount">可提现金额：6500元</text>

    <!-- 提现说明 -->
    <view class="withdraw-info">
      <text class="info-title">提现说明：</text>
      <view class="info-item">
        <text>提现金额：90.00元</text>
      </view>
      <view class="info-item">
        <text>实际到账：89.00元</text>
      </view>
      <view class="info-item">
        <text>提现手续费：1.00元</text>
      </view>
    </view>

    <!-- 提现按钮 -->
    <button class="withdraw-btn">立即提现</button>
  </view>
</template>

<script>
export default {
  name: 'Tixian',
  data() {
    return {
      // 数据将在这里定义
    }
  }
}
</script>

<style>
.tixian-container {
  min-height: 100vh;
  background-color: #000;
  padding: 30rpx;
}

.account-info {
  background: linear-gradient(to right, #ffecef, #e6f0ff);
  border-radius: 16rpx;
  padding: 34rpx 36rpx;
  margin-bottom: 30rpx;
  margin-top: 46rpx;
  height: 190rpx;
}

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

.balance-item {
  flex: 1;
}

.balance-label {
  font-size: 28rpx;
  color: rgba(39,39,39,0.6);
  margin-bottom: 10rpx;
  display: block;
  
}

.balance-value {
  font-weight: 600;
  font-size: 50rpx;
  color: #2F2F2F;
  margin-top: 14rpx;
}

.withdraw-section {
  margin-bottom: 56rpx;
  padding: 0 44rpx;
  box-sizing: border-box;
}

.section-title {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.amount-input {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.currency-symbol {
  font-size: 40rpx;
  color: #fff;
  margin-right: 20rpx;
}

.withdraw-all {
  font-size: 26rpx;
  color: #ff4b6b;
  text-align: right;
}

.bank-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #333;
  color: #fff;
}

.bank-select {
  display: flex;
  align-items: center;
}

.arrow {
  margin-left: 10rpx;
  color: #666;
}

.available-amount {
  font-size: 26rpx;
  color: #666;
  margin: 20rpx 0;
  display: block;
}

.withdraw-info {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 30rpx 0;
}

.info-title {
  color: #fff;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.info-item {
  color: #fff;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.withdraw-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(to right, #ff6b8b, #ff4b6b);
  color: #fff;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

input {
  flex: 1;
  font-size: 40rpx;
  color: #fff;
  background: transparent;
  border: none;
}

input::placeholder {
  color: #666;
}
</style>