1
This commit is contained in:
+624
-217
@@ -1,119 +1,162 @@
|
||||
<template>
|
||||
<view class="pet-detail-container">
|
||||
<!-- 头部操作栏 -->
|
||||
<view class="header-actions">
|
||||
<text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
|
||||
<view class="container">
|
||||
<!-- 宠物主卡片 -->
|
||||
<view class="pet-main-card">
|
||||
<!-- 编辑按钮 -->
|
||||
<view class="edit-btn" @click="editPet">
|
||||
<text class="edit-text">编辑</text>
|
||||
<text class="edit-icon">✏️</text>
|
||||
</view>
|
||||
|
||||
<!-- 宠物头像区域 -->
|
||||
<view class="pet-avatar-section">
|
||||
<view class="avatar-container">
|
||||
<view class="pet-avatar-large" v-if="!petInfo.avatar">
|
||||
<text class="avatar-placeholder">🐱</text>
|
||||
</view>
|
||||
<image
|
||||
v-else
|
||||
:src="petInfo.avatar"
|
||||
class="pet-avatar-large"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="avatar-badge">
|
||||
<text class="badge-text">健康</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 宠物信息区域 -->
|
||||
<view class="pet-info-section">
|
||||
<text class="pet-name">{{ petInfo.name || '未知宠物' }}</text>
|
||||
<view class="pet-meta">
|
||||
<text class="pet-breed">{{ petInfo.breed || '未知品种' }}</text>
|
||||
<text class="pet-separator">·</text>
|
||||
<text class="pet-gender">{{ petInfo.gender || '未知' }}</text>
|
||||
<text class="pet-separator">·</text>
|
||||
<text class="pet-age">{{ petInfo.age || 0 }}岁</text>
|
||||
</view>
|
||||
<view class="pet-stats">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ petInfo.companionDays || 0 }}</text>
|
||||
<text class="stat-label">陪伴天数</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ petInfo.weight || '4.2kg' }}</text>
|
||||
<text class="stat-label">当前体重</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">85</text>
|
||||
<text class="stat-label">健康评分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pet-header">
|
||||
<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
|
||||
<view class="pet-basic-info">
|
||||
<u-text :text="petInfo.name" type="primary" size="18" bold></u-text>
|
||||
<u-text :text="`${petInfo.breed} · ${petInfo.gender}`" type="info" size="14"></u-text>
|
||||
<u-text :text="`${petInfo.age}岁 · ${petInfo.weight}`" type="tips" size="12"></u-text>
|
||||
<!-- 详细信息卡片 -->
|
||||
<view class="details-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">📋 详细档案</text>
|
||||
</view>
|
||||
<view class="details-grid">
|
||||
<view class="detail-row">
|
||||
<view class="detail-item">
|
||||
<view class="detail-icon">🎂</view>
|
||||
<view class="detail-content">
|
||||
<text class="detail-label">生日</text>
|
||||
<text class="detail-value">{{ petInfo.birthday || '2022-03-15' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="detail-icon">🏠</view>
|
||||
<view class="detail-content">
|
||||
<text class="detail-label">到家日期</text>
|
||||
<text class="detail-value">{{ petInfo.adoptDate || '2022-04-20' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<view class="detail-item">
|
||||
<view class="detail-icon">💉</view>
|
||||
<view class="detail-content">
|
||||
<text class="detail-label">疫苗状态</text>
|
||||
<text class="detail-value status-good">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="detail-icon">🏥</view>
|
||||
<view class="detail-content">
|
||||
<text class="detail-label">健康状态</text>
|
||||
<text class="detail-value status-excellent">优秀</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<u-card title="基本信息" :padding="20">
|
||||
<view class="info-grid">
|
||||
<view class="info-item">
|
||||
<u-text text="生日" type="tips" size="12"></u-text>
|
||||
<u-text :text="petInfo.birthday" type="primary" size="14"></u-text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<u-text text="陪伴天数" type="tips" size="12"></u-text>
|
||||
<u-text :text="`${petInfo.companionDays}天`" type="primary" size="14"></u-text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<u-text text="体重" type="tips" size="12"></u-text>
|
||||
<u-text :text="petInfo.weight" type="primary" size="14"></u-text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<u-text text="性别" type="tips" size="12"></u-text>
|
||||
<u-text :text="petInfo.gender" type="primary" size="14"></u-text>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<u-card title="最近记录" :padding="20">
|
||||
<view class="records-list" v-if="recentRecords.length > 0">
|
||||
<view class="record-item" v-for="record in recentRecords" :key="record.id">
|
||||
<view class="record-date">{{ record.date }}</view>
|
||||
<view class="record-content">{{ record.content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-else mode="data" text="暂无记录" :show="true"></u-empty>
|
||||
</u-card>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<!-- 性格标签展示 -->
|
||||
<u-card title="性格特征" :padding="20" v-if="petInfo.personality && petInfo.personality.length > 0">
|
||||
<view class="personality-tags">
|
||||
<u-tag
|
||||
v-for="tag in petInfo.personality"
|
||||
:key="tag"
|
||||
:text="tag"
|
||||
type="primary"
|
||||
size="small"
|
||||
plain
|
||||
></u-tag>
|
||||
</view>
|
||||
<u-button
|
||||
text="重新设置性格"
|
||||
type="info"
|
||||
size="mini"
|
||||
plain
|
||||
@click="setPersonality"
|
||||
style="margin-top: 20rpx;"
|
||||
></u-button>
|
||||
</u-card>
|
||||
|
||||
<u-card title="性格设置" :padding="20" v-else>
|
||||
<u-empty mode="data" text="还未设置宠物性格" :show="true">
|
||||
<template #bottom>
|
||||
<u-button type="primary" text="设置性格特征" size="mini" @click="setPersonality"></u-button>
|
||||
</template>
|
||||
</u-empty>
|
||||
</u-card>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<!-- 快捷功能按钮 -->
|
||||
<!-- 快速操作区域 -->
|
||||
<view class="quick-actions">
|
||||
<view class="action-row">
|
||||
<view class="action-item" @click="addRecord">
|
||||
<u-icon name="edit-pen" size="24" color="#81C784"></u-icon>
|
||||
<text class="action-text">添加记录</text>
|
||||
<view class="actions-header">
|
||||
<text class="actions-title">🚀 快速操作</text>
|
||||
</view>
|
||||
<view class="actions-grid">
|
||||
<view class="action-card primary" @click="addRecord">
|
||||
<view class="action-icon-bg">
|
||||
<text class="action-icon">📝</text>
|
||||
</view>
|
||||
<text class="action-title">添加记录</text>
|
||||
<text class="action-subtitle">记录日常点滴</text>
|
||||
</view>
|
||||
<view class="action-item" @click="chatWithPet">
|
||||
<u-icon name="chat" size="24" color="#64B5F6"></u-icon>
|
||||
<text class="action-text">AI聊天</text>
|
||||
<view class="action-card secondary" @click="chatWithPet">
|
||||
<view class="action-icon-bg">
|
||||
<text class="action-icon">💬</text>
|
||||
</view>
|
||||
<text class="action-title">AI聊天</text>
|
||||
<text class="action-subtitle">智能对话助手</text>
|
||||
</view>
|
||||
<view class="action-item" @click="viewHealth">
|
||||
<u-icon name="heart" size="24" color="#FF8A80"></u-icon>
|
||||
<text class="action-text">健康档案</text>
|
||||
<view class="action-card accent" @click="viewHealth">
|
||||
<view class="action-icon-bg">
|
||||
<text class="action-icon">📊</text>
|
||||
</view>
|
||||
<text class="action-title">健康图表</text>
|
||||
<text class="action-subtitle">数据可视化</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-row">
|
||||
<view class="action-item" @click="viewTimeline">
|
||||
<u-icon name="clock" size="24" color="#FFB74D"></u-icon>
|
||||
<text class="action-text">成长时光</text>
|
||||
</view>
|
||||
|
||||
<!-- 最近记录 -->
|
||||
<view class="records-section">
|
||||
<view class="records-header">
|
||||
<text class="records-title">📖 最近记录</text>
|
||||
<view class="view-all-btn" @click="viewAllRecords">
|
||||
<text class="view-all-text">查看全部</text>
|
||||
<text class="view-all-arrow">→</text>
|
||||
</view>
|
||||
<view class="action-item" @click="viewRecords">
|
||||
<u-icon name="list" size="24" color="#9C27B0"></u-icon>
|
||||
<text class="action-text">所有记录</text>
|
||||
</view>
|
||||
|
||||
<view class="records-list" v-if="recentRecords.length > 0">
|
||||
<view class="record-card" v-for="record in recentRecords" :key="record.id">
|
||||
<view class="record-left">
|
||||
<view class="record-icon-container">
|
||||
<text class="record-icon">{{ getRecordIcon(record.type) }}</text>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-title">{{ record.title || record.content }}</text>
|
||||
<text class="record-content">{{ record.content }}</text>
|
||||
<text class="record-time">{{ formatDate(record.date) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-right">
|
||||
<text class="record-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-item" @click="shareProfile">
|
||||
<u-icon name="share" size="24" color="#FF9800"></u-icon>
|
||||
<text class="action-text">分享档案</text>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-else>
|
||||
<text class="empty-icon">📝</text>
|
||||
<text class="empty-title">还没有记录</text>
|
||||
<text class="empty-subtitle">开始记录宠物的美好时光吧</text>
|
||||
<view class="empty-action" @click="addRecord">
|
||||
<text class="empty-action-text">+ 添加第一条记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -132,13 +175,24 @@ export default {
|
||||
recentRecords: [
|
||||
{
|
||||
id: 1,
|
||||
date: '2024-01-15',
|
||||
content: '今天小橘很活泼，食欲很好'
|
||||
type: 'weight',
|
||||
title: '体重记录',
|
||||
date: '2024-01-20',
|
||||
content: '今天体重4.2kg，比上周增加了0.1kg，成长状态良好'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '2024-01-14',
|
||||
content: '带小橘去公园散步，玩得很开心'
|
||||
type: 'vaccine',
|
||||
title: '疫苗接种',
|
||||
date: '2024-01-18',
|
||||
content: '完成了狂犬疫苗第二针接种，医生说恢复情况很好'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'bath',
|
||||
title: '洗澡护理',
|
||||
date: '2024-01-17',
|
||||
content: '给小橘洗了澡，全程很乖没有挣扎，现在毛毛很香'
|
||||
}
|
||||
],
|
||||
layout1Items: [
|
||||
@@ -216,14 +270,15 @@ export default {
|
||||
if (!this.petInfo.id) {
|
||||
this.petInfo = {
|
||||
id: this.petId,
|
||||
name: '未知宠物',
|
||||
breed: '未知品种',
|
||||
age: 0,
|
||||
companionDays: 0,
|
||||
avatar: '/static/default-pet.png',
|
||||
gender: '未知',
|
||||
weight: '0kg',
|
||||
birthday: '未知'
|
||||
name: '小橘',
|
||||
breed: '橘猫',
|
||||
age: 2,
|
||||
companionDays: 645,
|
||||
avatar: '',
|
||||
gender: '公',
|
||||
weight: '4.2kg',
|
||||
birthday: '2022-03-15',
|
||||
adoptDate: '2022-04-20'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -231,6 +286,32 @@ export default {
|
||||
this.petInfo = {}
|
||||
}
|
||||
},
|
||||
|
||||
getRecordIcon(type) {
|
||||
const icons = {
|
||||
weight: '⚖️',
|
||||
vaccine: '💉',
|
||||
bath: '🛁',
|
||||
food: '🍽️',
|
||||
play: '🎾',
|
||||
medical: '🏥',
|
||||
default: '📝'
|
||||
}
|
||||
return icons[type] || icons.default
|
||||
},
|
||||
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diff = now - date
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (days === 0) return '今天'
|
||||
if (days === 1) return '昨天'
|
||||
if (days < 7) return `${days}天前`
|
||||
return dateStr
|
||||
},
|
||||
|
||||
editPet() {
|
||||
uni.navigateTo({
|
||||
@@ -274,6 +355,10 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
viewAllRecords() {
|
||||
this.viewRecords()
|
||||
},
|
||||
|
||||
shareProfile() {
|
||||
uni.showToast({
|
||||
title: '分享功能开发中',
|
||||
@@ -348,149 +433,471 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pet-detail-container {
|
||||
/* 优化后的样式 */
|
||||
.container {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
/* 宠物主卡片 */
|
||||
.pet-main-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border-radius: 32rpx;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 12rpx 40rpx rgba(255, 138, 128, 0.25);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FF8A80;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.edit-btn {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(255, 138, 128, 0.1);
|
||||
border-radius: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.9);
|
||||
background: rgba(255, 138, 128, 0.2);
|
||||
}
|
||||
|
||||
.edit-text {
|
||||
.edit-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.pet-avatar-section {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.pet-avatar-large {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 70rpx;
|
||||
border: 4rpx solid #FF8A80;
|
||||
background: #FFE0DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-badge {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
right: 8rpx;
|
||||
background: #4CAF50;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
|
||||
|
||||
.badge-text {
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pet-info-section {
|
||||
text-align: center;
|
||||
|
||||
.pet-name {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pet-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.pet-breed, .pet-gender, .pet-age {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.pet-separator {
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pet-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: rgba(255, 138, 128, 0.05);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FF8A80;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pet-header {
|
||||
/* 详细信息卡片 */
|
||||
.details-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.pet-basic-info {
|
||||
margin-left: 30rpx;
|
||||
flex: 1;
|
||||
.card-header {
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
:deep(.u-text) {
|
||||
margin-bottom: 8rpx;
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
.detail-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
background: rgba(255, 138, 128, 0.05);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.detail-icon {
|
||||
font-size: 32rpx;
|
||||
width: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
|
||||
.detail-label {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
display: block;
|
||||
|
||||
&.status-good {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
&.status-excellent {
|
||||
color: #FF8A80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.u-text:first-child) {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.records-list {
|
||||
.record-item {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.record-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 性格标签 */
|
||||
.personality-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
/* 快捷功能按钮 */
|
||||
/* 快速操作区域 */
|
||||
.quick-actions {
|
||||
background: #ffffff;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 30rpx;
|
||||
.actions-header {
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.actions-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.action-item {
|
||||
.actions-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
&:active {
|
||||
background: #F5F5F5;
|
||||
transform: scale(0.95);
|
||||
.action-card {
|
||||
flex: 1;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: linear-gradient(135deg, #64B5F6, #81C784);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.accent {
|
||||
background: linear-gradient(135deg, #FFB74D, #FF8A65);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-icon-bg {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 16rpx;
|
||||
|
||||
.action-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-subtitle {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 记录区域 */
|
||||
.records-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.records-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
.records-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
.view-all-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(255, 138, 128, 0.1);
|
||||
border-radius: 20rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 138, 128, 0.2);
|
||||
}
|
||||
|
||||
.view-all-text {
|
||||
font-size: 24rpx;
|
||||
color: #FF8A80;
|
||||
}
|
||||
|
||||
.view-all-arrow {
|
||||
font-size: 20rpx;
|
||||
color: #FF8A80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.records-list {
|
||||
.record-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: rgba(255, 138, 128, 0.03);
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 138, 128, 0.08);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.record-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.record-icon-container {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: #FF8A80;
|
||||
border-radius: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.record-icon {
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.record-info {
|
||||
flex: 1;
|
||||
|
||||
.record-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-right {
|
||||
.record-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80rpx 40rpx;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
|
||||
border-radius: 28rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.empty-action-text {
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user