diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index b5c2b20..c0966db 100644 --- a/pets-fe/app.wxss +++ b/pets-fe/app.wxss @@ -4,6 +4,12 @@ page { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 28rpx; } +::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; +} view, text, button, @@ -19,7 +25,7 @@ button::after { } .screen { min-height: 100vh; - padding: calc(env(safe-area-inset-top) + 36rpx) 32rpx 170rpx; + padding: calc(env(safe-area-inset-top) + 36rpx) 32rpx calc(170rpx + env(safe-area-inset-bottom)); } .eyebrow { color: #8fa39b; diff --git a/pets-fe/components/page-back/index.js b/pets-fe/components/page-back/index.js new file mode 100644 index 0000000..a6b503f --- /dev/null +++ b/pets-fe/components/page-back/index.js @@ -0,0 +1,11 @@ +Component({ + methods: { + goBack() { + if (getCurrentPages().length > 1) { + wx.navigateBack({ delta: 1 }); + } else { + wx.reLaunch({ url: "/pages/home/home" }); + } + }, + }, +}); diff --git a/pets-fe/components/page-back/index.json b/pets-fe/components/page-back/index.json new file mode 100644 index 0000000..67f8e03 --- /dev/null +++ b/pets-fe/components/page-back/index.json @@ -0,0 +1 @@ +{ "component": true } diff --git a/pets-fe/components/page-back/index.wxml b/pets-fe/components/page-back/index.wxml new file mode 100644 index 0000000..8857fc1 --- /dev/null +++ b/pets-fe/components/page-back/index.wxml @@ -0,0 +1,4 @@ + + + 返回 + diff --git a/pets-fe/components/page-back/index.wxss b/pets-fe/components/page-back/index.wxss new file mode 100644 index 0000000..32dd1c6 --- /dev/null +++ b/pets-fe/components/page-back/index.wxss @@ -0,0 +1,18 @@ +.page-back { + display: inline-flex; + align-items: center; + gap: 12rpx; + min-height: 58rpx; + margin-bottom: 22rpx; + color: #2a7357; + font-size: 26rpx; + font-weight: 700; +} +.page-back-arrow { + width: 17rpx; + height: 17rpx; + border-left: 4rpx solid currentColor; + border-bottom: 4rpx solid currentColor; + transform: rotate(45deg); + margin-left: 5rpx; +} diff --git a/pets-fe/components/tab-bar/index.js b/pets-fe/components/tab-bar/index.js index 972f7fa..ffbb88a 100644 --- a/pets-fe/components/tab-bar/index.js +++ b/pets-fe/components/tab-bar/index.js @@ -1,9 +1,9 @@ const tabs = [ - { path: "/pages/home/home", label: "首页", icon: "⌂" }, - { path: "/pages/meetups/meetups", label: "约遛", icon: "♡" }, - { path: "/pages/walk/walk", label: "遛狗", icon: "🐾" }, - { path: "/pages/tasks/tasks", label: "任务", icon: "☑" }, - { path: "/pages/pets/pets", label: "宠物", icon: "♙" }, + { path: "/pages/home/home", label: "首页", key: "home" }, + { path: "/pages/meetups/meetups", label: "约遛", key: "meetups" }, + { path: "/pages/walk/walk", label: "遛狗", key: "walk" }, + { path: "/pages/tasks/tasks", label: "任务", key: "tasks" }, + { path: "/pages/pets/pets", label: "宠物", key: "pets" }, ]; Component({ properties: { current: String }, diff --git a/pets-fe/components/tab-bar/index.wxml b/pets-fe/components/tab-bar/index.wxml index d60379b..3c6d56c 100644 --- a/pets-fe/components/tab-bar/index.wxml +++ b/pets-fe/components/tab-bar/index.wxml @@ -2,11 +2,35 @@ - {{item.icon}} - {{item.label}} + + + + + + + + + + + + + + + + + + + + + + + {{item.label}} + diff --git a/pets-fe/components/tab-bar/index.wxss b/pets-fe/components/tab-bar/index.wxss index 6dc91e2..d7e2337 100644 --- a/pets-fe/components/tab-bar/index.wxss +++ b/pets-fe/components/tab-bar/index.wxss @@ -1,47 +1,191 @@ .bar { position: fixed; - bottom: 0; - left: 0; - right: 0; - height: calc(124rpx + env(safe-area-inset-bottom)); - padding-bottom: env(safe-area-inset-bottom); - background: #fff; + left: 24rpx; + right: 24rpx; + bottom: calc(env(safe-area-inset-bottom) + 20rpx); + height: 112rpx; display: flex; - justify-content: space-around; - align-items: center; - box-shadow: 0 -8rpx 35rpx rgba(32, 68, 50, 0.06); + align-items: stretch; + background: rgba(255, 255, 255, 0.98); + border: 2rpx solid #e7eee8; + border-radius: 42rpx; + box-shadow: 0 12rpx 42rpx rgba(26, 74, 58, 0.13); z-index: 20; } .item { + position: relative; width: 20%; + min-height: 112rpx; display: flex; flex-direction: column; align-items: center; - gap: 4rpx; - color: #9eafa4; - font-size: 21rpx; - font-weight: 600; + justify-content: center; + color: #9aaa9e; } .item.active { - color: #174d40; + color: #194f42; } -.icon { - font-size: 46rpx; - height: 52rpx; - line-height: 52rpx; +.icon-wrap { + width: 58rpx; + height: 58rpx; + display: flex; + align-items: center; + justify-content: center; + border-radius: 22rpx; } -.walk .icon { - width: 82rpx; - height: 82rpx; - line-height: 82rpx; - text-align: center; - background: #174d40; - color: #fff; - border-radius: 27rpx; - box-shadow: 0 10rpx 23rpx rgba(24, 74, 59, 0.23); - margin-top: -30rpx; - font-size: 39rpx; +.active .icon-wrap { + background: #e7f3e9; + transform: translateY(-4rpx); } -.walk.active .icon { - background: #eaaa69; +.label { + font-size: 21rpx; + line-height: 27rpx; + font-weight: 600; +} +.active-dot { + position: absolute; + bottom: 4rpx; + width: 7rpx; + height: 7rpx; + border-radius: 50%; + background: #65b88f; +} +.home-icon { + position: relative; + width: 42rpx; + height: 42rpx; +} +.home-roof { + position: absolute; + top: 3rpx; + left: 10rpx; + width: 25rpx; + height: 25rpx; + border-left: 4rpx solid currentColor; + border-top: 4rpx solid currentColor; + border-radius: 3rpx; + transform: rotate(45deg); +} +.home-body { + position: absolute; + left: 6rpx; + right: 6rpx; + bottom: 1rpx; + height: 24rpx; + border-left: 4rpx solid currentColor; + border-right: 4rpx solid currentColor; + border-bottom: 4rpx solid currentColor; + border-radius: 0 0 5rpx 5rpx; +} +.home-door { + position: absolute; + left: 18rpx; + bottom: 2rpx; + width: 10rpx; + height: 15rpx; + border-left: 3rpx solid currentColor; + border-right: 3rpx solid currentColor; + border-top: 3rpx solid currentColor; + border-radius: 5rpx 5rpx 0 0; +} +.friends-icon { + position: relative; + width: 48rpx; + height: 45rpx; +} +.friend { + position: absolute; + bottom: 2rpx; + width: 25rpx; + height: 16rpx; + border: 4rpx solid currentColor; + border-radius: 18rpx 18rpx 5rpx 5rpx; +} +.friend::before { + content: ""; + position: absolute; + top: -25rpx; + left: 3rpx; + width: 13rpx; + height: 13rpx; + border: 4rpx solid currentColor; + border-radius: 50%; +} +.friend-left { left: 1rpx; } +.friend-right { right: 1rpx; background: #fff; } +.active .friend-right { background: #e7f3e9; } +.task-icon { + position: relative; + width: 35rpx; + height: 35rpx; + border: 4rpx solid currentColor; + border-radius: 9rpx; +} +.task-tick { + position: absolute; + left: 8rpx; + top: 6rpx; + width: 13rpx; + height: 18rpx; + border-right: 4rpx solid currentColor; + border-bottom: 4rpx solid currentColor; + transform: rotate(45deg); +} +.pet-icon { + width: 46rpx; + height: 46rpx; + border-radius: 50%; + opacity: 0.55; +} +.active .pet-icon { opacity: 1; } +.walk-bubble { + position: absolute; + top: -43rpx; + width: 104rpx; + height: 104rpx; + display: flex; + align-items: center; + justify-content: center; + border: 8rpx solid #f6f9f6; + border-radius: 38rpx; + background: linear-gradient(145deg, #f8bd8e, #e38e69); + box-shadow: 0 10rpx 24rpx rgba(178, 105, 72, 0.26); + transform: rotate(-8deg); +} +.walk.active .walk-bubble { + background: linear-gradient(145deg, #276a55, #174d40); + box-shadow: 0 10rpx 24rpx rgba(24, 74, 59, 0.25); +} +.walk .label { + position: absolute; + bottom: 13rpx; + color: #aa7356; +} +.walk.active .label { color: #174d40; } +.paw { + position: relative; + width: 62rpx; + height: 62rpx; + transform: rotate(8deg); +} +.toe, +.pad { + position: absolute; + background: #fff; +} +.toe { + width: 11rpx; + height: 16rpx; + border-radius: 50%; +} +.toe-one { left: 3rpx; top: 19rpx; transform: rotate(-28deg); } +.toe-two { left: 17rpx; top: 5rpx; transform: rotate(-12deg); } +.toe-three { right: 17rpx; top: 5rpx; transform: rotate(12deg); } +.toe-four { right: 3rpx; top: 19rpx; transform: rotate(28deg); } +.pad { + left: 15rpx; + top: 30rpx; + width: 32rpx; + height: 26rpx; + border-radius: 50% 50% 45% 45%; } diff --git a/pets-fe/pages/meetup-edit/meetup-edit.json b/pets-fe/pages/meetup-edit/meetup-edit.json index f03ce6b..b793a86 100644 --- a/pets-fe/pages/meetup-edit/meetup-edit.json +++ b/pets-fe/pages/meetup-edit/meetup-edit.json @@ -1 +1 @@ -{ "usingComponents": { "pet-picker": "/components/pet-picker/index" } } +{ "usingComponents": { "pet-picker": "/components/pet-picker/index", "page-back": "/components/page-back/index" } } diff --git a/pets-fe/pages/meetup-edit/meetup-edit.wxml b/pets-fe/pages/meetup-edit/meetup-edit.wxml index c3dad85..1d50ad5 100644 --- a/pets-fe/pages/meetup-edit/meetup-edit.wxml +++ b/pets-fe/pages/meetup-edit/meetup-edit.wxml @@ -1,4 +1,5 @@ + HOST A WALK 发起约遛 🌿 diff --git a/pets-fe/pages/pet-edit/pet-edit.json b/pets-fe/pages/pet-edit/pet-edit.json index 0967ef4..c9f38d8 100644 --- a/pets-fe/pages/pet-edit/pet-edit.json +++ b/pets-fe/pages/pet-edit/pet-edit.json @@ -1 +1 @@ -{} +{ "usingComponents": { "page-back": "/components/page-back/index" } } diff --git a/pets-fe/pages/pet-edit/pet-edit.wxml b/pets-fe/pages/pet-edit/pet-edit.wxml index 502fc78..59562e0 100644 --- a/pets-fe/pages/pet-edit/pet-edit.wxml +++ b/pets-fe/pages/pet-edit/pet-edit.wxml @@ -1,4 +1,5 @@ + PET PROFILE {{id?'编辑档案':'认识新朋友'}} 🐶 diff --git a/pets-fe/pages/share/share.json b/pets-fe/pages/share/share.json index 0967ef4..c9f38d8 100644 --- a/pets-fe/pages/share/share.json +++ b/pets-fe/pages/share/share.json @@ -1 +1 @@ -{} +{ "usingComponents": { "page-back": "/components/page-back/index" } } diff --git a/pets-fe/pages/share/share.wxml b/pets-fe/pages/share/share.wxml index a7c26ec..091a66d 100644 --- a/pets-fe/pages/share/share.wxml +++ b/pets-fe/pages/share/share.wxml @@ -1,4 +1,5 @@ + 肉垫计划 · 位置分享 找到小短腿的脚印 🐾 + ‹ 全部记录 - ‹ 返回 OUR LITTLE FOOTPRINTS {{selected?'这次的脚印':'遛狗记录'}} 🐾