Commit b32f68f9 authored by 王炽's avatar 王炽

生长曲线

parent 1c351926
No preview for this file type
<template>
<view v-if="visible" class="popup-overlay" @click="closePopup">
<view class="popup-content" @click.stop>
<!-- 弹窗头部 -->
<view class="popup-header">
<text class="popup-title">切换宝宝</text>
<image
class="close-btn"
src="/static/shengzhangTool/close.png"
mode="aspectFit"
@click="closePopup"
/>
</view>
<!-- 宝宝列表 -->
<view class="baby-list">
<view
v-for="(baby, index) in babyList"
:key="index"
class="baby-item"
:class="{ selected: selectedIndex === index }"
@click="selectBaby(index)"
>
<!-- 选中背景 -->
<image
v-if="selectedIndex === index"
class="baby-item-bg"
src="/static/shengzhangTool/babyItemBg.png"
mode="aspectFit"
/>
<!-- 宝宝头像 -->
<image
class="baby-avatar"
:src="baby.avatar || '/static/shengzhangTool/avatar.png'"
mode="aspectFill"
/>
<!-- 宝宝信息 -->
<view class="baby-info">
<view class="baby-name-row">
<text class="baby-name">{{ baby.name }}</text>
<image
class="gender-icon"
:src="baby.gender === 1 ? '/static/shengzhangTool/sex1.png' : '/static/shengzhangTool/sex0.png'"
mode="aspectFit"
/>
</view>
<text class="baby-birthday">宝宝生日: {{ baby.birthday }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
babyList: {
type: Array,
default: () => []
},
selectedIndex: {
type: Number,
default: 0
}
})
const emit = defineEmits(['update:visible', 'update:selectedIndex', 'change'])
const closePopup = () => {
emit('update:visible', false)
}
const selectBaby = (index) => {
emit('update:selectedIndex', index)
emit('change', props.babyList[index], index)
closePopup()
}
</script>
<style lang="less" scoped>
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.popup-content {
width: 600rpx;
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
position: relative;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 30rpx 20rpx;
border-bottom: 1px solid #f0f0f0;
.popup-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.close-btn {
width: 40rpx;
height: 40rpx;
padding: 10rpx;
}
}
.baby-list {
flex: 1;
padding: 20rpx;
max-height: 60vh;
overflow-y: auto;
}
.baby-item {
position: relative;
display: flex;
align-items: center;
padding: 20rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
background-color: #f8f8f8;
&.selected {
background-color: transparent;
}
.baby-item-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.baby-avatar {
position: relative;
z-index: 2;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.baby-info {
position: relative;
z-index: 2;
flex: 1;
.baby-name-row {
display: flex;
align-items: center;
margin-bottom: 8rpx;
.baby-name {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-right: 10rpx;
}
.gender-icon {
width: 24rpx;
height: 24rpx;
}
}
.baby-birthday {
font-size: 24rpx;
color: #666;
}
}
}
</style>
\ No newline at end of file
......@@ -78,6 +78,12 @@
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path": "pages/shengzhangTools/shengzhangTools",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
This diff is collapsed.
......@@ -1472,6 +1472,12 @@
//banner点击事件
const bannerHandler = (item) => {
jump({
type: JumpType.INNER,
url: '/pages/shengzhangTools/shengzhangTools'
})
return;
md.sensorLogTake({
xcxClick: "积分服务页-首屏页面点击",
pageName: "积分服务页-首屏",
......
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