ZhaoYang
1 month ago
18 changed files with 2295 additions and 4 deletions
-
5app.json
-
8pages/home/home.js
-
2pages/home/home.wxml
-
4pages/login/login.js
-
BINpagesA/images/ch.png
-
BINpagesA/images/jh.png
-
104pagesA/pages/askingSy/askingSy.js
-
4pagesA/pages/askingSy/askingSy.json
-
87pagesA/pages/askingSy/askingSy.wxml
-
415pagesA/pages/askingSy/askingSy.wxss
-
148pagesA/pages/askingSyAdd/askingSyAdd.js
-
4pagesA/pages/askingSyAdd/askingSyAdd.json
-
163pagesA/pages/askingSyAdd/askingSyAdd.wxml
-
350pagesA/pages/askingSyAdd/askingSyAdd.wxss
-
198pagesA/pages/askingSyDetails/askingSyDetails.js
-
4pagesA/pages/askingSyDetails/askingSyDetails.json
-
160pagesA/pages/askingSyDetails/askingSyDetails.wxml
-
643pagesA/pages/askingSyDetails/askingSyDetails.wxss
|
After Width: 200 | Height: 200 | Size: 2.4 KiB |
|
After Width: 200 | Height: 200 | Size: 1.7 KiB |
@ -0,0 +1,104 @@ |
|||
Page({ |
|||
data: { |
|||
diagnosisList: [ |
|||
{ |
|||
id: 1, |
|||
status: 'replied', |
|||
createdAt:'2025-02-12', |
|||
userInfo: { |
|||
avatar: '/pages/images/tx.png', |
|||
nickName: '张小明' |
|||
}, |
|||
petInfo: { |
|||
type: '狗', |
|||
age: 3, |
|||
gender: '公' |
|||
}, |
|||
description: '最近三天食欲不振，精神萎靡，偶尔呕吐黄色泡沫，大便偏软带血丝，体温正常但鼻头干燥。', |
|||
images: ['/images/pet1.jpg', '/images/pet2.jpg'], |
|||
replies: [{}, {}, {}] |
|||
}, |
|||
{ |
|||
id: 2, |
|||
status: 'pending', |
|||
createdAt: '2025-02-12', |
|||
userInfo: { |
|||
avatar: '/pages/images/tx.png', |
|||
nickName: '李小花' |
|||
}, |
|||
petInfo: { |
|||
type: '猫', |
|||
age: 2, |
|||
gender: '母' |
|||
}, |
|||
description: '今天发现眼睛有黄色分泌物，频繁抓挠眼睛周围，食欲正常但饮水量减少。', |
|||
images: ['/images/cat1.jpg'], |
|||
replies: [] |
|||
}, |
|||
{ |
|||
id: 3, |
|||
status: 'replied', |
|||
createdAt: '2025-02-12', |
|||
userInfo: { |
|||
avatar: '/pages/images/tx.png', |
|||
nickName: '王先生' |
|||
}, |
|||
petInfo: { |
|||
type: '狗', |
|||
age: 5, |
|||
gender: '公' |
|||
}, |
|||
description: '狗狗最近走路跛脚，右前腿不敢着地，触摸时会叫。之前从沙发上跳下来可能受伤了。', |
|||
images: [], |
|||
replies: [{}, {}] |
|||
} |
|||
] |
|||
}, |
|||
|
|||
onLoad: function() { |
|||
// 页面加载
|
|||
}, |
|||
|
|||
// 格式化日期显示
|
|||
formatDate: function(dateString) { |
|||
const date = new Date(dateString); |
|||
const now = new Date(); |
|||
const diff = now - date; |
|||
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24)); |
|||
const diffHours = Math.floor(diff / (1000 * 60 * 60)); |
|||
const diffMinutes = Math.floor(diff / (1000 * 60)); |
|||
|
|||
if (diffMinutes < 60) { |
|||
return `${diffMinutes}分钟前`; |
|||
} else if (diffHours < 24) { |
|||
return `${diffHours}小时前`; |
|||
} else if (diffDays === 1) { |
|||
return '昨天'; |
|||
} else if (diffDays === 2) { |
|||
return '前天'; |
|||
} else if (diffDays < 7) { |
|||
return `${diffDays}天前`; |
|||
} else { |
|||
const month = date.getMonth() + 1; |
|||
const day = date.getDate(); |
|||
return `${month}月${day}日`; |
|||
} |
|||
}, |
|||
|
|||
// 显示创建问诊单
|
|||
showCreateModal: function() { |
|||
wx.navigateTo({ |
|||
url: '/pagesA/pages/askingSyAdd/askingSyAdd', |
|||
}); |
|||
}, |
|||
|
|||
// 查看详情
|
|||
viewDetail: function(e) { |
|||
const index = e.currentTarget.dataset.index; |
|||
const item = this.data.diagnosisList[index]; |
|||
wx.navigateTo({ |
|||
url: `/pagesA/pages/askingSyDetails/askingSyDetails`, |
|||
}); |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"问兽医", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,87 @@ |
|||
<view class="wzbox"> |
|||
<!-- 顶部标题栏 --> |
|||
<view class="header"> |
|||
<view class="header-content"> |
|||
<view class="title-section"> |
|||
<text class="title">问诊</text> |
|||
<text class="subtitle">专业兽医在线解答</text> |
|||
</view> |
|||
</view> |
|||
<view class="header-decoration"> |
|||
<view class="decoration-circle circle-1"></view> |
|||
<view class="decoration-circle circle-2"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 问诊记录列表 --> |
|||
<scroll-view class="record-list" scroll-y enable-back-to-top> |
|||
<!-- 空状态 --> |
|||
<view wx:if="{{diagnosisList.length === 0}}" class="empty-state"> |
|||
<image class="empty-icon" src="/images/empty-icon.png"></image> |
|||
<text class="empty-text">暂无问诊记录</text> |
|||
<text class="empty-tip">开始您的第一次问诊吧</text> |
|||
</view> |
|||
|
|||
<!-- 问诊记录卡片 --> |
|||
<view wx:else class="records-container"> |
|||
<view class="section-header"> |
|||
<text class="section-title">问诊记录</text> |
|||
<text class="section-count">{{diagnosisList.length}}条</text> |
|||
</view> |
|||
|
|||
<view wx:for="{{diagnosisList}}" wx:key="id" class="record-card" bindtap="viewDetail" data-index="{{index}}"> |
|||
<!-- 卡片头部：用户信息 + 状态 --> |
|||
<view class="card-header"> |
|||
<view class="user-info"> |
|||
<image class="user-avatar" src="{{item.userInfo.avatar || '/icons/default-avatar.svg'}}"></image> |
|||
<view class="user-details"> |
|||
<text class="user-name">{{item.userInfo.nickName || '用户'}}</text> |
|||
<text class="pet-info">{{item.petInfo.type}}，{{item.petInfo.age}}岁，{{item.petInfo.gender}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="status-tag {{item.status === 'replied' ? 'status-replied' : 'status-pending'}}"> |
|||
{{item.status === 'replied' ? '已回复' : '待回复'}} |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 症状描述 --> |
|||
<view class="symptom-section"> |
|||
<view class="section-title-row"> |
|||
<text class="section-title-text">症状描述</text> |
|||
</view> |
|||
<view class="symptom-content"> |
|||
<text class="symptom-text">{{item.description}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 卡片底部 --> |
|||
<view class="card-footer"> |
|||
<view class="footer-left"> |
|||
<view class="time-info"> |
|||
<text class="time-text">{{item.createdAt}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="footer-right"> |
|||
<view class="reply-info"> |
|||
<text class="reply-count">{{item.replies.length}}条回复</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 列表底部提示 --> |
|||
<view wx:if="{{diagnosisList.length > 0}}" class="list-footer"> |
|||
<text class="footer-text">已显示全部记录</text> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 新增问诊按钮 --> |
|||
<view class="create-btn-container"> |
|||
<view class="create-btn" bindtap="showCreateModal"> |
|||
<image class="btn-icon" src="/pagesA/images/jh.png"></image> |
|||
<text class="btn-text">问诊单</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,415 @@ |
|||
/* 全局样式 */ |
|||
.wzbox{ |
|||
min-height: 100vh; |
|||
position: relative; |
|||
background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%); |
|||
} |
|||
|
|||
/* 头部样式优化 */ |
|||
.header { |
|||
padding: 20rpx 40rpx 20rpx; |
|||
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
|||
border-radius: 0 0 36rpx 36rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.15); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.header-content { |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.title-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 44rpx; |
|||
font-weight: 700; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.5rpx; |
|||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.subtitle { |
|||
font-size: 28rpx; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
font-weight: 400; |
|||
} |
|||
|
|||
/* 头部装饰元素 */ |
|||
.header-decoration { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
overflow: hidden; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.decoration-circle { |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, 0.08); |
|||
} |
|||
|
|||
.circle-1 { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
top: -80rpx; |
|||
right: -40rpx; |
|||
} |
|||
|
|||
.circle-2 { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
bottom: -40rpx; |
|||
left: -20rpx; |
|||
} |
|||
|
|||
/* 问诊记录列表 */ |
|||
.record-list { |
|||
height: calc(100vh - 200rpx); |
|||
padding: 0 32rpx 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.records-container { |
|||
padding-top: 24rpx; |
|||
} |
|||
|
|||
/* 列表头部 */ |
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
padding: 0 4rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #1A1A1A; |
|||
position: relative; |
|||
padding-left: 16rpx; |
|||
} |
|||
|
|||
.section-title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 3rpx; |
|||
height: 20rpx; |
|||
background: linear-gradient(180deg, #6D9EFF 0%, #4A7CFF 100%); |
|||
border-radius: 2rpx; |
|||
} |
|||
|
|||
.section-count { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
background: #F0F7FF; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 问诊记录卡片 */ |
|||
.record-card { |
|||
background: #FFFFFF; |
|||
border-radius: 24rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 6rpx 24rpx rgba(74, 144, 226, 0.08); |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1); |
|||
border: 1rpx solid #F0F7FF; |
|||
} |
|||
|
|||
.record-card:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 10rpx 30rpx rgba(74, 144, 226, 0.15); |
|||
} |
|||
|
|||
/* 卡片头部 */ |
|||
.card-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
padding: 28rpx 28rpx 24rpx; |
|||
border-bottom: 1rpx solid #F5F9FF; |
|||
} |
|||
|
|||
.user-info { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
gap: 16rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.user-avatar { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid rgba(255, 255, 255, 0.8); |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
.user-details { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 6rpx; |
|||
} |
|||
|
|||
.user-name { |
|||
font-size: 28rpx; |
|||
color: #1A1A1A; |
|||
font-weight: 600; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.pet-info { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
font-weight: 400; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
/* 状态标签 - 移至右上角 */ |
|||
.status-tag { |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 22rpx; |
|||
font-weight: 600; |
|||
min-width: 80rpx; |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.status-replied { |
|||
background: linear-gradient(135deg, rgba(76, 217, 100, 0.12) 0%, rgba(46, 204, 113, 0.12) 100%); |
|||
color: #2ECC71; |
|||
border: 1rpx solid rgba(46, 204, 113, 0.2); |
|||
} |
|||
|
|||
.status-pending { |
|||
background: linear-gradient(135deg, rgba(255, 149, 0, 0.12) 0%, rgba(255, 127, 0, 0.12) 100%); |
|||
color: #FF9500; |
|||
border: 1rpx solid rgba(255, 149, 0, 0.2); |
|||
} |
|||
|
|||
/* 症状描述 */ |
|||
.symptom-section { |
|||
padding: 24rpx 28rpx; |
|||
border-bottom: 1rpx solid #F5F9FF; |
|||
} |
|||
|
|||
.section-title-row { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
.section-title-text { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #1A1A1A; |
|||
} |
|||
|
|||
.symptom-content { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.symptom-text { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/* 卡片底部 */ |
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 28rpx; |
|||
} |
|||
|
|||
.time-info { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
.time-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.reply-info { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
padding: 8rpx 16rpx; |
|||
background: #F0F7FF; |
|||
border-radius: 16rpx; |
|||
border: 1rpx solid #E5EFFF; |
|||
} |
|||
|
|||
.reply-count { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
color: #4A7CFF; |
|||
} |
|||
|
|||
/* 空状态优化 */ |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding-top: 120rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-icon { |
|||
width: 240rpx; |
|||
height: 180rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
margin-bottom: 12rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.empty-tip { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-bottom: 40rpx; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
|
|||
/* 列表底部 */ |
|||
.list-footer { |
|||
text-align: center; |
|||
padding: 40rpx 0; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.footer-text { |
|||
opacity: 0.6; |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
/* 新建问诊按钮优化 */ |
|||
.create-btn-container { |
|||
position: fixed; |
|||
bottom: 40rpx; |
|||
right: 32rpx; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.create-btn { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.3); |
|||
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.create-btn::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
opacity: 0; |
|||
transition: opacity 0.2s ease; |
|||
} |
|||
|
|||
.create-btn:active { |
|||
transform: scale(0.95); |
|||
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.4); |
|||
} |
|||
|
|||
.create-btn:active::after { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.btn-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.btn-text { |
|||
font-size: 26rpx; |
|||
color: white; |
|||
font-weight: 600; |
|||
letter-spacing: 0.5rpx; |
|||
} |
|||
|
|||
/* 卡片入场动画 */ |
|||
@keyframes cardSlideIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(30rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.record-card { |
|||
animation: cardSlideIn 0.4s ease-out forwards; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.record-card:nth-child(1) { animation-delay: 0.1s; } |
|||
.record-card:nth-child(2) { animation-delay: 0.15s; } |
|||
.record-card:nth-child(3) { animation-delay: 0.2s; } |
|||
.record-card:nth-child(4) { animation-delay: 0.25s; } |
|||
.record-card:nth-child(5) { animation-delay: 0.3s; } |
|||
|
|||
/* 响应式适配 */ |
|||
@media screen and (min-width: 768px) { |
|||
.record-card { |
|||
max-width: 600rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
} |
|||
@ -0,0 +1,148 @@ |
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
formData: { |
|||
petType: '', |
|||
petAge: '', |
|||
petGender: '', |
|||
symptoms: '', |
|||
images: [] |
|||
}, |
|||
symptomsLength: 0, |
|||
isSubmitting: false, |
|||
isFormValid: false |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
// 初始化表单验证
|
|||
this.checkFormValidity(); |
|||
}, |
|||
|
|||
|
|||
// 宠物类型输入
|
|||
onPetTypeInput(e) { |
|||
const value = e.detail.value; |
|||
this.setData({ |
|||
'formData.petType': value |
|||
}, () => { |
|||
this.checkFormValidity(); |
|||
}); |
|||
}, |
|||
|
|||
// 宠物年龄输入
|
|||
onPetAgeInput(e) { |
|||
const value = e.detail.value; |
|||
this.setData({ |
|||
'formData.petAge': value |
|||
}, () => { |
|||
this.checkFormValidity(); |
|||
}); |
|||
}, |
|||
|
|||
// 选择性别
|
|||
selectGender(e) { |
|||
const value = e.currentTarget.dataset.value; |
|||
this.setData({ |
|||
'formData.petGender': value |
|||
}, () => { |
|||
this.checkFormValidity(); |
|||
}); |
|||
}, |
|||
|
|||
// 症状描述输入
|
|||
onSymptomsInput(e) { |
|||
const value = e.detail.value; |
|||
this.setData({ |
|||
'formData.symptoms': value, |
|||
symptomsLength: value.length |
|||
}, () => { |
|||
this.checkFormValidity(); |
|||
}); |
|||
}, |
|||
|
|||
// 选择图片
|
|||
chooseImage() { |
|||
if (this.data.formData.images.length >= 3) { |
|||
wx.showToast({ |
|||
title: '最多上传3张图片', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
wx.chooseImage({ |
|||
count: 3 - this.data.formData.images.length, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFilePaths = res.tempFilePaths; |
|||
const images = [...this.data.formData.images, ...tempFilePaths]; |
|||
this.setData({ |
|||
'formData.images': images |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 移除图片
|
|||
removeImage(e) { |
|||
const index = e.currentTarget.dataset.index; |
|||
const images = [...this.data.formData.images]; |
|||
images.splice(index, 1); |
|||
this.setData({ |
|||
'formData.images': images |
|||
}); |
|||
}, |
|||
|
|||
// 预览图片
|
|||
previewImage(e) { |
|||
const current = e.currentTarget.dataset.url; |
|||
const urls = e.currentTarget.dataset.urls; |
|||
|
|||
wx.previewImage({ |
|||
current, |
|||
urls |
|||
}); |
|||
}, |
|||
|
|||
// 检查表单有效性
|
|||
checkFormValidity() { |
|||
const { petType, petAge, petGender, symptoms } = this.data.formData; |
|||
const isValid = petType.trim() && petAge && petGender && symptoms.trim(); |
|||
this.setData({ |
|||
isFormValid: !!isValid |
|||
}); |
|||
}, |
|||
|
|||
// 表单提交
|
|||
submitForm(e) { |
|||
if (this.data.isSubmitting || !this.data.isFormValid) { |
|||
return; |
|||
} |
|||
|
|||
this.setData({ |
|||
isSubmitting: true |
|||
}); |
|||
|
|||
// 模拟提交
|
|||
setTimeout(() => { |
|||
wx.showToast({ |
|||
title: '提交成功', |
|||
icon: 'success', |
|||
duration: 1500, |
|||
success: () => { |
|||
setTimeout(() => { |
|||
wx.navigateTo({ |
|||
url: '/pagesA/pages/askingSy/askingSy', |
|||
}) |
|||
}, 1500); |
|||
} |
|||
}); |
|||
}, 1500); |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"问诊单", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,163 @@ |
|||
<view class="xqbox"> |
|||
|
|||
<!-- 表单内容 --> |
|||
<scroll-view class="page-content" scroll-y> |
|||
<form bindsubmit="submitForm"> |
|||
|
|||
<!-- 宠物类型 --> |
|||
<view class="form-section"> |
|||
<view class="section-header"> |
|||
<view class="section-title"> |
|||
<text>牲畜类型</text> |
|||
</view> |
|||
<text class="section-required">必填</text> |
|||
</view> |
|||
<input |
|||
class="form-input" |
|||
name="petType" |
|||
placeholder="请输入牲畜品种（如：山羊、奶牛）" |
|||
value="{{formData.petType}}" |
|||
bindinput="onPetTypeInput" |
|||
maxlength="20" |
|||
/> |
|||
</view> |
|||
|
|||
<!-- 宠物信息 --> |
|||
<view class="form-section"> |
|||
<view class="section-header"> |
|||
<view class="section-title"> |
|||
<text>宠物信息</text> |
|||
</view> |
|||
<text class="section-required">必填</text> |
|||
</view> |
|||
|
|||
<view class="info-grid"> |
|||
<!-- 年龄 --> |
|||
<view class="info-item"> |
|||
<view class="item-label"> |
|||
<text>年龄</text> |
|||
</view> |
|||
<view class="item-input-wrapper"> |
|||
<input |
|||
class="item-input" |
|||
name="petAge" |
|||
type="digit" |
|||
placeholder="0" |
|||
value="{{formData.petAge}}" |
|||
bindinput="onPetAgeInput" |
|||
/> |
|||
<text class="input-unit">岁</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 性别 --> |
|||
<view class="info-item"> |
|||
<view class="item-label"> |
|||
<text>性别</text> |
|||
</view> |
|||
<view class="gender-buttons"> |
|||
<view |
|||
class="gender-btn {{formData.petGender === '公' ? 'active' : ''}}" |
|||
data-value="公" |
|||
bindtap="selectGender" |
|||
> |
|||
<text>公</text> |
|||
</view> |
|||
<view |
|||
class="gender-btn {{formData.petGender === '母' ? 'active' : ''}}" |
|||
data-value="母" |
|||
bindtap="selectGender" |
|||
> |
|||
<text>母</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 症状描述 --> |
|||
<view class="form-section"> |
|||
<view class="section-header"> |
|||
<view class="section-title"> |
|||
<text>症状描述</text> |
|||
</view> |
|||
<text class="section-required">必填</text> |
|||
</view> |
|||
<view class="symptom-box"> |
|||
<textarea |
|||
class="symptom-textarea" |
|||
name="symptoms" |
|||
placeholder="请详细描述宠物的症状，包括持续时间、频率、具体表现等..." |
|||
value="{{formData.symptoms}}" |
|||
bindinput="onSymptomsInput" |
|||
maxlength="500" |
|||
auto-height |
|||
/> |
|||
<view class="textarea-counter"> |
|||
<text>{{symptomsLength}}/500</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 图片上传 --> |
|||
<view class="form-section"> |
|||
<view class="section-header"> |
|||
<view class="section-title"> |
|||
|
|||
<text>上传图片</text> |
|||
</view> |
|||
<text class="section-optional">可选</text> |
|||
</view> |
|||
|
|||
<view class="upload-tips"> |
|||
<text>最多可上传3张图片，用于帮助医生更直观了解病情</text> |
|||
</view> |
|||
|
|||
<view class="image-upload-grid"> |
|||
<!-- 已上传图片 --> |
|||
<block wx:for="{{formData.images}}" wx:key="*this"> |
|||
<view class="image-preview"> |
|||
<image |
|||
class="preview-image" |
|||
src="{{item}}" |
|||
mode="aspectFill" |
|||
bindtap="previewImage" |
|||
data-url="{{item}}" |
|||
data-urls="{{formData.images}}" |
|||
></image> |
|||
<view class="remove-overlay" data-index="{{index}}" bindtap="removeImage"> |
|||
<image class="remove-icon" src="/pagesA/images/ch.png"></image> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<!-- 上传按钮 --> |
|||
<view |
|||
class="upload-btn" |
|||
wx:if="{{formData.images.length < 3}}" |
|||
bindtap="chooseImage" |
|||
> |
|||
<view class="upload-icon-wrapper"> |
|||
<image class="upload-icon" src="/pagesA/images/jh.png"></image> |
|||
</view> |
|||
<text class="upload-text">上传图片</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="submit-section"> |
|||
<button |
|||
class="submit-btn" |
|||
type="primary" |
|||
formType="submit" |
|||
loading="{{isSubmitting}}" |
|||
disabled="{{isSubmitting || !isFormValid}}" |
|||
> |
|||
{{isSubmitting ? '提交中...' : '提交问诊单'}} |
|||
</button> |
|||
</view> |
|||
|
|||
</form> |
|||
</scroll-view> |
|||
</view> |
|||
@ -0,0 +1,350 @@ |
|||
.xqbox{ |
|||
min-height: 100vh; |
|||
background: #F8FBFF; |
|||
} |
|||
|
|||
|
|||
/* 页面内容 */ |
|||
.page-content { |
|||
height: calc(100vh - 120rpx); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 表单区域 */ |
|||
.form-section { |
|||
background: #FFFFFF; |
|||
margin-bottom: 24rpx; |
|||
padding: 32rpx; |
|||
border-radius: 0; |
|||
border-bottom: 1rpx solid #F0F7FF; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
.section-title text { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #1A1A1A; |
|||
} |
|||
|
|||
.section-required { |
|||
font-size: 24rpx; |
|||
color: #FF6B6B; |
|||
font-weight: 500; |
|||
background: rgba(255, 107, 107, 0.1); |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
.section-optional { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
/* 表单输入 */ |
|||
.form-input { |
|||
height: 96rpx; |
|||
background: #F8FBFF; |
|||
border-radius: 20rpx; |
|||
padding: 0 32rpx; |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
border: 1rpx solid #E5F0FF; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.form-input::placeholder { |
|||
color: #BBB; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.form-input:focus { |
|||
border-color: #4A90E2; |
|||
background: #FFFFFF; |
|||
box-shadow: 0 0 0 3rpx rgba(74, 144, 226, 0.1); |
|||
} |
|||
|
|||
/* 宠物信息网格 */ |
|||
.info-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 24rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.item-label { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
|
|||
.item-label text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.item-input-wrapper { |
|||
position: relative; |
|||
} |
|||
|
|||
.item-input { |
|||
height: 80rpx; |
|||
background: #F8FBFF; |
|||
border-radius: 20rpx; |
|||
padding: 0 32rpx 0 24rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
border: 1rpx solid #E5F0FF; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
|
|||
.input-unit { |
|||
position: absolute; |
|||
right: 24rpx; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
/* 性别选择 */ |
|||
.gender-buttons { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.gender-btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
background: #F8FBFF; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
border: 1rpx solid #E5F0FF; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.gender-btn.active { |
|||
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
|||
color: #FFFFFF; |
|||
border-color: #4A90E2; |
|||
font-weight: 600; |
|||
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); |
|||
} |
|||
|
|||
/* 症状描述 */ |
|||
.symptom-box { |
|||
position: relative; |
|||
} |
|||
|
|||
.symptom-textarea { |
|||
width: 100%; |
|||
min-height: 240rpx; |
|||
background: #F8FBFF; |
|||
border-radius: 20rpx; |
|||
padding: 32rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
border: 1rpx solid #E5F0FF; |
|||
box-sizing: border-box; |
|||
line-height: 1.6; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.symptom-textarea::placeholder { |
|||
color: #BBB; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.symptom-textarea:focus { |
|||
border-color: #4A90E2; |
|||
background: #FFFFFF; |
|||
box-shadow: 0 0 0 3rpx rgba(74, 144, 226, 0.1); |
|||
} |
|||
|
|||
.textarea-counter { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
bottom: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
/* 图片上传 */ |
|||
.upload-tips { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 24rpx; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.image-upload-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 24rpx; |
|||
} |
|||
|
|||
.image-preview { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
.preview-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.remove-overlay { |
|||
position: absolute; |
|||
top: 8rpx; |
|||
right: 8rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
backdrop-filter: blur(4rpx); |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.remove-overlay:active { |
|||
background: rgba(0, 0, 0, 0.8); |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.remove-icon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
|
|||
/* 上传按钮 */ |
|||
.upload-btn { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border: 2rpx dashed #D9E7FF; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #F8FBFF; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.upload-btn:active { |
|||
border-color: #4A90E2; |
|||
background: #F0F7FF; |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
.upload-icon-wrapper { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.upload-icon { |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
} |
|||
|
|||
.upload-text { |
|||
font-size: 24rpx; |
|||
color: #4A90E2; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 提交按钮 */ |
|||
.submit-section { |
|||
padding: 40rpx 32rpx 80rpx; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.submit-btn { |
|||
height: 96rpx; |
|||
background: linear-gradient(135deg, #4A90E2 0%, #357AE8 100%); |
|||
border-radius: 24rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #FFFFFF; |
|||
border: none; |
|||
transition: all 0.3s ease; |
|||
box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.25); |
|||
} |
|||
|
|||
.submit-btn:active { |
|||
transform: translateY(2rpx); |
|||
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.3); |
|||
} |
|||
|
|||
.submit-btn[disabled] { |
|||
opacity: 0.6; |
|||
transform: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.form-section { |
|||
animation: fadeIn 0.4s ease-out forwards; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.form-section:nth-child(1) { animation-delay: 0.1s; } |
|||
.form-section:nth-child(2) { animation-delay: 0.15s; } |
|||
.form-section:nth-child(3) { animation-delay: 0.2s; } |
|||
.form-section:nth-child(4) { animation-delay: 0.25s; } |
|||
@ -0,0 +1,198 @@ |
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
diagnosisData: { |
|||
id: 1, |
|||
status: 'replied', |
|||
createdAt: '2025-02-21', |
|||
userInfo: { |
|||
avatar: '/images/avatars/user1.jpg', |
|||
nickName: '张小明' |
|||
}, |
|||
petInfo: { |
|||
type: '狗', |
|||
age: 3, |
|||
gender: '公' |
|||
}, |
|||
description: '最近三天食欲不振，精神萎靡，偶尔呕吐黄色泡沫，大便偏软带血丝，体温正常但鼻头干燥。已经尝试喂食清淡食物但无改善。昨晚开始呼吸似乎有些急促。', |
|||
images: [ |
|||
'/images/pet1.jpg', |
|||
'/images/pet2.jpg', |
|||
'/images/pet3.jpg' |
|||
], |
|||
replies: [ |
|||
{ |
|||
id: 1, |
|||
vet: { |
|||
avatar: '/images/vets/vet1.jpg', |
|||
name: '李医生', |
|||
title: '主治兽医', |
|||
hospital: '爱宠动物医院', |
|||
years: 8 |
|||
}, |
|||
content: '根据您的描述，狗狗可能出现了消化系统问题。呕吐黄色泡沫通常是胃液，结合大便带血丝的情况，建议立即禁食12小时观察。可以少量喂水，但不要喂食。如果症状持续或加重，建议立即带往医院进行血常规和粪便检查。', |
|||
createdAt: '2025-02-21', |
|||
likes: 12, |
|||
liked: false |
|||
}, |
|||
{ |
|||
id: 2, |
|||
vet: { |
|||
avatar: '/images/vets/vet2.jpg', |
|||
name: '王医生', |
|||
title: '资深兽医', |
|||
hospital: '萌宠医疗中心', |
|||
years: 12 |
|||
}, |
|||
content: '同意李医生的建议。此外，呼吸急促需要特别关注，可能是疼痛或炎症反应。建议测量肛温，正常范围是38-39℃。如果超过39.5℃需要紧急处理。可以检查牙龈颜色，正常应为粉色，发白或发紫需要立即就医。', |
|||
createdAt: '2025-02-21', |
|||
likes: 8, |
|||
liked: true |
|||
} |
|||
] |
|||
}, |
|||
refreshing: false |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
// 根据id加载问诊数据
|
|||
this.loadDiagnosisData(options.id); |
|||
} |
|||
}, |
|||
|
|||
// 加载问诊数据
|
|||
loadDiagnosisData(id) { |
|||
// 这里应该是API请求，暂时使用模拟数据
|
|||
// TODO: 替换为实际API调用
|
|||
console.log('加载问诊数据:', id); |
|||
|
|||
// 确保时间数据正确显示
|
|||
this.setData({ |
|||
'diagnosisData.createdAt': new Date().toISOString(), |
|||
'diagnosisData.replies[0].createdAt': new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), |
|||
'diagnosisData.replies[1].createdAt': new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString() |
|||
}); |
|||
}, |
|||
|
|||
// 格式化时间 - 确保正确显示
|
|||
formatTime(dateString) { |
|||
if (!dateString) return '刚刚'; |
|||
|
|||
try { |
|||
const date = new Date(dateString); |
|||
const now = new Date(); |
|||
const diff = now - date; |
|||
const diffSeconds = Math.floor(diff / 1000); |
|||
const diffMinutes = Math.floor(diff / (1000 * 60)); |
|||
const diffHours = Math.floor(diff / (1000 * 60 * 60)); |
|||
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24)); |
|||
|
|||
if (diffSeconds < 60) { |
|||
return '刚刚'; |
|||
} else if (diffMinutes < 60) { |
|||
return `${diffMinutes}分钟前`; |
|||
} else if (diffHours < 24) { |
|||
return `${diffHours}小时前`; |
|||
} else if (diffDays === 1) { |
|||
return '昨天'; |
|||
} else if (diffDays < 7) { |
|||
return `${diffDays}天前`; |
|||
} else { |
|||
const month = date.getMonth() + 1; |
|||
const day = date.getDate(); |
|||
const hours = date.getHours().toString().padStart(2, '0'); |
|||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|||
return `${month}月${day}日 ${hours}:${minutes}`; |
|||
} |
|||
} catch (error) { |
|||
console.error('时间格式化错误:', error); |
|||
return '刚刚'; |
|||
} |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
goBack() { |
|||
wx.navigateBack(); |
|||
}, |
|||
|
|||
// 分享
|
|||
onShare() { |
|||
wx.showActionSheet({ |
|||
itemList: ['分享给好友', '保存到相册'], |
|||
success: (res) => { |
|||
if (res.tapIndex === 0) { |
|||
wx.showToast({ |
|||
title: '已分享', |
|||
icon: 'success' |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onRefresh() { |
|||
this.setData({ |
|||
refreshing: true |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
refreshing: false |
|||
}); |
|||
wx.showToast({ |
|||
title: '刷新成功', |
|||
icon: 'success' |
|||
}); |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 预览图片
|
|||
previewImage(e) { |
|||
const current = e.currentTarget.dataset.url; |
|||
const urls = e.currentTarget.dataset.urls; |
|||
|
|||
wx.previewImage({ |
|||
current, |
|||
urls |
|||
}); |
|||
}, |
|||
|
|||
// 点赞/取消点赞
|
|||
toggleLike(e) { |
|||
const index = e.currentTarget.dataset.index; |
|||
const replies = [...this.data.diagnosisData.replies]; |
|||
const reply = replies[index]; |
|||
|
|||
if (reply.liked) { |
|||
// 取消点赞
|
|||
reply.liked = false; |
|||
reply.likes = Math.max(0, (reply.likes || 1) - 1); |
|||
wx.showToast({ |
|||
title: '已取消', |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
// 点赞
|
|||
reply.liked = true; |
|||
reply.likes = (reply.likes || 0) + 1; |
|||
wx.showToast({ |
|||
title: '已点赞', |
|||
icon: 'success' |
|||
}); |
|||
} |
|||
|
|||
this.setData({ |
|||
'diagnosisData.replies': replies |
|||
}); |
|||
|
|||
// 震动反馈
|
|||
wx.vibrateShort(); |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"问诊详情", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,160 @@ |
|||
<view class="xqbox"> |
|||
|
|||
<!-- 页面内容 --> |
|||
<scroll-view class="page-content" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh"> |
|||
|
|||
<!-- 用户问诊卡片 --> |
|||
<view class="user-query-card card-enter"> |
|||
<!-- 用户信息 --> |
|||
<view class="user-info-section"> |
|||
<view class="avatar-wrapper"> |
|||
<image class="user-avatar" src="/pages/images/tx.png"></image> |
|||
</view> |
|||
<view class="user-details"> |
|||
<view class="user-name-row"> |
|||
<text class="user-name">{{diagnosisData.userInfo.nickName || '用户'}}</text> |
|||
<view class="status-badge {{diagnosisData.status === 'replied' ? 'status-replied' : 'status-pending'}} pulse"> |
|||
{{diagnosisData.status === 'replied' ? '已回复' : '待回复'}} |
|||
</view> |
|||
</view> |
|||
<view class="pet-info"> |
|||
<view class="pet-info-tags"> |
|||
<view class="pet-tag gradient-blue">{{diagnosisData.petInfo.type}}</view> |
|||
<view class="pet-tag gradient-orange">{{diagnosisData.petInfo.age}}岁</view> |
|||
<view class="pet-tag gradient-pink">{{diagnosisData.petInfo.gender}}</view> |
|||
</view> |
|||
<view class="time-info"> |
|||
<text class="time-text">{{diagnosisData.createdAt}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 症状描述 --> |
|||
<view class="symptom-section"> |
|||
<view class="section-header"> |
|||
<text class="section-title">症状描述</text> |
|||
<view class="title-decoration"></view> |
|||
</view> |
|||
<view class="symptom-content"> |
|||
<view class="quote-left"> |
|||
<text>"</text> |
|||
</view> |
|||
<text class="symptom-text">{{diagnosisData.description}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 相关图片 --> |
|||
<view class="image-section" wx:if="{{diagnosisData.images && diagnosisData.images.length > 0}}"> |
|||
<view class="section-header"> |
|||
<text class="section-title">相关图片</text> |
|||
<text class="image-count gradient-blue">{{diagnosisData.images.length}}张</text> |
|||
</view> |
|||
<scroll-view class="images-scroll" scroll-x> |
|||
<view class="images-container"> |
|||
<block wx:for="{{diagnosisData.images}}" wx:key="*this" wx:for-index="index"> |
|||
<view class="image-wrapper"> |
|||
<image |
|||
class="symptom-image" |
|||
src="{{item}}" |
|||
mode="aspectFill" |
|||
bindtap="previewImage" |
|||
data-url="{{item}}" |
|||
data-urls="{{diagnosisData.images}}" |
|||
></image> |
|||
<view class="image-overlay"> |
|||
<text class="image-index">{{index + 1}}</text> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 卡片装饰 --> |
|||
<view class="card-decoration"> |
|||
<view class="decoration-dot dot-1"></view> |
|||
<view class="decoration-dot dot-2"></view> |
|||
<view class="decoration-dot dot-3"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 兽医回复区域 --> |
|||
<view class="replies-section"> |
|||
<view class="section-header"> |
|||
<text class="section-title">兽医回复</text> |
|||
<view class="reply-count gradient-purple"> |
|||
<text class="count-number">{{diagnosisData.replies.length}}</text> |
|||
<text class="count-text">条回复</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 回复列表 --> |
|||
<view class="replies-list"> |
|||
<block wx:for="{{diagnosisData.replies}}" wx:key="id" wx:for-index="index"> |
|||
<view class="vet-reply-card fade-in-up" style="animation-delay: {{index * 0.1}}s;"> |
|||
<!-- 兽医信息 --> |
|||
<view class="vet-info"> |
|||
<view class="avatar-wrapper"> |
|||
<image class="vet-avatar" src="/pages/images/tx.png"></image> |
|||
<view class="vet-verified"></view> |
|||
</view> |
|||
<view class="vet-details"> |
|||
<view class="vet-name-row"> |
|||
<text class="vet-name">{{item.vet.name}}</text> |
|||
<view class="vet-badge gradient-gold"> |
|||
<text class="vet-title">{{item.vet.title}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="vet-meta"> |
|||
<view class="meta-item"> |
|||
<image class="meta-icon" src="/icons/hospital.svg"></image> |
|||
<text class="vet-hospital">{{item.vet.hospital}}</text> |
|||
</view> |
|||
<view class="meta-item"> |
|||
<image class="meta-icon" src="/icons/experience.svg"></image> |
|||
<text class="vet-experience">{{item.vet.years}}年经验</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 回复内容 --> |
|||
<view class="reply-content"> |
|||
<view class="reply-bubble"> |
|||
<text class="reply-text">{{item.content}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 回复底部 --> |
|||
<view class="reply-footer"> |
|||
<view class="reply-time"> |
|||
<text class="time-text">{{item.createdAt}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 回复装饰 --> |
|||
<view class="reply-decoration"> |
|||
<image class="decoration-icon" src="/icons/star.svg"></image> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<!-- 无回复状态 --> |
|||
<view wx:if="{{diagnosisData.replies.length === 0}}" class="no-replies fade-in"> |
|||
<image class="no-replies-icon" src="/images/waiting.png"></image> |
|||
<text class="no-replies-title">等待兽医回复中</text> |
|||
<text class="no-replies-desc">专业兽医通常会在24小时内为您解答</text> |
|||
<view class="waiting-animation"> |
|||
<view class="loading-dot dot-1"></view> |
|||
<view class="loading-dot dot-2"></view> |
|||
<view class="loading-dot dot-3"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部安全区域 --> |
|||
<view class="page-bottom"></view> |
|||
</scroll-view> |
|||
</view> |
|||
@ -0,0 +1,643 @@ |
|||
.xqbox { |
|||
background: linear-gradient(180deg, #F8FBFF 0%, #F0F7FF 100%); |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
/* 页面内容 */ |
|||
.page-content { |
|||
height: calc(100vh - 120rpx); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
@keyframes cardEnter { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(40rpx) scale(0.95); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0) scale(1); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeInUp { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(30rpx); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { opacity: 0; } |
|||
to { opacity: 1; } |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0% { transform: scale(1); } |
|||
50% { transform: scale(1.05); } |
|||
100% { transform: scale(1); } |
|||
} |
|||
|
|||
@keyframes float { |
|||
0%, 100% { transform: translateY(0); } |
|||
50% { transform: translateY(-10rpx); } |
|||
} |
|||
|
|||
.card-enter { |
|||
animation: cardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; |
|||
} |
|||
|
|||
.fade-in-up { |
|||
animation: fadeInUp 0.5s ease-out forwards; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.fade-in { |
|||
animation: fadeIn 0.8s ease-out forwards; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.pulse { |
|||
animation: pulse 2s infinite; |
|||
} |
|||
|
|||
.hover-effect { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.hover-effect:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
/* 渐变背景 */ |
|||
.gradient-blue { |
|||
background: linear-gradient(135deg, #6D9EFF 0%, #4A7CFF 100%); |
|||
color: white !important; |
|||
} |
|||
|
|||
.gradient-orange { |
|||
background: linear-gradient(135deg, #FF9500 0%, #FF7F00 100%); |
|||
color: white !important; |
|||
} |
|||
|
|||
.gradient-pink { |
|||
background: linear-gradient(135deg, #FF6B9D 0%, #FF4081 100%); |
|||
color: white !important; |
|||
} |
|||
|
|||
.gradient-purple { |
|||
background: linear-gradient(135deg, #9D4BFF 0%, #7C3AED 100%); |
|||
color: white !important; |
|||
} |
|||
|
|||
.gradient-gold { |
|||
background: linear-gradient(135deg, #FFD700 0%, #FFB300 100%); |
|||
color: white !important; |
|||
} |
|||
|
|||
/* 用户问诊卡片 */ |
|||
.user-query-card { |
|||
background: #FFFFFF; |
|||
margin: 24rpx; |
|||
border-radius: 28rpx; |
|||
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
|||
border: 2rpx solid #FFFFFF; |
|||
overflow: hidden; |
|||
position: relative; |
|||
backdrop-filter: blur(20rpx); |
|||
} |
|||
|
|||
/* 卡片装饰 */ |
|||
.card-decoration { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.decoration-dot { |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, rgba(109, 158, 255, 0.1) 0%, rgba(74, 124, 255, 0.1) 100%); |
|||
} |
|||
|
|||
.dot-1 { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
top: -40rpx; |
|||
right: -40rpx; |
|||
} |
|||
|
|||
.dot-2 { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
bottom: 60rpx; |
|||
left: -20rpx; |
|||
} |
|||
|
|||
.dot-3 { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
bottom: -20rpx; |
|||
right: 80rpx; |
|||
} |
|||
|
|||
/* 用户信息区域 */ |
|||
.user-info-section { |
|||
padding: 40rpx 32rpx 32rpx; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.avatar-wrapper { |
|||
position: relative; |
|||
margin-right: 24rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.user-avatar { |
|||
width: 88rpx; |
|||
height: 88rpx; |
|||
border-radius: 50%; |
|||
border: 3rpx solid #FFFFFF; |
|||
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3); |
|||
} |
|||
|
|||
|
|||
|
|||
.user-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.user-name-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.user-name { |
|||
font-size: 34rpx; |
|||
font-weight: 700; |
|||
color: #1A1A1A; |
|||
line-height: 1.2; |
|||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.status-badge { |
|||
padding: 10rpx 24rpx; |
|||
border-radius: 24rpx; |
|||
font-size: 26rpx; |
|||
font-weight: 700; |
|||
min-width: 88rpx; |
|||
text-align: center; |
|||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.status-replied { |
|||
background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); |
|||
color: white; |
|||
} |
|||
|
|||
.status-pending { |
|||
background: linear-gradient(135deg, #FF9500 0%, #F39C12 100%); |
|||
color: white; |
|||
} |
|||
|
|||
.pet-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.pet-info-tags { |
|||
display: flex; |
|||
gap: 12rpx; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.pet-tag { |
|||
padding: 6rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.time-info { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
background: rgba(109, 158, 255, 0.08); |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
align-self: flex-start; |
|||
} |
|||
|
|||
|
|||
|
|||
.time-text { |
|||
font-size: 24rpx; |
|||
color: #6D9EFF; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 症状描述区域 - 调整到最左边 */ |
|||
.symptom-section { |
|||
padding: 32rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 28rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #1A1A1A; |
|||
position: relative; |
|||
padding-right: 16rpx; |
|||
} |
|||
|
|||
.title-decoration { |
|||
flex: 1; |
|||
height: 2rpx; |
|||
background: linear-gradient(90deg, #E5F0FF 0%, #6D9EFF 50%, #E5F0FF 100%); |
|||
margin-left: 16rpx; |
|||
border-radius: 1rpx; |
|||
} |
|||
|
|||
.symptom-content { |
|||
background: #F8FBFF; |
|||
border-radius: 24rpx; |
|||
padding: 36rpx 32rpx; |
|||
border: 2rpx solid #E5F0FF; |
|||
position: relative; |
|||
box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.1); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.symptom-content:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.15); |
|||
} |
|||
|
|||
.quote-left { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
left: 20rpx; |
|||
font-size: 48rpx; |
|||
color: #6D9EFF; |
|||
font-weight: 700; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.symptom-text { |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
line-height: 1.8; |
|||
font-weight: 400; |
|||
text-align: left; |
|||
} |
|||
|
|||
/* 图片展示区域 */ |
|||
.image-section { |
|||
padding: 32rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.image-count { |
|||
margin-left: auto; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.images-scroll { |
|||
width: 100%; |
|||
} |
|||
|
|||
.images-container { |
|||
display: flex; |
|||
padding: 8rpx 0; |
|||
} |
|||
|
|||
.image-wrapper { |
|||
margin-right: 20rpx; |
|||
position: relative; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.image-wrapper:last-child { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.image-wrapper:active { |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
.symptom-image { |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.image-overlay { |
|||
position: absolute; |
|||
top: 12rpx; |
|||
left: 12rpx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
backdrop-filter: blur(4rpx); |
|||
} |
|||
|
|||
.image-index { |
|||
color: white; |
|||
font-size: 20rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/* 兽医回复区域 */ |
|||
.replies-section { |
|||
margin: 24rpx; |
|||
} |
|||
|
|||
.reply-count { |
|||
margin-left: auto; |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 4rpx; |
|||
box-shadow: 0 4rpx 12rpx rgba(157, 75, 255, 0.3); |
|||
} |
|||
|
|||
.count-number { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.count-text { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
/* 回复列表 */ |
|||
.replies-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24rpx; |
|||
} |
|||
|
|||
.vet-reply-card { |
|||
background: #FFFFFF; |
|||
border-radius: 28rpx; |
|||
padding: 36rpx; |
|||
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
|||
border: 2rpx solid #FFFFFF; |
|||
position: relative; |
|||
overflow: hidden; |
|||
backdrop-filter: blur(20rpx); |
|||
} |
|||
|
|||
/* 回复装饰 */ |
|||
.reply-decoration { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 20rpx; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.decoration-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
animation: float 3s ease-in-out infinite; |
|||
} |
|||
|
|||
/* 兽医信息 */ |
|||
.vet-info { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
.vet-avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
border: 3rpx solid #FFFFFF; |
|||
box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3); |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.vet-verified { |
|||
position: absolute; |
|||
bottom: 2rpx; |
|||
right: 2rpx; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
background: #2ECC71; |
|||
border: 2rpx solid white; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.vet-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.vet-name-row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.vet-name { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #1A1A1A; |
|||
margin-right: 16rpx; |
|||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.vet-badge { |
|||
padding: 6rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3); |
|||
} |
|||
|
|||
.vet-title { |
|||
font-size: 24rpx; |
|||
font-weight: 700; |
|||
letter-spacing: 0.5rpx; |
|||
} |
|||
|
|||
.vet-meta { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.meta-item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 6rpx; |
|||
background: rgba(109, 158, 255, 0.08); |
|||
padding: 6rpx 12rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.meta-icon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.vet-hospital, |
|||
.vet-experience { |
|||
font-size: 24rpx; |
|||
color: #6D9EFF; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 回复内容 */ |
|||
.reply-content { |
|||
margin-bottom: 28rpx; |
|||
} |
|||
|
|||
.reply-bubble { |
|||
background: #F8FBFF; |
|||
border-radius: 24rpx; |
|||
padding: 32rpx; |
|||
border: 2rpx solid #E5F0FF; |
|||
position: relative; |
|||
box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.1); |
|||
} |
|||
|
|||
.reply-bubble::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: -12rpx; |
|||
left: 40rpx; |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 12rpx solid transparent; |
|||
border-right: 12rpx solid transparent; |
|||
border-bottom: 12rpx solid #F8FBFF; |
|||
} |
|||
|
|||
.reply-text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.8; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
/* 回复底部 */ |
|||
.reply-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-top: 24rpx; |
|||
border-top: 2rpx dashed #E5F0FF; |
|||
} |
|||
|
|||
.reply-time { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
background: rgba(109, 158, 255, 0.1); |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
/* 无回复状态 */ |
|||
.no-replies { |
|||
background: #FFFFFF; |
|||
border-radius: 28rpx; |
|||
padding: 80rpx 40rpx; |
|||
text-align: center; |
|||
box-shadow: 0 12rpx 48rpx rgba(74, 144, 226, 0.15); |
|||
border: 2rpx solid #FFFFFF; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.no-replies-icon { |
|||
width: 200rpx; |
|||
height: 150rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.6; |
|||
filter: hue-rotate(200deg); |
|||
} |
|||
|
|||
.no-replies-title { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 700; |
|||
margin-bottom: 16rpx; |
|||
display: block; |
|||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.no-replies-desc { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
line-height: 1.4; |
|||
max-width: 400rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.waiting-animation { |
|||
display: flex; |
|||
justify-content: center; |
|||
gap: 12rpx; |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.loading-dot { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
border-radius: 50%; |
|||
background: #6D9EFF; |
|||
animation: pulse 1.5s infinite ease-in-out; |
|||
} |
|||
|
|||
.loading-dot.dot-1 { animation-delay: 0s; } |
|||
.loading-dot.dot-2 { animation-delay: 0.2s; } |
|||
.loading-dot.dot-3 { animation-delay: 0.4s; } |
|||
|
|||
/* 页面底部安全区域 */ |
|||
.page-bottom { |
|||
height: 60rpx; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue