Skip to content

飞
飞鹤小程序
Commit 3fc0e829 authored by spc's avatar spc
Browse files
Options

feedindRecord

parent a3553553
Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 159 deletions
api/request.js
View file @ 3fc0e829
......@@ -24,9 +24,9 @@ const request = (options = {}) => {
// 例如：
// options.header = {
// "Content-Type": "application/x-www-form-urlencoded"
// }
// if(options.url == '/c/ai/chat/query'){
// baseUrl = "https://docs.dui88.com/mock/1956";
// }
// if(options.url == '/c/ai/chat/query'){
// baseUrl = "https://docs.dui88.com/mock/1956";
// }
return new Promise((resolve, reject) => {
uni
......
pages/feedingRecord/feedingRecord.vue
View file @ 3fc0e829
......@@ -6,14 +6,13 @@
<!-- 头部导航 -->
<view class="header">
<view class="nav-left">
<text class="back-btn">‹</text>
<image :src="feedingRecordRes.icon_return" class="back-btn" />
<image :src="feedingRecordRes.icon_star" class="baby-icon-star" />
<view class="baby-info">
<text class="baby-name">小糖豆3123 ♂</text>
<text class="baby-name">小糖豆3123</text>
<text class="baby-age">1岁24天</text>
</view>
</view>
<view class="nav-right">
<text class="menu-btn">⋯</text>
<image :src="feedingRecordRes.icon_baby_change" class="baby-icon-change" />
</view>
</view>
......@@ -24,12 +23,13 @@
:end="todayDateString" @change="onDateChange" :clear-icon="false" :border="false">
<view class="date-display">
<text class="date-text">{{ formatCurrentDate() }}</text>
<image :src="feedingRecordRes.icon_arrow_yellow" class="arrow-icon" />
</view>
</uni-datetime-picker>
</view>
<view class="stats-section">
<text class="stats-btn">📊 统计</text>
<text class="dropdown-icon">▼</text>
<image :src="feedingRecordRes.icon_analysis" class="stats-icon" />
<text class="stats-btn"> 统计</text>
</view>
</view>
......@@ -42,7 +42,7 @@
<!-- 日期网格 -->
<view class="date-grid" :class="{ 'collapsed': !isCalendarExpanded }">
<view v-for="(date, index) in calendarDates" :key="date.dateString" class="date-cell" :class="{
<view v-for="(date, index) in calendarDates" :key="index" class="date-cell" :class="{
'selected': date.isSelected,
'today': date.isToday,
'other-month': !date.isCurrentMonth,
......@@ -63,7 +63,7 @@
<!-- 展开/收起按钮 -->
<view class="expand-btn" @click="toggleCalendarExpand">
<image src="/static/feedingRecord/v1/dropDown.png" class="expand-icon" mode="aspectFit" />
<image :src="isCalendarExpanded ? feedingRecordRes.dropUp : feedingRecordRes.dropDown" class="expand-icon" />
</view>
</view>
......@@ -81,20 +81,42 @@
</view>
<view class="record-content" :style="{ backgroundColor: getRecordBgColor(record.type) }">
<view class="record-header">
<view class="record-icon">{{ getRecordIcon(record.type) }}</view>
<image :src="getRecordIcon(record.type)" :class="getRecordIconClass(record.type)" />
<text class="record-type">{{ record.type }}</text>
<text class="edit-btn" @click="editRecord(index)">修改</text>
</view>
<view class="record-details">
<view v-if="record.leftDuration || record.rightDuration" class="duration-info">
<text v-if="record.leftDuration">左 {{ record.leftDuration }}</text>
<text v-if="record.rightDuration">右 {{ record.rightDuration }}</text>
<!-- 母乳亲喂：显示左右时间，时间加粗 -->
<view v-if="record.type === '母乳亲喂' && (record.leftDuration || record.rightDuration)" class="duration-info">
<view v-if="record.leftDuration" class="duration-text">
<text class="duration-label">左</text>
<text class="duration-time">{{ record.leftDuration }}</text>
</view>
<view v-if="record.rightDuration" class="duration-text">
<text class="duration-label">右</text>
<text class="duration-time">{{ record.rightDuration }}</text>
</view>
</view>
<!-- 母乳瓶喂：显示总乳量 -->
<view v-if="record.type === '母乳瓶喂' && record.amount" class="amount-info">
<view class="amount-text">
<text class="amount-label">总乳量</text>
<text class="amount-value">{{ record.amount }}</text>
</view>
</view>
<view v-if="record.amount" class="amount-info">
<text>总奶量 约{{ record.amount }}</text>
<!-- 奶粉喂养：显示总奶量 -->
<view v-if="record.type === '奶粉喂养' && record.amount" class="amount-info">
<view class="amount-text">
<text class="amount-label">总奶量</text>
<text class="amount-value">{{ record.amount }}</text>
</view>
</view>
<view v-if="record.content" class="content-info">
<text>{{ record.content }}</text>
<!-- 辅食：显示内容，超出显示... -->
<view v-if="record.type === '辅食' && record.content" class="content-info">
<view class="content-text">{{ record.content }}</view>
</view>
</view>
</view>
......@@ -107,7 +129,7 @@
<!-- 底部添加按钮 -->
<view class="bottom-add-btn" @click="addFeedingRecord">
<text class="add-text">添加记录</text>
<image :src="feedingRecordRes.add_btn" class="add-btn-img" />
</view>
<!-- 添加记录弹窗 -->
......@@ -155,6 +177,10 @@ const feedingRecordRes = {
icon_muru: `/static/feedingRecord/${version}/icon_muru.png`,
icon_naifen: `/static/feedingRecord/${version}/icon_naifen.png`,
icon_pingwei: `/static/feedingRecord/${version}/icon_pingwei.png`,
icon_star: `/static/feedingRecord/${version}/icon_star.png`,
icon_return: `/static/feedingRecord/${version}/icon_return.png`,
icon_baby_change: `/static/feedingRecord/${version}/icon_baby_change.png`,
add_btn: `/static/feedingRecord/${version}/addBtn.png`,
}
......@@ -181,23 +207,23 @@ const newRecord = ref({
})
// 喂养类型选项
const feedingTypes = ['母乳喂养', '奶粉喂养', '辅食', '水果', '其他']
const feedingTypes = ['母乳亲喂', '母乳瓶喂', '奶粉喂养', '辅食']
// 星期标题
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
// 喂养记录数据
const feedingRecords = ref({
'2025-06-03': [
'2025-07-03': [
{
time: '06:20',
type: '母乳喂养',
type: '母乳亲喂',
leftDuration: '10min',
rightDuration: '10min'
},
{
time: '09:30',
type: '母乳喂养',
type: '母乳瓶喂',
amount: '约50ml'
},
{
......@@ -208,26 +234,26 @@ const feedingRecords = ref({
{
time: '17:25',
type: '辅食',
content: '小米粥、玉米、馒头、蒸面条、包子、奶粉...'
content: '小米粥、玉米、馒头、蒸面条、包子、奶粉、啊啊啊啊、啊啊啊啊'
}
],
'2025-06-02': [
'2025-07-02': [
{
time: '07:00',
type: '母乳喂养',
type: '母乳亲喂',
leftDuration: '12min',
rightDuration: '8min'
},
{
time: '11:30',
type: '奶粉喂养',
type: '母乳瓶喂',
amount: '约80ml'
}
],
'2025-06-01': [
{
time: '08:00',
type: '母乳喂养',
type: '母乳亲喂',
leftDuration: '15min',
rightDuration: '10min'
}
......@@ -235,7 +261,7 @@ const feedingRecords = ref({
'2025-05-31': [
{
time: '09:15',
type: '母乳喂养',
type: '母乳亲喂',
leftDuration: '8min',
rightDuration: '12min'
}
......@@ -243,14 +269,14 @@ const feedingRecords = ref({
'2025-05-30': [
{
time: '10:00',
type: '奶粉喂养',
type: '母乳瓶喂',
amount: '约60ml'
}
],
'2025-07-01': [
{
time: '08:30',
type: '母乳喂养',
type: '母乳亲喂',
leftDuration: '15min',
rightDuration: '12min'
}
......@@ -294,11 +320,14 @@ const calendarDates = computed(() => {
const monthKey = currentMonthKey.value
const year = currentDate.value.getFullYear()
const month = currentDate.value.getMonth()
const selectedDate = currentSelectedDate.value
const expanded = isCalendarExpanded.value
console.log(`====== 重新计算日历数据 (${updateFlag}) ======`)
console.log(`计算属性触发 - 年月: ${year}-${month + 1}, 月份键: ${monthKey}`)
console.log(`当前选中日期: ${currentSelectedDate.value}`)
console.log(`日历展开状态: ${isCalendarExpanded.value}`)
// console.log(`====== 重新计算日历数据 (${updateFlag}) ======`)
// console.log(`计算属性触发 - 年月: ${year}-${month + 1}, 月份键: ${monthKey}`)
// console.log(`当前选中日期: ${selectedDate}`)
// console.log(`日历展开状态: ${expanded}`)
// console.log(`当前月份设置: ${currentDate.value.getFullYear()}-${currentDate.value.getMonth() + 1}`)
// 获取当月第一天
const firstDay = new Date(year, month, 1)
......@@ -310,11 +339,12 @@ const calendarDates = computed(() => {
const dates = []
// 如果是收起状态，只显示包含选中日期的那一周
if (!isCalendarExpanded.value && currentSelectedDate.value) {
const selectedDate = new Date(currentSelectedDate.value)
const selectedDayOfWeek = selectedDate.getDay()
const weekStartDate = new Date(selectedDate)
weekStartDate.setDate(selectedDate.getDate() - selectedDayOfWeek)
if (!expanded && selectedDate) {
// console.warn("323333333333")
const selectedDateObj = new Date(selectedDate)
const selectedDayOfWeek = selectedDateObj.getDay()
const weekStartDate = new Date(selectedDateObj)
weekStartDate.setDate(selectedDateObj.getDate() - selectedDayOfWeek)
for (let i = 0; i < 7; i++) {
const date = new Date(weekStartDate)
......@@ -322,6 +352,7 @@ const calendarDates = computed(() => {
dates.push(createDateObject(date))
}
} else {
// console.warn("444444444444")
// 展开状态显示完整月份（6周）
for (let i = 0; i < 42; i++) {
const date = new Date(startDate)
......@@ -344,23 +375,28 @@ function createDateObject(date) {
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate())
const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate())
// 修复：确保正确判断是否为当前月份
const isCurrentMonth = date.getMonth() === currentMonth && date.getFullYear() === currentYear
const isToday = isSameDay(date, today)
const isFuture = dateOnly > todayOnly
const isPast = dateOnly < todayOnly
// 简化调试：只输出7月前几天的状态
if (date.getMonth() === 6 && date.getFullYear() === 2025 && date.getDate() <= 5) {
const status = isToday ? '今天' : isFuture ? '未来' : '过去'
console.log(`7月${date.getDate()}日: ${status}, 当月=${isCurrentMonth}`)
// console.warn("555555555555", dateString, 'isCurrentMonth:', isCurrentMonth, 'isToday:', isToday, 'isFuture:', isFuture, 'isPast:', isPast)
// 检查bug
if (currentYear === 2025 && currentMonth === 6 && !isCurrentMonth) {
console.error(`❌ BUG: 7月${date.getDate()}日被错误标记为非当月!`)
}
}
return {
// 调试信息：检查月份判断逻辑
// if (date.getMonth() === 6 && date.getFullYear() === 2025 && date.getDate() <= 5) {
// const status = isToday ? '今天' : isFuture ? '未来' : '过去'
// console.log(`7月${date.getDate()}日: ${status}, 当月=${isCurrentMonth}, 当前设置月份=${currentMonth + 1}, 日期月份=${date.getMonth() + 1}`)
// // 检查bug
// if (currentYear === 2025 && currentMonth === 6 && !isCurrentMonth) {
// console.error(`❌ BUG: 7月${date.getDate()}日被错误标记为非当月!`)
// console.error(`当前设置: ${currentYear}-${currentMonth + 1}, 日期: ${date.getFullYear()}-${date.getMonth() + 1}`)
// }
// }
const dateObj = {
date: new Date(date),
day: date.getDate(),
dateString,
......@@ -370,6 +406,13 @@ function createDateObject(date) {
isFuture,
isPast
}
// 调试：检查月份切换后的状态
// if (date.getMonth() === 6 && date.getFullYear() === 2025 && date.getDate() <= 5) {
// console.log(`创建日期对象: 7月${date.getDate()}日, 当月=${dateObj.isCurrentMonth}, 选中=${dateObj.isSelected}`)
// }
return dateObj
}
......@@ -383,6 +426,8 @@ function selectDate(dateObj) {
console.log('====== selectDate ======')
console.log('点击日期:', dateObj.dateString, '当月:', dateObj.isCurrentMonth)
console.log('当前设置月份:', currentDate.value.getFullYear() + '-' + (currentDate.value.getMonth() + 1))
console.log('点击日期月份:', dateObj.date.getFullYear() + '-' + (dateObj.date.getMonth() + 1))
// 选择日期
currentSelectedDate.value = dateObj.dateString
......@@ -408,6 +453,18 @@ function selectDate(dateObj) {
isCalendarExpanded.value = true
}
// 使用 nextTick 确保 DOM 更新后再强制更新一次
nextTick(() => {
console.log('selectDate: nextTick后再次强制更新')
forceUpdate.value++
// 再次使用 nextTick 确保所有更新完成
nextTick(() => {
console.log('selectDate: 第二次nextTick后强制更新')
forceUpdate.value++
})
})
console.log('月份切换完成')
}
}
......@@ -449,6 +506,18 @@ function onDateChange(event) {
currentMonthKey.value = newMonthKey
forceUpdate.value++
// 使用 nextTick 确保 DOM 更新后再强制更新一次
nextTick(() => {
console.log('onDateChange: nextTick后再次强制更新')
forceUpdate.value++
// 再次使用 nextTick 确保所有更新完成
nextTick(() => {
console.log('onDateChange: 第二次nextTick后强制更新')
forceUpdate.value++
})
})
console.log('uni-datetime-picker月份切换完成')
}
}
......@@ -470,15 +539,23 @@ function hasRecordOnDate(date) {
function getRecordIcon(type) {
const icons = {
'母乳喂养': '🤱',
'奶粉喂养': '🍼',
'辅食': '🥄',
'水果': '🍎',
'其他': '📝'
'母乳亲喂': feedingRecordRes.icon_muru,
'母乳瓶喂': feedingRecordRes.icon_pingwei,
'奶粉喂养': feedingRecordRes.icon_naifen,
'辅食': feedingRecordRes.icon_fushi,
}
return icons[type] || '📝'
return icons[type]
}
function getRecordIconClass(type) {
const classes = {
'母乳亲喂': 'record-icon-img-muruqinwei',
'母乳瓶喂': 'record-icon-img-pingwei',
'奶粉喂养': 'record-icon-img-naifen',
'辅食': 'record-icon-img-fushi',
}
return classes[type]
}
function getRecordColor(type) {
// 统一使用 #d3a358 颜色
return '#d3a358'
......@@ -486,11 +563,10 @@ function getRecordColor(type) {
function getRecordBgColor(type) {
const colors = {
'母乳喂养': '#FDF2F8',
'奶粉喂养': '#F3F4F6',
'辅食': '#FFFBEB',
'水果': '#F0FDF4',
'其他': '#FEF2F2'
'母乳亲喂': '#fdeded',
'母乳瓶喂': '#f1edf4',
'奶粉喂养': '#fff6e5',
'辅食': '#ecf6f0',
}
return colors[type] || '#FEF2F2'
}
......@@ -512,6 +588,9 @@ function addFeedingRecord() {
return
}
// 调试：输出图片路径
console.log('add_btn 图片路径:', feedingRecordRes.add_btn)
// 重置表单
newRecord.value = {
time: getCurrentTime(),
......@@ -567,28 +646,7 @@ function saveRecord() {
closePopup()
}
function deleteRecord(index) {
uni.showModal({
title: '确认删除',
content: '确定要删除这条喂养记录吗？',
success: (res) => {
if (res.confirm) {
const dateKey = currentSelectedDate.value
feedingRecords.value[dateKey].splice(index, 1)
// 如果没有记录了，删除整个日期键
if (feedingRecords.value[dateKey].length === 0) {
delete feedingRecords.value[dateKey]
}
uni.showToast({
title: '删除成功',
icon: 'success'
})
}
}
})
}
function getCurrentTime() {
const now = new Date()
......@@ -621,12 +679,12 @@ onLoad(() => {
console.log('初始化今日日期:', todayString, '当前月份:', currentDate.value, '月份键:', currentMonthKey.value)
})
// 通用的月份切换处理函数
// 通用的月份切换处理函数（已简化，避免重复调用）
function handleMonthChange(newDate, source = 'unknown') {
console.log(`====== 处理月份切换 (${source}) ======`)
console.log('新月份:', newDate.getMonth() + 1)
// 更新月份键，确保响应性
// 只更新月份键和强制更新，避免重复修改currentDate
const newMonthKey = `${newDate.getFullYear()}-${newDate.getMonth()}`
console.log('更新月份键:', currentMonthKey.value, '->', newMonthKey)
currentMonthKey.value = newMonthKey
......@@ -648,8 +706,19 @@ watch(currentDate, (newDate, oldDate) => {
console.log('新值:', newDate)
console.log('新月份:', newDate.getMonth() + 1)
// 使用通用处理函数
handleMonthChange(newDate, 'watch')
// 避免无限循环：只在月份真正改变时才调用handleMonthChange
if (oldDate && (oldDate.getMonth() !== newDate.getMonth() || oldDate.getFullYear() !== newDate.getFullYear())) {
console.log('月份发生变化，调用handleMonthChange')
// 只更新月份键和强制更新，不再次修改currentDate
const newMonthKey = `${newDate.getFullYear()}-${newDate.getMonth()}`
currentMonthKey.value = newMonthKey
forceUpdate.value++
nextTick(() => {
console.log('watch: nextTick后再次强制更新')
forceUpdate.value++
})
}
}, { immediate: false })
onMounted(() => {
......@@ -684,11 +753,17 @@ onMounted(() => {
align-items: center;
.back-btn {
font-size: 48rpx;
color: #333;
width: 20rpx;
height: 32rpx;
margin-right: 20rpx;
}
.baby-icon-star {
width: 70rpx;
height: 70rpx;
margin-right: 10rpx;
}
.baby-info {
display: flex;
flex-direction: column;
......@@ -705,24 +780,16 @@ onMounted(() => {
margin-top: 4rpx;
}
}
}
.nav-right {
display: flex;
align-items: center;
gap: 20rpx;
.menu-btn {
font-size: 32rpx;
color: #666;
}
.stats-btn {
font-size: 28rpx;
color: #D4A574;
font-weight: 500;
.baby-icon-change {
width: 18rpx;
height: 13rpx;
margin-top: -35rpx;
margin-left: 10rpx;
}
}
}
// 日期选择器和统计按钮行
......@@ -744,7 +811,14 @@ onMounted(() => {
.date-text {
font-size: 28rpx;
font-weight: 500;
color: #333;
color: #1d1e25;
margin-right: 10rpx;
}
.arrow-icon {
width: 20rpx;
height: 12rpx;
margin-top: 3rpx;
}
}
......@@ -753,16 +827,18 @@ onMounted(() => {
align-items: center;
gap: 8rpx;
.stats-icon {
width: 28rpx;
height: 33rpx;
}
.stats-btn {
font-size: 28rpx;
color: #D4A574;
color: #1d1e25;
line-height: 33rpx;
vertical-align: bottom;
font-weight: 500;
}
.dropdown-icon {
font-size: 20rpx;
color: #999;
}
}
}
......@@ -779,7 +855,7 @@ onMounted(() => {
flex: 1;
text-align: center;
font-size: 22rpx;
color: #999;
color: #b27c1e;
height: 40rpx;
display: flex;
align-items: center;
......@@ -903,7 +979,7 @@ onMounted(() => {
&.selected {
.date-text {
background: #D4A574;
color: #fff;
color: #fff !important;
border-radius: 50%;
font-weight: 600;
}
......@@ -914,9 +990,15 @@ onMounted(() => {
}
// 5. 当日显示【今】- 已在模板中处理
&.today.selected {
.date-text {
color: #fff;
}
}
&.today:not(.selected) {
.date-text {
background: #f5f5f5;
background: #fff;
border-radius: 50%;
font-weight: 600;
}
......@@ -932,7 +1014,7 @@ onMounted(() => {
// 未来日期样式
&.future {
.date-text {
color: #ccc;
color: #bab5af;
}
}
}
......@@ -959,7 +1041,8 @@ onMounted(() => {
// 记录容器
.records-container {
flex: 1;
padding: 20rpx;
// padding: 20rpx;
padding-bottom: 180rpx; // 为浮动按钮留出空间
.empty-state {
display: flex;
......@@ -974,13 +1057,15 @@ onMounted(() => {
}
.record-list {
padding: 20rpx 35rpx 0rpx 20rpx;
.timeline-connector {
width: 1rpx;
height: 156rpx;
background: #d3a358;
margin-left: 4rpx;
margin-top: -100rpx;
margin-bottom: -60rpx;
margin-left: 16rpx;
margin-top: -125rpx;
margin-bottom: -32rpx;
}
.record-item {
......@@ -990,36 +1075,68 @@ onMounted(() => {
.time-dot {
width: 120rpx;
display: flex;
align-items: center;
margin-right: 20rpx;
align-items: flex-start; // 改为顶部对齐
margin-right: 0rpx;
margin-left: 10rpx;
padding-top: 30rpx; // 调整顶部内边距，与文案第一行对齐
.dot {
width: 12rpx;
height: 12rpx;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
margin-right: 12rpx;
margin-right: 16rpx;
margin-top: 8rpx; // 调整圆点位置，与文案第一行对齐
}
.time {
font-size: 24rpx;
color: #666;
white-space: nowrap;
line-height: 1.4; // 调整行高，与文案保持一致
}
}
.record-content {
flex: 1;
border-radius: 16rpx;
width: 548rpx;
height: 142rpx;
border-radius: 32rpx;
padding: 24rpx;
box-sizing: border-box; // 确保padding包含在宽高中
overflow: hidden; // 防止内容溢出
.record-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
margin-bottom: 12rpx; // 减少底部间距，适应固定高度
.record-icon-img-muruqinwei {
width: 30rpx;
height: 34rpx;
margin-right: 12rpx;
line-height: 1; // 确保图标行高一致
}
.record-icon-img-pingwei {
width: 26rpx;
height: 37rpx;
margin-right: 12rpx;
line-height: 1; // 确保图标行高一致
}
.record-icon-img-naifen {
width: 30rpx;
height: 34rpx;
margin-right: 12rpx;
line-height: 1; // 确保图标行高一致
}
.record-icon {
font-size: 32rpx;
.record-icon-img-fushi {
width: 36rpx;
height: 31rpx;
margin-right: 12rpx;
line-height: 1; // 确保图标行高一致
}
.record-type {
......@@ -1027,49 +1144,76 @@ onMounted(() => {
font-size: 28rpx;
font-weight: 600;
color: #333;
line-height: 1.4; // 与时间文字保持一致的行高
}
.edit-btn {
font-size: 24rpx;
color: #999;
color: #1d1e25;
padding: 8rpx 16rpx;
border: 1rpx solid #e0e0e0;
border: 1rpx solid #ffffff;
border-radius: 20rpx;
background: #ffffff;
opacity: 0.8;
}
}
.record-details {
.duration-info {
display: flex;
gap: 20rpx;
margin-bottom: 8rpx;
text {
font-size: 24rpx;
color: #666;
background: rgba(255, 255, 255, 0.8);
padding: 6rpx 12rpx;
border-radius: 12rpx;
gap: 16rpx; // 减少间距
margin-bottom: 6rpx; // 减少底部间距
.duration-text {
display: flex;
align-items: center;
gap: 16rpx; // 进一步增加间距
.duration-label {
font-size: 24rpx;
color: #666;
}
.duration-time {
font-size: 24rpx;
color: #333;
font-weight: 600; // 时间加粗
}
}
}
.amount-info {
margin-bottom: 8rpx;
text {
font-size: 24rpx;
color: #666;
background: rgba(255, 255, 255, 0.8);
padding: 6rpx 12rpx;
border-radius: 12rpx;
margin-bottom: 6rpx; // 减少底部间距
.amount-text {
display: flex;
align-items: center;
gap: 16rpx; // 进一步增加间距
.amount-label {
font-size: 24rpx;
color: #666;
}
.amount-value {
font-size: 24rpx;
color: #333;
font-weight: 600; // 数值加粗
}
}
}
.content-info {
text {
.content-text {
font-size: 24rpx;
color: #666;
line-height: 1.5;
color: #333;
font-weight: 600; // 辅食内容加粗
line-height: 1.4;
white-space: nowrap; // 强制一行显示
overflow: hidden; // 隐藏超出部分
text-overflow: ellipsis; // 超出显示...
max-width: 100%; // 确保不超出容器
word-break: keep-all; // 防止单词被截断
}
}
}
......@@ -1083,23 +1227,36 @@ onMounted(() => {
// 底部添加按钮
.bottom-add-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #D4A574;
padding: 30rpx;
bottom: 0rpx;
left: 0rpx;
right: 0rpx;
width: 750rpx;
height: 218rpx;
display: flex;
background: #fff;
justify-content: center;
align-items: center;
z-index: 100;
.add-btn-img {
width: 686rpx;
height: 94rpx;
display: block;
}
.add-text {
.temp-btn-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32rpx;
color: #fff;
color: #D4A574;
font-weight: 600;
z-index: 101;
}
&:active {
background: #c19660;
transform: scale(0.95);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment