@xtdev/xt-miniprogram-ui 1.2.59 → 1.2.60

package/libs/xt-date-picker/README.md

@@ -1,77 +0,0 @@
-<!--
- * @Author: Mr.Hu
- * @Date: 2024-01-04 16:02:07
- * @Description: 
- * @LastEditors: Mr.Hu
--->
-# 时间选择器
-
-### 介绍
-用于选择单个时间点或时间范围
-
-### 效果图
-![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "时间选择器")
-
-### 引入
-在app.json或页面配置json中引入
-```
-"usingComponents": {
-    "xt-date-picker": "@xtdev/xt-miniprogram-ui/xt-date-picker",
-}
-```
-
-## 代码演示
-
-### 基础用法
-![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "基础用法")
-
-```
-<xt-date-picker show="{{true}}" />
-```
-
-### 指定为按日筛选
-![效果图](https://img.tanjiu.cn/home/bX2eCnbwTyAjaxCFasTHedKfZQEdEDzD.png "指定为按日筛选")
-
-```
-<xt-date-picker show="{{true}}" type="date" />
-```
-### 指定最小和最大可选日期
-![效果图](https://img.tanjiu.cn/home/DCHaTGQBHMy74W5n2YCZeZ6hc3fnkn3D.png "指定最小和最大可选日期")
-
-```
-<xt-date-picker show="{{true}}" minDate="2023-4-1" maxDate="2024-4-1"/>
-```
-### 指定选择器默认选中日期
-![效果图](https://img.tanjiu.cn/home/cfwHk7JrBpGRpihQG2w6HDbw3TsQbs2p.png "指定选择器默认选中日期")
-
-```
-<xt-date-picker show="{{true}}" currentDate="2022-4-1"/>
-```
-### 展示切换模式按钮
-![效果图](https://img.tanjiu.cn/home/sfawPWDsenpxtjWnPhXCxFcsnhQYBhHQ.png "展示切换模式按钮")
-
-```
-<xt-date-picker show="{{true}}" showChangeTab="{{true}}"/>
-```
-
-## API
-
-#### xt-date-picker props
-
-| 参数      | 说明 |  类型 |
-| ----------- | ----------- | ---------- |
-| show      | 是否显示时间选择器，默认false | `Boolean` |
-| title   | 选择器标题  | `String` |
-| type   | 选择模式，默认`dateRange`（可选值为`date`、`dateRange`）  | `String` |
-| minDate   | 最小可选日期  | `String` |
-| maxDate   | 最大可选日期  | `String` |
-| currentDate   | 选择器默认选中的日期，默认为当天  | `Number` |
-| showChangeTab   | 是否展示切换模式按钮，默认false  | `Boolean` |
-| confirmButtonText   | 确认按钮文字  | `String` |
-| cancelButtonText   |  取消按钮文字  | `String` |
-
-## Event
-
-| 事件名      | 说明 | 回调参数 |
-| ----------- | ----------- | ----------- |
-| getDateValue      | 点击确认按钮时触发 | `String` |

package/libs/xt-date-picker/index.js

@@ -1,443 +0,0 @@
-/*
- * @Author: Mr.Hu
- * @Date: 2023-12-29 09:48:47
- * @Description: 日期组件-js逻辑
- * @LastEditors: Mr.Hu
- */
-// 获取当前月份的天数
-const getDaysInMonth = (year, month) => {
-  const daysInMonth = new Date(year, month, 0).getDate();
-  return daysInMonth;
-}
-// 深拷贝
-const deepClone = (val) => {
-  if (!val) return null;
-  const isObject = (obj) => Object.prototype.toString.call(obj) === '[object object]';
-  let newResult = Array.isArray(val) ? [] : {};
-  for (const key in val) {
-    if (Object.prototype.hasOwnProperty.call(val, key)) {
-      newResult[key] = isObject(val[key]) ? deepClone(val[key]) : val[key];
-    }
-  }
-  return newResult;
-}
-// 获取默认时间
-const getDefaultDate = () => {
-  const now = new Date();
-  return `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`;
-}
-Component({
-  behaviors: [],
-  properties: {
-    // 选择器显示隐藏
-    show: {
-      type: Boolean,
-      value: false,
-    },
-    // 弹窗标题
-    title: {
-      type: String,
-      value: '日期筛选'
-    },
-    // 日期选择器模式 date 年月日选择 dateRange 时间范围选择
-    type: {
-      type: String,
-      value: 'dateRange',
-      observer: function (value) {
-        this.setData({filtType: value})
-      }
-    },
-    // 最小可选日期
-    minDate: {
-      type: String,
-      value: '1990-1-1'
-    },
-    // 最大可选日期
-    maxDate: {
-      type: String,
-      value: ''
-    },
-    // 当前时间
-    currentDate: {
-      type: String,
-      value: ''
-    },
-    // 展示切换按钮
-    showChangeTab: {
-      type: Boolean,
-      value: false
-    },
-    // 确认按钮文字
-    confirmButtonText: {
-      type: String,
-      value: '确认'
-    },
-    // 取消按钮文字
-    cancelButtonText: {
-      type: String,
-      value: '重置'
-    }
-  },
-  data: {
-    show: false,
-    years: [], // 年份数组
-    months: [], // 月份数组
-    days: [], // 天份数组
-    dateArr: [9999, 1, 1], // 下拉数组下标
-    dateValue: '', // 选中的日期值
-    dateStr: '', // 选中的日期显示字符
-    startDateArr: [], // 开始日期数组下标
-    startDateValue: '', // 开始日期选中值
-    startDateStr: '', // 开始日期字符
-    endDateArr: [], // 结束日期数组下标
-    endDateValue: '', // 结束日期选中值
-    endDateStr: '', // 结束日期字符
-    defaultDate: '', // 默认日期（组件接收的|当前时间）
-    checkedType: 'start', // 当前选择的日期类型
-    filtType: 'dateRange', // 选择器模式
-    typeEnums: {
-      date: '按日筛选',
-      dateRange: '按月筛选',
-    },
-    indicatorSyle: 'font-weight: 800;height: 112rpx'
-  },
-  lifetimes: {
-    created() {
-    },
-    async attached() {
-      await this.initPickerArr();
-      this.setDefaultDate();
-    }
-  },
-  methods: {
-    // 初始化日期数组
-    initPickerArr(curSelDate, dateValue) {
-      return new Promise(resolve => {
-        let { data: { minDate, maxDate, currentDate, dateArr } } = this;
-        currentDate = currentDate || getDefaultDate();
-        const curDateArr = this.transformToArr(curSelDate ? curSelDate : currentDate); //当前日期数组
-        const selYearColum = dateValue && dateArr ? dateValue[0] !== dateArr[0] : false; // 选择的是年份列
-        const selMonthColum = dateValue && dateArr ? dateValue[1] !== dateArr[1] : false; // 选择的是月份列
-        const selDayColum = dateValue && dateArr ? dateValue[2] !== dateArr[2] : false; // 选择的是日份列
-        if (selDayColum) resolve();
-        const curYear = curDateArr[0], curMonth= curDateArr[1], curDay = curDateArr[2];
-        let minYear, maxYear, minMonth, maxMonth, minDay, maxDay = 31; 
-        if (minDate && minDate.length) {
-          const minDateArr = this.transformToArr(minDate);
-          minYear = Number(minDateArr[0]);
-          minMonth = (curYear && curYear == minDateArr[0]) ? minDateArr[1] : 1;
-          minDay = (curYear && curYear == minDateArr[0] && curMonth == minDateArr[1]) ? minDateArr[2] : 1;
-        } else {
-          minYear = 1990;
-          minMonth = 1;
-          minDay = 1;
-        }
-        if (maxDate && maxDate.length) {
-          const maxDateArr = this.transformToArr(maxDate);
-          maxYear = maxDateArr[0];
-          maxMonth = (curYear && curYear == maxDateArr[0]) ? maxDateArr[1] : 12;
-          maxDay = (curYear && curYear == maxDateArr[0] && curMonth == maxDateArr[1]) ? maxDateArr[2] : 31;
-        } else {
-          maxYear = new Date().getFullYear();
-          maxMonth = 12;
-          maxDay = 31;
-        }
-        const years = [], months = [], days = [];
-        
-        for (let i = minYear; i <= maxYear; i++) {
-          years.push(i);
-        }
-        for (let i = minMonth; i <= maxMonth; i++) {
-          months.push(i);
-        }
-        for (let i = minDay; i <= maxDay; i++) {
-          days.push(i);
-        }
-        if (curSelDate && selYearColum) {
-          this.setData({
-            months
-          })
-        } else if (curSelDate && selMonthColum) {
-          this.setData({
-            days
-          })
-        } else {
-          this.setData({
-            years,
-            months,
-            days
-          })
-        }
-        resolve();
-      })
-    },
-    // 处理传入日期格式
-    transformToArr(dateStr) {
-      if (!dateStr) return null;
-      const dateArr = dateStr.split('-');
-      if (!dateArr.length) return null;
-      return dateArr;
-    },
-    // 设置默认年月日
-    setDefaultDate() {
-      const now = new Date();
-      let { data: { dateValue, currentDate, dateStr, dateArr, defaultDate, minDate } } = this;
-      currentDate = currentDate || getDefaultDate();
-      let curDateArr = this.transformToArr(currentDate); //当前日期数组
-      const curYear = curDateArr[0];
-      const curMonth= curDateArr[1];
-      const curDay = curDateArr[2];
-      const minDateArr = this.transformToArr(minDate); // 最小可选日期数组
-      const defaultYear = minDateArr ? minDateArr[0] : 1990;
-      const defaultMonth = (minDateArr && curYear == minDateArr[0]) ? minDateArr[1] : 1;
-      const defaultDay = (minDateArr && curYear == minDateArr[0] && curMonth == minDateArr[1]) ? minDateArr[2] : 1;
-      if (curDateArr && curDateArr.length) {
-        // 如果有设置当前日期，则数组下标选中当前日期
-        dateStr = `${curYear}年${curMonth}月${curDay}日`;
-        dateArr = [curYear - defaultYear,  curMonth - defaultMonth, curDateArr[2] - defaultDay];
-        dateValue = `${curYear}-${curMonth}-${curDay}`;
-      } else {
-        // 如果有设置当前日期，则数组下标默认选中当前
-        dateStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
-        dateArr = [now.getFullYear() - 1990, now.getMonth(), now.getDate() - 1 ];
-        dateValue = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
-      }
-      // 储存当前传入的原始值
-      defaultDate = JSON.parse(JSON.stringify(dateValue));
-      this.setData({
-        dateArr,
-        dateStr,
-        dateValue,
-        defaultDate,
-        startDateArr: dateArr,
-        startDateStr: dateStr,
-        startDateValue: dateValue
-      });
-    },
-    // 渲染天数
-    renderDayList(curMonthDays) {
-      let dayList = Array.from({ length: curMonthDays }, (v, k) => (+k + 1).toString());
-      dayList = dayList.map(day => {
-        if (day < 10) {
-          day = `0${day}`;
-        }
-        return day;
-      });
-      return dayList;
-    },
-    // 处理当前月的天数
-    handelDays(value) {
-      const { data: { days, dateArr, years, months, minDate, maxDate } } = this;
-      const minDateArr = minDate ? this.transformToArr(minDate) : [];
-      const maxDateArr = maxDate ? this.transformToArr(maxDate) : [];
-      const selYear = years[value[0]], selMonth = months[value[1]], selDay = days.length > value[2] + 1 ? value[2] + 1 : days.length;
-      const curColumnLen = days.length; // 当前日数组对应的数组长度
-      // 当前月是最小可选月份
-      const isMinMonth = selYear == minDateArr[0] && selMonth+1 <= minDateArr[1];
-      // 当前月是最大可选月份
-      const isMaxMonth = (`${selYear}-${selMonth}` == `${maxDateArr[0]}-${maxDateArr[1]}`) && (selMonth == maxDateArr[1]);
-      const curMonthDays = isMaxMonth ? maxDateArr[2] : getDaysInMonth(selYear, selMonth);
-      const oldDateArr = dateArr; // 获取老的下标选项
-      let newDaysArr = days, newDateArr = value;
-      // 如果当前所选月份的天数大于当前月所有天数
-      if (curColumnLen > curMonthDays) {
-        // 获取当前月天数
-        const dayList = this.renderDayList(curMonthDays);
-        // 数组选项重新赋值
-        newDaysArr = dayList;
-      } else if (curColumnLen < curMonthDays) {
-        const dayList = this.renderDayList(curMonthDays);
-        newDaysArr = dayList;
-      }
-      // 设置新的下标选项
-      if (isMinMonth) {
-        newDateArr = [
-          newDateArr[0],
-          (newDateArr[1] + 1 - minDateArr[1]) > 0 ? (newDateArr[1] + 1 - minDateArr[1]) : 0,
-          selDay > curMonthDays ? dayList.length : newDateArr[2]
-      ];
-      } else if (isMaxMonth) {
-        // 当前所选年份是最大月
-        newDateArr = [newDateArr[0], newDateArr[1], newDateArr[2]];
-      } else if (selYear == minDateArr[0] && selYear < years[dateArr[0]]) {
-        // 当前所选年份是最小年，并且从大年份到小年份
-        newDateArr = [
-          newDateArr[0],
-          (newDateArr[1] + 1 - minDateArr[1]) > 0 ? (newDateArr[1] + 1 - minDateArr[1]) : 0,
-          newDateArr[2]
-        ];
-      } else if (years[dateArr[0]] == minDateArr[0] && selYear > years[dateArr[0]]) {
-        // 上一个所选年份是最小年，并且从小年份到小年份
-        newDateArr = [
-          newDateArr[0],
-          (Number(newDateArr[1]) + Number(minDateArr[1]) - 1),
-          newDateArr[2]
-        ];
-      } else if (years[dateArr[0]] == maxDateArr[0] && selYear > years[dateArr[0]]) {
-        // 如果是最大年，并且从小年份到大年份
-        newDateArr = [
-          newDateArr[0],
-          newDateArr[0] > maxDateArr[0] ? maxDateArr[0] : newDateArr[0],
-          newDateArr[2]
-        ];
-      }
-      this.setData({
-        days: newDaysArr,
-        dateArr: newDateArr
-      })
-    },
-    // 滑动下拉列表
-    async bindChange(e) {
-      const value = e.detail.value;
-      const { data: { years: year, months: month, days: day } } = this;
-      // 渲染下拉列表
-      await this.initPickerArr(`${year[value[0]]}-${month[value[1]]}-${day[value[2]]}`, value);
-      // 处理每月可选天数
-      this.handelDays(value);
-      let { data: {
-        years, months, days,
-        dateValue, dateStr, dateArr,
-        filtType, checkedType,
-        startDateArr, endDateArr,
-        startDateValue, endDateValue,
-        startDateStr, endDateStr
-      } } = this;
-      if (filtType === 'date') {
-        // 如果是按月筛选
-        dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`;
-        dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`;
-        this.setData({
-          dateStr,
-          dateValue
-        });
-      } else {
-        // 如果是按日筛选
-        if (checkedType === 'start') {
-          this.setData({
-            startDateArr: dateArr,
-            startDateStr: `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`,
-            startDateValue: `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`,
-          })
-        } else {
-          this.setData({
-            endDateArr: dateArr,
-            endDateStr: `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`,
-            endDateValue: `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`,
-          })
-        }
-      }
-    },
-    // 更改筛选类型
-    changeFiltType() {
-      const { data: { filtType, dateValue, dateStr, dateArr } } = this;
-      this.setData({
-        filtType: filtType === 'date' ? 'dateRange' : 'date',
-      })
-      if (filtType === 'date') {
-        this.setData({ 
-          startDateValue: dateValue,
-          startDateStr: dateStr,
-          startDateArr: dateArr
-         });
-        return;
-      }
-      this.onReset();
-    },
-    // 切换日期类型
-    switchDateType(e) {
-      const checkedType = e.currentTarget.dataset.type;
-      this.setData({
-        checkedType,
-      });
-      this.showCheckedPicker();
-    },
-    // 反显选中的日期下拉值
-    showCheckedPicker() {
-      let { data: { 
-        startDateValue, endDateValue, checkedType,
-        startDateArr, endDateArr, dateArr,
-        startDateStr, endDateStr
-       } } = this;
-       // 如果当前切换到结束时间选项
-      if (checkedType === 'end') {
-        if (!endDateValue) {
-          // 如果当前没有选结束时间
-          endDateValue = startDateValue;
-          endDateArr = startDateArr;
-          endDateStr = startDateStr;
-        } else {
-          dateArr = [endDateArr[0],  endDateArr[1], endDateArr[2]]
-        }
-      }
-      if (checkedType === 'start') {
-        dateArr = [startDateArr[0],  startDateArr[1], startDateArr[2]]
-      }
-      this.setData({
-        endDateStr,
-        endDateValue,
-        endDateArr,
-        dateArr
-      })
-    },
-    // 关闭选择器
-    onClose() {
-      this.onReset();
-      this.setData({ show: false });
-      this.triggerEvent("onClose", {});
-    },
-    // 重置时间
-    onReset() {
-      this.initPickerArr();
-      const { data: { defaultDate, filtType, minDate } } = this;
-      let resetDateValue, resetDateStr, resetDateArr;
-      let { data: { dateStr } } = this;
-      let curDateArr = this.transformToArr(defaultDate);
-      let minDateArr = this.transformToArr(minDate);
-      resetDateStr = `${curDateArr[0]}年${curDateArr[1]}月${curDateArr[2]}日`;
-      resetDateArr = [curDateArr[0] - (minDateArr && minDateArr[0] ? minDateArr[0] : 1990),  curDateArr[1] - 1, curDateArr[2] - 1];
-      resetDateValue = `${curDateArr[0]}-${curDateArr[1]}-${curDateArr[2]}`;
-      this.setData({
-        dateArr: resetDateArr,
-        dateStr: resetDateStr,
-        dateValue: resetDateValue
-      });
-      if (filtType === 'dateRange') {
-        this.setData({
-          startDateValue: resetDateValue,
-          startDateArr: resetDateArr,
-          startDateStr: resetDateStr,
-          endDateArr: [],
-          endDateStr: '',
-          endDateValue: '',
-        })
-      }
-      this.triggerEvent("onReset", {});
-    },
-    // 确认选择时间
-    onConfirm() {
-      const { data: { filtType, dateValue, startDateValue, endDateValue } } = this;
-      let checkedDate;
-      if (filtType === 'date') {
-        // 如果按月筛选
-        checkedDate = dateValue;
-      } else {
-        if (!endDateValue) {
-          wx.showToast({
-            title: '请选择结束时间',
-            icon: 'none'
-          })
-          return;
-        }
-        if (new Date(startDateValue) > new Date(endDateValue)) {
-          wx.showToast({
-            title: '开始时间不能大于结束时间',
-            icon: 'none'
-          })
-          return;
-        }
-        checkedDate = [startDateValue, endDateValue];
-      }
-      this.triggerEvent('getDateValue', checkedDate)
-    }
-  },
-});

package/libs/xt-date-picker/index.json

@@ -1,7 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "xt-icon": "../xt-icon/index",
-    "xt-button": "../xt-button/index"
-  }
-}

package/libs/xt-date-picker/index.wxml

@@ -1,58 +0,0 @@
-<view wx:if="{{show}}" class="container">
-  <view class="xt-mask"></view>
-  <view class="xt-popup">
-    <!-- 顶部标题+关闭按钮 -->
-    <view class="xt-popup-head">
-      <view class="xt-popup-head-text">{{title}}</view>
-      <xt-icon catchtap="onClose" icon="shibai-xiao" class="shibai-xiao" size="48"/>
-    </view>
-    <!-- 分割线 -->
-    <view class="head-border"></view>
-    <!-- 切换选择类型按钮 -->
-    <view wx:if="{{showChangeTab}}" class="filter-btn" catchtap="changeFiltType">
-      <view>{{typeEnums[filtType]}}</view>
-      <xt-icon icon="shaixuan" class="shaixuan" size="32"/>
-    </view>
-    <!-- 选中日期 -->
-    <view class="date-sel">
-      <view wx:if="{{filtType === 'date'}}" class="sel-sigle actived">{{dateStr}}</view>
-      <view wx:else class="sel-range">
-        <view catchtap="switchDateType" data-type="start" class="sel-start {{checkedType == 'start' ? 'actived' : ''}}">
-          {{startDateStr}}
-        </view>
-        <view>至</view>
-        <view catchtap="switchDateType" data-type="end" class="sel-end {{checkedType  == 'end' ? 'actived' : ''}}">
-          {{ endDateStr || '结束时间'}}
-        </view>
-      </view>
-    </view>
-    <!-- 选择器 -->
-    <picker-view
-      class="picker-box"
-      value="{{dateArr}}"
-      indicatorStyle="{{indicatorSyle}}"
-      mask-class="picker-mask"
-      bindchange="bindChange">
-      <picker-view-column>
-        <view wx:for="{{years}}" wx:key="index" class="picker-item {{dateArr[0] === index ? 'picker-select' : ''}}">
-          {{item}}年
-        </view>
-      </picker-view-column>
-      <picker-view-column>
-        <view wx:for="{{months}}" wx:key="index" class="picker-item {{dateArr[1] === index ? 'picker-select' : ''}}">
-          {{item}}月
-        </view>
-      </picker-view-column>
-      <picker-view-column>
-        <view wx:for="{{days}}" wx:key="index" class="picker-item {{dateArr[2] === index ? 'picker-select' : ''}}">
-          {{item}}日
-        </view>
-      </picker-view-column>
-    </picker-view>
-    <!-- 按钮组 -->
-    <view class="btns-group">
-      <xt-button catchtap="onReset" class="btn-reset">{{cancelButtonText}}</xt-button>
-      <xt-button catchtap="onConfirm" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
-    </view>
-  </view>
-</view>

package/libs/xt-date-picker/index.wxss

@@ -1,118 +0,0 @@
-.btns-group {
-  display: flex;
-}
-.btn-reset, .btn-confirm {
-  width: 328rpx;
-}
-.xt-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-}
-.xt-popup {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1204rpx;
-  padding: 32rpx;
-  border-radius: 24rpx 24rpx 0 0;
-  box-sizing: border-box;
-  background: #fff;
-  z-index: 999;
-}
-.xt-popup-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 32rpx;
-}
-.xt-popup-head .xt-popup-head-text {
-  line-height: 56rpx;
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #000;
-}
-.xt-popup-head .shibai-xiao {
-  color: #B8B8B8;
-}
-.head-border {
-  width: 100%;
-  height: 2rpx;
-  background: #F5F5F5;
-}
-.filter-btn {
-  display: flex;
-  align-items: center;
-  width: 226rpx;
-  height: 80rpx;
-  margin-top: 32rpx;
-  padding: 16rpx 24rpx;
-  font-size: 34rpx;
-  border-radius: 60rpx;
-  box-sizing: border-box;
-  background: #E5E5E5;
-}
-.filter-btn .shaixuan {
-  margin-left: 8rpx;
-}
-.date-sel {
-  margin-top: 48rpx;
-}
-.sel-sigle, .sel-start, .sel-end {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 80rpx;
-  border-radius: 60rpx;
-  font-weight: 800;
-  color: #666666;
-  border: 2rpx solid #E5E5E5;
-}
-.date-sel .sel-range {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.date-sel .sel-start, .date-sel .sel-end {
-  width: 296rpx;
-}
-.date-sel .actived {
-  color: #6722AB;
-  border: 2rpx solid #6722AB;
-}
-.picker-box {
-  width: 100%;
-  height: 360rpx;
-  margin-top: 80rpx;
-}
-.btns-group {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  padding: 32rpx;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding-bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
-  padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
-}
-.picker-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 34rpx;
-  font-size: 34rpx;
-  color: #000000;
-  text-align: center;
-}
-.picker-mask {
-}
-.picker-select {
-  font-size: 34rpx;
-  font-weight: 800;
-}