Skip to content

飞
飞鹤小程序
Commit 34f248e9 authored by spc's avatar spc
Browse files
Options

3

parent b070e06a
Hide whitespace changes
Inline Side-by-side
Showing with 585 additions and 235 deletions
pages/feedingIndex/feedingIndex.vue
View file @ 34f248e9
...@@ -13,12 +13,22 @@ ...@@ -13,12 +13,22 @@
<!-- 喂养时间 --> <!-- 喂养时间 -->
<view class="feeding-time"> <view class="feeding-time">
<view class="baby-info">
<text class="time-label">喂养时间</text> <image class="avatar-img" src="/static/feedingIndex/v1/avatar.png"></image>
<text class="time-value">2025-06-01 22:22</text> <view class="baby-name-section">
<image class="edit-icon" src="/static/feedingIndex/v1/icon_modify.png" mode="aspectFit" /> <text class="baby-name">宝宝名称</text>
<image class="dropdown-icon" src="/static/feedingIndex/v1/icon_arrow_yellow_drop.png" />
</view>
</view>
<view class="time-section">
<text class="time-label">喂养时间</text>
<text class="time-value">2025-06-01 22:22</text>
<image class="edit-icon" src="/static/feedingIndex/v1/icon_modify.png" />
</view>
</view>
<!-- 喂养记录 -->
<view class="feeding-records">
<text class="records-link">喂养记录</text> <text class="records-link">喂养记录</text>
<image class="arrow-right" src="/static/feedingIndex/v1/icon_arrow_yellow.png"></image> <image class="arrow-right" src="/static/feedingIndex/v1/icon_arrow_yellow.png"></image>
</view> </view>
...@@ -37,180 +47,217 @@ ...@@ -37,180 +47,217 @@
</view> </view>
</view> </view>
<!-- 温馨提示 --> <!-- 下半部分背景 -->
<view class="warm-tip"> <view class="bottom-section">
<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text> <image class="bottom-bg" src="/static/feedingIndex/v1/bottom_bg.png" mode="aspectFill" />
</view>
<!-- 温馨提示 -->
<view class="warm-tip" v-if="recordMethods[selectedType] === 'manual'">
<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text>
</view>
<!-- 动态表单区域 --> <!-- 动态表单区域 -->
<view class="form-section"> <view v-if="shouldShowForm" class="form-section">
<!-- 母乳亲喂表单 --> <!-- 母乳亲喂表单 -->
<view v-if="selectedType === 'breastfeeding' && shouldShowForm" class="breastfeeding-form"> <view v-if="selectedType === 'breastfeeding'" class="breastfeeding-form">
<view class="duration-controls"> <view class="duration-controls">
<view class="duration-item"> <view class="duration-item">
<view class="duration-circle"> <view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" /> <image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content"> <view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.leftDuration }}</text> <text class="duration-number">{{ feedingData.breastfeeding.leftDuration }}</text>
<text class="duration-unit">分钟</text> <text class="duration-unit">分钟</text>
</view>
</view> </view>
<view class="duration-buttons">
<image class="btn-minus"
:src="feedingData.breastfeeding.leftDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'"
mode="aspectFit" @click="adjustDuration('left', -1)"
:class="{ disabled: feedingData.breastfeeding.leftDuration <= 0 }" />
<image class="btn-plus"
:src="feedingData.breastfeeding.leftDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'"
mode="aspectFit" @click="adjustDuration('left', 1)"
:class="{ disabled: feedingData.breastfeeding.leftDuration >= 60 }" />
</view>
<text class="duration-label">左侧哺乳时长</text>
</view> </view>
<view class="duration-buttons"> <view class="duration-item">
<image class="btn-minus" <view class="duration-circle">
:src="feedingData.breastfeeding.leftDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'" <image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
mode="aspectFit" @click="adjustDuration('left', -1)" <view class="circle-content">
:class="{ disabled: feedingData.breastfeeding.leftDuration <= 0 }" /> <text class="duration-number">{{ feedingData.breastfeeding.rightDuration }}</text>
<image class="btn-plus" <text class="duration-unit">分钟</text>
:src="feedingData.breastfeeding.leftDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'" </view>
mode="aspectFit" @click="adjustDuration('left', 1)" </view>
:class="{ disabled: feedingData.breastfeeding.leftDuration >= 60 }" /> <view class="duration-buttons">
<image class="btn-minus"
:src="feedingData.breastfeeding.rightDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'"
mode="aspectFit" @click="adjustDuration('right', -1)"
:class="{ disabled: feedingData.breastfeeding.rightDuration <= 0 }" />
<image class="btn-plus"
:src="feedingData.breastfeeding.rightDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'"
mode="aspectFit" @click="adjustDuration('right', 1)"
:class="{ disabled: feedingData.breastfeeding.rightDuration >= 60 }" />
</view>
<text class="duration-label">右侧哺乳时长</text>
</view> </view>
<text class="duration-label">左侧哺乳时长</text>
</view> </view>
<view class="duration-item"> </view>
<view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" /> <!-- 母乳瓶喂/奶粉喂养表单 -->
<view class="circle-content"> <view v-if="(selectedType === 'bottle' || selectedType === 'formula')" class="bottle-form">
<text class="duration-number">{{ feedingData.breastfeeding.rightDuration }}</text> <view class="bottle-graphic">
<text class="duration-unit">分钟</text> <view class="bottle-container">
<view class="bottle-liquid"
:style="{ height: `${(feedingData[selectedType].amount / 100) * 200}%` }"></view>
<view class="bottle-scale">
<text class="scale-mark">80</text>
<text class="scale-mark">85</text>
<text class="scale-mark active">90</text>
<text class="scale-mark">95</text>
<text class="scale-mark">100</text>
</view> </view>
</view> </view>
<view class="duration-buttons"> <view class="amount-bubble">
<image class="btn-minus" <text class="bubble-label">喂奶量</text>
:src="feedingData.breastfeeding.rightDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'" <text class="bubble-value">{{ feedingData[selectedType].amount }}ml</text>
mode="aspectFit" @click="adjustDuration('right', -1)" </view>
:class="{ disabled: feedingData.breastfeeding.rightDuration <= 0 }" /> <view class="adjust-arrows">
<image class="btn-plus" <image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
:src="feedingData.breastfeeding.rightDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'" @click="adjustAmount(10)" />
mode="aspectFit" @click="adjustDuration('right', 1)" <image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit"
:class="{ disabled: feedingData.breastfeeding.rightDuration >= 60 }" /> @click="adjustAmount(-10)" />
</view> </view>
<text class="duration-label">右侧哺乳时长</text>
</view> </view>
</view> </view>
</view>
<!-- 母乳瓶喂/奶粉喂养表单 --> <!-- 辅食表单 -->
<view v-if="(selectedType === 'bottle' || selectedType === 'formula') && shouldShowForm" <view v-if="selectedType === 'food'" class="food-form">
class="bottle-form"> <view class="selected-items">
<view class="bottle-graphic"> <text>{{ feedingData.food.selectedItems.join(',') }}</text>
<view class="bottle-container">
<view class="bottle-liquid"
:style="{ height: `${(feedingData[selectedType].amount / 100) * 200}%` }"></view>
<view class="bottle-scale">
<text class="scale-mark">80</text>
<text class="scale-mark">85</text>
<text class="scale-mark active">90</text>
<text class="scale-mark">95</text>
<text class="scale-mark">100</text>
</view>
</view> </view>
<view class="amount-bubble"> <view class="food-categories">
<text class="bubble-label">喂奶量</text> <text class="category-title">辅食分类</text>
<text class="bubble-value">{{ feedingData[selectedType].amount }}ml</text> <text class="complete-btn">完成</text>
</view> </view>
<view class="adjust-arrows"> <view class="category-list">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit" <view class="category-item">
@click="adjustAmount(10)" /> <text class="category-name">主食</text>
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit" <text class="add-btn">+</text>
@click="adjustAmount(-10)" /> <view class="selected-tags">
<text class="tag">米粉 ✕</text>
<text class="tag">面条 ✕</text>
</view>
</view>
<view class="category-item">
<text class="category-name">蔬菜</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">山药 ✕</text>
<text class="tag">萝卜 ✕</text>
<text class="tag active">土豆 ✕</text>
<text class="tag">豆 ✕</text>
<text class="tag">青瓜 ✕</text>
<text class="tag">白菜 ✕</text>
</view>
<text class="expand-arrow">↑</text>
</view>
<view class="category-item">
<text class="category-name">水果</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">香蕉 ✕</text>
<text class="tag active">苹果 ✕</text>
<text class="tag">牛油果 ✕</text>
</view>
</view>
<view class="category-item">
<text class="category-name">其他</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">鱼油 ✕</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 录音控制区域 -->
<view v-if="recordMethods[selectedType] === 'voice'" class="voice-controls">
<!-- 提示文字 -->
<view class="voice-tip">
<text class="tip-text">你可以尝试这样说:</text>
</view>
<!-- 辅食表单 --> <!-- 示例语音 -->
<view v-if="selectedType === 'food' && shouldShowForm" class="food-form"> <view class="voice-example">
<view class="selected-items"> <text class="example-text" v-if="selectedType === 'breastfeeding'">"早上8点,左边5分钟,右边6分钟"</text>
<text>{{ feedingData.food.selectedItems.join(',') }}</text> <text class="example-text" v-else>"早上8点,喂奶量90毫升"</text>
</view> </view>
<view class="food-categories">
<text class="category-title">辅食分类</text> <!-- 麦克风图标 -->
<text class="complete-btn">完成</text> <view class="voice-microphone" @click="toggleRecording">
<image class="microphone-icon"
:src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'"
mode="aspectFit" />
</view> </view>
<view class="category-list">
<view class="category-item"> <!-- 点击提示 -->
<text class="category-name">主食</text> <view class="voice-click-tip">
<text class="add-btn">+</text> <text class="click-text">点击识别语音</text>
<view class="selected-tags"> </view>
<text class="tag">米粉 ✕</text> </view>
<text class="tag">面条 ✕</text>
</view> <!-- 计时器控制区域 -->
</view> <view v-if="recordMethods[selectedType] === 'timer'" class="timer-controls">
<view class="category-item"> <!-- 总时长显示 -->
<text class="category-name">蔬菜</text> <view class="total-duration">
<text class="add-btn">+</text> <text class="total-duration-label">总时长</text>
<view class="selected-tags"> <text class="total-duration-value">{{ formatTotalDuration() }}</text>
<text class="tag">山药 ✕</text> </view>
<text class="tag">萝卜 ✕</text>
<text class="tag active">土豆 ✕</text> <!-- 圆形计时器 -->
<text class="tag">豆 ✕</text> <view class="circular-timers">
<text class="tag">青瓜 ✕</text> <!-- 左侧计时器 -->
<text class="tag">白菜 ✕</text> <view class="timer-circle left-timer">
</view> <image class="timer-icon"
<text class="expand-arrow">↑</text> :src="isLeftTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
</view> mode="aspectFit" @click="toggleTimer('left')" />
<view class="category-item"> <text class="timer-time">{{ formatTime(timerData.leftDuration) }}</text>
<text class="category-name">水果</text> <text class="timer-label">左侧</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">香蕉 ✕</text>
<text class="tag active">苹果 ✕</text>
<text class="tag">牛油果 ✕</text>
</view>
</view> </view>
<view class="category-item">
<text class="category-name">其他</text> <!-- 右侧计时器 -->
<text class="add-btn">+</text> <view class="timer-circle right-timer">
<view class="selected-tags"> <image class="timer-icon"
<text class="tag">鱼油 ✕</text> :src="isRightTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
</view> mode="aspectFit" @click="toggleTimer('right')" />
<text class="timer-time">{{ formatTime(timerData.rightDuration) }}</text>
<text class="timer-label">右侧</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 录音控制区域 -->
<view v-if="recordMethods[selectedType] === 'voice'" class="voice-controls">
<view class="voice-status">
<image class="voice-icon"
:src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'"
mode="aspectFit" />
<text class="voice-text">{{ isRecording ? '录音中...' : '点击开始录音' }}</text>
</view>
<view class="voice-buttons">
<image class="voice-btn"
:src="isRecording ? '/static/feedingIndex/v1/icon_luyin_stop.png' : '/static/feedingIndex/v1/icon_luyin_start.png'"
mode="aspectFit" @click="toggleRecording" />
</view>
</view>
<!-- 计时器控制区域 --> <!-- 记录方式选择 - 母乳亲喂 -->
<view v-if="recordMethods[selectedType] === 'timer'" class="timer-controls"> <view class="record-methods1" v-if="selectedType === 'breastfeeding'">
<view class="timer-status"> <image class="tab-image" :src="getTabImage()" mode="aspectFill" />
<image class="timer-icon" <view class="click-area left" @click="setRecordMethod('manual')"></view>
:src="isTimerRunning ? '/static/feedingIndex/v1/icon_timer_running.png' : '/static/feedingIndex/v1/icon_timer_stopped.png'" <view class="click-area center" @click="setRecordMethod('timer')"></view>
mode="aspectFit" /> <view class="click-area right" @click="setRecordMethod('voice')"></view>
<text class="timer-text">{{ isTimerRunning ? '计时中...' : '点击开始计时' }}</text>
</view>
<view class="timer-buttons">
<image class="timer-btn"
:src="isTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
mode="aspectFit" @click="toggleTimer" />
</view> </view>
</view>
<!-- 记录方式选择 -->
<view class="record-methods">
<image class="tab-image" :src="getTabImage()" mode="aspectFill" />
<view class="click-area left" @click="setRecordMethod('manual')"></view>
<view class="click-area center" @click="setRecordMethod('timer')"></view>
<view class="click-area right" @click="setRecordMethod('voice')"></view>
</view>
<!-- 记录方式选择 - 母乳瓶喂/奶粉喂养 -->
<view class="record-methods2" v-if="selectedType === 'bottle' || selectedType === 'formula'">
<image class="tab-image" :src="getTabImage2()" mode="aspectFill" />
<view class="click-area left" @click="setRecordMethod('manual')">
</view>
<view class="click-area right" @click="setRecordMethod('voice')">
</view>
</view>
<!-- 底部完成按钮 --> <!-- 底部完成按钮 -->
<view class="bottom_complete-btn" @click="completeRecord"> <view class="bottom_complete-btn" @click="completeRecord">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" /> <image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" />
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -234,18 +281,19 @@ const feedingTypes = ref([ ...@@ -234,18 +281,19 @@ const feedingTypes = ref([
const selectedType = ref('breastfeeding') const selectedType = ref('breastfeeding')
// 为每种喂养方式设置独立的记录方法 // 为每种喂养方式设置独立的记录方法
const recordMethods = ref({ const recordMethods = ref({
breastfeeding: 'timer', breastfeeding: 'manual',
bottle: 'timer', bottle: 'manual',
formula: 'timer', formula: 'manual',
food: 'timer' food: 'manual'
}) })
const isRecording = ref(false) const isRecording = ref(false)
const isTimerRunning = ref(false) const isLeftTimerRunning = ref(false)
const isRightTimerRunning = ref(false)
// 为每种喂养方式设置独立的数据 // 为每种喂养方式设置独立的数据
const feedingData = ref({ const feedingData = ref({
breastfeeding: { breastfeeding: {
leftDuration: 5, leftDuration: 60,
rightDuration: 5 rightDuration: 5
}, },
bottle: { bottle: {
...@@ -259,10 +307,20 @@ const feedingData = ref({ ...@@ -259,10 +307,20 @@ const feedingData = ref({
} }
}) })
// 计时器数据
const timerData = ref({
leftDuration: 0,
rightDuration: 0
})
// 计时器间隔ID
let leftTimerInterval = null
let rightTimerInterval = null
// 计算属性 - 判断是否显示表单 // 计算属性 - 判断是否显示表单
const shouldShowForm = computed(() => { const shouldShowForm = computed(() => {
const currentMethod = recordMethods.value[selectedType.value] const currentMethod = recordMethods.value[selectedType.value]
return currentMethod === 'timer' // 只有计时模式显示表单 return currentMethod === 'manual' // 只有手动模式显示表单
}) })
// 方法 // 方法
...@@ -287,6 +345,8 @@ function adjustDuration(side, value) { ...@@ -287,6 +345,8 @@ function adjustDuration(side, value) {
} }
} }
function adjustAmount(value) { function adjustAmount(value) {
const currentType = selectedType.value const currentType = selectedType.value
if (currentType === 'bottle' || currentType === 'formula') { if (currentType === 'bottle' || currentType === 'formula') {
...@@ -303,8 +363,62 @@ function toggleRecording() { ...@@ -303,8 +363,62 @@ function toggleRecording() {
isRecording.value = !isRecording.value isRecording.value = !isRecording.value
} }
function toggleTimer() { function toggleTimer(side) {
isTimerRunning.value = !isTimerRunning.value if (side === 'left') {
// 左侧计时逻辑
isLeftTimerRunning.value = !isLeftTimerRunning.value
if (isLeftTimerRunning.value) {
// 开始左侧计时
startLeftTimer()
} else {
// 停止左侧计时
stopLeftTimer()
}
} else if (side === 'right') {
// 右侧计时逻辑
isRightTimerRunning.value = !isRightTimerRunning.value
if (isRightTimerRunning.value) {
// 开始右侧计时
startRightTimer()
} else {
// 停止右侧计时
stopRightTimer()
}
}
}
function startLeftTimer() {
// 开始左侧计时
console.log('开始左侧计时')
leftTimerInterval = setInterval(() => {
timerData.value.leftDuration++
}, 1000) // 每秒增加1秒
}
function stopLeftTimer() {
// 停止左侧计时
console.log('停止左侧计时')
if (leftTimerInterval) {
clearInterval(leftTimerInterval)
leftTimerInterval = null
}
}
function startRightTimer() {
// 开始右侧计时
console.log('开始右侧计时')
rightTimerInterval = setInterval(() => {
timerData.value.rightDuration++
}, 1000) // 每秒增加1秒
}
function stopRightTimer() {
// 停止右侧计时
console.log('停止右侧计时')
if (rightTimerInterval) {
clearInterval(rightTimerInterval)
rightTimerInterval = null
}
} }
function completeRecord() { function completeRecord() {
...@@ -326,19 +440,49 @@ function getTabImage() { ...@@ -326,19 +440,49 @@ function getTabImage() {
return '/static/feedingIndex/v1/Tab_bottom_voice.png' return '/static/feedingIndex/v1/Tab_bottom_voice.png'
} }
} }
function getTabImage2() {
const currentMethod = recordMethods.value[selectedType.value]
if (currentMethod === 'manual') {
return '/static/feedingIndex/v1/Tab_bottom_muruandnaifen_write.png'
} else {
return '/static/feedingIndex/v1/Tab_bottom_muruandnaifen_voice.png'
}
}
// 格式化时间显示 (MM:SS)
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60)
const remainingSeconds = seconds % 60
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}
// 格式化总时长显示 (HH:MM:SS)
function formatTotalDuration() {
const totalSeconds = timerData.value.leftDuration + timerData.value.rightDuration
const hours = Math.floor(totalSeconds / 3600)
const minutes = Math.floor((totalSeconds % 3600) / 60)
const seconds = totalSeconds % 60
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* ===== 页面整体布局 ===== */
.feeding-record-add-page { .feeding-record-add-page {
background: #FFF8F1; background: #FFF8F1;
min-height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
position: relative;
} }
/* ===== 广告横幅 ===== */
.banner-swiper { .banner-swiper {
position: absolute;
top: 0;
left: 16rpx;
width: 718rpx; width: 718rpx;
height: 174rpx; height: 174rpx;
margin-left: 16rpx;
.banner-img { .banner-img {
width: 100%; width: 100%;
...@@ -347,31 +491,83 @@ function getTabImage() { ...@@ -347,31 +491,83 @@ function getTabImage() {
} }
} }
/* ===== 喂养时间区域 ===== */
.feeding-time { .feeding-time {
position: absolute;
top: 174rpx;
left: 0;
right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx 5rpx 30rpx; padding: 20rpx 30rpx 5rpx 30rpx;
background: #FFF8F1; background: #FFF8F1;
.time-label { .baby-info {
font-size: 28rpx; display: flex;
color: #6f6d67; align-items: center;
margin-right: 15rpx; gap: 15rpx;
}
.time-value { .avatar-img {
font-size: 28rpx; width: 80rpx;
color: #1d1e25; height: 80rpx;
margin-right: 5rpx; border-radius: 50%;
font-weight: bold; }
.baby-name-section {
display: flex;
align-items: center;
gap: 8rpx;
.baby-name {
font-size: 28rpx;
color: #1d1e25;
font-weight: 500;
}
.dropdown-icon {
width: 18rpx;
height: 12rpx;
}
}
} }
.edit-icon { .time-section {
width: 61rpx; display: flex;
height: 61rpx; align-items: center;
margin-top: 10rpx;
margin-right: auto; .time-label {
font-size: 28rpx;
color: #6f6d67;
margin-right: 15rpx;
}
.time-value {
font-size: 28rpx;
color: #1d1e25;
margin-right: 5rpx;
font-weight: bold;
}
.edit-icon {
width: 61rpx;
height: 61rpx;
margin-top: 10rpx;
}
} }
}
/* ===== 喂养记录链接 ===== */
.feeding-records {
position: absolute;
top: 280rpx;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0rpx 30rpx 20rpx 30rpx;
background: #FFF8F1;
.records-link { .records-link {
font-size: 28rpx; font-size: 28rpx;
...@@ -385,7 +581,12 @@ function getTabImage() { ...@@ -385,7 +581,12 @@ function getTabImage() {
} }
} }
/* ===== 喂养类型选择 ===== */
.feeding-types { .feeding-types {
position: absolute;
top: 340rpx;
left: 0;
right: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0rpx 30rpx; padding: 0rpx 30rpx;
...@@ -442,27 +643,41 @@ function getTabImage() { ...@@ -442,27 +643,41 @@ function getTabImage() {
} }
} }
/* ===== 温馨提示 ===== */
.warm-tip { .warm-tip {
position: absolute;
top: 20rpx;
left: 0;
right: 0;
text-align: center; text-align: center;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
background: #FFF8F1; z-index: 2;
text { text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #000;
} }
} }
/* ===== 表单区域 ===== */
.form-section { .form-section {
position: absolute;
top: 80rpx;
left: 0;
right: 0;
padding: 30rpx; padding: 30rpx;
background: #FFF8F1; // margin-top: 30rpx;
// height: 300rpx;
z-index: 2;
} }
/* ===== 母乳亲喂表单 ===== */
.breastfeeding-form { .breastfeeding-form {
.duration-controls { .duration-controls {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
gap: 40rpx; gap: 40rpx;
padding: 30rpx;
.duration-item { .duration-item {
display: flex; display: flex;
...@@ -537,6 +752,7 @@ function getTabImage() { ...@@ -537,6 +752,7 @@ function getTabImage() {
} }
} }
/* ===== 母乳瓶喂/奶粉喂养表单 ===== */
.bottle-form { .bottle-form {
.bottle-graphic { .bottle-graphic {
display: flex; display: flex;
...@@ -623,6 +839,7 @@ function getTabImage() { ...@@ -623,6 +839,7 @@ function getTabImage() {
} }
} }
/* ===== 辅食表单 ===== */
.food-form { .food-form {
.selected-items { .selected-items {
background: white; background: white;
...@@ -709,125 +926,258 @@ function getTabImage() { ...@@ -709,125 +926,258 @@ function getTabImage() {
} }
} }
.record-methods { /* ===== 记录方式选择 ===== */
position: relative; .record-methods1 {
position: absolute;
top: 530rpx;
left: 0;
right: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 468rpx; width: 100%;
height: 180rpx; // 调整为图片高度 height: 180rpx;
background: #F8F8F8; // 背景色根据需要
.tab-image { .tab-image {
width: 100%; width: 468rpx;
height: 100%; height: 180rpx;
} }
.click-area { .click-area {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; height: 100%;
width: 33.33%; width: 156rpx;
} }
.left { .left {
left: 0; left: calc(50% - 234rpx);
} }
.center { .center {
left: 33.33%; left: calc(50% - 78rpx);
} }
.right { .right {
left: 66.66%; left: calc(50% + 78rpx);
} }
} }
.voice-controls { /* ===== 记录方式选择 - 母乳瓶喂/奶粉喂养 ===== */
padding: 30rpx; .record-methods2 {
background: #FFF8F1; position: absolute;
top: 530rpx;
left: 0;
right: 0;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; align-items: center;
gap: 30rpx; width: 100%;
height: 180rpx;
.tab-image {
width: 304rpx;
height: 180rpx;
}
.voice-status { .click-area {
position: absolute;
top: 0;
height: 100%;
width: 152rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 20rpx; justify-content: center;
gap: 8rpx;
}
.voice-icon { .left {
width: 468rpx; left: calc(50% - 152rpx);
height: 180rpx; }
.right {
left: calc(50% + 0rpx);
}
.method-icon {
width: 40rpx;
height: 40rpx;
}
.method-text {
font-size: 24rpx;
color: #999;
transition: color 0.3s ease;
&.active {
color: #333;
font-weight: bold;
} }
}
}
.voice-text { /* ===== 语音控制区域 ===== */
.voice-controls {
position: absolute;
left: 0;
right: 0;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
.voice-tip {
text-align: center;
.tip-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #6f6d67;
font-weight: 500;
} }
} }
.voice-buttons { .voice-example {
.voice-btn { text-align: center;
width: 100rpx;
height: 100rpx; .example-text {
font-size: 38rpx;
color: #1d1e25;
font-weight: bolder;
}
}
.voice-microphone {
display: flex;
align-items: center;
justify-content: center;
width: 278rpx;
height: 278rpx;
margin-top: 25rpx;
.microphone-icon {
width: 278rpx;
height: 278rpx;
}
}
.voice-click-tip {
text-align: center;
margin-top: 20rpx;
.click-text {
font-size: 26rpx;
color: #6f6d67;
} }
} }
} }
/* ===== 计时器控制区域 ===== */
.timer-controls { .timer-controls {
position: absolute;
left: 0;
right: 0;
padding: 30rpx; padding: 30rpx;
background: #FFF8F1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 30rpx;
.timer-status { /* 总时长显示 */
.total-duration {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 20rpx; gap: 10rpx;
.timer-icon { .total-duration-label {
width: 468rpx; font-size: 28rpx;
height: 180rpx; color: #6f6d67;
} }
.timer-text { .total-duration-value {
font-size: 28rpx; font-size: 48rpx;
color: #333; color: #1d1e25;
font-weight: bold;
} }
} }
.timer-buttons { /* 圆形计时器 */
.timer-btn { .circular-timers {
width: 100rpx; display: flex;
height: 100rpx; justify-content: space-around;
align-items: center;
width: 100%;
.timer-circle {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
position: relative;
.timer-icon {
width: 278rpx;
height: 278rpx;
}
.timer-time {
font-size: 32rpx;
color: #1d1e25;
margin-top: -100rpx;
}
.timer-label {
font-size: 24rpx;
color: #6f6d67;
margin-top: 45rpx;
}
} }
} }
} }
.bottom_complete-btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 686rpx;
height: 94rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.complete-btn-bg {
/* ===== 下半部分背景区域 ===== */
.bottom-section {
position: absolute;
top: 480rpx;
left: 0;
right: 0;
width: 100%;
height: 1008rpx;
z-index: 1;
.bottom-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 750rpx;
height: 100%; height: 1008rpx;
z-index: 0;
} }
.bottom_complete-btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 120rpx;
width: 686rpx;
height: 94rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
.complete-btn-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
} }
</style> </style>
\ No newline at end of file
static/feedingIndex/v1/demo.png
View replaced file @ b070e06a View file @ 34f248e9
static/feedingIndex/v1/demo.png

52.2 KB | W: | H:

static/feedingIndex/v1/demo.png

253 KB | W: | H:

static/feedingIndex/v1/demo.png
static/feedingIndex/v1/demo.png
static/feedingIndex/v1/demo.png
static/feedingIndex/v1/demo.png
  • 2-up
  • Swipe
  • Onion skin
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