ZhaoYang
1 week ago
19 changed files with 1654 additions and 1984 deletions
-
3app.json
-
2pages/home/home.js
-
4pages/home/home.wxml
-
26pages/personal/personal.wxml
-
16pages/personal/personal.wxss
-
2pagesA/pages/askingSyAdd/askingSyAdd.wxml
-
6pagesA/pages/expert/expert.wxss
-
1150pagesA/pages/expertChat/expertChat.js
-
135pagesA/pages/expertChat/expertChat.wxml
-
492pagesA/pages/expertChat/expertChat.wxss
-
97pagesA/pages/noticeList/noticeList.js
-
4pagesA/pages/noticeList/noticeList.json
-
108pagesA/pages/noticeList/noticeList.wxml
-
289pagesA/pages/noticeList/noticeList.wxss
-
291pagesA/pages/wzai/wzai.js
-
68pagesA/pages/wzai/wzai.wxml
-
939pagesA/pages/wzai/wzai.wxss
-
2utils/api.js
-
4utils/baseUrl.js
1150
pagesA/pages/expertChat/expertChat.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,97 @@ |
|||||
|
import http from '../../../utils/api' |
||||
|
Page({ |
||||
|
data: { |
||||
|
// 分类数据
|
||||
|
categories: [ |
||||
|
{ name: '全部', value: 'all' }, |
||||
|
{ name: '系统公告', value: 'system', tagBg: '#e9efff', importanceColor: '#3b82f6' }, |
||||
|
{ name: '活动通知', value: 'activity', tagBg: '#f3e8ff', importanceColor: '#8b5cf6' }, |
||||
|
{ name: '紧急提醒', value: 'urgent', tagBg: '#ffe4e2', importanceColor: '#ef4444' }, |
||||
|
{ name: '学术讲座', value: 'academic', tagBg: '#dcfce7', importanceColor: '#10b981' }, |
||||
|
{ name: '校园生活', value: 'campus', tagBg: '#fff3cd', importanceColor: '#f59e0b' }, |
||||
|
], |
||||
|
currentCategory: 'all', // 当前选中分类
|
||||
|
searchKeyword: '', // 搜索关键字
|
||||
|
noticeList: [], // 渲染列表数据
|
||||
|
pageIndex: 1, // 页码
|
||||
|
pageSize: 8, // 每页条数
|
||||
|
hasMore: true, // 是否有更多
|
||||
|
loading: false, // 首次加载/加载中
|
||||
|
refreshing: false, // 下拉刷新状态
|
||||
|
mockTotal: 28, // 模拟总条数
|
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// this.loadFirstPage();
|
||||
|
this.getdisaster() |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 通知公告
|
||||
|
getdisaster(){ |
||||
|
http.disaster({ |
||||
|
data:{}, |
||||
|
success: res => { |
||||
|
console.log(111,res); |
||||
|
this.setData({ |
||||
|
noticeList:res.rows |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// 切换分类
|
||||
|
switchCategory(e) { |
||||
|
const category = e.currentTarget.dataset.category; |
||||
|
if (category === this.data.currentCategory) return; |
||||
|
this.setData({ currentCategory: category }); |
||||
|
this.loadFirstPage(); |
||||
|
}, |
||||
|
|
||||
|
// 搜索输入
|
||||
|
onSearchInput(e) { |
||||
|
this.setData({ searchKeyword: e.detail.value }); |
||||
|
}, |
||||
|
|
||||
|
// 执行搜索（确认或点击清空后也会触发重置）
|
||||
|
handleSearch() { |
||||
|
this.loadFirstPage(); |
||||
|
}, |
||||
|
|
||||
|
// 清空搜索框
|
||||
|
clearSearch() { |
||||
|
this.setData({ searchKeyword: '' }, () => { |
||||
|
this.loadFirstPage(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 上拉加载更多
|
||||
|
loadMore() { |
||||
|
const { hasMore, loading, refreshing } = this.data; |
||||
|
if (!hasMore || loading || refreshing) return; |
||||
|
this.setData({ loading: true }); |
||||
|
this.fetchNotices(false); |
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新
|
||||
|
onRefresh() { |
||||
|
this.setData({ refreshing: true }); |
||||
|
// 重置到第一页
|
||||
|
this.setData({ pageIndex: 1, hasMore: true }, () => { |
||||
|
this.fetchNotices(true); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 查看详情 (仅跳转示意)
|
||||
|
viewDetail(e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
wx.showToast({ |
||||
|
title: `查看公告 ${id}`, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
// 实际开发: wx.navigateTo...
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"通知公告列表", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,108 @@ |
|||||
|
<view class="notice-page"> |
||||
|
<!-- 毛玻璃背景装饰 --> |
||||
|
<view class="bg-blur"></view> |
||||
|
|
||||
|
<!-- 主内容区 --> |
||||
|
<view class="content"> |
||||
|
<!-- 头部标题 & 搜索栏一体化 --> |
||||
|
<view class="header"> |
||||
|
<text class="title">📋 公告·通知</text> |
||||
|
<view class="search-box"> |
||||
|
<text class="icon">🔍</text> |
||||
|
<input |
||||
|
type="text" |
||||
|
placeholder="搜索标题或摘要..." |
||||
|
placeholder-class="placeholder" |
||||
|
bindinput="onSearchInput" |
||||
|
value="{{searchKeyword}}" |
||||
|
confirm-type="search" |
||||
|
bindconfirm="handleSearch" |
||||
|
/> |
||||
|
<text class="clear-icon" wx:if="{{searchKeyword}}" bindtap="clearSearch">✕</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 分类导航 - 滑动流畅 --> |
||||
|
<scroll-view class="category-scroll" scroll-x show-scrollbar="{{false}}" enhanced> |
||||
|
<view class="category-list"> |
||||
|
<view |
||||
|
wx:for="{{categories}}" |
||||
|
wx:key="index" |
||||
|
class="category-item {{currentCategory === item.value ? 'active' : ''}}" |
||||
|
bindtap="switchCategory" |
||||
|
data-category="{{item.value}}" |
||||
|
> |
||||
|
<text>{{item.name}}</text> |
||||
|
<text class="dot" wx:if="{{currentCategory === item.value}}"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 列表内容区域 --> |
||||
|
<view class="list-container"> |
||||
|
<!-- 骨架屏 / 加载提示 --> |
||||
|
<block wx:if="{{loading && noticeList.length === 0}}"> |
||||
|
<view class="skeleton-list"> |
||||
|
<view wx:for="{{4}}" wx:key="*this" class="skeleton-item"></view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 列表渲染 --> |
||||
|
<scroll-view |
||||
|
class="notice-scroll" |
||||
|
scroll-y |
||||
|
enhanced |
||||
|
show-scrollbar="{{false}}" |
||||
|
bindscrolltolower="loadMore" |
||||
|
lower-threshold="50" |
||||
|
refresher-enabled |
||||
|
refresher-triggered="{{refreshing}}" |
||||
|
bindrefresherrefresh="onRefresh" |
||||
|
> |
||||
|
<view class="notice-list"> |
||||
|
<view |
||||
|
wx:for="{{noticeList}}" |
||||
|
wx:key="id" |
||||
|
class="notice-card" |
||||
|
bindtap="viewDetail" |
||||
|
data-id="{{item.id}}" |
||||
|
> |
||||
|
<!-- 重要性标记装饰 --> |
||||
|
<view class="card-left-bar" style="background: {{item.importanceColor}};"></view> |
||||
|
<view class="card-content"> |
||||
|
<view class="card-header"> |
||||
|
<text class="notice-title">{{item.title}}</text> |
||||
|
<text class="notice-tag" style="background: {{item.tagBg}};">{{item.warningType}}</text> |
||||
|
</view> |
||||
|
<view class="notice-abstract">{{item.responseMeasures}}</view> |
||||
|
<view class="card-footer"> |
||||
|
<view class="date-time"> |
||||
|
<text class="date-icon">📅</text> |
||||
|
<text>{{item.createdTime}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 上拉加载更多状态 --> |
||||
|
<view class="load-more" wx:if="{{noticeList.length > 0}}"> |
||||
|
<block wx:if="{{hasMore}}"> |
||||
|
<text class="loading-icon">⋯</text> |
||||
|
<text>加载更多</text> |
||||
|
</block> |
||||
|
<block wx:else> |
||||
|
<text>—— 已经到底了 ——</text> |
||||
|
</block> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 空状态展示 --> |
||||
|
<view class="empty-state" wx:if="{{!loading && noticeList.length === 0}}"> |
||||
|
<image src="/images/empty-notice.png" mode="aspectFit" style="width: 160rpx; height: 160rpx;" wx:if="{{false}}"></image> |
||||
|
<text>📭 暂无相关公告</text> |
||||
|
<text style="font-size: 28rpx; color: #999; margin-top: 16rpx;">试试其他关键词或分类</text> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,289 @@ |
|||||
|
.page { |
||||
|
background: linear-gradient(145deg, #f5f7fa 0%, #f0f2f5 100%); |
||||
|
} |
||||
|
.notice-page { |
||||
|
min-height: 100vh; |
||||
|
background: transparent; |
||||
|
position: relative; |
||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif; |
||||
|
} |
||||
|
.bg-blur { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: radial-gradient(circle at 20% 30%, rgba(235, 245, 255, 0.7) 0%, rgba(255, 255, 255, 0.9) 70%); |
||||
|
backdrop-filter: blur(20px); |
||||
|
-webkit-backdrop-filter: blur(20px); |
||||
|
z-index: 0; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.content { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 30rpx 32rpx 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 头部与搜索 */ |
||||
|
.header { |
||||
|
margin-bottom: 36rpx; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 48rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1e293b; |
||||
|
letter-spacing: 2rpx; |
||||
|
display: block; |
||||
|
margin-bottom: 24rpx; |
||||
|
text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02); |
||||
|
} |
||||
|
.search-box { |
||||
|
background: rgba(255,255,255,0.7); |
||||
|
backdrop-filter: blur(8px); |
||||
|
-webkit-backdrop-filter: blur(8px); |
||||
|
border-radius: 48rpx; |
||||
|
padding: 16rpx 32rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border: 1rpx solid rgba(255,255,255,0.9); |
||||
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.02), 0 2rpx 4rpx rgba(0,0,0,0.02); |
||||
|
transition: all 0.2s; |
||||
|
} |
||||
|
.search-box:focus-within { |
||||
|
border-color: #b2d9ff; |
||||
|
background: rgba(255,255,255,0.9); |
||||
|
box-shadow: 0 12rpx 28rpx rgba(0,120,255,0.08); |
||||
|
} |
||||
|
.search-box .icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #7c8ea0; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
.search-box input { |
||||
|
flex: 1; |
||||
|
font-size: 30rpx; |
||||
|
padding: 8rpx 0; |
||||
|
color: #1e293b; |
||||
|
} |
||||
|
.placeholder { |
||||
|
color: #9aa6b2; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.clear-icon { |
||||
|
font-size: 36rpx; |
||||
|
color: #8e9dac; |
||||
|
padding: 8rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(0,0,0,0.02); |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
/* 分类导航 — 磨砂质感 */ |
||||
|
.category-scroll { |
||||
|
white-space: nowrap; |
||||
|
margin-bottom: 32rpx; |
||||
|
background: rgba(255,255,255,0.5); |
||||
|
backdrop-filter: blur(12px); |
||||
|
-webkit-backdrop-filter: blur(12px); |
||||
|
border-radius: 60rpx; |
||||
|
padding: 8rpx 0; |
||||
|
border: 1rpx solid rgba(255,255,255,0.8); |
||||
|
} |
||||
|
.category-list { |
||||
|
display: inline-flex; |
||||
|
padding: 0 24rpx; |
||||
|
} |
||||
|
.category-item { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 16rpx 36rpx; |
||||
|
margin-right: 12rpx; |
||||
|
border-radius: 60rpx; |
||||
|
font-size: 30rpx; |
||||
|
color: #475569; |
||||
|
background: transparent; |
||||
|
transition: all 0.18s; |
||||
|
position: relative; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.category-item.active { |
||||
|
background: #ffffff; |
||||
|
color: #1e4bd2; |
||||
|
font-weight: 600; |
||||
|
box-shadow: 0 6rpx 14rpx rgba(0,80,255,0.1); |
||||
|
} |
||||
|
.dot { |
||||
|
width: 8rpx; |
||||
|
height: 8rpx; |
||||
|
background: #1e4bd2; |
||||
|
border-radius: 50%; |
||||
|
margin-top: 6rpx; |
||||
|
} |
||||
|
|
||||
|
/* 列表容器 */ |
||||
|
.list-container { |
||||
|
flex: 1; |
||||
|
height: calc(100vh - 280rpx); |
||||
|
background: transparent; |
||||
|
border-radius: 40rpx 40rpx 0 0; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.notice-scroll { |
||||
|
height: 100%; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
.notice-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 28rpx; |
||||
|
} |
||||
|
/* 卡片设计 — 轻盈毛玻璃 */ |
||||
|
.notice-card { |
||||
|
background: rgba(255,255,255,0.7); |
||||
|
backdrop-filter: blur(16px); |
||||
|
-webkit-backdrop-filter: blur(16px); |
||||
|
border-radius: 36rpx; |
||||
|
border: 1rpx solid rgba(255,255,255,0.9); |
||||
|
box-shadow: 0 8rpx 18rpx rgba(0,0,0,0.02); |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
transition: transform 0.2s, box-shadow 0.3s; |
||||
|
} |
||||
|
.notice-card:active { |
||||
|
transform: scale(0.99); |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); |
||||
|
} |
||||
|
.card-left-bar { |
||||
|
width: 12rpx; |
||||
|
flex-shrink: 0; |
||||
|
background: #3b82f6; |
||||
|
} |
||||
|
.card-content { |
||||
|
flex: 1; |
||||
|
padding: 32rpx 28rpx; |
||||
|
} |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
.notice-title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: 600; |
||||
|
color: #0a1e3c; |
||||
|
max-width: 460rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.notice-tag { |
||||
|
font-size: 24rpx; |
||||
|
padding: 8rpx 24rpx; |
||||
|
border-radius: 48rpx; |
||||
|
background: #eef2ff; |
||||
|
color: #1e4bd2; |
||||
|
font-weight: 500; |
||||
|
letter-spacing: 1rpx; |
||||
|
} |
||||
|
.notice-abstract { |
||||
|
font-size: 28rpx; |
||||
|
color: #55657a; |
||||
|
line-height: 1.5; |
||||
|
margin-bottom: 28rpx; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.card-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #778a9b; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
.date-time, .view-count { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 加载更多 / 状态 */ |
||||
|
.load-more { |
||||
|
text-align: center; |
||||
|
padding: 48rpx 0 36rpx; |
||||
|
color: #8f9eb0; |
||||
|
font-size: 28rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 12rpx; |
||||
|
} |
||||
|
.loading-icon { |
||||
|
font-size: 48rpx; |
||||
|
line-height: 1; |
||||
|
animation: pulse 1.2s infinite; |
||||
|
} |
||||
|
@keyframes pulse { |
||||
|
0%, 100% { opacity: 0.6; } |
||||
|
50% { opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
/* 骨架屏 */ |
||||
|
.skeleton-list { |
||||
|
padding: 0 8rpx; |
||||
|
} |
||||
|
.skeleton-item { |
||||
|
background: rgba(255,255,255,0.6); |
||||
|
border-radius: 32rpx; |
||||
|
height: 220rpx; |
||||
|
margin-bottom: 28rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.skeleton-item::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: -150%; |
||||
|
width: 200%; |
||||
|
height: 100%; |
||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); |
||||
|
animation: shimmer 1.5s infinite; |
||||
|
} |
||||
|
@keyframes shimmer { |
||||
|
100% { left: 100%; } |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 120rpx 0; |
||||
|
color: #6f7d8c; |
||||
|
font-size: 32rpx; |
||||
|
background: rgba(255,255,255,0.4); |
||||
|
backdrop-filter: blur(8px); |
||||
|
border-radius: 48rpx; |
||||
|
margin-top: 60rpx; |
||||
|
} |
||||
|
|
||||
|
/* 模拟图片(无实际图片用文字代替) */ |
||||
|
.empty-state text:first-of-type { |
||||
|
font-size: 64rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
@ -1,486 +1,455 @@ |
|||||
|
|
||||
.diagnosis-container { |
.diagnosis-container { |
||||
min-height: 100vh; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%); |
|
||||
} |
|
||||
|
|
||||
/* 顶部功能选择 */ |
|
||||
.nav-right { |
|
||||
position: absolute; |
|
||||
right: 30rpx; |
|
||||
top: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.more-btn { |
|
||||
width: 64rpx; |
|
||||
height: 64rpx; |
|
||||
border-radius: 50%; |
|
||||
background:#86D8D0; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
color: white; |
|
||||
font-size: 36rpx; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
/* 医生信息卡片 */ |
|
||||
.doctor-card { |
|
||||
background: white; |
|
||||
margin: 24rpx 32rpx; |
|
||||
padding: 32rpx; |
|
||||
border-radius: 20rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.doctor-avatar { |
|
||||
width: 120rpx; |
|
||||
height: 120rpx; |
|
||||
border-radius: 50%; |
|
||||
background: linear-gradient(135deg, #86D8D0 0%, #A8E6CF 100%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-right: 24rpx; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.avatar-img { |
|
||||
width: 100rpx; |
|
||||
height: 100rpx; |
|
||||
} |
|
||||
|
|
||||
.doctor-info { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.doctor-name { |
|
||||
display: block; |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
margin-bottom: 8rpx; |
|
||||
} |
|
||||
|
|
||||
.doctor-title { |
|
||||
display: block; |
|
||||
font-size: 24rpx; |
|
||||
color: #86D8D0; |
|
||||
margin-bottom: 16rpx; |
|
||||
} |
|
||||
|
|
||||
.doctor-tags { |
|
||||
display: flex; |
|
||||
gap: 12rpx; |
|
||||
} |
|
||||
|
|
||||
.tag { |
|
||||
font-size: 20rpx; |
|
||||
padding: 6rpx 12rpx; |
|
||||
background: #E8F4F3; |
|
||||
color: #6BC4BC; |
|
||||
border-radius: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.online-status { |
|
||||
position: absolute; |
|
||||
right: 32rpx; |
|
||||
bottom: 32rpx; |
|
||||
font-size: 22rpx; |
|
||||
padding: 4rpx 12rpx; |
|
||||
border-radius: 12rpx; |
|
||||
} |
|
||||
|
|
||||
.online-status.online { |
|
||||
background: #e8f1f4; |
|
||||
color: #6b8fc4; |
|
||||
} |
|
||||
|
|
||||
/* 聊天容器 */ |
|
||||
.chat-container { |
|
||||
flex: 1; |
|
||||
/* padding: 0 32rpx; */ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
/* 消息样式 */ |
|
||||
.message-wrapper { |
|
||||
display: flex; |
|
||||
margin: 40rpx 0; |
|
||||
animation: fadeIn 0.3s ease; |
|
||||
} |
|
||||
|
|
||||
@keyframes fadeIn { |
|
||||
from { opacity: 0; transform: translateY(20rpx); } |
|
||||
to { opacity: 1; transform: translateY(0); } |
|
||||
} |
|
||||
|
|
||||
.message-wrapper.user { |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
|
|
||||
.message-content { |
|
||||
max-width: 70%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.message-wrapper.user .message-content { |
|
||||
align-items: flex-end; |
|
||||
} |
|
||||
|
|
||||
.message-wrapper.assistant .message-content { |
|
||||
align-items: flex-start; |
|
||||
} |
|
||||
|
|
||||
.message-avatar { |
|
||||
width: 80rpx; |
|
||||
height: 80rpx; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
margin: 0 20rpx; |
|
||||
align-self: flex-end; |
|
||||
} |
|
||||
|
|
||||
.avatar { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
/* 消息气泡 */ |
|
||||
.message-bubble { |
|
||||
padding: 24rpx; |
|
||||
border-radius: 24rpx; |
|
||||
position: relative; |
|
||||
line-height: 1.5; |
|
||||
} |
|
||||
|
|
||||
.assistant-bubble { |
|
||||
background: #E8F4F3; |
|
||||
border-radius: 0 24rpx 24rpx 24rpx; |
|
||||
} |
|
||||
|
|
||||
.user-bubble { |
|
||||
background: #86D8D0; |
|
||||
border-radius: 24rpx 0 24rpx 24rpx; |
|
||||
} |
|
||||
|
|
||||
.message-text { |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.user-bubble .message-text { |
|
||||
color: white; |
|
||||
} |
|
||||
|
|
||||
/* 消息时间 */ |
|
||||
.message-time { |
|
||||
font-size: 22rpx; |
|
||||
color: #999; |
|
||||
margin-top: 8rpx; |
|
||||
} |
|
||||
|
|
||||
/* 诊断结果卡片 */ |
|
||||
.diagnosis-card { |
|
||||
background: white; |
|
||||
border-radius: 16rpx; |
|
||||
padding: 24rpx; |
|
||||
margin-top: 20rpx; |
|
||||
border-left: 6rpx solid #86D8D0; |
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); |
|
||||
} |
|
||||
|
|
||||
.diagnosis-header { |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.diagnosis-title { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.diagnosis-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 16rpx; |
|
||||
align-items: flex-start; |
|
||||
} |
|
||||
|
|
||||
.diagnosis-label { |
|
||||
font-size: 26rpx; |
|
||||
color: #666; |
|
||||
width: 140rpx; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
|
|
||||
.diagnosis-value { |
|
||||
font-size: 26rpx; |
|
||||
color: #333; |
|
||||
flex: 1; |
|
||||
line-height: 1.4; |
|
||||
} |
|
||||
|
|
||||
.severity-level { |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 20rpx; |
|
||||
font-size: 24rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.severity-level.low { |
|
||||
background: #E8F4F3; |
|
||||
color: #6BC4BC; |
|
||||
} |
|
||||
|
|
||||
.severity-level.moderate { |
|
||||
background: #FFF3E0; |
|
||||
color: #FF9800; |
|
||||
} |
|
||||
|
|
||||
.severity-level.high { |
|
||||
background: #FFEBEE; |
|
||||
color: #F44336; |
|
||||
} |
|
||||
|
|
||||
.diagnosis-footer { |
|
||||
margin-top: 20rpx; |
|
||||
padding-top: 16rpx; |
|
||||
border-top: 1rpx solid #eee; |
|
||||
} |
|
||||
|
|
||||
.disclaimer { |
|
||||
font-size: 22rpx; |
|
||||
color: #999; |
|
||||
font-style: italic; |
|
||||
} |
|
||||
|
|
||||
/* AI正在输入 */ |
|
||||
.typing { |
|
||||
min-width: 200rpx; |
|
||||
} |
|
||||
|
|
||||
.typing-indicator { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 8rpx; |
|
||||
} |
|
||||
|
|
||||
.typing-dot { |
|
||||
width: 12rpx; |
|
||||
height: 12rpx; |
|
||||
background: #86D8D0; |
|
||||
border-radius: 50%; |
|
||||
animation: typingAnimation 1.4s infinite ease-in-out; |
|
||||
} |
|
||||
|
|
||||
.typing-dot:nth-child(1) { animation-delay: -0.32s; } |
|
||||
.typing-dot:nth-child(2) { animation-delay: -0.16s; } |
|
||||
|
|
||||
@keyframes typingAnimation { |
|
||||
0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } |
|
||||
40% { transform: scale(1); opacity: 1; } |
|
||||
} |
|
||||
|
|
||||
.typing-text { |
|
||||
font-size: 26rpx; |
|
||||
color: #666; |
|
||||
margin-left: 12rpx; |
|
||||
} |
|
||||
|
|
||||
/* 快捷症状选择 */ |
|
||||
.symptom-quick-select { |
|
||||
padding: 0 32rpx 20rpx; |
|
||||
} |
|
||||
|
|
||||
.section-title { |
|
||||
display: block; |
|
||||
font-size: 26rpx; |
|
||||
color: #666; |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.symptom-tags { |
|
||||
white-space: nowrap; |
|
||||
display: flex; |
|
||||
gap: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.symptom-tag { |
|
||||
display: inline-block; |
|
||||
padding: 16rpx 24rpx; |
|
||||
background: white; |
|
||||
border-radius: 24rpx; |
|
||||
border: 1rpx solid #E8F4F3; |
|
||||
box-shadow: 0 2rpx 8rpx rgba(134, 216, 208, 0.1); |
|
||||
transition: all 0.2s ease; |
|
||||
} |
|
||||
|
|
||||
.symptom-tag:active { |
|
||||
transform: scale(0.95); |
|
||||
background: #E8F4F3; |
|
||||
} |
|
||||
|
|
||||
.tag-text { |
|
||||
font-size: 26rpx; |
|
||||
color: #666; |
|
||||
} |
|
||||
|
|
||||
/* 输入区域 */ |
|
||||
.input-area { |
|
||||
background: white; |
|
||||
padding: 20rpx 32rpx 40rpx; |
|
||||
border-top: 1rpx solid #f0f0f0; |
|
||||
display: flex; |
|
||||
align-items: flex-end; |
|
||||
gap: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.input-wrapper { |
|
||||
flex: 1; |
|
||||
background: #f8fafc; |
|
||||
border-radius: 24rpx; |
|
||||
padding: 16rpx 24rpx; |
|
||||
border: 1rpx solid #E8F4F3; |
|
||||
} |
|
||||
|
|
||||
.message-input { |
|
||||
font-size: 28rpx; |
|
||||
min-height: 60rpx; |
|
||||
line-height: 1.5; |
|
||||
} |
|
||||
|
|
||||
.placeholder { |
|
||||
color: #aaa; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.send-btn { |
|
||||
width: 80rpx; |
|
||||
height: 80rpx; |
|
||||
border-radius: 50%; |
|
||||
background: #86D8D0; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
box-shadow: 0 4rpx 12rpx rgba(134, 216, 208, 0.3); |
|
||||
transition: all 0.2s ease; |
|
||||
} |
|
||||
|
|
||||
.send-btn-hover { |
|
||||
background: #6BC4BC; |
|
||||
transform: translateY(-2rpx); |
|
||||
box-shadow: 0 6rpx 16rpx rgba(134, 216, 208, 0.4); |
|
||||
} |
|
||||
|
|
||||
.send-icon { |
|
||||
color: white; |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 300; |
|
||||
} |
|
||||
|
|
||||
/* 更多菜单 */ |
|
||||
.modal-overlay { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background: rgba(0, 0, 0, 0.5); |
|
||||
z-index: 1000; |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
align-items: flex-start; |
|
||||
padding-top: 120rpx; |
|
||||
padding-right: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.more-menu { |
|
||||
background: white; |
|
||||
border-radius: 16rpx; |
|
||||
padding: 16rpx 0; |
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15); |
|
||||
min-width: 240rpx; |
|
||||
animation: slideIn 0.3s ease; |
|
||||
} |
|
||||
|
|
||||
@keyframes slideIn { |
|
||||
from { opacity: 0; transform: translateY(-20rpx); } |
|
||||
to { opacity: 1; transform: translateY(0); } |
|
||||
} |
|
||||
|
|
||||
.menu-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 24rpx 32rpx; |
|
||||
gap: 16rpx; |
|
||||
} |
|
||||
|
|
||||
.menu-item:active { |
|
||||
background: #f8fafc; |
|
||||
} |
|
||||
|
|
||||
.menu-icon { |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.menu-text { |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
/* 加载动画 */ |
|
||||
.loading-overlay { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background: rgba(255, 255, 255, 0.9); |
|
||||
z-index: 1001; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
.loading-content { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.pulse-animation { |
|
||||
position: relative; |
|
||||
width: 120rpx; |
|
||||
height: 120rpx; |
|
||||
} |
|
||||
|
|
||||
.pulse-circle { |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border: 4rpx solid #86D8D0; |
|
||||
border-radius: 50%; |
|
||||
animation: pulse 2s infinite ease-in-out; |
|
||||
} |
|
||||
|
|
||||
.pulse-circle:nth-child(2) { animation-delay: 0.5s; } |
|
||||
.pulse-circle:nth-child(3) { animation-delay: 1s; } |
|
||||
|
|
||||
@keyframes pulse { |
|
||||
0% { transform: scale(0.8); opacity: 1; } |
|
||||
100% { transform: scale(1.5); opacity: 0; } |
|
||||
} |
|
||||
|
|
||||
.loading-text { |
|
||||
margin-top: 40rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #666; |
|
||||
} |
|
||||
|
min-height: 100vh; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 医生信息卡片 */ |
||||
|
.doctor-card { |
||||
|
background: white; |
||||
|
margin: 24rpx 32rpx; |
||||
|
padding: 32rpx; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.doctor-avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
background: linear-gradient(135deg, #86D8D0 0%, #A8E6CF 100%); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 24rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.avatar-img { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.doctor-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.doctor-name { |
||||
|
display: block; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.doctor-title { |
||||
|
display: block; |
||||
|
font-size: 24rpx; |
||||
|
color: #86D8D0; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.doctor-tags { |
||||
|
display: flex; |
||||
|
gap: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
font-size: 20rpx; |
||||
|
padding: 6rpx 12rpx; |
||||
|
background: #E8F4F3; |
||||
|
color: #6BC4BC; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.online-status { |
||||
|
position: absolute; |
||||
|
right: 32rpx; |
||||
|
bottom: 32rpx; |
||||
|
font-size: 22rpx; |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.online-status.online { |
||||
|
background: #e8f1f4; |
||||
|
color: #6b8fc4; |
||||
|
} |
||||
|
|
||||
|
/* 聊天容器 */ |
||||
|
.chat-container { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/* 消息样式 */ |
||||
|
.message-wrapper { |
||||
|
display: flex; |
||||
|
margin: 40rpx 0; |
||||
|
animation: fadeIn 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
from { opacity: 0; transform: translateY(20rpx); } |
||||
|
to { opacity: 1; transform: translateY(0); } |
||||
|
} |
||||
|
|
||||
|
.message-wrapper.user { |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.message-content { |
||||
|
max-width: 70%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.message-wrapper.user .message-content { |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
.message-wrapper.assistant .message-content { |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.message-avatar { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
margin: 0 20rpx; |
||||
|
align-self: flex-end; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 消息气泡 */ |
||||
|
.message-bubble { |
||||
|
padding: 24rpx; |
||||
|
border-radius: 24rpx; |
||||
|
position: relative; |
||||
|
line-height: 1.5; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
.assistant-bubble { |
||||
|
background: #E8F4F3; |
||||
|
border-radius: 0 24rpx 24rpx 24rpx; |
||||
|
} |
||||
|
|
||||
|
.user-bubble { |
||||
|
background: #86D8D0; |
||||
|
border-radius: 24rpx 0 24rpx 24rpx; |
||||
|
} |
||||
|
|
||||
|
.message-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
white-space: pre-wrap; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
.user-bubble .message-text { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
/* 消息时间 */ |
||||
|
.message-time { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 诊断结果卡片 */ |
||||
|
.diagnosis-card { |
||||
|
background: white; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 24rpx; |
||||
|
margin-top: 20rpx; |
||||
|
border-left: 6rpx solid #86D8D0; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.diagnosis-header { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.diagnosis-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.diagnosis-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 16rpx; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.diagnosis-label { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
width: 140rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.diagnosis-value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
line-height: 1.4; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
.severity-level { |
||||
|
padding: 4rpx 16rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.severity-level.low { |
||||
|
background: #E8F4F3; |
||||
|
color: #6BC4BC; |
||||
|
} |
||||
|
|
||||
|
.severity-level.moderate { |
||||
|
background: #FFF3E0; |
||||
|
color: #FF9800; |
||||
|
} |
||||
|
|
||||
|
.severity-level.high { |
||||
|
background: #FFEBEE; |
||||
|
color: #F44336; |
||||
|
} |
||||
|
|
||||
|
.diagnosis-footer { |
||||
|
margin-top: 20rpx; |
||||
|
padding-top: 16rpx; |
||||
|
border-top: 1rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.disclaimer { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
/* AI正在输入 */ |
||||
|
.typing { |
||||
|
min-width: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.typing-indicator { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.typing-dot { |
||||
|
width: 12rpx; |
||||
|
height: 12rpx; |
||||
|
background: #86D8D0; |
||||
|
border-radius: 50%; |
||||
|
animation: typingAnimation 1.4s infinite ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.typing-dot:nth-child(1) { animation-delay: -0.32s; } |
||||
|
.typing-dot:nth-child(2) { animation-delay: -0.16s; } |
||||
|
|
||||
|
@keyframes typingAnimation { |
||||
|
0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } |
||||
|
40% { transform: scale(1); opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
.typing-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
|
||||
|
/* 快捷症状选择 */ |
||||
|
.symptom-quick-select { |
||||
|
padding: 0 32rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
display: block; |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.symptom-tags { |
||||
|
white-space: nowrap; |
||||
|
display: flex; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.symptom-tag { |
||||
|
display: inline-block; |
||||
|
padding: 16rpx 24rpx; |
||||
|
background: white; |
||||
|
border-radius: 24rpx; |
||||
|
border: 1rpx solid #E8F4F3; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(134, 216, 208, 0.1); |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.symptom-tag:active { |
||||
|
transform: scale(0.95); |
||||
|
background: #E8F4F3; |
||||
|
} |
||||
|
|
||||
|
.tag-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/* 输入区域 */ |
||||
|
.input-area { |
||||
|
background: white; |
||||
|
padding: 20rpx 32rpx 40rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
gap: 20rpx; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.input-wrapper { |
||||
|
flex: 1; |
||||
|
background: #f8fafc; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 16rpx 24rpx; |
||||
|
border: 1rpx solid #E8F4F3; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
transition: all 0.1s ease; |
||||
|
min-height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.message-input { |
||||
|
width: 100%; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 1.5; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
border: none; |
||||
|
background: transparent; |
||||
|
max-height: 200rpx; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.placeholder { |
||||
|
color: #aaa; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.send-btn { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
background: #86D8D0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(134, 216, 208, 0.3); |
||||
|
transition: all 0.2s ease; |
||||
|
flex-shrink: 0; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.send-btn-hover { |
||||
|
background: #6BC4BC; |
||||
|
transform: translateY(-2rpx); |
||||
|
box-shadow: 0 6rpx 16rpx rgba(134, 216, 208, 0.4); |
||||
|
} |
||||
|
|
||||
|
.send-icon { |
||||
|
color: white; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
/* 底部占位元素 - 用于滚动定位 */ |
||||
|
.scroll-bottom-placeholder { |
||||
|
height: 20rpx; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 消息列表项 */ |
||||
|
.message-item { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 加载动画 */ |
||||
|
.loading-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
z-index: 1001; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.loading-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.pulse-animation { |
||||
|
position: relative; |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
} |
||||
|
|
||||
|
.pulse-circle { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 4rpx solid #86D8D0; |
||||
|
border-radius: 50%; |
||||
|
animation: pulse 2s infinite ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.pulse-circle:nth-child(2) { animation-delay: 0.5s; } |
||||
|
.pulse-circle:nth-child(3) { animation-delay: 1s; } |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { transform: scale(0.8); opacity: 1; } |
||||
|
100% { transform: scale(1.5); opacity: 0; } |
||||
|
} |
||||
|
|
||||
|
.loading-text { |
||||
|
margin-top: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/* 隐藏textarea默认滚动条 */ |
||||
|
.message-input::-webkit-scrollbar { |
||||
|
width: 0; |
||||
|
background: transparent; |
||||
|
} |
||||
@ -1,5 +1,5 @@ |
|||||
// var baseUrl = 'https://wx.chenhaitech.com/ymtx-prod-api'
|
|
||||
|
var baseUrl = 'https://wx.chenhaitech.com/ymtx-prod-api' |
||||
// var baseUrl = 'http://192.168.101.109:8080'
|
// var baseUrl = 'http://192.168.101.109:8080'
|
||||
var baseUrl = 'http://192.168.101.105:8082' |
|
||||
|
// var baseUrl = 'http://192.168.101.105:8082'
|
||||
// var baseUrl = 'http://192.168.101.111:8081'
|
// var baseUrl = 'http://192.168.101.111:8081'
|
||||
module.exports = baseUrl |
module.exports = baseUrl |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue