Blizzard/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add AMap location and weather header with warm mini program theme
ci-cd / verify (push) Successful in 1m54s
Details
ci-cd / deploy (push) Skipped
Details

Browse Source
This commit is contained in:
Blizzard
2026-10-04 11:03:34 +08:00
parent c2b51f96e0
commit 7fc50f9212
37 changed files with 568 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pets-fe/components/app-icon/index.js
+1 -1
View File
@@ -2,6 +2,6 @@ Component({
properties: {
kind: { type: String, value: "paw" },
size: { type: Number, value: 48 },
color: { type: String, value: "#398668" },
color: { type: String, value: "#b95738" },
},
});
pets-fe/components/app-icon/index.wxml
+4
View File
@@ -1,6 +1,10 @@
<view class="app-icon-icon" style="width: {{size}}rpx; height: {{size}}rpx; color: {{color}}">
<view wx:if="{{kind==='water'}}" class="app-icon-drop"></view>
<view wx:elif="{{kind==='food'}}" class="app-icon-bowl"><view class="app-icon-bowl-rim"></view></view>
<view wx:elif="{{kind==='pet'}}" class="app-icon-pet">
<view class="app-icon-ear app-icon-ear-left"></view><view class="app-icon-ear app-icon-ear-right"></view>
<view class="app-icon-face"><view class="app-icon-eye app-icon-eye-left"></view><view class="app-icon-eye app-icon-eye-right"></view><view class="app-icon-nose"></view></view>
</view>
<view wx:else class="app-icon-paw">
<view class="app-icon-toe app-icon-one"></view><view class="app-icon-toe app-icon-two"></view>
<view class="app-icon-toe app-icon-three"></view><view class="app-icon-toe app-icon-four"></view>
pets-fe/components/app-icon/index.wxss
+9
View File
@@ -10,3 +10,12 @@
.app-icon-three { right: 24%; top: 3%; transform: rotate(12deg); }
.app-icon-four { right: 0; top: 26%; transform: rotate(28deg); }
.app-icon-pad { left: 24%; top: 48%; width: 52%; height: 42%; border-radius: 50% 50% 45% 45%; }
.app-icon-pet { position: relative; width: 85%; height: 85%; }
.app-icon-ear { position: absolute; top: 22%; width: 27%; height: 52%; border: 3rpx solid currentColor; border-radius: 55% 40% 70% 70%; }
.app-icon-ear-left { left: -3%; transform: rotate(25deg); }
.app-icon-ear-right { right: -3%; transform: rotate(-25deg); }
.app-icon-face { position: absolute; bottom: 0; left: 12%; width: 76%; height: 68%; border: 3rpx solid currentColor; border-radius: 42% 42% 48% 48%; background: #fff; }
.app-icon-eye { position: absolute; top: 29%; width: 9%; height: 14%; border-radius: 50%; background: currentColor; }
.app-icon-eye-left { left: 23%; }
.app-icon-eye-right { right: 23%; }
.app-icon-nose { position: absolute; left: 40%; bottom: 22%; width: 20%; height: 14%; border-radius: 40% 40% 60% 60%; background: currentColor; }
pets-fe/components/page-layout/index.js
+5
View File
@@ -3,6 +3,8 @@ const { navigationGeometry } = require("../../utils/layout");
Component({
properties: {
title: String,
subtitle: String,
location: { type: Boolean, value: false },
back: { type: Boolean, value: false },
},
data: navigationGeometry(),
@@ -17,6 +19,9 @@ Component({
},
},
methods: {
locate() {
this.triggerEvent("locationtap");
},
updateLayout() {
const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
let menu = {};
pets-fe/components/page-layout/index.wxml
+5 -1
View File
@@ -1,9 +1,13 @@
<view class="navigation" style="height: {{headerHeight}}px">
<view class="navigation-row" style="top: {{top}}px; height: {{rowHeight}}px; width: {{titleWidth}}px">
<view wx:if="{{location}}" class="local-header" bindtap="locate" aria-role="button" aria-label="更新当前位置和天气">
<view class="local-title"><view class="location-pin"></view><text>{{title}}</text><view class="location-chevron"></view></view>
<view class="local-meta"><text>{{subtitle}}</text></view>
</view>
<view wx:if="{{back}}" class="back" bindtap="goBack" aria-role="button" aria-label="返回">
<view class="back-arrow"></view>
</view>
<text class="navigation-title">{{title}}</text>
<text wx:if="{{!location}}" class="navigation-title">{{title}}</text>
</view>
</view>
<scroll-view class="content" style="top: {{headerHeight}}px; height: {{scrollHeight}}px" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
pets-fe/components/page-layout/index.wxss
+59 -4
View File
@@ -4,7 +4,7 @@
left: 0;
right: 0;
z-index: 25;
background: #f6f9f6;
background: #fff9f3;
}
.navigation-row {
position: absolute;
@@ -19,11 +19,66 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #194f42;
color: #604a40;
font-size: 19px;
font-weight: 600;
letter-spacing: 0.5px;
}
.local-header {
width: 100%;
min-width: 0;
}
.local-title {
height: 19px;
display: flex;
align-items: center;
gap: 6px;
color: #604a40;
font-size: 16px;
line-height: 19px;
font-weight: 600;
}
.local-title text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location-pin {
position: relative;
width: 9px;
height: 9px;
flex-shrink: 0;
border: 1.5px solid #b95738;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.location-pin::after {
content: "";
position: absolute;
width: 2px;
height: 2px;
left: 3.5px;
top: 3.5px;
border-radius: 50%;
background: #b95738;
}
.location-chevron {
width: 4px;
height: 4px;
flex-shrink: 0;
border-right: 1px solid #886c5f;
border-bottom: 1px solid #886c5f;
transform: rotate(45deg);
}
.local-meta {
margin-top: 2px;
color: #886c5f;
font-size: 10px;
line-height: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.back {
width: 28px;
height: 36px;
@@ -35,8 +90,8 @@
.back-arrow {
width: 10px;
height: 10px;
border-left: 2px solid #194f42;
border-bottom: 2px solid #194f42;
border-left: 2px solid #604a40;
border-bottom: 2px solid #604a40;
transform: rotate(45deg);
}
.content {
pets-fe/components/pet-picker/index.wxss
+6 -6
View File
@@ -8,16 +8,16 @@
align-items: center;
gap: 8rpx;
background: white;
border: 2rpx solid #e0eae2;
color: #527164;
border: 2rpx solid #ece2d8;
color: #886c5f;
padding: 11rpx 18rpx;
border-radius: 99rpx;
font-size: 24rpx;
}
.chip.chosen {
background: #dff0e1;
border-color: #55a273;
color: #145441;
background: #fff0e2;
border-color: #b95738;
color: #b95738;
font-weight: 700;
}
.chip image {
@@ -31,5 +31,5 @@
}
.select-all {
border-style: dashed;
color: #2c8663;
color: #b95738;
}
pets-fe/components/tab-bar/index.json
+1 -1
View File
@@ -1 +1 @@
{ "component": true }
{ "component": true, "usingComponents": { "app-icon": "/components/app-icon/index" } }
pets-fe/components/tab-bar/index.wxml
+1 -1
View File
@@ -28,7 +28,7 @@
<view class="friend friend-right"></view>
</view>
<view wx:elif="{{item.key==='tasks'}}" class="task-icon"><view class="task-tick"></view></view>
<image wx:else class="pet-icon" src="/assets/logo-corgi-v2.png" mode="aspectFill" />
<view wx:else class="pet-icon"><app-icon kind="pet" size="44" color="{{current===item.path?'#b95738':'#9d8779'}}" /></view>
</view>
<text class="label">{{item.label}}</text>
<view wx:if="{{current===item.path && item.key!=='walk'}}" class="active-dot"></view>
pets-fe/components/tab-bar/index.wxss
+11 -12
View File
@@ -7,9 +7,9 @@
display: flex;
align-items: stretch;
background: rgba(255, 255, 255, 0.98);
border: 2rpx solid #e7eee8;
border: 2rpx solid #ece2d8;
border-radius: 42rpx;
box-shadow: 0 12rpx 42rpx rgba(26, 74, 58, 0.13);
box-shadow: 0 12rpx 42rpx rgba(123, 84, 58, 0.12);
z-index: 20;
}
.item {
@@ -20,10 +20,10 @@
flex-direction: column;
align-items: center;
justify-content: center;
color: #9aaa9e;
color: #9d8779;
}
.item.active {
color: #194f42;
color: #b95738;
}
.icon-wrap {
width: 58rpx;
@@ -34,7 +34,7 @@
border-radius: 22rpx;
}
.active .icon-wrap {
background: #e7f3e9;
background: #fff0e2;
transform: translateY(-4rpx);
}
.label {
@@ -48,7 +48,7 @@
width: 7rpx;
height: 7rpx;
border-radius: 50%;
background: #65b88f;
background: #df936a;
}
.home-icon {
position: relative;
@@ -113,7 +113,7 @@
}
.friend-left { left: 1rpx; }
.friend-right { right: 1rpx; background: #fff; }
.active .friend-right { background: #e7f3e9; }
.active .friend-right { background: #fff0e2; }
.task-icon {
position: relative;
width: 35rpx;
@@ -135,7 +135,6 @@
width: 46rpx;
height: 46rpx;
border-radius: 50%;
opacity: 0.55;
}
.active .pet-icon { opacity: 1; }
.walk-bubble {
@@ -146,22 +145,22 @@
display: flex;
align-items: center;
justify-content: center;
border: 8rpx solid #f6f9f6;
border: 8rpx solid #fff9f3;
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);
background: linear-gradient(145deg, #df8b61, #b95738);
box-shadow: 0 10rpx 24rpx rgba(185, 87, 56, 0.22);
}
.walk .label {
position: absolute;
bottom: 13rpx;
color: #aa7356;
}
.walk.active .label { color: #174d40; }
.walk.active .label { color: #b95738; }
.paw {
position: relative;
width: 62rpx;