feedingIndex

pages/feedingIndex/feedingIndex.vue

@@ -117,13 +117,15 @@
 						<view class="bottle-container">
 							<image class="bottle-image" src="/static/feedingIndex/v1/icon_milk_bottle.png"
 								mode="aspectFit" />
-							
+
 							<!-- 奶量选择器 -->
-							<picker-view class="amount-picker" :value="pickerValue" @change="onPickerChange" :mask-style="{opacity: 0}">
+							<picker-view class="amount-picker" :value="pickerValue" @change="onPickerChange"
+								:mask-style="{ opacity: 0 }" 
+								:indicator-style="indicatorStyle"
+								indicator-class="amount-picker"
+								 mask-style="opacity: 0.5; border: none;">
 								<picker-view-column>
-									<view class="picker-item" 
-										v-for="(amount, index) in pickerAmounts" 
-										:key="amount"
+									<view class="picker-item" v-for="(amount, index) in pickerAmounts" :key="amount"
 										:class="{ active: pickerValue[0] === index }">
 										{{ amount }}ml
 									</view>
@@ -268,7 +270,7 @@
 import { ref, computed } from 'vue'
 
 const swiperData = ref([{ bannerImg: '/static/feedingIndex/v1/banner.png' }, { bannerImg: '/static/feedingIndex/v1/banner.png' }, { bannerImg: '/static/feedingIndex/v1/banner.png' }]);
-
+const indicatorStyle = `height: 40px; border: none;`
 const bannerHandler = (item) => {
 	console.log(item);
 }
@@ -889,6 +891,7 @@ function formatTotalDuration() {
 			}
 
 			.amount-picker {
+				margin-top: 40rpx;
 				position: absolute;
 				left: 50%;
 				top: 50%;
@@ -899,6 +902,15 @@ function formatTotalDuration() {
 				mask: none;
 				-webkit-mask: none;
 
+				:deep(.amount-picker::before) {
+					content: none;
+				}
+
+				:deep(.amount-picker::after) {
+					content: none;
+				}
+
+
 				.picker-item {
 					height: 60rpx;
 					line-height: 60rpx;