This commit is contained in:
parent
6678bce527
commit
1dde942ff1
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="adoption-container page-container-with-bg">
|
||||
<view class="adoption-container page-container-unified">
|
||||
<!-- 头部搜索栏 -->
|
||||
<view class="header-section">
|
||||
<view class="search-wrapper">
|
||||
|
|
@ -1192,7 +1192,7 @@ export default {
|
|||
/* 头部搜索栏 */
|
||||
.header-section {
|
||||
background: transparent;
|
||||
padding: 24rpx 20rpx;
|
||||
padding: 0 0 24rpx 0;
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -1287,7 +1287,7 @@ export default {
|
|||
.filter-panel {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
padding: 24rpx 20rpx;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
|
@ -1514,7 +1514,7 @@ export default {
|
|||
/* 宠物列表区域 */
|
||||
.pets-scroll {
|
||||
height: calc(100vh - 100rpx);
|
||||
padding: 0 20rpx;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="assistant-container page-container-with-bg">
|
||||
<view class="assistant-container page-container-unified">
|
||||
<!-- 宠物助手信息卡片 -->
|
||||
<view class="assistant-info-card">
|
||||
<view class="assistant-avatar-wrapper">
|
||||
|
|
@ -307,7 +307,7 @@ export default {
|
|||
.assistant-info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx 0 30rpx;
|
||||
margin: 0 0 0 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
|
|
@ -393,7 +393,7 @@ export default {
|
|||
.quick-questions {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
|
|
@ -434,7 +434,7 @@ export default {
|
|||
}
|
||||
|
||||
.chat-messages {
|
||||
margin-top: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -459,21 +459,31 @@ export default {
|
|||
|
||||
.message-item.user {
|
||||
justify-content: flex-end;
|
||||
padding: 0 10rpx 0 80rpx;
|
||||
padding: 0 0 0 60rpx;
|
||||
}
|
||||
|
||||
.message-item.ai {
|
||||
justify-content: flex-start;
|
||||
padding: 0 80rpx 0 10rpx;
|
||||
padding: 0 60rpx 0 0;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 16rpx;
|
||||
margin: 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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -590,7 +600,7 @@ export default {
|
|||
|
||||
.chat-input-area {
|
||||
backdrop-filter: blur(20rpx);
|
||||
padding: 16rpx 20rpx;
|
||||
padding: 16rpx 0;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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-header">
|
||||
|
|
@ -653,12 +653,12 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.pets-container {
|
||||
padding-bottom: 120rpx;
|
||||
/* 边距由外层page-container-unified统一管理 */
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
margin: 20rpx 20rpx 30rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
border-radius: 40rpx;
|
||||
backdrop-filter: blur(20rpx);
|
||||
overflow: visible;
|
||||
|
|
@ -758,7 +758,7 @@ export default {
|
|||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 30rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
|
|
@ -941,7 +941,7 @@ export default {
|
|||
}
|
||||
|
||||
.functions-section {
|
||||
margin: 16rpx 30rpx 20rpx;
|
||||
margin: 16rpx 0 20rpx 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
|
|
@ -1037,7 +1037,7 @@ export default {
|
|||
}
|
||||
|
||||
.cards-section {
|
||||
padding: 0 30rpx;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="profile-container page-container-with-bg">
|
||||
<view class="profile-container page-container-unified">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-info-card">
|
||||
<view class="user-avatar-section" :class="{ 'logged-in': userInfo.nickName }" @click="handleUserAction">
|
||||
|
|
@ -690,14 +690,14 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.profile-container {
|
||||
padding-bottom: 40rpx;
|
||||
/* 边距由外层page-container-unified统一管理 */
|
||||
}
|
||||
|
||||
/* 用户信息卡片 */
|
||||
.user-info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 24rpx 30rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
|
|
@ -837,7 +837,7 @@ export default {
|
|||
.stats-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 24rpx 30rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
|
|
@ -907,7 +907,7 @@ export default {
|
|||
.family-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 24rpx 30rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
|
|
@ -1025,7 +1025,7 @@ export default {
|
|||
.adoption-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 24rpx 30rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
|
|
@ -1122,7 +1122,7 @@ export default {
|
|||
@media (max-width: 375px) {
|
||||
.profile-container {
|
||||
.user-info-card {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
|
|
@ -1130,7 +1130,7 @@ export default {
|
|||
.family-card,
|
||||
.adoption-card,
|
||||
.settings-card {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
|
|
@ -1245,7 +1245,7 @@ export default {
|
|||
.settings-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 24rpx 30rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
|
|
|||
|
|
@ -135,6 +135,17 @@
|
|||
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 {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
|
|
@ -175,6 +186,18 @@
|
|||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
/* 统一布局架构 - 卡片样式 */
|
||||
.card-unified {
|
||||
@extend .card;
|
||||
margin: 0 0 24rpx 0; /* 仅保留下边距用于卡片间隔 */
|
||||
|
||||
/* 响应式设计 - 小屏幕调整间距 */
|
||||
@media (max-width: 375px) {
|
||||
margin: 0 0 20rpx 0;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用按钮样式 */
|
||||
.btn {
|
||||
padding: 16rpx 32rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue