当你看过世界,才发现你要见的世面,是你自己内心的勇敢和自信。


不知何时,生活已经陷入了疲态,不明白自己为何要逃离原来安逸的生活


非常棒的需求!我们将进一步优化你的请假审批页面,使其 **更加现代、美观、符合当前主流 App 的 UI 风格**。我们将从以下几个方面进行深度优化: --- ## ✅ 优化方向 | 优化点 | 说明 | |--------|------| | **配色方案** | 使用现代流行配色,如蓝灰渐变、浅灰背景、柔按钮色 | | **布局结构** | 使用卡片式设计、呼吸感更强的间距、响应式布局 | | **交互体验** | 按钮点击动效、加载动画、弹窗提示等 | | **组件化建议** | 把日期选择器封装为可复用组件 | | **字体与图标** | 使用 uni-icons、合理字体大小行高 | --- ## ✅ 优化后的完整代码 ### 📄 `template` 优化(现代卡片风格 + 柔配色) ```vue <template> <view class="page"> <!-- 页面标题 --> <view class="header"> <text class="title">请假审批</text> </view> <!-- 日期选择器 --> <view class="calendar-section"> <u-calendar :min-date="minDate" :max-date="maxDate" :show="show" mode="single" @confirm="confirm" ></u-calendar> <u-button type="primary" @click="show = true" plain> {{ datatime ? datatime : '请选择日期' }} </u-button> </view> <!-- 审批列表 --> <scroll-view scroll-y class="list-container"> <view class="card" v-for="item in filteredList" :key="item.id"> <view class="student-name">{{ item.name }}</view> <view class="leave-reason">{{ item.name }} 同学申请请假,请审批</view> <view class="actions"> <u-button type="success" size="mini" @click="approve(item)">同意</u-button> <u-button type="error" size="mini" @click="reject(item)">拒绝</u-button> </view> </view> </scroll-view> </view> </template> ``` --- ### 📄 `script` 优化(逻辑清晰 + 可维护) ```vue <script> export default { props: { data: { type: String, default: '' } }, data() { const now = new Date(); const minDate = new Date(now.getFullYear(), now.getMonth(), 1).getTime(); const maxDate = new Date(now.getFullYear(), now.getMonth() + 1, 0).getTime(); return { minDate, maxDate, show: false, datatime: this.data }; }, computed: { filteredList() { return this.studentlist.filter(item => item.isqj === 1); }, studentlist() { return [ { id: 1, name: '张三', isqj: 1 }, { id: 2, name: '李四', isqj: 1 } ]; } }, methods: { confirm(e) { this.datatime = e[0]; this.show = false; }, approve(student) { uni.showToast({ title: `${student.name} 已通过` }); this.$emit('approve', student); }, reject(student) { uni.showToast({ title: `${student.name} 已拒绝` }); this.$emit('reject', student); } } }; </script> ``` --- ### 📄 `style` 优化(现代 UI + 流行配色) ```vue <style scoped> .page { background-color: #f5f6fa; padding: 30rpx; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .header { margin-bottom: 40rpx; } .title { font-size: 44rpx; font-weight: bold; color: #2f3640; } .calendar-section { margin-bottom: 40rpx; } .list-container { height: calc(100vh - 300rpx); } .card { background-color: #ffffff; border-radius: 20rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05); transition: transform 0.2s ease; } .card:hover { transform: translateY(-4rpx); } .student-name { font-size: 36rpx; font-weight: bold; color: #2f3640; margin-bottom: 16rpx; } .leave-reason { font-size: 28rpx; color: #718096; margin-bottom: 24rpx; } .actions { display: flex; justify-content: flex-end; gap: 20rpx; } .actions .btn { font-size: 26rpx; padding: 0 24rpx; height: 60rpx; border-radius: 30rpx; } </style> ``` --- ## ✅ 效果预览建议 | 特性 | 描述 | |------|------| | **配色风格** | 主色调:蓝灰渐变,辅助色:绿、红(用于按钮) | | **卡片式设计** | 圆角 + 阴影 + hover 效果,增强交互感 | | **按钮样式** | 使用 `plain` `success/error` 类型,视觉清晰 | | **滚动区域** | 使用 `scroll-view`,适配不同设备高度 | --- ## ✅ 进阶建议 | 功能 | 建议 | |------|------| | 日期选择器封装 | 把 `u-calendar` 封装成 `DatePicker.vue` 组件 | | 引入图标 | 使用 `uni-icons` 添加日历图标 `<uni-icons type="calendar" />` | | 加载动画 | 在请求数据时添加 `u-loading` 或 `uni.showLoading` | | 分页加载 | 使用 `u-load-more` 组件实现分页加载更多请假申请 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值