yvan
/
pet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
yvan 2025-08-23 17:09:34 +08:00
parent 6678bce527
commit 1dde942ff1
5 changed files with 60 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/adoption/adoption.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="adoption-container page-container-with-bg"> <view class="adoption-container page-container-unified">
<!-- 头部搜索栏 --> <!-- 头部搜索栏 -->
<view class="header-section"> <view class="header-section">
<view class="search-wrapper"> <view class="search-wrapper">
@ -1192,7 +1192,7 @@ export default {
/* 头部搜索栏 */ /* 头部搜索栏 */
.header-section { .header-section {
background: transparent; background: transparent;
padding: 24rpx 20rpx; padding: 0 0 24rpx 0;
.search-wrapper { .search-wrapper {
display: flex; display: flex;
@ -1287,7 +1287,7 @@ export default {
.filter-panel { .filter-panel {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
padding: 24rpx 20rpx; padding: 24rpx 0;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -1514,7 +1514,7 @@ export default {
/* 宠物列表区域 */ /* 宠物列表区域 */
.pets-scroll { .pets-scroll {
height: calc(100vh - 100rpx); height: calc(100vh - 100rpx);
padding: 0 20rpx; padding: 0;
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

26
pages/assistant/assistant.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="assistant-container page-container-with-bg"> <view class="assistant-container page-container-unified">
<!-- 宠物助手信息卡片 --> <!-- 宠物助手信息卡片 -->
<view class="assistant-info-card"> <view class="assistant-info-card">
<view class="assistant-avatar-wrapper"> <view class="assistant-avatar-wrapper">
@ -307,7 +307,7 @@ export default {
.assistant-info-card { .assistant-info-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx 0 30rpx; margin: 0 0 0 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx;
display: flex; display: flex;
@ -393,7 +393,7 @@ export default {
.quick-questions { .quick-questions {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx; margin: 20rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2); box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@ -434,7 +434,7 @@ export default {
} }
.chat-messages { .chat-messages {
margin-top: 20rpx; margin-top: 24rpx;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
@ -459,21 +459,31 @@ export default {
.message-item.user { .message-item.user {
justify-content: flex-end; justify-content: flex-end;
padding: 0 10rpx 0 80rpx; padding: 0 0 0 60rpx;
} }
.message-item.ai { .message-item.ai {
justify-content: flex-start; justify-content: flex-start;
padding: 0 80rpx 0 10rpx; padding: 0 60rpx 0 0;
} }
.message-avatar { .message-avatar {
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
margin: 0 16rpx; margin: 0;
flex-shrink: 0; flex-shrink: 0;
} }
/* AI消息头像 - 右边距 */
.message-item.ai .message-avatar {
margin-right: 16rpx;
}
/* 用户消息头像 - 左边距 */
.message-item.user .message-avatar {
margin-left: 16rpx;
}
.assistant-avatar, .user-avatar { .assistant-avatar, .user-avatar {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -590,7 +600,7 @@ export default {
.chat-input-area { .chat-input-area {
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
padding: 16rpx 20rpx; padding: 16rpx 0;
border-top: 1rpx solid rgba(255, 255, 255, 0.2); border-top: 1rpx solid rgba(255, 255, 255, 0.2);
} }

12
pages/pets/pets.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="pets-container gradient-bg page-container"> <view class="pets-container page-container-unified">
<!-- 标签切换容器 --> <!-- 标签切换容器 -->
<view class="tabs-container" v-if="petsList.length > 0"> <view class="tabs-container" v-if="petsList.length > 0">
<view class="tabs-header"> <view class="tabs-header">
@ -653,12 +653,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.pets-container { .pets-container {
padding-bottom: 120rpx; /* 边距由外层page-container-unified统一管理 */
} }
.tabs-container { .tabs-container {
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
margin: 20rpx 20rpx 30rpx; margin: 0 0 30rpx 0;
border-radius: 40rpx; border-radius: 40rpx;
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
overflow: visible; overflow: visible;
@ -758,7 +758,7 @@ export default {
} }
.tab-content { .tab-content {
padding: 30rpx; padding: 0;
} }
.tab-panel { .tab-panel {
@ -941,7 +941,7 @@ export default {
} }
.functions-section { .functions-section {
margin: 16rpx 30rpx 20rpx; margin: 16rpx 0 20rpx 0;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 16rpx; border-radius: 16rpx;
padding: 16rpx 0; padding: 16rpx 0;
@ -1037,7 +1037,7 @@ export default {
} }
.cards-section { .cards-section {
padding: 0 30rpx; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16rpx; gap: 16rpx;

18
pages/profile/profile.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="profile-container page-container-with-bg"> <view class="profile-container page-container-unified">
<!-- 用户信息卡片 --> <!-- 用户信息卡片 -->
<view class="user-info-card"> <view class="user-info-card">
<view class="user-avatar-section" :class="{ 'logged-in': userInfo.nickName }" @click="handleUserAction"> <view class="user-avatar-section" :class="{ 'logged-in': userInfo.nickName }" @click="handleUserAction">
@ -690,14 +690,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.profile-container { .profile-container {
padding-bottom: 40rpx; /* 边距由外层page-container-unified统一管理 */
} }
/* 用户信息卡片 */ /* 用户信息卡片 */
.user-info-card { .user-info-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 0 30rpx 24rpx 30rpx; margin: 0 0 24rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
display: flex; display: flex;
@ -837,7 +837,7 @@ export default {
.stats-card { .stats-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 0 30rpx 24rpx 30rpx; margin: 0 0 24rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2); box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@ -907,7 +907,7 @@ export default {
.family-card { .family-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 0 30rpx 24rpx 30rpx; margin: 0 0 24rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2); box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@ -1025,7 +1025,7 @@ export default {
.adoption-card { .adoption-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 0 30rpx 24rpx 30rpx; margin: 0 0 24rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2); box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@ -1122,7 +1122,7 @@ export default {
@media (max-width: 375px) { @media (max-width: 375px) {
.profile-container { .profile-container {
.user-info-card { .user-info-card {
margin: 0 20rpx 20rpx 20rpx; margin: 0 0 20rpx 0;
padding: 24rpx; padding: 24rpx;
} }
@ -1130,7 +1130,7 @@ export default {
.family-card, .family-card,
.adoption-card, .adoption-card,
.settings-card { .settings-card {
margin: 0 20rpx 20rpx 20rpx; margin: 0 0 20rpx 0;
padding: 24rpx; padding: 24rpx;
} }
@ -1245,7 +1245,7 @@ export default {
.settings-card { .settings-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
margin: 0 30rpx 24rpx 30rpx; margin: 0 0 24rpx 0;
border-radius: 24rpx; border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2); box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3); border: 1rpx solid rgba(255, 255, 255, 0.3);

23
styles/common.scss
View File

@ -135,6 +135,17 @@
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%); background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
} }
/* 统一布局架构 - 页面容器 */
.page-container-unified {
@extend .page-container-with-bg;
padding: 20rpx 30rpx 0 30rpx; /* 上边距20rpx，左右边距30rpx，下边距0 */
/* 响应式设计 - 小屏幕使用较小边距 */
@media (max-width: 375px) {
padding: 20rpx 20rpx 0 20rpx;
}
}
/* 通用背景渐变 */ /* 通用背景渐变 */
.gradient-bg { .gradient-bg {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%); background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
@ -175,6 +186,18 @@
border-radius: 28rpx; border-radius: 28rpx;
} }
/* 统一布局架构 - 卡片样式 */
.card-unified {
@extend .card;
margin: 0 0 24rpx 0; /* 仅保留下边距用于卡片间隔 */
/* 响应式设计 - 小屏幕调整间距 */
@media (max-width: 375px) {
margin: 0 0 20rpx 0;
padding: 20rpx;
}
}
/* 通用按钮样式 */ /* 通用按钮样式 */
.btn { .btn {
padding: 16rpx 32rpx; padding: 16rpx 32rpx;