Add AMap location and weather header with warm mini program theme
This commit is contained in:
+2
-2
@@ -13,7 +13,7 @@
|
||||
"window": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#f6f9f6",
|
||||
"backgroundColor": "#fff9f3",
|
||||
"backgroundTextStyle": "dark"
|
||||
},
|
||||
"usingComponents": {
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "遛狗时记录轨迹，并在你主动开启分享后展示实时位置"
|
||||
"desc": "首页显示所在城市与天气，遛狗时记录轨迹，并在你主动开启分享后展示实时位置"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": [
|
||||
|
||||
+12
-12
@@ -1,8 +1,8 @@
|
||||
page {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #f6f9f6;
|
||||
color: #173e36;
|
||||
background: #fff9f3;
|
||||
color: #604a40;
|
||||
font-family: ui-rounded, "Hiragino Maru Gothic ProN", "PingFang SC", sans-serif;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
@@ -32,7 +32,7 @@ button::after {
|
||||
padding: 16rpx 32rpx calc(170rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.eyebrow {
|
||||
color: #8fa39b;
|
||||
color: #886c5f;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
@@ -43,17 +43,17 @@ button::after {
|
||||
margin: 38rpx 0 20rpx;
|
||||
}
|
||||
.muted {
|
||||
color: #8b9f96;
|
||||
color: #886c5f;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 34rpx;
|
||||
box-shadow: 0 15rpx 45rpx rgba(30, 70, 55, 0.05);
|
||||
box-shadow: 0 15rpx 45rpx rgba(123, 84, 58, 0.06);
|
||||
padding: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.primary {
|
||||
background: #194f42;
|
||||
background: #b95738;
|
||||
color: white;
|
||||
border-radius: 23rpx;
|
||||
font-size: 28rpx;
|
||||
@@ -62,8 +62,8 @@ button::after {
|
||||
line-height: 1.3;
|
||||
}
|
||||
.secondary {
|
||||
background: #e7f0e7;
|
||||
color: #28674e;
|
||||
background: #fff0e2;
|
||||
color: #b95738;
|
||||
border-radius: 23rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: 600;
|
||||
@@ -78,14 +78,14 @@ button::after {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 99rpx;
|
||||
background: #e9f3e8;
|
||||
color: #36805c;
|
||||
background: #fff0e2;
|
||||
color: #b95738;
|
||||
padding: 8rpx 18rpx;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #9daf9f;
|
||||
color: #886c5f;
|
||||
padding: 64rpx 24rpx;
|
||||
}
|
||||
.field {
|
||||
@@ -93,7 +93,7 @@ button::after {
|
||||
}
|
||||
.field-label {
|
||||
font-size: 24rpx;
|
||||
color: #718b7e;
|
||||
color: #886c5f;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.field input,
|
||||
|
||||
@@ -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" },
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 = {};
|
||||
|
||||
@@ -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}}">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{ "component": true }
|
||||
{ "component": true, "usingComponents": { "app-icon": "/components/app-icon/index" } }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
const { secure, toast } = require("../../utils/api");
|
||||
const { localDate } = require("../../utils/date");
|
||||
function dateLabel() {
|
||||
const now = new Date();
|
||||
return `${now.getMonth() + 1}月${now.getDate()}日 周${"日一二三四五六"[now.getDay()]}`;
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
locationName: "当前位置",
|
||||
headerSubtitle: dateLabel() + " · 轻触获取天气",
|
||||
pets: [],
|
||||
selected: [],
|
||||
tasks: [],
|
||||
@@ -11,6 +17,49 @@ Page({
|
||||
},
|
||||
onShow() {
|
||||
this.load();
|
||||
this.updateEnvironmentLabel();
|
||||
if (!this.environmentAt || Date.now() - this.environmentAt > 15 * 60 * 1000) {
|
||||
this.refreshEnvironment();
|
||||
}
|
||||
},
|
||||
updateEnvironmentLabel() {
|
||||
this.setData({ headerSubtitle: dateLabel() + " · " + (this.weatherLabel || "轻触获取天气") });
|
||||
},
|
||||
async refreshEnvironment(event) {
|
||||
if (this.environmentBusy) return;
|
||||
this.environmentBusy = true;
|
||||
const tapped = !!event;
|
||||
let positioned = false;
|
||||
try {
|
||||
const settings = await new Promise((resolve, reject) => wx.getSetting({ success: resolve, fail: reject }));
|
||||
if (settings.authSetting["scope.userLocation"] === false) {
|
||||
if (!tapped) throw new Error("location-denied");
|
||||
const enabled = await new Promise((resolve, reject) => wx.openSetting({ success: resolve, fail: reject }));
|
||||
if (!enabled.authSetting["scope.userLocation"]) throw new Error("location-denied");
|
||||
}
|
||||
this.weatherLabel = "正在获取天气";
|
||||
this.updateEnvironmentLabel();
|
||||
const point = await new Promise((resolve, reject) => wx.getLocation({
|
||||
type: "gcj02",
|
||||
success: resolve,
|
||||
fail: reject,
|
||||
}));
|
||||
positioned = true;
|
||||
const result = await secure("/environment", "GET", { latitude: point.latitude, longitude: point.longitude });
|
||||
this.setData({ locationName: result.location_name });
|
||||
this.weatherLabel = result.weather
|
||||
? `${result.weather.description} ${result.weather.temperature}°C`
|
||||
: "天气暂不可用";
|
||||
this.environmentAt = result.weather ? Date.now() : 0;
|
||||
} catch (error) {
|
||||
const denied = /denied|deny|auth/.test(error.errMsg || error.message || "");
|
||||
this.setData({ locationName: positioned ? "位置暂不可用" : denied ? "开启定位" : "定位暂不可用" });
|
||||
this.weatherLabel = denied ? "轻触开启定位" : "轻触重试";
|
||||
if (tapped && !denied) wx.showToast({ title: positioned ? "位置和天气获取失败，请重试" : "定位失败，请重试", icon: "none" });
|
||||
} finally {
|
||||
this.environmentBusy = false;
|
||||
this.updateEnvironmentLabel();
|
||||
}
|
||||
},
|
||||
async load() {
|
||||
try {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<page-layout id="page-layout" title="早安，{{name}}">
|
||||
<page-layout id="page-layout" title="{{locationName}}" subtitle="{{headerSubtitle}}" location="{{true}}" bind:locationtap="refreshEnvironment">
|
||||
<view class="screen">
|
||||
<view class="hero">
|
||||
<view class="hero-copy">
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.hero {
|
||||
min-height: 330rpx;
|
||||
background: #194f42;
|
||||
background: linear-gradient(135deg, #fff0dd, #ffdec7);
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 35rpx;
|
||||
color: white;
|
||||
color: #694c3f;
|
||||
}
|
||||
.hero-copy {
|
||||
display: flex;
|
||||
@@ -15,7 +15,7 @@
|
||||
min-width: 0;
|
||||
}
|
||||
.hero-small {
|
||||
color: #abd9b8;
|
||||
color: #7c5b46;
|
||||
font-size: 23rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -26,11 +26,11 @@
|
||||
}
|
||||
.hero-meta {
|
||||
font-size: 23rpx;
|
||||
color: #d9eadd;
|
||||
color: #7c5b46;
|
||||
}
|
||||
.hero-caption {
|
||||
font-size: 20rpx;
|
||||
color: #b5e2be;
|
||||
color: #7c5b46;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
.hero image {
|
||||
@@ -43,7 +43,7 @@
|
||||
}
|
||||
.link {
|
||||
font-size: 24rpx;
|
||||
color: #398668;
|
||||
color: #b95738;
|
||||
font-weight: 600;
|
||||
}
|
||||
.walk-card {
|
||||
@@ -58,7 +58,7 @@
|
||||
width: 145rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 26rpx;
|
||||
background: #dfeedd;
|
||||
background: #fff0e2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 72rpx;
|
||||
@@ -73,7 +73,7 @@
|
||||
}
|
||||
.picker-label {
|
||||
font-size: 23rpx;
|
||||
color: #7d9989;
|
||||
color: #886c5f;
|
||||
margin: 27rpx 0 16rpx;
|
||||
}
|
||||
.start {
|
||||
@@ -95,11 +95,11 @@
|
||||
background: #f7eadc;
|
||||
}
|
||||
.stats > view:nth-child(3) {
|
||||
background: #e8efea;
|
||||
background: #edf2fb;
|
||||
}
|
||||
.stats text {
|
||||
display: block;
|
||||
color: #8da49a;
|
||||
color: #886c5f;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.stats strong {
|
||||
@@ -109,7 +109,7 @@
|
||||
}
|
||||
.stats small {
|
||||
font-size: 22rpx;
|
||||
color: #94a69d;
|
||||
color: #886c5f;
|
||||
}
|
||||
.tasks {
|
||||
padding: 12rpx 25rpx;
|
||||
@@ -119,7 +119,7 @@
|
||||
align-items: center;
|
||||
gap: 17rpx;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid #edf1ed;
|
||||
border-bottom: 1rpx solid #ece2d8;
|
||||
}
|
||||
.task:last-child {
|
||||
border: 0;
|
||||
@@ -127,21 +127,21 @@
|
||||
.check {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid #cfdfd2;
|
||||
border: 3rpx solid #ece2d8;
|
||||
border-radius: 13rpx;
|
||||
text-align: center;
|
||||
line-height: 37rpx;
|
||||
color: white;
|
||||
}
|
||||
.check.done {
|
||||
background: #3b9164;
|
||||
border-color: #3b9164;
|
||||
background: #b95738;
|
||||
border-color: #b95738;
|
||||
}
|
||||
.task-icon {
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f0f5ee;
|
||||
background: #fff0e2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34rpx;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.banner {
|
||||
background: #dfeee2;
|
||||
background: #edf2fb;
|
||||
border-radius: 34rpx;
|
||||
min-height: 245rpx;
|
||||
padding: 30rpx;
|
||||
@@ -16,7 +16,7 @@
|
||||
display: block;
|
||||
}
|
||||
.banner-copy text {
|
||||
color: #549375;
|
||||
color: #576c88;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.banner-title {
|
||||
@@ -35,7 +35,7 @@
|
||||
}
|
||||
.add {
|
||||
font-size: 24rpx;
|
||||
color: #328965;
|
||||
color: #b95738;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meetup strong {
|
||||
@@ -44,30 +44,30 @@
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
.badge {
|
||||
background: #e8f4ea;
|
||||
color: #429369;
|
||||
background: #edf2fb;
|
||||
color: #b95738;
|
||||
border-radius: 99rpx;
|
||||
padding: 8rpx 15rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 39rpx;
|
||||
color: #a1b2a8;
|
||||
color: #9d8779;
|
||||
}
|
||||
.meta {
|
||||
font-size: 24rpx;
|
||||
color: #748c7d;
|
||||
color: #886c5f;
|
||||
margin-top: 9rpx;
|
||||
}
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #9aaa9f;
|
||||
color: #886c5f;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #102a24a0;
|
||||
background: #604a40a0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -86,7 +86,7 @@
|
||||
}
|
||||
.detail {
|
||||
font-size: 25rpx;
|
||||
color: #61816e;
|
||||
color: #886c5f;
|
||||
line-height: 2;
|
||||
margin: 25rpx 0;
|
||||
}
|
||||
|
||||
@@ -22,11 +22,11 @@
|
||||
<view class="field-label">性别</view>
|
||||
<radio-group bindchange="gender">
|
||||
<label>
|
||||
<radio value="male" checked="{{gender==='male'}}" color="#194f42" />
|
||||
<radio value="male" checked="{{gender==='male'}}" color="#b95738" />
|
||||
男孩
|
||||
</label>
|
||||
<label>
|
||||
<radio value="female" checked="{{gender==='female'}}" color="#194f42" />
|
||||
<radio value="female" checked="{{gender==='female'}}" color="#b95738" />
|
||||
女孩
|
||||
</label>
|
||||
</radio-group>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #194f42b5;
|
||||
background: #b95738b5;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.family {
|
||||
background: #194f42;
|
||||
background: #f0e8f7;
|
||||
border-radius: 35rpx;
|
||||
color: white;
|
||||
color: #746086;
|
||||
min-height: 220rpx;
|
||||
padding: 35rpx;
|
||||
display: flex;
|
||||
@@ -17,7 +17,7 @@
|
||||
display: block;
|
||||
}
|
||||
.family text {
|
||||
color: #a4d6b8;
|
||||
color: #765984;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.family strong {
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
.add {
|
||||
font-weight: 600;
|
||||
color: #368764;
|
||||
color: #b95738;
|
||||
}
|
||||
.pet {
|
||||
display: flex;
|
||||
@@ -64,11 +64,11 @@
|
||||
}
|
||||
.pet-info text {
|
||||
font-size: 23rpx;
|
||||
color: #8a9c90;
|
||||
color: #886c5f;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 42rpx;
|
||||
color: #97a99d;
|
||||
color: #886c5f;
|
||||
}
|
||||
.add-button {
|
||||
margin-top: 25rpx;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
page {
|
||||
background: #f6f9f6;
|
||||
background: #fff9f3;
|
||||
}
|
||||
.card {
|
||||
margin-top: 20rpx;
|
||||
|
||||
@@ -78,14 +78,14 @@
|
||||
<view class="field-label">类型</view>
|
||||
<radio-group bindchange="categoryChange">
|
||||
<label>
|
||||
<radio value="food" checked="{{category==='food'}}" color="#194f42" />
|
||||
<radio value="food" checked="{{category==='food'}}" color="#b95738" />
|
||||
喂食
|
||||
</label>
|
||||
<label>
|
||||
<radio
|
||||
value="water"
|
||||
checked="{{category==='water'}}"
|
||||
color="#194f42"
|
||||
color="#b95738"
|
||||
/>
|
||||
喝水
|
||||
</label>
|
||||
@@ -93,7 +93,7 @@
|
||||
<radio
|
||||
value="other"
|
||||
checked="{{category==='other'}}"
|
||||
color="#194f42"
|
||||
color="#b95738"
|
||||
/>
|
||||
其他
|
||||
</label>
|
||||
@@ -112,7 +112,7 @@
|
||||
<radio
|
||||
value="daily"
|
||||
checked="{{repeat_rule==='daily'}}"
|
||||
color="#194f42"
|
||||
color="#b95738"
|
||||
/>
|
||||
每天
|
||||
</label>
|
||||
@@ -120,7 +120,7 @@
|
||||
<radio
|
||||
value="weekdays"
|
||||
checked="{{repeat_rule==='weekdays'}}"
|
||||
color="#194f42"
|
||||
color="#b95738"
|
||||
/>
|
||||
工作日
|
||||
</label>
|
||||
@@ -128,7 +128,7 @@
|
||||
<radio
|
||||
value="weekends"
|
||||
checked="{{repeat_rule==='weekends'}}"
|
||||
color="#194f42"
|
||||
color="#b95738"
|
||||
/>
|
||||
周末
|
||||
</label>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.summary {
|
||||
background: #194f42;
|
||||
color: white;
|
||||
background: #e8f0fa;
|
||||
color: #526986;
|
||||
border-radius: 34rpx;
|
||||
padding: 34rpx;
|
||||
}
|
||||
.summary > view:first-child {
|
||||
font-size: 24rpx;
|
||||
color: #bbe3c4;
|
||||
color: #576c88;
|
||||
}
|
||||
.summary strong {
|
||||
display: block;
|
||||
@@ -15,28 +15,28 @@
|
||||
}
|
||||
.summary strong text {
|
||||
font-size: 30rpx;
|
||||
color: #b4d8be;
|
||||
color: #576c88;
|
||||
}
|
||||
.progress {
|
||||
height: 13rpx;
|
||||
background: #3f7566;
|
||||
background: #dbe4f2;
|
||||
border-radius: 99rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress view {
|
||||
height: 100%;
|
||||
background: #e9ad6a;
|
||||
background: #e49b75;
|
||||
border-radius: 99rpx;
|
||||
}
|
||||
.add {
|
||||
color: #2b8a63;
|
||||
color: #b95738;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.date-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #327c5e;
|
||||
color: #b95738;
|
||||
font-size: 23rpx;
|
||||
margin: 0 0 22rpx;
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid #eef2ee;
|
||||
border-bottom: 1rpx solid #ece2d8;
|
||||
}
|
||||
.task:last-child {
|
||||
border: 0;
|
||||
@@ -56,20 +56,20 @@
|
||||
.check {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
border: 3rpx solid #cbdcd1;
|
||||
border: 3rpx solid #ece2d8;
|
||||
border-radius: 13rpx;
|
||||
text-align: center;
|
||||
line-height: 37rpx;
|
||||
color: white;
|
||||
}
|
||||
.check.done {
|
||||
background: #389867;
|
||||
border-color: #389867;
|
||||
background: #b95738;
|
||||
border-color: #b95738;
|
||||
}
|
||||
.icon {
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
background: #eff5ee;
|
||||
background: #fff0e2;
|
||||
border-radius: 18rpx;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -84,24 +84,24 @@
|
||||
}
|
||||
.info text {
|
||||
font-size: 21rpx;
|
||||
color: #92a498;
|
||||
color: #886c5f;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.remove {
|
||||
font-size: 36rpx;
|
||||
color: #c4d0c7;
|
||||
color: #9d8779;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #102a24a0;
|
||||
background: #604a40a0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.sheet {
|
||||
width: 100%;
|
||||
background: #f6f9f6;
|
||||
background: #fff9f3;
|
||||
border-radius: 35rpx 35rpx 0 0;
|
||||
padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 30rpx);
|
||||
max-height: 85vh;
|
||||
|
||||
@@ -23,7 +23,7 @@ Page({
|
||||
petNames: (walk.pet_ids || []).map((id) => names[id] || "已归档宠物").join("、"),
|
||||
polyline: walk.points && walk.points.length > 1 ? [{
|
||||
points: walk.points.map((point) => ({ latitude: point.latitude, longitude: point.longitude })),
|
||||
color: "#268e6a",
|
||||
color: "#b95738",
|
||||
width: 5,
|
||||
}] : [],
|
||||
lastPoint: walk.points && walk.points.length ? walk.points[walk.points.length - 1] : null,
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.back { display: block; color: #327c5e; margin-bottom: 34rpx; font-size: 26rpx; }
|
||||
.back { display: block; color: #b95738; margin-bottom: 34rpx; font-size: 26rpx; }
|
||||
.record strong, .detail strong { font-size: 28rpx; }
|
||||
.record .row text { font-size: 38rpx; color: #8da89a; }
|
||||
.pet-names, .detail > text { display: block; color: #547b65; margin-top: 16rpx; }
|
||||
.record-stats { color: #91a59a; font-size: 24rpx; margin-top: 12rpx; }
|
||||
.metrics { display: flex; gap: 28rpx; margin-top: 28rpx; border-top: 1rpx solid #e8efe9; padding-top: 22rpx; }
|
||||
.record .row text { font-size: 38rpx; color: #886c5f; }
|
||||
.pet-names, .detail > text { display: block; color: #886c5f; margin-top: 16rpx; }
|
||||
.record-stats { color: #886c5f; font-size: 24rpx; margin-top: 12rpx; }
|
||||
.metrics { display: flex; gap: 28rpx; margin-top: 28rpx; border-top: 1rpx solid #ece2d8; padding-top: 22rpx; }
|
||||
.metrics view { flex: 1; }
|
||||
.metrics strong, .metrics text { display: block; }
|
||||
.metrics text { color: #8da89a; font-size: 22rpx; margin-top: 7rpx; }
|
||||
.metrics text { color: #886c5f; font-size: 22rpx; margin-top: 7rpx; }
|
||||
.route-map { width: 100%; height: 600rpx; border-radius: 30rpx; overflow: hidden; }
|
||||
|
||||
@@ -131,7 +131,7 @@ Page({
|
||||
walk,
|
||||
points: pts,
|
||||
polyline:
|
||||
pts.length > 1 ? [{ points: pts, color: "#268e6a", width: 5 }] : [],
|
||||
pts.length > 1 ? [{ points: pts, color: "#b95738", width: 5 }] : [],
|
||||
latitude: last ? last.latitude : this.data.latitude,
|
||||
longitude: last ? last.longitude : this.data.longitude,
|
||||
distance: ((walk.distance_meters || 0) / 1000).toFixed(2),
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<strong>分享实时位置</strong>
|
||||
<text>打开后可分享给朋友，结束遛狗会自动关闭</text>
|
||||
</view>
|
||||
<switch color="#278465" checked="{{share}}" bindchange="shareChange" />
|
||||
<switch color="#b95738" checked="{{share}}" bindchange="shareChange" />
|
||||
</view>
|
||||
<button wx:if="{{share}}" class="share-button" open-type="share">
|
||||
发给朋友看位置 ↗
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
top: 25rpx;
|
||||
left: 30rpx;
|
||||
background: white;
|
||||
color: #288363;
|
||||
color: #b95738;
|
||||
padding: 12rpx 21rpx;
|
||||
border-radius: 99rpx;
|
||||
font-size: 23rpx;
|
||||
box-shadow: 0 8rpx 25rpx #173e3622;
|
||||
box-shadow: 0 8rpx 25rpx #604a4022;
|
||||
}
|
||||
.session {
|
||||
margin: -30rpx 25rpx 0;
|
||||
@@ -31,12 +31,12 @@
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid #edf1eb;
|
||||
border-bottom: 2rpx solid #ece2d8;
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
.stats > view {
|
||||
flex: 1;
|
||||
border-right: 2rpx solid #e9efea;
|
||||
border-right: 2rpx solid #ece2d8;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
.stats > view:first-child {
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
.stats text {
|
||||
font-size: 22rpx;
|
||||
color: #99aa9d;
|
||||
color: #886c5f;
|
||||
}
|
||||
.picker-title {
|
||||
font-weight: 600;
|
||||
@@ -80,21 +80,21 @@
|
||||
}
|
||||
.share-row text {
|
||||
font-size: 21rpx;
|
||||
color: #90a199;
|
||||
color: #886c5f;
|
||||
max-width: 450rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.share-button {
|
||||
margin-top: 20rpx;
|
||||
background: #e6f1e8;
|
||||
color: #267d59;
|
||||
background: #fff0e2;
|
||||
color: #b95738;
|
||||
border-radius: 20rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.privacy {
|
||||
font-size: 22rpx;
|
||||
color: #739180;
|
||||
background: #e9f3e7;
|
||||
color: #886c5f;
|
||||
background: #edf2fb;
|
||||
border-radius: 22rpx;
|
||||
padding: 22rpx;
|
||||
margin: 20rpx 25rpx;
|
||||
@@ -106,8 +106,8 @@
|
||||
}
|
||||
.records-button {
|
||||
margin: 28rpx 25rpx 0;
|
||||
color: #2d8261;
|
||||
background: #e6f1e8;
|
||||
color: #b95738;
|
||||
background: #fff0e2;
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user