生长工具引导页

components/DatePickerPopup.vue

@@ -9,7 +9,22 @@
                 </view>
             </view>
 
-            <view class="date-picker-container"> 
+            <view class="date-picker-container">
+                <view class="date-picker-bg">
+                    <view class="date-con0">
+                        <image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
+                        <text class="time-text">年</text>
+                    </view>
+                    <view class="date-con1">
+                        <image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
+                        <text class="time-text">月</text>
+                    </view>
+                    <view class="date-con2">
+                        <image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
+                        <text class="time-text">日</text>
+                    </view>
+                    
+                </view>
                     <!-- 日期选择器 -->
                     <picker-view
                         class="date-picker"
@@ -23,7 +38,7 @@
                         <picker-view-column>
                             <view v-for="(year, index) in yearRange" :key="index" class="picker-item">
                                 <text class="picker-text">{{ year }}</text>
-                                <text v-if="index === datePickerValue[0]" class="picker-label">年</text>
+                                <!-- <text v-if="index === datePickerValue[0]" class="picker-label">年</text> -->
                             </view>
                         </picker-view-column>
                         
@@ -31,7 +46,7 @@
                         <picker-view-column>
                             <view v-for="(month, index) in monthRange" :key="index" class="picker-item">
                                 <text class="picker-text">{{ month }}</text>
-                                <text v-if="index === datePickerValue[1]" class="picker-label">月</text>
+                                <!-- <text v-if="index === datePickerValue[1]" class="picker-label">月</text> -->
                             </view>
                         </picker-view-column>
                         
@@ -39,7 +54,7 @@
                         <picker-view-column>
                             <view v-for="(day, index) in dayRange" :key="index" class="picker-item">
                                 <text class="picker-text">{{ day }}</text>
-                                <text v-if="index === datePickerValue[2]" class="picker-label">日</text>
+                                <!-- <text v-if="index === datePickerValue[2]" class="picker-label">日</text> -->
                             </view>
                         </picker-view-column>
                     </picker-view>
@@ -228,6 +243,79 @@ const closePopup = () => {
                 width: 100%;
                 margin-top: 100rpx;
                 
+                .date-picker-bg{
+                    position: absolute;
+                    top: 96rpx;
+                    left: 0;
+                    width: 100%;
+                    height: 60rpx;
+                    .date-con0{
+                        position: absolute;
+                        // width: 122rpx;
+                        height: 100%;
+                        left: 64rpx;
+                        .time-bg{
+                            position: absolute;
+                            width: 122rpx;
+                            height: 51rpx;
+                            top:50%;
+                            transform: translateY(-50%);
+                        }
+                        .time-text{
+                            position: absolute;
+                            font-size: 28rpx;
+                            color: #1d1e26;
+                            font-weight: bold;
+                            left: 135rpx;
+                            top:50%;
+                            transform: translateY(-50%);
+                        }
+                    }
+                    .date-con1{
+                        position: absolute;
+                        // width: 122rpx;
+                        height: 100%;
+                        left: 313rpx;   
+                        .time-bg{
+                            position: absolute;
+                            width: 122rpx;
+                            height: 51rpx;
+                            top:50%;
+                            transform: translateY(-50%);
+                        }
+                        .time-text{ 
+                            position: absolute;
+                            font-size: 28rpx;
+                            color: #1d1e26;
+                            font-weight: bold;
+                            left: 135rpx;
+                            top:50%;
+                            transform: translateY(-50%);
+                        }
+                    } 
+                    .date-con2{
+                        position: absolute;
+                        // width: 122rpx;
+                        height: 100%;
+                        left: 562rpx;
+                        .time-bg{
+                            position: absolute;
+                            top:50%;
+                            transform: translateY(-50%);
+                            width: 122rpx;
+                            height: 51rpx;
+                        }
+                        .time-text{ 
+                            position: absolute;
+                            font-size: 28rpx;
+                            color: #1d1e26;
+                            font-weight: bold;
+                            left: 135rpx;
+                            top:50%;
+                            transform: translateY(-50%);
+                        }
+                    }
+                }
                 .date-picker {
                     position: relative;
                     z-index: 2;