From 90a57bcfdb775ea77ce22d41e678c917c65bfe3b Mon Sep 17 00:00:00 2001
From: jiang <2500238435@qq.com>
Date: Thu, 9 Jan 2025 15:48:41 +0800
Subject: [PATCH] style

---
 pages.json                                    |  28 +-
 pages/device/detail.vue                       | 465 ++++++++++++++++++
 pages/device/return.vue                       | 330 +++++++++++++
 pages/index/index.vue                         | 291 ++++++-----
 pages/my/index.vue                            | 304 ++++++++----
 pages/rent/index.vue                          |  50 --
 pages/return/index.vue                        |  50 --
 .../dist/cache/.vite/deps/_metadata.json      |  10 +-
 8 files changed, 1187 insertions(+), 341 deletions(-)
 create mode 100644 pages/device/detail.vue
 create mode 100644 pages/device/return.vue
 delete mode 100644 pages/rent/index.vue
 delete mode 100644 pages/return/index.vue

diff --git a/pages.json b/pages.json
index a73fed0..e4af7ae 100644
--- a/pages.json
+++ b/pages.json
@@ -12,18 +12,6 @@
 				"navigationBarTitleText": "个人中心"
 			}
 		},
-		{
-			"path": "pages/rent/index",
-			"style": {
-				"navigationBarTitleText": "扫码租借"
-			}
-		},
-		{
-			"path": "pages/return/index",
-			"style": {
-				"navigationBarTitleText": "扫码归还"
-			}
-		},
 		{
 			"path": "pages/deposit/index",
 			"style": {
@@ -47,6 +35,22 @@
 			"style": {
 				"navigationBarTitleText": "帮助中心"
 			}
+		},
+		{
+			"path": "pages/device/detail",
+			"style": {
+				"navigationBarTitleText": "设备详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		{
+			"path": "pages/device/return",
+			"style": {
+				"navigationBarTitleText": "归还设备",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/device/detail.vue b/pages/device/detail.vue
new file mode 100644
index 0000000..ea8279a
--- /dev/null
+++ b/pages/device/detail.vue
@@ -0,0 +1,465 @@
+<template>
+  <view class="detail-container">
+    <!-- 设备状态卡片 -->
+    <view class="device-card">
+      <view class="device-header">
+        <view class="device-title">
+          <text class="name">共享风扇</text>
+          <text class="id">设备号：{{ deviceId }}</text>
+        </view>
+        <view class="status" :class="deviceStatus.class">{{ deviceStatus.text }}</view>
+      </view>
+      <view class="device-info">
+        <view class="info-item">
+          <text class="label">设备位置</text>
+          <text class="value">{{ deviceLocation }}</text>
+        </view>
+        <view class="info-item">
+          <text class="label">电池电量</text>
+          <text class="value">{{ batteryLevel }}%</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 套餐选择 -->
+    <view class="package-section" v-if="!hasActiveOrder">
+      <view class="section-title">选择套餐</view>
+      <view class="package-list">
+        <view 
+          v-for="(pkg, index) in packages" 
+          :key="index"
+          class="package-item"
+          :class="{ active: selectedPackage === index }"
+          @click="selectPackage(index)"
+        >
+          <view class="package-content">
+            <text class="time">{{ pkg.time }}</text>
+            <text class="price">￥{{ pkg.price }}</text>
+          </view>
+          <text class="unit-price">约{{ pkg.unitPrice }}元/小时</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 使用说明 -->
+    <view class="notice-section">
+      <view class="section-title">使用说明</view>
+      <view class="notice-list">
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>请在使用前检查设备是否完好</text>
+        </view>
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>超出使用时间将自动按小时计费</text>
+        </view>
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>请在指定区域内使用设备</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar">
+      <view class="price-info" v-if="!hasActiveOrder">
+        <text class="deposit-text">押金：</text>
+        <text class="deposit-amount">￥99</text>
+      </view>
+      <button 
+        class="action-btn" 
+        :class="hasActiveOrder ? 'return' : 'rent'"
+        @click="handleAction"
+      >
+        {{ hasActiveOrder ? '归还设备' : '立即租借' }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceId: '',
+      deviceLocation: '一号教学楼大厅',
+      batteryLevel: 95,
+      hasActiveOrder: false,
+      deviceStatus: {
+        text: '可使用',
+        class: 'available'
+      },
+      selectedPackage: 0,
+      packages: [
+        { time: '1小时', price: '2.00', unitPrice: '2.00' },
+        { time: '4小时', price: '6.00', unitPrice: '1.50' },
+        { time: '12小时', price: '15.00', unitPrice: '1.25' }
+      ],
+      isLoggedIn: false
+    }
+  },
+  onLoad(options) {
+    this.deviceId = options.deviceId
+    this.checkLoginAndOrder()
+  },
+  methods: {
+    // 检查登录状态和订单
+    async checkLoginAndOrder() {
+      try {
+        // 检查登录状态
+        const token = uni.getStorageSync('token')
+        if (!token) {
+          this.isLoggedIn = false
+          this.showLoginTip()
+          return
+        }
+
+        this.isLoggedIn = true
+        // 检查是否有进行中的订单
+        await this.checkOrderStatus()
+      } catch (error) {
+        uni.showToast({
+          title: '网络错误，请重试',
+          icon: 'none'
+        })
+      }
+    },
+
+    // 显示登录提示
+    showLoginTip() {
+      uni.showModal({
+        title: '提示',
+        content: '请先登录后再操作',
+        confirmText: '去登录',
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: '/pages/login/index'
+            })
+          }
+        }
+      })
+    },
+
+    // 检查订单状态
+    async checkOrderStatus() {
+      try {
+        // 调用接口检查是否有进行中的订单
+        const result = await this.$api.checkActiveOrder()
+        
+        if (result.hasOrder) {
+          // 如果有正在进行的订单，跳转到归还页面，带上设备ID
+          uni.redirectTo({
+            url: `/pages/device/return?deviceId=${this.deviceId}`
+          })
+        }
+      } catch (error) {
+        uni.showToast({
+          title: '订单状态查询失败',
+          icon: 'none'
+        })
+      }
+    },
+
+    // 处理租借操作
+    handleRent() {
+      if (!this.isLoggedIn) {
+        this.showLoginTip()
+        return
+      }
+
+      const selectedPkg = this.packages[this.selectedPackage]
+      uni.showModal({
+        title: '确认租借',
+        content: `确认支付押金￥99.00及${selectedPkg.time}套餐费用￥${selectedPkg.price}？`,
+        success: (res) => {
+          if (res.confirm) {
+            this.submitRentOrder()
+          }
+        }
+      })
+    },
+
+    // 提交租借订单
+    async submitRentOrder() {
+      try {
+        uni.showLoading({
+          title: '处理中'
+        })
+        
+        const selectedPkg = this.packages[this.selectedPackage]
+        // TODO: 调用租借接口
+        const result = await this.$api.createOrder({
+          deviceId: this.deviceId,
+          packageId: this.selectedPackage,
+          duration: selectedPkg.time,
+          amount: selectedPkg.price
+        })
+
+        uni.hideLoading()
+        
+        if (result.success) {
+          uni.showToast({
+            title: '租借成功',
+            icon: 'success'
+          })
+          // 跳转到使用中页面
+          setTimeout(() => {
+            uni.redirectTo({
+              url: `/pages/return/index?deviceId=${this.deviceId}&orderId=${result.orderId}`
+            })
+          }, 1500)
+        }
+      } catch (error) {
+        uni.hideLoading()
+        uni.showToast({
+          title: '租借失败，请重试',
+          icon: 'none'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-container {
+  min-height: 100vh;
+  background: #f8f8f8;
+  padding: 30rpx;
+  padding-bottom: 180rpx;
+  box-sizing: border-box;
+
+  .device-card {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .device-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30rpx;
+
+      .device-title {
+        .name {
+          font-size: 36rpx;
+          font-weight: 600;
+          color: #333;
+          margin-right: 20rpx;
+        }
+
+        .id {
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+
+      .status {
+        padding: 8rpx 24rpx;
+        border-radius: 24rpx;
+        font-size: 24rpx;
+        
+        &.available {
+          background: #E8F5E9;
+          color: #4CAF50;
+        }
+        
+        &.in-use {
+          background: #E3F2FD;
+          color: #1976D2;
+        }
+      }
+    }
+
+    .device-info {
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .label {
+          font-size: 28rpx;
+          color: #666;
+        }
+
+        .value {
+          font-size: 28rpx;
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .package-section {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 24rpx;
+    }
+
+    .package-list {
+      display: flex;
+      justify-content: space-between;
+
+      .package-item {
+        flex: 1;
+        margin: 0 10rpx;
+        padding: 24rpx;
+        background: #F5F5F5;
+        border-radius: 16rpx;
+        text-align: center;
+        transition: all 0.3s;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.active {
+          background: #E3F2FD;
+          border: 2rpx solid #1976D2;
+
+          .package-content {
+            .time, .price {
+              color: #1976D2;
+            }
+          }
+        }
+
+        .package-content {
+          margin-bottom: 8rpx;
+
+          .time {
+            font-size: 28rpx;
+            color: #333;
+            margin-bottom: 8rpx;
+            display: block;
+          }
+
+          .price {
+            font-size: 36rpx;
+            font-weight: 600;
+            color: #333;
+          }
+        }
+
+        .unit-price {
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+    }
+  }
+
+  .notice-section {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 24rpx;
+    }
+
+    .notice-list {
+      .notice-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .dot {
+          width: 12rpx;
+          height: 12rpx;
+          background: #1976D2;
+          border-radius: 50%;
+          margin-right: 16rpx;
+        }
+
+        text {
+          font-size: 28rpx;
+          color: #666;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+
+  .bottom-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding: 20rpx 30rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);
+
+    .price-info {
+      .deposit-text {
+        font-size: 28rpx;
+        color: #666;
+      }
+
+      .deposit-amount {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #FF9800;
+      }
+    }
+
+    .action-btn {
+      flex: 1;
+      margin-left: 30rpx;
+      height: 88rpx;
+      border-radius: 44rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+
+      &.rent {
+        background: linear-gradient(135deg, #1976D2, #42A5F5);
+        color: #fff;
+      }
+
+      &.return {
+        background: linear-gradient(135deg, #FF9800, #FFB74D);
+        color: #fff;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages/device/return.vue b/pages/device/return.vue
new file mode 100644
index 0000000..b0963df
--- /dev/null
+++ b/pages/device/return.vue
@@ -0,0 +1,330 @@
+<template>
+  <view class="return-container">
+    <!-- 订单信息卡片 -->
+    <view class="order-card">
+      <view class="order-header">
+        <text class="title">使用中</text>
+        <text class="order-no">订单号：{{ orderInfo.orderId }}</text>
+      </view>
+      
+      <view class="device-info">
+        <text class="device-name">共享风扇</text>
+        <text class="device-id">设备号：{{ deviceId }}</text>
+      </view>
+
+      <view class="time-info">
+        <view class="time-item">
+          <text class="label">开始时间</text>
+          <text class="value">{{ orderInfo.startTime }}</text>
+        </view>
+        <view class="time-item">
+          <text class="label">已使用时长</text>
+          <text class="value highlight">{{ orderInfo.usedTime }}</text>
+        </view>
+        <view class="time-item">
+          <text class="label">当前费用</text>
+          <text class="value">￥{{ orderInfo.currentFee }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 归还说明 -->
+    <view class="notice-card">
+      <view class="notice-title">归还说明</view>
+      <view class="notice-list">
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>请确保设备完好无损</text>
+        </view>
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>请在指定区域内归还设备</text>
+        </view>
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>归还后押金将自动退还</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar">
+      <button class="unlock-btn" @click="handleUnlock" :disabled="unlocking">
+        {{ unlocking ? '开锁中...' : '开锁归还' }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceId: '',
+      orderInfo: {
+        orderId: '',
+        startTime: '',
+        usedTime: '',
+        currentFee: '0.00'
+      },
+      unlocking: false,
+      timer: null
+    }
+  },
+  onLoad(options) {
+    this.deviceId = options.deviceId
+    this.getActiveOrder()
+  },
+  onUnload() {
+    this.clearTimer()
+  },
+  methods: {
+    // 获取进行中的订单信息
+    async getActiveOrder() {
+      try {
+        uni.showLoading({ title: '加载中' })
+        const result = await this.$api.getActiveOrder()
+        
+        if (result.success) {
+          this.orderInfo = {
+            orderId: result.data.orderId,
+            startTime: result.data.startTime,
+            usedTime: result.data.usedTime,
+            currentFee: result.data.currentFee
+          }
+          this.startTimer()
+        } else {
+          uni.showToast({
+            title: '没有进行中的订单',
+            icon: 'none'
+          })
+          // 如果没有进行中的订单，返回首页
+          setTimeout(() => {
+            uni.reLaunch({
+              url: '/pages/index/index'
+            })
+          }, 1500)
+        }
+      } catch (error) {
+        uni.showToast({
+          title: '获取订单信息失败',
+          icon: 'none'
+        })
+      } finally {
+        uni.hideLoading()
+      }
+    },
+    
+    // 处理开锁请求
+    async handleUnlock() {
+      if (this.unlocking) return
+      
+      try {
+        this.unlocking = true
+        uni.showLoading({ title: '开锁中' })
+        
+        // 发送开锁请求
+        const result = await this.$api.unlockDevice({
+          deviceId: this.deviceId,
+          orderId: this.orderInfo.orderId
+        })
+        
+        if (result.success) {
+          uni.showToast({
+            title: '开锁成功',
+            icon: 'success'
+          })
+          // 开锁成功后，可以添加其他逻辑，比如显示归还确认按钮等
+        } else {
+          throw new Error(result.message || '开锁失败')
+        }
+      } catch (error) {
+        uni.showToast({
+          title: error.message || '开锁失败，请重试',
+          icon: 'none'
+        })
+      } finally {
+        this.unlocking = false
+        uni.hideLoading()
+      }
+    },
+    
+    // 更新使用时长
+    startTimer() {
+      this.timer = setInterval(async () => {
+        try {
+          const result = await this.$api.getOrderStatus(this.orderInfo.orderId)
+          if (result.success) {
+            this.orderInfo.usedTime = result.data.usedTime
+            this.orderInfo.currentFee = result.data.currentFee
+          }
+        } catch (error) {
+          console.error('更新订单状态失败:', error)
+        }
+      }, 60000) // 每分钟更新一次
+    },
+    
+    clearTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.return-container {
+  min-height: 100vh;
+  background: #f8f8f8;
+  padding: 30rpx;
+  padding-bottom: 180rpx;
+  box-sizing: border-box;
+
+  .order-card {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .order-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30rpx;
+
+      .title {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #1976D2;
+      }
+
+      .order-no {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+
+    .device-info {
+      margin-bottom: 30rpx;
+
+      .device-name {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #333;
+        margin-right: 20rpx;
+      }
+
+      .device-id {
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+
+    .time-info {
+      .time-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .label {
+          font-size: 28rpx;
+          color: #666;
+        }
+
+        .value {
+          font-size: 28rpx;
+          color: #333;
+
+          &.highlight {
+            color: #1976D2;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+
+  .notice-card {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .notice-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 24rpx;
+    }
+
+    .notice-list {
+      .notice-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .dot {
+          width: 12rpx;
+          height: 12rpx;
+          background: #1976D2;
+          border-radius: 50%;
+          margin-right: 16rpx;
+        }
+
+        text {
+          font-size: 28rpx;
+          color: #666;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+
+  .bottom-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding: 20rpx 30rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    display: flex;
+    justify-content: center;
+    box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);
+
+    .unlock-btn {
+      width: 80%;
+      height: 88rpx;
+      background: linear-gradient(135deg, #1976D2, #42A5F5);
+      border-radius: 44rpx;
+      color: #fff;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+
+      &:active {
+        transform: scale(0.98);
+      }
+
+      &[disabled] {
+        background: #ccc;
+        transform: none;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c1be1dd..568c549 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -5,31 +5,26 @@
 			<view class="temp-banner">
 				<text class="banner-text">共享风扇</text>
 				<text class="banner-subtitle">让清凉随身携带</text>
+				<view class="banner-bg"></view>
 			</view>
 		</view>
 		
-		<!-- 功能按钮区域 -->
-		<view class="function-area">
-			<view class="function-btn rent" @click="goToRent">
-			    <view class="btn-content">
-			        <image class="btn-icon" src="../../static/scan-icon.png" mode="aspectFit" />
-			        <text class="btn-text">扫码租借</text>
-			    </view>
-			    <text class="btn-desc">快速租借风扇</text>
-			</view>
-			
-			<view class="function-btn return" @click="goToReturn">
-			    <view class="btn-content">
-			        <image class="btn-icon" src="../../static/scan-icon.png" mode="aspectFit" />
-			        <text class="btn-text">扫码归还</text>
-			    </view>
-			    <text class="btn-desc">轻松完成归还</text>
+		<!-- 扫码按钮区域 -->
+		<view class="scan-area">
+			<view class="scan-btn" @click="handleScan">
+				<view class="btn-content">
+					<image class="btn-icon" src="../../static/scan-icon.png" mode="aspectFit" />
+					<text class="btn-text">扫一扫</text>
+				</view>
+				<text class="btn-desc">扫描设备二维码使用或归还</text>
 			</view>
 		</view>
 
 		<!-- 使用提示区域 -->
 		<view class="tips-section">
-			<view class="tips-title">使用小贴士</view>
+			<view class="tips-header">
+				<view class="tips-title">使用小贴士</view>
+			</view>
 			<view class="tips-list">
 				<view class="tip-item">
 					<view class="tip-dot"></view>
@@ -55,14 +50,19 @@
 <script>
 	export default {
 		methods: {
-			goToRent() {
-				uni.navigateTo({
-					url: '/pages/rent/index'
-				})
-			},
-			goToReturn() {
-				uni.navigateTo({
-					url: '/pages/return/index'
+			handleScan() {
+				uni.scanCode({
+					success: (res) => {
+						uni.navigateTo({
+							url: `/pages/device/detail?deviceId=${res.result}`
+						})
+					},
+					fail: (err) => {
+						uni.showToast({
+							title: '扫码失败',
+							icon: 'none'
+						})
+					}
 				})
 			}
 		}
@@ -76,117 +76,167 @@
 		padding-bottom: 40rpx;
 		
 		.banner {
-			padding: 20rpx;
+			padding: 30rpx;
 			
 			.temp-banner {
-			    height: 320rpx;
-			    background: linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(100, 181, 246, 0.8));
-			    border-radius: 24rpx;
-			    display: flex;
-			    flex-direction: column;
-			    justify-content: center;
-			    align-items: center;
-			    color: #fff;
-			    box-shadow: 0 4rpx 20rpx rgba(25, 118, 210, 0.2);
-			
-			    .banner-text {
-			        font-size: 48rpx;
-			        font-weight: bold;
-			        margin-bottom: 16rpx;
-			    }
-			
-			    .banner-subtitle {
-			        font-size: 28rpx;
-			        opacity: 0.9;
-			    }
+				height: 300rpx;
+				background: linear-gradient(135deg, #1976D2, #42A5F5);
+				border-radius: 30rpx;
+				position: relative;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				color: #fff;
+				box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.2);
+
+				.banner-text {
+					font-size: 56rpx;
+					font-weight: bold;
+					margin-bottom: 20rpx;
+					position: relative;
+					z-index: 1;
+					text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+				}
+
+				.banner-subtitle {
+					font-size: 32rpx;
+					opacity: 0.95;
+					position: relative;
+					z-index: 1;
+					text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+				}
+
+				.banner-bg {
+					position: absolute;
+					right: -60rpx;
+					bottom: -60rpx;
+					width: 300rpx;
+					height: 300rpx;
+					background: rgba(255,255,255,0.1);
+					border-radius: 50%;
+					transform: rotate(-15deg);
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					left: -80rpx;
+					top: -80rpx;
+					width: 240rpx;
+					height: 240rpx;
+					background: rgba(255,255,255,0.08);
+					border-radius: 50%;
+				}
 			}
 		}
 		
-		.function-area {
-			padding: 30rpx;
+		.scan-area {
+			padding: 20rpx 30rpx 40rpx;
 			display: flex;
-			justify-content: space-between;
+			justify-content: center;
 			
-			.function-btn {
-			    width: 320rpx;
-			    height: 180rpx;
-			    display: flex;
-			    flex-direction: column;
-			    align-items: center;
-			    justify-content: center;
-			    background: #fff;
-			    border-radius: 20rpx;
-			    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
-			    transition: all 0.3s;
-			
-			    &:active {
-			        transform: scale(0.98);
-			    }
-			
-			    .btn-content {
-			        display: flex;
-			        align-items: center;
-			        justify-content: center;
-			        margin-bottom: 8rpx;
-			
-			        .btn-icon {
-			            width: 36rpx;
-			            height: 36rpx;
-			            margin-right: 8rpx;
-			        }
-			
-			        .btn-text {
-			            font-size: 36rpx;
-			            font-weight: 500;
-			        }
-			    }
-			
-			    .btn-desc {
-			        font-size: 24rpx;
-			        color: #666;
-			    }
-			
-			    &.rent {
-			        background: linear-gradient(135deg, #4CAF50, #81C784);
-			
-			        .btn-text,
-			        .btn-desc {
-			            color: #fff;
-			        }
-			    }
-			
-			    &.return {
-			        background: linear-gradient(135deg, #FF9800, #FFB74D);
-			
-			        .btn-text,
-			        .btn-desc {
-			            color: #fff;
-			        }
-			    }
+			.scan-btn {
+				width: 460rpx;
+				height: 200rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				background: linear-gradient(135deg, #00C853, #69F0AE);
+				border-radius: 30rpx;
+				box-shadow: 0 8rpx 32rpx rgba(0, 200, 83, 0.2);
+				transition: all 0.3s ease;
+				position: relative;
+				overflow: hidden;
+
+				&:active {
+					transform: scale(0.98);
+					box-shadow: 0 4rpx 16rpx rgba(0, 200, 83, 0.15);
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: linear-gradient(rgba(255,255,255,0.1), transparent);
+				}
+
+				.btn-content {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 12rpx;
+					position: relative;
+					z-index: 1;
+
+					.btn-icon {
+						width: 48rpx;
+						height: 48rpx;
+						margin-right: 16rpx;
+					}
+
+					.btn-text {
+						font-size: 42rpx;
+						font-weight: 600;
+						color: #fff;
+						text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+					}
+				}
+
+				.btn-desc {
+					font-size: 26rpx;
+					color: rgba(255, 255, 255, 0.95);
+					position: relative;
+					z-index: 1;
+				}
 			}
 		}
 
 		.tips-section {
-			margin: 30rpx;
-			padding: 30rpx;
+			margin: 0 30rpx;
 			background: #fff;
-			border-radius: 20rpx;
-			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+			border-radius: 24rpx;
+			box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.05);
+			overflow: hidden;
 
-			.tips-title {
-				font-size: 32rpx;
-				font-weight: 500;
-				margin-bottom: 24rpx;
-				color: #333;
-				padding-left: 20rpx;
-				border-left: 8rpx solid #1976D2;
+			.tips-header {
+				padding: 30rpx;
+				background: linear-gradient(to right, #F5F9FF, #fff);
+				border-bottom: 2rpx solid #f0f0f0;
+
+				.tips-title {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: #333;
+					position: relative;
+					padding-left: 24rpx;
+
+					&::before {
+						content: '';
+						position: absolute;
+						left: 0;
+						top: 50%;
+						transform: translateY(-50%);
+						width: 8rpx;
+						height: 32rpx;
+						background: #1976D2;
+						border-radius: 4rpx;
+					}
+				}
 			}
 
 			.tips-list {
+				padding: 20rpx 30rpx;
+
 				.tip-item {
 					display: flex;
 					align-items: center;
-					margin-bottom: 20rpx;
+					margin-bottom: 24rpx;
 					padding: 0 10rpx;
 
 					&:last-child {
@@ -196,16 +246,17 @@
 					.tip-dot {
 						width: 12rpx;
 						height: 12rpx;
-						border-radius: 50%;
 						background: #1976D2;
+						border-radius: 50%;
 						margin-right: 16rpx;
 						flex-shrink: 0;
+						box-shadow: 0 2rpx 6rpx rgba(25,118,210,0.2);
 					}
 
 					text {
-						font-size: 26rpx;
+						font-size: 28rpx;
 						color: #666;
-						line-height: 1.5;
+						line-height: 1.6;
 					}
 				}
 			}
diff --git a/pages/my/index.vue b/pages/my/index.vue
index ef7803c..74a6097 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -2,22 +2,30 @@
   <view class="my-container">
     <!-- 用户信息区域 -->
     <view class="user-info">
-      <view class="avatar-wrap">
-        <image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
-      </view>
-      <view class="info-content">
-        <text class="nickname">{{ userInfo.nickName || '未登录' }}</text>
-        <text class="phone">{{ userInfo.phone || '点击登录' }}</text>
+      <view class="floating-dots"></view>
+      <view class="user-info-content" @click="handleLogin">
+        <view class="avatar-wrap">
+          <image class="avatar" src="/static/user.png" mode="aspectFill" />
+        </view>
+        <view class="info-content" v-if="userInfo.nickName">
+          <text class="nickname">{{ userInfo.nickName }}</text>
+          <text class="phone">{{ userInfo.phone }}</text>
+        </view>
+        <view class="info-content not-login" v-else>
+          <text class="login-text">点击登录</text>
+          <text class="login-desc">登录后享受更多服务</text>
+        </view>
       </view>
+      <view class="wave-decoration"></view>
     </view>
 
     <!-- 押金卡片 -->
-    <view class="balance-card" @click="navigateTo('/pages/deposit/index')">
+    <view class="balance-card">
       <view class="balance-content">
         <text class="label">押金余额</text>
         <text class="amount">¥{{ deposit }}</text>
       </view>
-      <view class="withdraw-btn">
+      <view class="withdraw-btn" @click="navigateTo('/pages/deposit/index')">
         提现
         <view class="arrow"></view>
       </view>
@@ -29,7 +37,7 @@
       <view class="function-item" @click="navigateTo('/pages/order/index')">
         <view class="item-left">
           <view class="icon-wrap order">
-			  <!-- <view class="icon-placeholder"></view> -->
+            <image src="/static/jl.png" mode="aspectFit" class="icon-image" />
           </view>
           <text class="title">租借记录</text>
         </view>
@@ -40,7 +48,7 @@
       <view class="function-item" @click="navigateTo('/pages/feedback/index')">
         <view class="item-left">
           <view class="icon-wrap feedback">
-            <!-- <view class="icon-placeholder"></view> -->
+            <image src="/static/complaint.png" mode="aspectFit" class="icon-image" />
           </view>
           <text class="title">投诉与建议</text>
         </view>
@@ -51,7 +59,7 @@
       <view class="function-item" @click="navigateTo('/pages/help/index')">
         <view class="item-left">
           <view class="icon-wrap help">
-            <!-- <view class="icon-placeholder"></view> -->
+            <image src="/static/hlep.png" mode="aspectFit" class="icon-image" />
           </view>
           <text class="title">帮助中心</text>
         </view>
@@ -79,7 +87,19 @@ export default {
         this.userInfo = userInfo
       }
     },
+    handleLogin() {
+      if (!this.userInfo.nickName) {
+        uni.navigateTo({
+          url: '/pages/login/index'
+        })
+      }
+    },
     navigateTo(url) {
+      // 判断是否需要登录
+      // if (!this.userInfo.nickName && url !== '/pages/help/index') {
+      //   this.handleLogin()
+      //   return
+      // }
       uni.navigateTo({ url })
     }
   }
@@ -90,107 +110,205 @@ export default {
 .my-container {
   min-height: 87.5vh;
   background: #f8f8f8;
-  padding-bottom: 40rpx;
+  padding-bottom: env(safe-area-inset-bottom);
 
   .user-info {
-    background: linear-gradient(135deg, #1976D2, #64B5F6);
-    padding: 40rpx 30rpx;
-    display: flex;
-    align-items: center;
+    height: 360rpx;
+    background: linear-gradient(135deg, #1976D2, #42A5F5);
     position: relative;
     overflow: hidden;
 
+    &::before,
     &::after {
       content: '';
       position: absolute;
-      right: -20%;
-      bottom: -30%;
-      width: 400rpx;
-      height: 400rpx;
-      background: rgba(255,255,255,0.1);
-      border-radius: 50%;
+      background-repeat: no-repeat;
+      opacity: 0.1;
     }
 
-    .avatar-wrap {
-      width: 120rpx;
-      height: 120rpx;
-      border-radius: 60rpx;
-      overflow: hidden;
-      background: url('../../static/head.png') center/cover no-repeat;
-      margin-right: 30rpx;
-      border: 4rpx solid rgba(255,255,255,0.3);
-      
-      .avatar {
-        width: 100%;
-        height: 100%;
+    &::before {
+      width: 200rpx;
+      height: 200rpx;
+      left: -40rpx;
+      top: -40rpx;
+      background-image: radial-gradient(circle, #fff 2rpx, transparent 3rpx);
+      background-size: 30rpx 30rpx;
+      transform: rotate(30deg);
+    }
+
+    &::after {
+      width: 300rpx;
+      height: 300rpx;
+      right: -60rpx;
+      bottom: -60rpx;
+      background: 
+        radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 30%, transparent 30.5%),
+        radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 20%, transparent 20.5%);
+      background-size: 60rpx 60rpx;
+      background-position: 0 0, 30rpx 30rpx;
+      transform: rotate(-15deg);
+    }
+
+    .floating-dots {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background: rgba(255,255,255,0.3);
+        animation: float 3s infinite ease-in-out;
+      }
+
+      &::before {
+        top: 20%;
+        right: 10%;
+        animation-delay: -2s;
+      }
+
+      &::after {
+        top: 50%;
+        right: 20%;
+        width: 8rpx;
+        height: 8rpx;
+        animation-delay: -1s;
       }
     }
 
-    .info-content {
-      color: #fff;
+    .user-info-content {
       position: relative;
-      z-index: 1;
+      z-index: 2;
+      padding: 60rpx 40rpx;
+      display: flex;
+      align-items: center;
 
-      .nickname {
-        font-size: 36rpx;
-        font-weight: 500;
-        margin-bottom: 10rpx;
-        display: block;
+      .avatar-wrap {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 70rpx;
+        border: 6rpx solid rgba(255,255,255,0.3);
+        overflow: hidden;
+        box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1),
+                   0 0 0 6rpx rgba(255,255,255,0.1);
+        margin-right: 40rpx;
+        position: relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: -10%;
+          left: -10%;
+          right: -10%;
+          bottom: -10%;
+          background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
+          animation: shine 2s infinite;
+        }
+        
+        .avatar {
+          width: 100%;
+          height: 100%;
+          background: #fff;
+        }
       }
 
-      .phone {
-        font-size: 28rpx;
-        opacity: 0.9;
+      .info-content {
+        flex: 1;
+
+        &.not-login {
+          .login-text {
+            font-size: 40rpx;
+            color: #fff;
+            font-weight: 500;
+            margin-bottom: 12rpx;
+            display: block;
+          }
+
+          .login-desc {
+            font-size: 28rpx;
+            color: rgba(255,255,255,0.9);
+            display: block;
+          }
+        }
       }
     }
+
+    .wave-decoration {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 120rpx;
+      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBkPSJNMCwyNjAuMjI3YzE3My42NjEsMCwzMjEuMTM3LDAsNDQyLjQyOCwwYzE4MS41MTcsMCwyODUuNjQ1LDAsMzk3LjU3MiwwQzk1Mi4zODksMjYwLjIyNywxMTQwLjI3MSwyNjAuMjI3LDE0NDAsMjYwLjIyN1YwSDBWMjYwLjIyN3oiLz48L3N2Zz4=') bottom/100% no-repeat;
+      opacity: 0.8;
+    }
+  }
+
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(-20rpx) scale(1.1);
+    }
+  }
+
+  @keyframes shine {
+    0% {
+      transform: translateX(-100%) rotate(45deg);
+    }
+    80%, 100% {
+      transform: translateX(100%) rotate(45deg);
+    }
   }
 
   .balance-card {
-    margin: 20rpx 30rpx;
+    margin: -60rpx 30rpx 30rpx;
     background: #fff;
-    border-radius: 20rpx;
-    padding: 30rpx;
+    border-radius: 24rpx;
+    padding: 40rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
     position: relative;
-    overflow: hidden;
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 200rpx;
-      height: 200rpx;
-      background: linear-gradient(135deg, transparent, rgba(25,118,210,0.1));
-      border-radius: 0 0 0 200rpx;
-    }
+    z-index: 3;
+    box-shadow: 0 8rpx 32rpx rgba(25,118,210,0.1);
 
     .balance-content {
       .label {
         font-size: 28rpx;
         color: #666;
-        margin-bottom: 10rpx;
+        margin-bottom: 12rpx;
         display: block;
       }
 
       .amount {
-        font-size: 48rpx;
+        font-size: 52rpx;
         color: #1976D2;
         font-weight: bold;
       }
     }
 
     .withdraw-btn {
-      padding: 16rpx 32rpx;
-      background: #1976D2;
+      padding: 20rpx 36rpx;
+      background: linear-gradient(135deg, #1976D2, #42A5F5);
       color: #fff;
-      border-radius: 30rpx;
-      font-size: 28rpx;
+      border-radius: 36rpx;
+      font-size: 30rpx;
       display: flex;
       align-items: center;
+      box-shadow: 0 4rpx 12rpx rgba(25,118,210,0.2);
+      
+      &:active {
+        transform: scale(0.98);
+      }
       
       .arrow {
         width: 12rpx;
@@ -198,23 +316,23 @@ export default {
         border-top: 3rpx solid #fff;
         border-right: 3rpx solid #fff;
         transform: rotate(45deg);
-        margin-left: 8rpx;
+        margin-left: 12rpx;
       }
     }
   }
 
   .function-list {
-    margin: 30rpx;
+    margin: 0 30rpx;
     background: #fff;
-    border-radius: 20rpx;
-    padding: 0 20rpx;
+    border-radius: 24rpx;
+    padding: 10rpx 20rpx;
     box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
 
     .function-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 30rpx 10rpx;
+      padding: 32rpx 20rpx;
       border-bottom: 1rpx solid #f5f5f5;
       transition: all 0.3s;
 
@@ -233,53 +351,31 @@ export default {
         .icon-wrap {
           width: 80rpx;
           height: 80rpx;
-          margin-right: 20rpx;
+          margin-right: 24rpx;
           display: flex;
           align-items: center;
           justify-content: center;
+          border-radius: 20rpx;
+          background: #F5F9FF;
 
-          &.order {
-            background: url('../../static/jl.png') center/cover no-repeat;
-			width: 50rpx;
-			height: 50rpx;
-          }
-
-          &.deposit {
-            background: #FFF3E0;
-            color: #FF9800;
-          }
-
-          &.feedback {
-            background: url('../../static/complaint.png') center/cover no-repeat;
-            width: 50rpx;
-            height: 50rpx;
-          }
-
-          &.help {
-            background: url('../../static/hlep.png') center/cover no-repeat;
-            width: 50rpx;
-            height: 50rpx;
-          }
-
-          .icon-placeholder {
-            width: 40rpx;
-            height: 40rpx;
-            background: currentColor;
-            border-radius: 8rpx;
+          .icon-image {
+            width: 44rpx;
+            height: 44rpx;
           }
         }
 
         .title {
-          font-size: 30rpx;
+          font-size: 32rpx;
           color: #333;
+          font-weight: 500;
         }
       }
 
       .arrow {
         width: 16rpx;
         height: 16rpx;
-        border-top: 4rpx solid #999;
-        border-right: 4rpx solid #999;
+        border-top: 3rpx solid #999;
+        border-right: 3rpx solid #999;
         transform: rotate(45deg);
       }
     }
diff --git a/pages/rent/index.vue b/pages/rent/index.vue
deleted file mode 100644
index bc66df2..0000000
--- a/pages/rent/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <view class="rent-container">
-    <view class="scan-area">
-      <view class="tips">请扫描风扇上的二维码</view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  onLoad() {
-    // 直接启动扫码
-    this.scanCode()
-  },
-  methods: {
-    scanCode() {
-      uni.scanCode({
-        success: (res) => {
-          console.log('扫码结果：', res.result)
-          // TODO: 处理扫码结果，调用租借API
-        },
-        fail: (err) => {
-          uni.showToast({
-            title: '扫码失败',
-            icon: 'none'
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.rent-container {
-  min-height: 100vh;
-  background: #f5f5f5;
-  
-  .scan-area {
-    padding: 40rpx;
-    text-align: center;
-    
-    .tips {
-      font-size: 32rpx;
-      color: #333;
-      margin-top: 30rpx;
-    }
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/pages/return/index.vue b/pages/return/index.vue
deleted file mode 100644
index ac64273..0000000
--- a/pages/return/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <view class="return-container">
-    <view class="scan-area">
-      <view class="tips">请扫描归还点的二维码</view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  onLoad() {
-    // 直接启动扫码
-    this.scanCode()
-  },
-  methods: {
-    scanCode() {
-      uni.scanCode({
-        success: (res) => {
-          console.log('扫码结果：', res.result)
-          // TODO: 处理扫码结果，调用归还API
-        },
-        fail: (err) => {
-          uni.showToast({
-            title: '扫码失败',
-            icon: 'none'
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.return-container {
-  min-height: 100vh;
-  background: #f5f5f5;
-  
-  .scan-area {
-    padding: 40rpx;
-    text-align: center;
-    
-    .tips {
-      font-size: 32rpx;
-      color: #333;
-      margin-top: 30rpx;
-    }
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/unpackage/dist/cache/.vite/deps/_metadata.json b/unpackage/dist/cache/.vite/deps/_metadata.json
index f0e84a4..ee05a2a 100644
--- a/unpackage/dist/cache/.vite/deps/_metadata.json
+++ b/unpackage/dist/cache/.vite/deps/_metadata.json
@@ -1,19 +1,19 @@
 {
-  "hash": "53a03a2d",
-  "configHash": "dabd6a8d",
+  "hash": "cbb77b90",
+  "configHash": "02d49493",
   "lockfileHash": "a9202ca1",
-  "browserHash": "043c2cb5",
+  "browserHash": "41ab211e",
   "optimized": {
     "axios": {
       "src": "../../../../../node_modules/axios/index.js",
       "file": "axios.js",
-      "fileHash": "500d5d2a",
+      "fileHash": "a532ef26",
       "needsInterop": false
     },
     "uniapp-axios-adapter": {
       "src": "../../../../../node_modules/uniapp-axios-adapter/lib/index.esm.js",
       "file": "uniapp-axios-adapter.js",
-      "fileHash": "27d80062",
+      "fileHash": "63f5b0fe",
       "needsInterop": false
     }
   },