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 @@
<!-- 喂养时间 -->
<view class="feeding-time">
<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" mode="aspectFit" />
<view class="baby-info">
<image class="avatar-img" src="/static/feedingIndex/v1/avatar.png"></image>
<view class="baby-name-section">
<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>
<image class="arrow-right" src="/static/feedingIndex/v1/icon_arrow_yellow.png"></image>
</view>
......@@ -37,180 +47,217 @@
</view>
</view>
<!-- 温馨提示 -->
<view class="warm-tip">
<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text>
</view>
<!-- 下半部分背景 -->
<view class="bottom-section">
<image class="bottom-bg" src="/static/feedingIndex/v1/bottom_bg.png" mode="aspectFill" />
<!-- 温馨提示 -->
<view class="warm-tip" v-if="recordMethods[selectedType] === 'manual'">
<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text>
</view>
<!-- 动态表单区域 -->
<view class="form-section">
<!-- 母乳亲喂表单 -->
<view v-if="selectedType === 'breastfeeding' && shouldShowForm" class="breastfeeding-form">
<view class="duration-controls">
<view class="duration-item">
<view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.leftDuration }}</text>
<text class="duration-unit">分钟</text>
<!-- 动态表单区域 -->
<view v-if="shouldShowForm" class="form-section">
<!-- 母乳亲喂表单 -->
<view v-if="selectedType === 'breastfeeding'" class="breastfeeding-form">
<view class="duration-controls">
<view class="duration-item">
<view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.leftDuration }}</text>
<text class="duration-unit">分钟</text>
</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 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 class="duration-item">
<view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.rightDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
</view>
<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>
<text class="duration-label">左侧哺乳时长</text>
</view>
<view class="duration-item">
<view class="duration-circle">
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.rightDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
<!-- 母乳瓶喂/奶粉喂养表单 -->
<view v-if="(selectedType === 'bottle' || selectedType === 'formula')" class="bottle-form">
<view class="bottle-graphic">
<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 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 class="amount-bubble">
<text class="bubble-label">喂奶量</text>
<text class="bubble-value">{{ feedingData[selectedType].amount }}ml</text>
</view>
<view class="adjust-arrows">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
@click="adjustAmount(10)" />
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit"
@click="adjustAmount(-10)" />
</view>
<text class="duration-label">右侧哺乳时长</text>
</view>
</view>
</view>
<!-- 母乳瓶喂/奶粉喂养表单 -->
<view v-if="(selectedType === 'bottle' || selectedType === 'formula') && shouldShowForm"
class="bottle-form">
<view class="bottle-graphic">
<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 v-if="selectedType === 'food'" class="food-form">
<view class="selected-items">
<text>{{ feedingData.food.selectedItems.join(',') }}</text>
</view>
<view class="amount-bubble">
<text class="bubble-label">喂奶量</text>
<text class="bubble-value">{{ feedingData[selectedType].amount }}ml</text>
<view class="food-categories">
<text class="category-title">辅食分类</text>
<text class="complete-btn">完成</text>
</view>
<view class="adjust-arrows">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
@click="adjustAmount(10)" />
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit"
@click="adjustAmount(-10)" />
<view class="category-list">
<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>
</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 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="selected-items">
<text>{{ feedingData.food.selectedItems.join(',') }}</text>
<!-- 示例语音 -->
<view class="voice-example">
<text class="example-text" v-if="selectedType === 'breastfeeding'">"早上8点,左边5分钟,右边6分钟"</text>
<text class="example-text" v-else>"早上8点,喂奶量90毫升"</text>
</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 class="category-list">
<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>
</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 class="voice-click-tip">
<text class="click-text">点击识别语音</text>
</view>
</view>
<!-- 计时器控制区域 -->
<view v-if="recordMethods[selectedType] === 'timer'" class="timer-controls">
<!-- 总时长显示 -->
<view class="total-duration">
<text class="total-duration-label">总时长</text>
<text class="total-duration-value">{{ formatTotalDuration() }}</text>
</view>
<!-- 圆形计时器 -->
<view class="circular-timers">
<!-- 左侧计时器 -->
<view class="timer-circle left-timer">
<image class="timer-icon"
:src="isLeftTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
mode="aspectFit" @click="toggleTimer('left')" />
<text class="timer-time">{{ formatTime(timerData.leftDuration) }}</text>
<text class="timer-label">左侧</text>
</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 class="timer-circle right-timer">
<image class="timer-icon"
:src="isRightTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
mode="aspectFit" @click="toggleTimer('right')" />
<text class="timer-time">{{ formatTime(timerData.rightDuration) }}</text>
<text class="timer-label">右侧</text>
</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="timer-status">
<image class="timer-icon"
:src="isTimerRunning ? '/static/feedingIndex/v1/icon_timer_running.png' : '/static/feedingIndex/v1/icon_timer_stopped.png'"
mode="aspectFit" />
<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 class="record-methods1" v-if="selectedType === 'breastfeeding'">
<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>
<!-- 记录方式选择 -->
<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">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" />
<!-- 底部完成按钮 -->
<view class="bottom_complete-btn" @click="completeRecord">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" />
</view>
</view>
</view>
</template>
......@@ -234,18 +281,19 @@ const feedingTypes = ref([
const selectedType = ref('breastfeeding')
// 为每种喂养方式设置独立的记录方法
const recordMethods = ref({
breastfeeding: 'timer',
bottle: 'timer',
formula: 'timer',
food: 'timer'
breastfeeding: 'manual',
bottle: 'manual',
formula: 'manual',
food: 'manual'
})
const isRecording = ref(false)
const isTimerRunning = ref(false)
const isLeftTimerRunning = ref(false)
const isRightTimerRunning = ref(false)
// 为每种喂养方式设置独立的数据
const feedingData = ref({
breastfeeding: {
leftDuration: 5,
leftDuration: 60,
rightDuration: 5
},
bottle: {
......@@ -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 currentMethod = recordMethods.value[selectedType.value]
return currentMethod === 'timer' // 只有计时模式显示表单
return currentMethod === 'manual' // 只有手动模式显示表单
})
// 方法
......@@ -287,6 +345,8 @@ function adjustDuration(side, value) {
}
}
function adjustAmount(value) {
const currentType = selectedType.value
if (currentType === 'bottle' || currentType === 'formula') {
......@@ -303,8 +363,62 @@ function toggleRecording() {
isRecording.value = !isRecording.value
}
function toggleTimer() {
isTimerRunning.value = !isTimerRunning.value
function toggleTimer(side) {
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() {
......@@ -326,19 +440,49 @@ function getTabImage() {
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>
<style lang="scss" scoped>
/* ===== 页面整体布局 ===== */
.feeding-record-add-page {
background: #FFF8F1;
min-height: 100vh;
padding: 0;
position: relative;
}
/* ===== 广告横幅 ===== */
.banner-swiper {
position: absolute;
top: 0;
left: 16rpx;
width: 718rpx;
height: 174rpx;
margin-left: 16rpx;
.banner-img {
width: 100%;
......@@ -347,31 +491,83 @@ function getTabImage() {
}
}
/* ===== 喂养时间区域 ===== */
.feeding-time {
position: absolute;
top: 174rpx;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx 5rpx 30rpx;
background: #FFF8F1;
.time-label {
font-size: 28rpx;
color: #6f6d67;
margin-right: 15rpx;
}
.baby-info {
display: flex;
align-items: center;
gap: 15rpx;
.time-value {
font-size: 28rpx;
color: #1d1e25;
margin-right: 5rpx;
font-weight: bold;
.avatar-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.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 {
width: 61rpx;
height: 61rpx;
margin-top: 10rpx;
margin-right: auto;
.time-section {
display: flex;
align-items: center;
.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 {
font-size: 28rpx;
......@@ -385,7 +581,12 @@ function getTabImage() {
}
}
/* ===== 喂养类型选择 ===== */
.feeding-types {
position: absolute;
top: 340rpx;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0rpx 30rpx;
......@@ -442,27 +643,41 @@ function getTabImage() {
}
}
/* ===== 温馨提示 ===== */
.warm-tip {
position: absolute;
top: 20rpx;
left: 0;
right: 0;
text-align: center;
padding: 20rpx 30rpx;
background: #FFF8F1;
z-index: 2;
text {
font-size: 24rpx;
color: #666;
color: #000;
}
}
/* ===== 表单区域 ===== */
.form-section {
position: absolute;
top: 80rpx;
left: 0;
right: 0;
padding: 30rpx;
background: #FFF8F1;
// margin-top: 30rpx;
// height: 300rpx;
z-index: 2;
}
/* ===== 母乳亲喂表单 ===== */
.breastfeeding-form {
.duration-controls {
display: flex;
justify-content: space-around;
gap: 40rpx;
padding: 30rpx;
.duration-item {
display: flex;
......@@ -537,6 +752,7 @@ function getTabImage() {
}
}
/* ===== 母乳瓶喂/奶粉喂养表单 ===== */
.bottle-form {
.bottle-graphic {
display: flex;
......@@ -623,6 +839,7 @@ function getTabImage() {
}
}
/* ===== 辅食表单 ===== */
.food-form {
.selected-items {
background: white;
......@@ -709,125 +926,258 @@ function getTabImage() {
}
}
.record-methods {
position: relative;
/* ===== 记录方式选择 ===== */
.record-methods1 {
position: absolute;
top: 530rpx;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 468rpx;
height: 180rpx; // 调整为图片高度
background: #F8F8F8; // 背景色根据需要
width: 100%;
height: 180rpx;
.tab-image {
width: 100%;
height: 100%;
width: 468rpx;
height: 180rpx;
}
.click-area {
position: absolute;
top: 0;
bottom: 0;
width: 33.33%;
height: 100%;
width: 156rpx;
}
.left {
left: 0;
left: calc(50% - 234rpx);
}
.center {
left: 33.33%;
left: calc(50% - 78rpx);
}
.right {
left: 66.66%;
left: calc(50% + 78rpx);
}
}
.voice-controls {
padding: 30rpx;
background: #FFF8F1;
/* ===== 记录方式选择 - 母乳瓶喂/奶粉喂养 ===== */
.record-methods2 {
position: absolute;
top: 530rpx;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: 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;
flex-direction: column;
align-items: center;
gap: 20rpx;
justify-content: center;
gap: 8rpx;
}
.voice-icon {
width: 468rpx;
height: 180rpx;
.left {
left: calc(50% - 152rpx);
}
.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;
color: #333;
color: #6f6d67;
font-weight: 500;
}
}
.voice-buttons {
.voice-btn {
width: 100rpx;
height: 100rpx;
.voice-example {
text-align: center;
.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 {
position: absolute;
left: 0;
right: 0;
padding: 30rpx;
background: #FFF8F1;
display: flex;
flex-direction: column;
align-items: center;
gap: 30rpx;
.timer-status {
/* 总时长显示 */
.total-duration {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
gap: 10rpx;
.timer-icon {
width: 468rpx;
height: 180rpx;
.total-duration-label {
font-size: 28rpx;
color: #6f6d67;
}
.timer-text {
font-size: 28rpx;
color: #333;
.total-duration-value {
font-size: 48rpx;
color: #1d1e25;
font-weight: bold;
}
}
.timer-buttons {
.timer-btn {
width: 100rpx;
height: 100rpx;
/* 圆形计时器 */
.circular-timers {
display: flex;
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;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 750rpx;
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>
\ 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