From 99273aaf0910c1ae8249018517ef05df8e901a04 Mon Sep 17 00:00:00 2001 From: wangfukang <15630117759@163.com> Date: Thu, 2 Jul 2026 13:43:53 +0800 Subject: [PATCH] 1 --- components/tab-bar/myCenter.vue | 975 +++++++++++++++++++++++--------- 1 file changed, 711 insertions(+), 264 deletions(-) diff --git a/components/tab-bar/myCenter.vue b/components/tab-bar/myCenter.vue index 2a0cb04..5f92cd4 100644 --- a/components/tab-bar/myCenter.vue +++ b/components/tab-bar/myCenter.vue @@ -2,69 +2,73 @@ - + - {{avatarText}} - Lv.8 + {{userName}} - {{schoolName}} - 半径等级 Lv.8 - - - - - - - - - + {{schoolName}} › + 切换校区 - + - + 已经帮你省下 - ￥{{savedMoney}} + ¥{{savedMoney}} ≈ {{milkTeaCount}} 杯蜜雪冰城 - 本周又省了 +38 + 本周又省了 ¥38 + + + + + + + {{item.title}} + {{item.tip}} - - - - 今天还能赚 + + + + 今天还能省钱又赚钱 + - 每日都有新机会，省钱又赚钱 - 查看全部 + {{item.title}} - {{item.sub}} + + {{item.subPre}} + {{item.subEm}} + {{item.subPost}} + @@ -75,44 +79,38 @@ - - - 我的身份 - 一个账号，多重身份 + + + 我的身份 + 多重身份，都能挣钱 - 切换身份 + - {{item.tag}} - + {{formatBadgeCount(item.count)}} + {{item.tag}} + {{item.title}} {{item.desc}} - › + + + + - - - - {{item.title}} - {{item.tip}} - - - - - - 校园生活 - 发现更多有趣的校园生活 + + + 校园生活 + 发现更多有趣的校园生活 - 全部服务 + 全部服务 › - › + @@ -161,14 +159,33 @@ - - - 选择你的校园半径 + + + + + 选择你的校园半径 + 你现在在哪个校区？ + 选定后，会优先展示附近同学正在拼的内容。 - - {{item.title}} + + ⌕ + + + + + + {{item.title}} + + 进入 + + + 没找到这个校区 + 换个关键词试试，比如学校简称或区域名 + + @@ -182,6 +199,7 @@ schoolShop: [], workerCounts: 0, shopCounts: 0, + areaKeyword: '', balance: '0.00', worker: uni.getStorageSync('worker'), balanceRefreshId: 0, @@ -198,10 +216,24 @@ rewardMoney: uni.getStorageSync('rewardMoney') || '58.6', deliveryIncome: uni.getStorageSync('deliveryIncome') || '86', deliveryDoneCount: Number(uni.getStorageSync('deliveryDoneCount')) || 123, - collegeRank: Number(uni.getStorageSync('collegeRank')) || 18 + collegeRank: Number(uni.getStorageSync('collegeRank')) || 18, + menuButtonInfo: {}, + statusBarHeight: 0 } }, computed: { + contentStyle() { + // 顶部与微信胶囊平齐：以胶囊 top 作为内容起点 + const top = this.menuButtonInfo && this.menuButtonInfo.top ? this.menuButtonInfo.top : 0 + if (top) { + return { + paddingTop: top + 'px' + } + } + return { + paddingTop: this.statusBarHeight ? (this.statusBarHeight + 16) + 'px' : '98rpx' + } + }, hasWorker() { return !!this.worker }, @@ -210,6 +242,13 @@ const shops = this.normalizeShopList(this.schoolShop.length ? this.schoolShop : uni.getStorageSync('schoolShop')) return !!shopId || shops.length > 0 }, + filteredAreaList() { + const keyword = (this.areaKeyword || '').trim().toLowerCase() + if (!keyword) return this.areaList + return this.areaList.filter((item) => { + return String(item.title || '').toLowerCase().indexOf(keyword) !== -1 + }) + }, userName() { return uni.getStorageSync('nickName') || uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '张昊雯' }, @@ -229,29 +268,37 @@ taskCards() { return [{ type: 'group', - title: '拼团省钱', - sub: '还差 2 人成团', + title: '参与拼团', + subPre: '', + subEm: '省钱没有商量', + subPost: '', icon: '/package3/static/group-buy.png', cta: '去拼团', action: 'dingdan' }, { type: 'cash', title: '白嫖现金', - sub: '22:00 开奖', + subPre: '', + subEm: '22:00', + subPost: ' 开奖', icon: '/package3/static/free-cash.png', cta: '去参与', action: 'planet' }, { type: 'school', title: '学院奖金', - sub: '当前排名 12', + subPre: '', + subEm: '有现金奖励哦', + subPost: '', icon: '/package3/static/college-bonus.png', - cta: '去助推', + cta: '去排位', action: 'planet' }, { type: 'wallet', - title: '可提现', - sub: '余额 ¥' + this.rewardMoney, + title: '我的钱包', + subPre: '', + subEm: '¥' + this.balance, + subPost: '', icon: '/package3/static/withdraw.png', cta: '去提现', action: 'qianbao' @@ -259,55 +306,56 @@ }, identityCards() { return [{ - type: 'user', - title: '普通用户', - desc: '点外卖 · 拼团 · 领券', - icon: '/package3/static/user.png', - action: 'dingdan' + type: 'merchant', + title: '商家入驻', + desc: '开店赚钱', + icon: '/package3/static/merchant-center.png', + action: 'merchant' }, { type: 'delivery', - title: '校园配送员', - desc: '自由接单 · 灵活赚钱', + title: '兼职主页', + desc: '待处理订单', icon: '/package3/static/campus-courier.png', - tag: this.hasWorker ? '接单中' : '可注册', + count: this.workerCounts, action: this.hasWorker ? 'jianzhizhuye' : 'jianzhizhuce' }, { type: 'shop', title: '商家中心', - desc: '管理店铺 · 经营数据', + desc: '待处理订单', icon: '/package3/static/merchant-center.png', + count: this.shopCounts, action: this.hasShop ? 'merchantCenter' : 'merchant' + }, { + type: 'rule', + title: '接单规则', + desc: '设置接单范围', + icon: '/package3/static/campus-secret.png', + action: 'partTimeReg' }] }, quickItems() { return [{ type: 'order', title: '我的订单', - tip: '待付款 ' + this.orderCounts.pay, + tip: '', icon: '/package3/static/orders.png', action: 'dingdan' - }, { - type: 'wallet', - title: '我的钱包', - tip: '余额 ¥' + this.balance, - icon: '/package3/static/wallet.png', - action: 'qianbao' }, { type: 'coupon', title: '优惠券', - tip: '8 张可用', + tip: '', icon: '/package3/static/coupon.png', action: 'youhui' }, { type: 'address', title: '收货地址', - tip: '3 个地址', + tip: '', icon: '/package3/static/address.png', action: 'address' }, { type: 'collect', title: '我的收藏', - tip: '12 个收藏', + tip: '', icon: '/package3/static/favorite.png', action: 'collect' }] @@ -340,13 +388,26 @@ }] } }, + created() { + this.setMenuButtonInfo() + }, mounted() { + this.setMenuButtonInfo() uni.$on('myCenterCountsChange', this.setPendingCounts) }, beforeDestroy() { uni.$off('myCenterCountsChange', this.setPendingCounts) }, methods: { + setMenuButtonInfo() { + try { + if (uni.getMenuButtonBoundingClientRect) { + this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {} + } + const sys = uni.getSystemInfoSync ? uni.getSystemInfoSync() : null + this.statusBarHeight = (sys && sys.statusBarHeight) || 0 + } catch (e) {} + }, getArea() { try { return uni.getStorageSync('area') ? JSON.parse(uni.getStorageSync('area')) : {} @@ -370,6 +431,10 @@ showComingSoon(title) { this.tui.toast(title + '即将开放') }, + formatBadgeCount(count) { + const num = Number(count) || 0 + return num > 99 ? '99+' : num + }, setPendingCounts(counts) { this.workerCounts = Number(counts.workerCounts) || 0 this.shopCounts = Number(counts.shopCounts) || 0 @@ -442,6 +507,7 @@ this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => { if (res.code == 200) { this.areaList = res.result + this.areaKeyword = '' this.$refs.areaPopup.open() } else { this.tui.toast(res.message) @@ -450,8 +516,10 @@ }, onClickArea(item) { uni.setStorageSync('area', JSON.stringify(item)) + this.areaKeyword = '' this.tui.toast('切换成功') this.$refs.areaPopup.close() + this.$forceUpdate() }, navigatorTo(e, index) { let url = "" @@ -626,7 +694,8 @@ } .my-content { - padding: 28rpx 32rpx 156rpx; + /* 顶部留白由 contentStyle 动态设置（与胶囊平齐） */ + padding: 88rpx 32rpx 300rpx; box-sizing: border-box; } @@ -638,34 +707,33 @@ .top-zone { position: relative; - min-height: 156rpx; + z-index: 5; } .profile-row { display: flex; align-items: center; - padding-right: 140rpx; + min-height: 64rpx; + /* 右侧预留原生胶囊宽度，避免昵称被盖住 */ + padding-right: 210rpx; } .avatar-card { position: relative; flex-shrink: 0; - width: 104rpx; - height: 104rpx; - margin-right: 24rpx; - border-radius: 32rpx; + width: 84rpx; + height: 84rpx; + margin-right: 16rpx; + border-radius: 24rpx; background: linear-gradient(145deg, #EAFBF4, #B7F3D5); box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06); + overflow: hidden; } - .avatar-face { + .avatar-img { width: 100%; height: 100%; - color: #202124; - font-size: 48rpx; - font-weight: 900; - line-height: 104rpx; - text-align: center; + display: block; } .level-chip, @@ -678,8 +746,8 @@ .level-chip { position: absolute; - right: -12rpx; - bottom: 2rpx; + right: -8rpx; + bottom: -2rpx; height: 32rpx; padding: 0 12rpx; background: #FFF2D8; @@ -703,9 +771,9 @@ .user-name { max-width: 230rpx; color: #202124; - font-size: 36rpx; + font-size: 32rpx; font-weight: 900; - line-height: 48rpx; + line-height: 36rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -721,78 +789,35 @@ } .school-row { - margin-top: 4rpx; + display: inline-flex; + align-items: center; + margin-top: 2rpx; color: #70757A; font-size: 22rpx; - line-height: 30rpx; + line-height: 24rpx; } .identity-pill { display: inline-flex; - height: 36rpx; - margin-top: 10rpx; - padding: 0 16rpx; + height: 30rpx; + margin-top: 4rpx; + padding: 0 14rpx; align-items: center; background: rgba(52, 200, 160, .12); color: #34C8A0; font-size: 22rpx; font-weight: 900; - } - - .top-actions { - position: absolute; - right: 0; - top: 4rpx; - display: flex; - gap: 16rpx; - } - - .icon-btn { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 56rpx; - height: 56rpx; - border-radius: 50%; - background: rgba(255, 255, 255, .72); - box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06); - transition: transform .16s ease; - } - - .line-gear, - .line-message { - width: 26rpx; - height: 26rpx; - border-radius: 50%; - box-shadow: inset 0 0 0 4rpx #202124; - } - - .line-message { - border-radius: 12rpx; - box-shadow: inset 0 0 0 4rpx #202124; - } - - .notice-dot { - position: absolute; - right: 6rpx; - top: 4rpx; - width: 14rpx; - height: 14rpx; - border-radius: 50%; - background: #FF6464; + line-height: 30rpx; } .ticket-card { - position: absolute; - right: 0; - bottom: 0; display: flex; align-items: center; justify-content: space-between; width: 166rpx; - height: 82rpx; - padding: 14rpx 16rpx; + height: 64rpx; + margin: 16rpx 0 0 auto; + padding: 8rpx 14rpx; border-radius: 24rpx; background: rgba(255, 255, 255, .72); box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06); @@ -834,9 +859,10 @@ .saving-hero { position: relative; - height: 260rpx; + height: 278rpx; padding: 24rpx; - overflow: hidden; + /* 不裁切：插画顶部的星球要探出卡片外 */ + overflow: visible; background: linear-gradient(135deg, rgba(227, 255, 243, .96), rgba(244, 255, 250, .88) 48%, rgba(255, 244, 224, .8)); transition: transform .16s ease; } @@ -844,9 +870,10 @@ .saving-bg { position: absolute; left: 0; - top: 0; + bottom: 0; width: 100%; - height: 100%; + /* 图片原始比例 792x382，686rpx 宽对应 331rpx 高，写死避免安卓 widthFix 计算异常 */ + height: 331rpx; z-index: 0; } @@ -892,8 +919,14 @@ } .section-card { - padding: 24rpx; - background: rgba(255, 255, 255, .76); + padding: 28rpx 24rpx; + background: rgba(255, 255, 255, .9); + } + + .earn-section, + .identity-section { + padding-top: 20rpx; + padding-bottom: 18rpx; } .section-head { @@ -901,23 +934,56 @@ align-items: flex-start; justify-content: space-between; gap: 24rpx; - margin-bottom: 24rpx; + margin-bottom: 20rpx; + } + + .earn-section .section-head, + .identity-section .section-head { + margin-bottom: 8rpx; + } + + .section-head--inline { + align-items: center; + } + + .head-inline { + display: flex; + align-items: baseline; + min-width: 0; + } + + .head-sub { + margin-left: 16rpx; + color: #9AA0A6; + font-size: 22rpx; + font-weight: 400; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .section-title { display: flex; align-items: center; color: #202124; - font-size: 36rpx; + font-size: 32rpx; font-weight: 900; - line-height: 48rpx; + line-height: 44rpx; text-align: left; } + .head-main { + display: flex; + align-items: center; + min-width: 0; + } + .title-icon { - width: 44rpx; - height: 44rpx; - margin-right: 12rpx; + flex-shrink: 0; + width: 110rpx; + height: 110rpx; + /* 原图四周有大片透明边距，用负 margin 裁掉：视觉上图标约 45rpx、贴左、行高与标题一致 */ + margin: -28rpx -16rpx -26rpx -34rpx; } .section-desc { @@ -944,8 +1010,7 @@ .task-card { flex: 1; min-width: 0; - height: 210rpx; - padding: 18rpx 10rpx 12rpx; + padding: 12rpx 10rpx 8rpx; border-radius: 24rpx; box-sizing: border-box; text-align: center; @@ -953,42 +1018,78 @@ } .task-card--group { - background: linear-gradient(180deg, #E5FFF3, #C9F5DC); + background: linear-gradient(180deg, #F1FEF8, #E0F8EC); } .task-card--cash { - background: linear-gradient(180deg, #FFF0E1, #FFE0C4); + background: linear-gradient(180deg, #FFF4E6, #FFEBD4); } .task-card--school { - background: linear-gradient(180deg, #EAF6FF, #D8ECFF); + background: linear-gradient(180deg, #EAF6FF, #DCEEFF); } .task-card--wallet { - background: linear-gradient(180deg, #FFF2D8, #FFE4B8); + background: linear-gradient(180deg, #FFF4DE, #FFEAC4); } .task-title { color: #202124; - font-size: 28rpx; + font-size: 26rpx; font-weight: 900; - line-height: 36rpx; + margin-bottom: 6rpx; + line-height: 30rpx; white-space: nowrap; } + .task-card--cash .task-title { + color: #FF5A2C; + } + + .task-card--school .task-title { + color: #3D7FFF; + } + + .task-card--wallet .task-title { + color: #FF9500; + } + .task-sub { - margin-top: 4rpx; - color: #FFA63D; - font-size: 22rpx; - font-weight: 900; - line-height: 28rpx; + margin-top: 0; + color: #70757A; + font-size: 20rpx; + line-height: 24rpx; white-space: nowrap; } + .task-sub-em { + font-weight: 900; + } + + .task-card--group .task-sub-em { + color: #34C8A0; + } + + .task-card--cash .task-sub { + color: #FF7A3D; + } + + .task-card--cash .task-sub-em { + color: #FF7A3D; + } + + .task-card--school .task-sub-em { + color: #4A9FFF; + } + + .task-card--wallet .task-sub-em { + color: #FFA63D; + } + .task-visual { display: flex; justify-content: center; - margin-top: 14rpx; + margin-top: 0; } .task-asset, @@ -999,19 +1100,18 @@ } .task-asset { - width: 74rpx; - height: 74rpx; + width: 96rpx; + height: 96rpx; } .task-btn { - height: 44rpx; - margin: 12rpx auto 0; - padding: 0 14rpx; + height: 52rpx; + margin: 0 6rpx; background: #34C8A0; color: #FFFFFF; - font-size: 22rpx; + font-size: 24rpx; font-weight: 900; - line-height: 44rpx; + line-height: 52rpx; } .task-card--cash .task-btn, @@ -1019,91 +1119,189 @@ background: #FFA63D; } + .task-card--school .task-btn { + background: #4A9FFF; + } + .identity-row { display: flex; - gap: 16rpx; + gap: 12rpx; } .identity-card { position: relative; flex: 1; min-width: 0; - height: 172rpx; - padding: 18rpx 14rpx; + height: 170rpx; + padding: 14rpx 10rpx 10rpx; border-radius: 24rpx; box-sizing: border-box; - overflow: hidden; transition: transform .16s ease; } - .identity-card--user { - background: linear-gradient(145deg, #E5FFF3, #F5FFFA); + .identity-card--merchant { + background: #FBE9E7; } .identity-card--delivery { - background: linear-gradient(145deg, #EAF6FF, #F5FFFA); + background: #E3F0FE; } .identity-card--shop { - background: linear-gradient(145deg, #FFF0E1, #FFF9F0); + background: #FBEDDF; + } + + .identity-card--rule { + background: #E8EDFA; + } + + .identity-badge { + position: absolute; + right: -6rpx; + top: -10rpx; + z-index: 2; + min-width: 34rpx; + height: 34rpx; + padding: 0 8rpx; + border: 3rpx solid #FFFFFF; + border-radius: 999rpx; + background: #FF5A4F; + color: #FFFFFF; + font-size: 20rpx; + font-weight: 900; + line-height: 34rpx; + text-align: center; + box-shadow: 0 8rpx 18rpx rgba(255, 90, 79, .28); + box-sizing: border-box; } .identity-tag { position: absolute; - right: 12rpx; - top: 10rpx; + right: 8rpx; + top: -10rpx; height: 32rpx; padding: 0 12rpx; - background: rgba(52, 200, 160, .16); - color: #34C8A0; - font-size: 22rpx; + background: #34C8A0; + color: #FFFFFF; + font-size: 20rpx; font-weight: 900; - line-height: 32rpx; + line-height: 36rpx; + box-shadow: 0 6rpx 16rpx rgba(52, 200, 160, .3); } - .identity-icon { - width: 58rpx; - height: 58rpx; + .identity-dot { + position: absolute; + right: 12rpx; + top: 12rpx; + width: 24rpx; + height: 24rpx; + border-radius: 50%; + background: rgba(255, 255, 255, .8); + box-shadow: inset 0 0 0 6rpx rgba(52, 200, 160, .4); + } + + .identity-card--merchant .identity-dot, + .identity-card--shop .identity-dot { + box-shadow: inset 0 0 0 6rpx rgba(255, 166, 61, .5); } .identity-title { - margin-top: 12rpx; - color: #202124; - font-size: 28rpx; + color: #1E8A5E; + font-size: 26rpx; font-weight: 900; - line-height: 36rpx; + line-height: 32rpx; text-align: left; white-space: nowrap; } + .identity-card--merchant .identity-title { + color: #E5432E; + } + + .identity-card--delivery .identity-title { + color: #3D7FFF; + } + + .identity-card--shop .identity-title { + color: #E5432E; + } + + .identity-card--rule .identity-title { + color: #5B6EE1; + } + .identity-desc { - margin-top: 4rpx; - color: #70757A; - font-size: 22rpx; - line-height: 28rpx; + margin-top: 2rpx; + width: 116%; + color: #6FBF97; + font-size: 20rpx; + line-height: 26rpx; text-align: left; white-space: nowrap; + transform: scale(.86); + transform-origin: left top; } - .identity-go { + .identity-card--merchant .identity-desc { + color: #E09A66; + } + + .identity-card--delivery .identity-desc { + color: #7FA9E8; + } + + .identity-card--shop .identity-desc { + color: #E09A66; + } + + .identity-card--rule .identity-desc { + color: #8D96D8; + } + + .identity-foot { position: absolute; - right: 14rpx; - bottom: 14rpx; - width: 42rpx; - height: 42rpx; + left: 10rpx; + right: 10rpx; + display: flex; + align-items: flex-end; + justify-content: space-between; + } + + .identity-icon { + width: 94rpx; + height: 94rpx; + } + + .identity-icon--delivery { + width: 70rpx; + height: 70rpx; + margin-top: 8rpx; + } + + .identity-icon--rule { + width: 94rpx; + height: 94rpx; + margin-top: 4rpx; + } + + .identity-go { + width: 34rpx; + height: 34rpx; border-radius: 50%; - background: rgba(255, 255, 255, .74); - color: #34C8A0; - font-size: 36rpx; - line-height: 38rpx; + background: rgba(255, 255, 255, .9); + color: #2B3A33; + font-size: 26rpx; + font-weight: 900; + line-height: 31rpx; text-align: center; + box-shadow: 0 6rpx 16rpx rgba(30, 80, 60, .08); } .quick-card { display: flex; justify-content: space-between; - padding: 24rpx 18rpx; - background: rgba(255, 255, 255, .76); + padding: 12rpx 18rpx 8rpx; + background: rgba(255, 255, 255, .9); } .quick-item { @@ -1114,105 +1312,161 @@ } .quick-icon { - width: 64rpx; - height: 64rpx; - margin: 0 auto 10rpx; + width: 80rpx; + height: 80rpx; + margin: 0 auto 14rpx; + } + + .quick-icon--address { + width: 76rpx; + height: 76rpx; + margin: 4rpx auto 14rpx; + } + + .quick-icon--collect { + width: 120rpx; + height: 120rpx; + /* 收藏原图视觉内容偏小，放大后用负上边距抵消额外占位，避免文字被顶低 */ + margin: -20rpx auto 0; } .quick-title { color: #202124; - font-size: 22rpx; + font-size: 24rpx; font-weight: 900; - line-height: 28rpx; + line-height: 32rpx; white-space: nowrap; } + .quick-title--collect { + margin-top: -8rpx; + } + .quick-tip { - margin-top: 2rpx; + margin-top: 6rpx; color: #70757A; - font-size: 22rpx; - line-height: 28rpx; + font-size: 20rpx; + line-height: 26rpx; white-space: nowrap; - transform: scale(.86); + } + + .quick-tip--order { + color: #34C8A0; + } + + .quick-tip--wallet { + color: #4A9FFF; + } + + .quick-tip--coupon { + color: #FF6B5A; + } + + .quick-tip--address { + color: #8E7CF0; + } + + .quick-tip--collect { + color: #FFA63D; } .life-grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: 16rpx; + grid-template-columns: repeat(4, 1fr); + gap: 14rpx; } .life-card { - height: 154rpx; - padding: 18rpx; + position: relative; + height: 188rpx; + padding: 14rpx 12rpx 10rpx; border-radius: 24rpx; box-sizing: border-box; + overflow: hidden; transition: transform .16s ease; } - .life-card--ie, + .life-card--ie { + background: #E8F6EC; + } + .life-card--fish { - background: linear-gradient(145deg, #E5FFF3, #F5FFFA); + background: #E1EFF6; } .life-card--secret { - background: linear-gradient(145deg, #EAF6FF, #F5FFFA); + background: #E8EDFA; } .life-card--agent { - background: linear-gradient(145deg, #FFF0E1, #FFF9F0); + background: #FBE9E7; } .life-title { color: #202124; - font-size: 28rpx; + font-size: 24rpx; font-weight: 900; - line-height: 36rpx; + line-height: 32rpx; text-align: left; + white-space: nowrap; } .life-desc { - margin-top: 4rpx; - color: #70757A; - font-size: 22rpx; - line-height: 28rpx; + margin-top: 2rpx; + /* 占位宽度放大到 1/0.76，配合缩放后正好铺满卡片宽度，安卓上不再被截断 */ + width: 131%; + color: #8A9199; + font-size: 20rpx; + line-height: 26rpx; text-align: left; white-space: nowrap; + transform: scale(.76); + transform-origin: left top; } .life-visual { + position: absolute; + left: 2rpx; + right: 10rpx; + /* bottom: 10rpx; */ display: flex; - align-items: center; + align-items: flex-end; justify-content: space-between; - margin-top: 14rpx; } .life-asset { - width: 78rpx; - height: 58rpx; + /* 图标框不能超过卡片宽度（约157rpx），否则 aspectFit 会把画面裁到卡片外 */ + flex-shrink: 0; + width: 124rpx; + height: 124rpx; } .life-go { - width: 38rpx; - height: 38rpx; + flex-shrink: 0; + width: 34rpx; + height: 34rpx; + margin-bottom: 2rpx; border-radius: 50%; - background: rgba(255, 255, 255, .78); - color: #34C8A0; - font-size: 32rpx; - line-height: 34rpx; + background: rgba(255, 255, 255, .92); + color: #2B3A33; + font-size: 26rpx; + font-weight: 900; + line-height: 31rpx; text-align: center; + box-shadow: 0 6rpx 16rpx rgba(30, 80, 60, .08); } .logout-btn { display: flex; align-items: center; justify-content: center; - height: 72rpx; - background: rgba(255, 255, 255, .78); - color: #FF6464; + height: 88rpx; + border-radius: 999rpx; + background: #FFFFFF; + color: #FF4D4D; font-size: 28rpx; font-weight: 900; - line-height: 72rpx; + line-height: 88rpx; transition: transform .16s ease; } @@ -1222,7 +1476,7 @@ height: 26rpx; margin-right: 12rpx; border-radius: 50%; - box-shadow: inset 0 0 0 4rpx #FF6464; + box-shadow: inset 0 0 0 4rpx #FF4D4D; } .logout-power:before { @@ -1233,7 +1487,7 @@ width: 4rpx; height: 16rpx; border-radius: 999rpx; - background: #FF6464; + background: #FF4D4D; } .tap-soft, @@ -1279,6 +1533,199 @@ box-sizing: border-box; } + .campus-area-popup { + position: relative; + box-sizing: border-box; + width: 650rpx; + min-height: 620rpx; + max-height: 78vh; + overflow: hidden; + padding: 38rpx 30rpx 30rpx; + border: 1rpx solid rgba(255, 255, 255, .78); + border-radius: 42rpx; + background: + radial-gradient(circle at 16% 8%, rgba(227, 255, 150, .34), rgba(227, 255, 150, 0) 220rpx), + radial-gradient(circle at 92% 18%, rgba(166, 255, 234, .44), rgba(166, 255, 234, 0) 260rpx), + rgba(255, 255, 255, .92); + box-shadow: 0 30rpx 86rpx rgba(7, 61, 51, .18); + backdrop-filter: blur(24rpx); + } + + .area-popup-glow { + position: absolute; + border-radius: 999rpx; + pointer-events: none; + } + + .area-popup-glow-a { + top: -82rpx; + right: -68rpx; + width: 230rpx; + height: 230rpx; + background: rgba(166, 255, 234, .46); + filter: blur(10rpx); + } + + .area-popup-glow-b { + left: -56rpx; + bottom: 82rpx; + width: 180rpx; + height: 180rpx; + background: rgba(227, 255, 150, .34); + filter: blur(14rpx); + } + + .campus-area-header { + position: relative; + z-index: 1; + text-align: center; + } + + .campus-area-kicker { + display: inline-flex; + align-items: center; + justify-content: center; + height: 44rpx; + padding: 0 22rpx; + border: 1rpx solid rgba(255, 255, 255, .82); + border-radius: 999rpx; + background: linear-gradient(90deg, rgba(227, 255, 150, .72), rgba(166, 255, 234, .72)); + box-shadow: 0 10rpx 26rpx rgba(13, 114, 82, .1); + color: #073D33; + font-size: 22rpx; + font-weight: 700; + } + + .campus-area-title { + margin-top: 22rpx; + color: #073D33; + font-size: 38rpx; + font-weight: 900; + line-height: 1.25; + } + + .campus-area-subtitle { + width: 500rpx; + margin: 12rpx auto 0; + color: rgba(7, 61, 51, .52); + font-size: 23rpx; + line-height: 1.5; + } + + .campus-area-search { + position: relative; + z-index: 1; + display: flex; + align-items: center; + height: 82rpx; + margin-top: 30rpx; + padding: 0 26rpx; + border: 1rpx solid rgba(7, 61, 51, .06); + border-radius: 999rpx; + background: rgba(255, 255, 255, .72); + box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, .92), 0 14rpx 34rpx rgba(7, 61, 51, .08); + } + + .area-search-icon { + margin-right: 14rpx; + color: rgba(7, 61, 51, .5); + font-size: 34rpx; + font-weight: 700; + } + + .campus-area-search input { + flex: 1; + height: 82rpx; + color: #073D33; + font-size: 27rpx; + } + + .area-search-placeholder { + color: rgba(7, 61, 51, .34); + } + + .campus-area-list { + position: relative; + z-index: 1; + height: 360rpx; + max-height: 610rpx; + margin-top: 24rpx; + } + + .campus-area-item { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 92rpx; + margin-bottom: 16rpx; + padding: 0 18rpx 0 24rpx; + border: 1rpx solid rgba(255, 255, 255, .78); + border-radius: 28rpx; + background: rgba(255, 255, 255, .66); + box-shadow: 0 12rpx 30rpx rgba(7, 61, 51, .07); + color: #073D33; + } + + .campus-area-item:active { + transform: scale(.985); + opacity: .9; + } + + .area-item-main { + display: flex; + align-items: center; + min-width: 0; + font-size: 28rpx; + font-weight: 800; + } + + .area-item-main text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .area-item-dot { + flex-shrink: 0; + width: 16rpx; + height: 16rpx; + margin-right: 16rpx; + border-radius: 50%; + background: linear-gradient(135deg, #E3FF96, #A6FFEA); + box-shadow: 0 0 18rpx rgba(13, 114, 82, .22); + } + + .area-item-action { + flex-shrink: 0; + height: 50rpx; + margin-left: 18rpx; + padding: 0 22rpx; + border-radius: 999rpx; + background: linear-gradient(90deg, rgba(227, 255, 150, .95), rgba(166, 255, 234, .95)); + box-shadow: 0 10rpx 24rpx rgba(13, 114, 82, .14), 0 0 22rpx rgba(166, 255, 234, .42); + color: #073D33; + font-size: 22rpx; + font-weight: 900; + line-height: 50rpx; + } + + .campus-area-empty { + padding: 70rpx 0 56rpx; + text-align: center; + } + + .area-empty-title { + color: #073D33; + font-size: 28rpx; + font-weight: 800; + } + + .area-empty-desc { + margin-top: 12rpx; + color: rgba(7, 61, 51, .45); + font-size: 23rpx; + } + @keyframes fadeUp { from { opacity: 0;