效果图
布局:
<view class="pop_tSet"><view class="pop_Con"><view class="box_bb"><view class="bb_title">{{titleObj[popType]}}</view></view><view class="box_bb_bot"><view class="bnt_left"><view class="btn_item" v-for="(it,index) in timeSetEndObj" :key="index"@click="endItem(index)" :class="{'btn_active':index==endTab}">{{it}}</view></view><view class="bnt_right"><view class="btn_item_con"><view class="text_s" v-if="popType=='start'||(popType=='end'&&endTab==1)"><template v-if="startTab==1"><u-icon name="question-circle-fill" color="#0080FF" style="margin-right: 10rpx;"size="30"></u-icon>提前{{dayNum}}天开放预约</template></view><view class="set_form"><u-form :model="startForm" ref="uForm" label-position="left"><template v-if="popType=='start'"><u-form-item label="提前几天开放:" prop="startDay" :required="true"label-width="200" :border-bottom="false" label-align="right"><uni-data-select v-model="startForm.startDay" :localdata="rangeDay":clear="false"></uni-data-select></u-form-item><u-form-item label="开放时间:" prop="startTime" label-width="auto":border-bottom="false" label-align="right"><u-input v-model="startForm.startTime" type="select" :border="true"@click="selectEvent('start')" /></u-form-item></template></u-form></view></view></view></view><view style="height: 90rpx"></view></view><view class="fBoxBtn"><view class="qx" @click="qxCancel">取消</view><view class="qr" @click="submit">确认</view></view></view>
样式:
.pop_tSet {height: 100%;}.pop_Con {display: flex;flex-direction: column;height: 100%;overflow: hidden;.box_bb {display: flex;flex-direction: column;justify-content: space-between;.bb_title {text-align: center;font-size: 36rpx;font-weight: 700;padding: 50rpx 40rpx;border-bottom: 1rpx solid #F0F0F0;}}.box_bb_bot {flex: 1;overflow: hidden;display: flex;position: relative;.bnt_left {width: 260rpx;background-color: $uni-text-color-gap;height: 100%;overflow-y: scroll;}.bnt_right {flex: 1;height: 100%;}.btn_item {padding: 40rpx 0;font-size: 32rpx;text-align: center;transition: background-color .2s;}.btn_item_con {padding: 40rpx 30rpx;.text_s {font-size: 24rpx;color: $uni-text-color-grey;display: flex;align-items: center;justify-content: flex-end;}}.btn_active {background-color: $uni-bg-color-btn;color: #fff;}}.set_form {padding-left: 40rpx;margin-top: 80rpx;}}.fBoxBtn {width: 100%;padding: 0rpx 0rpx 0 0;display: flex;justify-content: space-between;border-top: 1rpx solid #F0F0F0;position: fixed;bottom: 0;z-index: 2;background-color: #fff;view {text-align: center;height: 90rpx;font-size: 30rpx;width: 50%;line-height: 90rpx;}.qx {border-right: 1rpx solid $uni-text-color-gap;}.qr {color: #0081FF;}}