|
@@ -1,40 +1,46 @@
|
|
<template>
|
|
<template>
|
|
- <div class="add-time" id="addTimeId" style="width: 100%">
|
|
|
|
- <div class="date_box" v-if="dateArr && dateArr.length">
|
|
|
|
- <div
|
|
|
|
- class="date-item"
|
|
|
|
- :class="item.isActive ? 'date-item-active' : ''"
|
|
|
|
- @click.stop="checkDate(item)"
|
|
|
|
- :key="'date' + index"
|
|
|
|
- v-for="(item, index) in dateArr"
|
|
|
|
- >
|
|
|
|
- <span>{{ item.week }}</span>
|
|
|
|
- <span>{{ item.day }}</span>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="work-content">
|
|
|
|
+ <div class="work-space">
|
|
|
|
+ <div class="space-title">尚格云 申请延时</div>
|
|
|
|
+ <div class="device-tip">延时期间,空间相关设备会开启</div>
|
|
</div>
|
|
</div>
|
|
- <div class="sliders-list" id="sliderListId">
|
|
|
|
- <div
|
|
|
|
- class="sliders-wrapper"
|
|
|
|
- id="slidersWrapperId"
|
|
|
|
- :key="'slider' + index"
|
|
|
|
- v-for="(item, index) in nowTimerArr"
|
|
|
|
- >
|
|
|
|
- <div class="sliders">
|
|
|
|
- <div class="label" v-show="index === 0 || index % 2 === 0">
|
|
|
|
- {{ item.timer }}
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="slider-box"
|
|
|
|
- @click="checkSlider($event, index)"
|
|
|
|
- :data-index="index"
|
|
|
|
- ></div>
|
|
|
|
|
|
+ <div class="add-time" id="addTimeId">
|
|
|
|
+ <div class="date_box" v-if="dateArr && dateArr.length">
|
|
|
|
+ <div
|
|
|
|
+ class="date-item"
|
|
|
|
+ :class="item.isActive ? 'date-item-active' : ''"
|
|
|
|
+ @click.stop="checkDate(item)"
|
|
|
|
+ :key="'date' + index"
|
|
|
|
+ v-for="(item, index) in dateArr"
|
|
|
|
+ >
|
|
|
|
+ <span>{{ item.week }}</span>
|
|
|
|
+ <span>{{ item.day }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="slider-btn" id="sliderBtnId">
|
|
|
|
- <div class="start" id="startId"></div>
|
|
|
|
- <div class="end-box" id="endBoxId">
|
|
|
|
- <div class="end" id="endId"></div>
|
|
|
|
- <div class="end-radio" id="endRadioId"></div>
|
|
|
|
|
|
+ <div class="sliders-list" id="sliderListId">
|
|
|
|
+ <div
|
|
|
|
+ class="sliders-wrapper"
|
|
|
|
+ id="slidersWrapperId"
|
|
|
|
+ :key="'slider' + index"
|
|
|
|
+ v-for="(item, index) in nowTimerArr"
|
|
|
|
+ >
|
|
|
|
+ <div class="sliders">
|
|
|
|
+ <div class="label" v-show="index === 0 || index % 2 === 0">
|
|
|
|
+ {{ item.timer }}
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="slider-box"
|
|
|
|
+ @click="checkSlider($event, index)"
|
|
|
|
+ :data-index="index"
|
|
|
|
+ ></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="slider-btn" id="sliderBtnId">
|
|
|
|
+ <div class="start" id="startId"></div>
|
|
|
|
+ <div class="end-box" id="endBoxId">
|
|
|
|
+ <div class="end" id="endId"></div>
|
|
|
|
+ <div class="end-radio" id="endRadioId"></div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -56,7 +62,7 @@ import {
|
|
onMounted,
|
|
onMounted,
|
|
onUpdated,
|
|
onUpdated,
|
|
nextTick,
|
|
nextTick,
|
|
- watch
|
|
|
|
|
|
+ watch,
|
|
} from "vue";
|
|
} from "vue";
|
|
import { swiper } from "@/utils/swiper";
|
|
import { swiper } from "@/utils/swiper";
|
|
import {
|
|
import {
|
|
@@ -79,7 +85,7 @@ export default defineComponent({
|
|
workkArr: {
|
|
workkArr: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => [],
|
|
default: () => [],
|
|
- }
|
|
|
|
|
|
+ },
|
|
},
|
|
},
|
|
setup(props) {
|
|
setup(props) {
|
|
const screenInfo: any = {
|
|
const screenInfo: any = {
|
|
@@ -93,7 +99,7 @@ export default defineComponent({
|
|
let nowData: any = [];
|
|
let nowData: any = [];
|
|
const proxyData = reactive({
|
|
const proxyData = reactive({
|
|
screenInfo: screenInfo,
|
|
screenInfo: screenInfo,
|
|
- workkArr:props.workkArr,
|
|
|
|
|
|
+ workkArr: props.workkArr,
|
|
startIndex: 0,
|
|
startIndex: 0,
|
|
endIndex: 0,
|
|
endIndex: 0,
|
|
nowData: nowData,
|
|
nowData: nowData,
|
|
@@ -402,24 +408,81 @@ export default defineComponent({
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ // 转化日期(分钟处理成可选择)
|
|
|
|
+ parseCusStartTime(time: any) {
|
|
|
|
+ let newTime: any = time;
|
|
|
|
+ if (time) {
|
|
|
|
+ let minute: any = (time / 100) % 100;
|
|
|
|
+ if (minute) {
|
|
|
|
+ let temTimeInt: any = time / 10000;
|
|
|
|
+ temTimeInt = parseInt(temTimeInt);
|
|
|
|
+ if (minute < 30) {
|
|
|
|
+ if (temTimeInt < 10) {
|
|
|
|
+ newTime = "0" + temTimeInt + "30" + "00";
|
|
|
|
+ } else {
|
|
|
|
+ newTime = temTimeInt + "30" + "00";
|
|
|
|
+ }
|
|
|
|
+ } else if (minute > 30) {
|
|
|
|
+ temTimeInt = temTimeInt + 1;
|
|
|
|
+ if (temTimeInt < 10) {
|
|
|
|
+ newTime = "0" + temTimeInt + "00" + "00";
|
|
|
|
+ } else {
|
|
|
|
+ newTime = temTimeInt + "00" + "00";
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return newTime;
|
|
|
|
+ },
|
|
|
|
+ // 转化日期(分钟处理成可选择)
|
|
|
|
+ parseCusEndTime(time: any) {
|
|
|
|
+ let newTime: any = time;
|
|
|
|
+ if (time) {
|
|
|
|
+ let minute: any = (time / 100) % 100;
|
|
|
|
+ if (minute) {
|
|
|
|
+ let temTimeInt: any = time / 10000;
|
|
|
|
+ temTimeInt = parseInt(temTimeInt);
|
|
|
|
+ if (minute < 30) {
|
|
|
|
+ if (temTimeInt < 10) {
|
|
|
|
+ newTime = "0" + temTimeInt + "00" + "00";
|
|
|
|
+ } else {
|
|
|
|
+ newTime = temTimeInt + "00" + "00";
|
|
|
|
+ }
|
|
|
|
+ } else if (minute > 30) {
|
|
|
|
+ if (temTimeInt < 10) {
|
|
|
|
+ newTime = "0" + temTimeInt + "30" + "00";
|
|
|
|
+ } else {
|
|
|
|
+ newTime = temTimeInt + "30" + "00";
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return newTime;
|
|
|
|
+ },
|
|
/**
|
|
/**
|
|
* 选中当前模块
|
|
* 选中当前模块
|
|
*/
|
|
*/
|
|
checkSlider(e: any, index: any) {
|
|
checkSlider(e: any, index: any) {
|
|
- console.log("===");
|
|
|
|
- console.log(e.target);
|
|
|
|
let nowIndex: any = getNowTime()[1];
|
|
let nowIndex: any = getNowTime()[1];
|
|
if (index < nowIndex) {
|
|
if (index < nowIndex) {
|
|
// 过去的时间不可选择
|
|
// 过去的时间不可选择
|
|
|
|
+ // 过去的时间不可选择
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- let formatTimer: any = proxyData.nowTimerArr[index].formatTimer;
|
|
|
|
- if (
|
|
|
|
- formatTimer >= proxyData.nowData.cusStartTime &&
|
|
|
|
- formatTimer <= proxyData.nowData.cusEndTime
|
|
|
|
- ) {
|
|
|
|
- //在服务定制时间之间
|
|
|
|
- return;
|
|
|
|
|
|
+ if (proxyData.nowData.cusStartTime && proxyData.nowData.cusEndTime) {
|
|
|
|
+ let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
|
|
|
|
+ let cusStartTime: any = proxyData.parseCusEndTime(
|
|
|
|
+ proxyData.nowData.cusStartTime
|
|
|
|
+ );
|
|
|
|
+ let cusEndTime: any = proxyData.parseCusEndTime(
|
|
|
|
+ proxyData.nowData.cusEndTime
|
|
|
|
+ );
|
|
|
|
+ if (
|
|
|
|
+ formatTimer > proxyData.nowData.cusStartTime &&
|
|
|
|
+ formatTimer < proxyData.nowData.cusEndTime
|
|
|
|
+ ) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
proxyData.setOptionnalPerstion(index);
|
|
proxyData.setOptionnalPerstion(index);
|
|
},
|
|
},
|
|
@@ -428,7 +491,22 @@ export default defineComponent({
|
|
*/
|
|
*/
|
|
dateArr: dateArr,
|
|
dateArr: dateArr,
|
|
myTimeArr: myTimeArr,
|
|
myTimeArr: myTimeArr,
|
|
- getWorkTimeList() {
|
|
|
|
|
|
+ // // 服务定制开始时间转化(处理服务定制时间包含几分钟的问题)
|
|
|
|
+ // parseCusStatTime() {},
|
|
|
|
+ // // 服务定制结束时间转化(处理服务定制时间包含几分钟的问题)
|
|
|
|
+ // parseCusEndTime(time: any) {
|
|
|
|
+ // let newTime: any = "";
|
|
|
|
+ // if (time) {
|
|
|
|
+ // let minute: any = (time / 100) % 100;
|
|
|
|
+ // if (minute < 30) {
|
|
|
|
+
|
|
|
|
+ // } else if (minute > 30) {
|
|
|
|
+ // } else {
|
|
|
|
+ // newTime = time;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ setWorkTimeList() {
|
|
let data: any = proxyData.workkArr;
|
|
let data: any = proxyData.workkArr;
|
|
proxyData.myTimeArr = data;
|
|
proxyData.myTimeArr = data;
|
|
proxyData.dateArr = [];
|
|
proxyData.dateArr = [];
|
|
@@ -525,33 +603,104 @@ export default defineComponent({
|
|
let endTime: any = timerArr[proxyData.endIndex].formatTimer;
|
|
let endTime: any = timerArr[proxyData.endIndex].formatTimer;
|
|
let addTimerArr: any = [];
|
|
let addTimerArr: any = [];
|
|
let delTimerArr: any = [];
|
|
let delTimerArr: any = [];
|
|
- customSceneList.map((item: any) => {
|
|
|
|
- if (startTime >= item.startTime && endTime <= item.endTime) {
|
|
|
|
- // 表示需要删除其中这一段
|
|
|
|
- if (startTime === item.startTime && endTime <= item.endTime) {
|
|
|
|
- let obj: any = {
|
|
|
|
- id: item.id, //类型:String 必有字段 备注:取消加班时必传
|
|
|
|
- projectId: proxyData.nowData.projectId, //类型:String 必有字段 备注:项目id
|
|
|
|
- objectId: proxyData.nowData.objectId, //类型:String 必有字段 备注:空间id
|
|
|
|
- sourceType: "sagacareAndtenantslink", //类型:String 必有字段 备注:sagacareAndtenantslink 来源
|
|
|
|
- startDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://开始日期
|
|
|
|
- endDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://结束日期
|
|
|
|
- startTime: item.startTime, //类型:String 必有字段 备注://开始时间
|
|
|
|
- endTime: item.endTime, //类型:String 必有字段 备注://结束时间
|
|
|
|
- type: "1", //类型:String 必有字段 备注://0 预约加班,1 取消,2 加班(我来了), 3 最后一个走
|
|
|
|
- userId: item.userId, //类型:String 必有字段 备注://用户id
|
|
|
|
- userPhone: item.userPhone, //类型:String 必有字段 备注://手机号
|
|
|
|
- customSceneEqType: "ALL", //类型:String 必有字段 备注://来源 AC 空调入口, SE 灯入口 ALL 加班入口
|
|
|
|
- userName: item.userName, //类型:String 必有字段 备注://名字
|
|
|
|
- };
|
|
|
|
|
|
+ // 加班时间拼接
|
|
|
|
+ customSceneList.map((item: any, index: any) => {
|
|
|
|
+ // item时间段保护当前时间端
|
|
|
|
+ if (startTime < item.startTime) {
|
|
|
|
+ if (endTime < item.startTime) {
|
|
|
|
+ } else if (endTime >= item.startTime) {
|
|
|
|
+ // 时间段连续拼接上
|
|
|
|
+ let delObj: any = proxyData.formaTimeObj(
|
|
|
|
+ item,
|
|
|
|
+ "1",
|
|
|
|
+ item.startTime,
|
|
|
|
+ item.endTime
|
|
|
|
+ );
|
|
|
|
+ delTimerArr.push(delObj);
|
|
|
|
+ startTime = startTime;
|
|
|
|
+ endTime = item.endTime;
|
|
|
|
+ }
|
|
|
|
+ } else if (startTime > item.startTime && startTime < item.endTime) {
|
|
|
|
+ if (endTime <= item.endTime) {
|
|
|
|
+ let delObj: any = proxyData.formaTimeObj(
|
|
|
|
+ item,
|
|
|
|
+ "1",
|
|
|
|
+ item.startTime,
|
|
|
|
+ item.endTime
|
|
|
|
+ );
|
|
|
|
+ delTimerArr.push(delObj);
|
|
|
|
+ startTime = startTime;
|
|
|
|
+ endTime = endTime;
|
|
|
|
+ } else if (endTime > item.endTime) {
|
|
|
|
+ let delObj: any = proxyData.formaTimeObj(
|
|
|
|
+ item,
|
|
|
|
+ "1",
|
|
|
|
+ item.startTime,
|
|
|
|
+ item.endTime
|
|
|
|
+ );
|
|
|
|
+ delTimerArr.push(delObj);
|
|
|
|
+ startTime = item.startTime;
|
|
|
|
+ endTime = endTime;
|
|
|
|
+ }
|
|
|
|
+ } else if (startTime > item.endTime) {
|
|
|
|
+ if (startTime === item.endTime) {
|
|
|
|
+ let delObj: any = proxyData.formaTimeObj(
|
|
|
|
+ item,
|
|
|
|
+ "1",
|
|
|
|
+ item.startTime,
|
|
|
|
+ item.endTime
|
|
|
|
+ );
|
|
|
|
+ startTime = item.startTime;
|
|
|
|
+ endTime = endTime;
|
|
}
|
|
}
|
|
- } else if (startTime < item.startTime && endTime > item.endTime) {
|
|
|
|
- } else if (startTime < item.startTime && endTime < item.endTime) {
|
|
|
|
- } else if (startTime > item.startTime && endTime > item.endTime) {
|
|
|
|
- } else if (startTime >= item.endTime) {
|
|
|
|
- } else if (endTime <= item.startTime) {
|
|
|
|
|
|
+ } else if (startTime === item.startTime && endTime === item.endTime) {
|
|
|
|
+ // 两个时间段一致
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ // 加班时间处理好后和服务定制时间做对比
|
|
|
|
+ let cusStartTime: any = proxyData.parseCusEndTime(
|
|
|
|
+ proxyData.nowData.cusStartTime
|
|
|
|
+ );
|
|
|
|
+ let cusEndTime: any = proxyData.parseCusEndTime(
|
|
|
|
+ proxyData.nowData.cusEndTime
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ if (
|
|
|
|
+ startTime < proxyData.nowData.cusStartTime &&
|
|
|
|
+ endTime < proxyData.nowData.cusStartTime
|
|
|
|
+ ) {
|
|
|
|
+ if (endTime === cusStartTime) {
|
|
|
|
+ endTime = proxyData.nowData.cusStartTime;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let addObj: any = proxyData.formaTimeObj(
|
|
|
|
+ customSceneList[0],
|
|
|
|
+ "0",
|
|
|
|
+ startTime,
|
|
|
|
+ endTime
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ // 格式化加班单个数据
|
|
|
|
+ formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
|
|
|
|
+ let obj: any = {
|
|
|
|
+ projectId: proxyData.nowData.projectId, //类型:String 必有字段 备注:项目id
|
|
|
|
+ objectId: proxyData.nowData.objectId, //类型:String 必有字段 备注:空间id
|
|
|
|
+ sourceType: "sagacareAndtenantslink", //类型:String 必有字段 备注:sagacareAndtenantslink 来源
|
|
|
|
+ startDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://开始日期
|
|
|
|
+ endDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://结束日期
|
|
|
|
+ startTime: startTime, //类型:String 必有字段 备注://开始时间
|
|
|
|
+ endTime: endTime, //类型:String 必有字段 备注://结束时间
|
|
|
|
+ type: type, //类型:String 必有字段 备注://0 预约加班,1 取消,2 加班(我来了), 3 最后一个走
|
|
|
|
+ userId: item.userId, //类型:String 必有字段 备注://用户id
|
|
|
|
+ userPhone: item.userPhone, //类型:String 必有字段 备注://手机号
|
|
|
|
+ customSceneEqType: "ALL", //类型:String 必有字段 备注://来源 AC 空调入口, SE 灯入口 ALL 加班入口
|
|
|
|
+ userName: item.userName, //类型:String 必有字段 备注://名字
|
|
|
|
+ };
|
|
|
|
+ if (type === "1") {
|
|
|
|
+ obj.id = item.id; //类型:String 必有字段 备注:取消加班时必传
|
|
|
|
+ }
|
|
|
|
+ return obj;
|
|
},
|
|
},
|
|
// 提交申请
|
|
// 提交申请
|
|
addWorkTimer() {
|
|
addWorkTimer() {
|
|
@@ -579,12 +728,12 @@ export default defineComponent({
|
|
// proxyData.setScreennWidth()
|
|
// proxyData.setScreennWidth()
|
|
});
|
|
});
|
|
watch(props, (newProps: any) => {
|
|
watch(props, (newProps: any) => {
|
|
- proxyData.workkArr = newProps.workkArr
|
|
|
|
|
|
+ proxyData.workkArr = newProps.workkArr;
|
|
// proxyData.getWorkTimeList();
|
|
// proxyData.getWorkTimeList();
|
|
});
|
|
});
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
// 设置dom最外层的宽
|
|
// 设置dom最外层的宽
|
|
- proxyData.getWorkTimeList();
|
|
|
|
|
|
+ proxyData.setWorkTimeList();
|
|
});
|
|
});
|
|
return {
|
|
return {
|
|
...toRefs(proxyData),
|
|
...toRefs(proxyData),
|
|
@@ -594,25 +743,52 @@ export default defineComponent({
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+.work-content {
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background: #fff;
|
|
|
|
+}
|
|
|
|
+.work-space {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ .space-title {
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ line-height: 31px;
|
|
|
|
+ color: #000000;
|
|
|
|
+ }
|
|
|
|
+ .device-tip {
|
|
|
|
+ padding-bottom: 36px;
|
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ line-height: 17px;
|
|
|
|
+ color: #8d9399;
|
|
|
|
+ }
|
|
|
|
+}
|
|
.add-time {
|
|
.add-time {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 80%;
|
|
|
|
|
|
+ // height: 80%;
|
|
background: #fff;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- padding: 10px;
|
|
|
|
|
|
+ // padding: 10px;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
.date_box {
|
|
.date_box {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding-top: 20px;
|
|
|
|
- padding-bottom: 15px;
|
|
|
|
|
|
+ padding-bottom: 35px;
|
|
|
|
|
|
.date-item {
|
|
.date-item {
|
|
- padding-top: 15px;
|
|
|
|
- width: 44px;
|
|
|
|
- height: 64px;
|
|
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ width: 50px;
|
|
|
|
+ height: 74px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border: 1px solid #eff0f1;
|
|
border: 1px solid #eff0f1;
|
|
border-radius: 16px;
|
|
border-radius: 16px;
|
|
@@ -623,8 +799,8 @@ export default defineComponent({
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
|
&:nth-child(1) {
|
|
&:nth-child(1) {
|
|
- font-family: "PingFang SC";
|
|
|
|
- padding-bottom: 4px;
|
|
|
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
|
+ padding-bottom: 10px;
|
|
font-style: normal;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
font-size: 10px;
|
|
@@ -665,8 +841,8 @@ export default defineComponent({
|
|
.sliders-wrapper {
|
|
.sliders-wrapper {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- width: 36px;
|
|
|
|
- height: 92px;
|
|
|
|
|
|
+ width: 72px;
|
|
|
|
+ height: 125px;
|
|
//border-bottom: 1px solid #ECEFF4;
|
|
//border-bottom: 1px solid #ECEFF4;
|
|
&:nth-child(2n + 1) {
|
|
&:nth-child(2n + 1) {
|
|
border-left: 1px solid #eceff4;
|
|
border-left: 1px solid #eceff4;
|
|
@@ -699,8 +875,8 @@ export default defineComponent({
|
|
.slider-box {
|
|
.slider-box {
|
|
position: absolute;
|
|
position: absolute;
|
|
//width: 100%;
|
|
//width: 100%;
|
|
- width: 36px;
|
|
|
|
- height: 48px;
|
|
|
|
|
|
+ width: 72px;
|
|
|
|
+ height: 100px;
|
|
left: -1px;
|
|
left: -1px;
|
|
bottom: 0px;
|
|
bottom: 0px;
|
|
//background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
|
|
//background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
|
|
@@ -710,16 +886,16 @@ export default defineComponent({
|
|
|
|
|
|
.slider-btn {
|
|
.slider-btn {
|
|
position: absolute;
|
|
position: absolute;
|
|
- height: 48px;
|
|
|
|
|
|
+ height: 72px;
|
|
//left: 40px;
|
|
//left: 40px;
|
|
- top: 64px;
|
|
|
|
|
|
+ top: 45px;
|
|
|
|
|
|
.start {
|
|
.start {
|
|
position: absolute;
|
|
position: absolute;
|
|
- width: 2px;
|
|
|
|
|
|
+ width: 3px;
|
|
top: 0;
|
|
top: 0;
|
|
- height: 48px;
|
|
|
|
- left: -2px;
|
|
|
|
|
|
+ height: 72px;
|
|
|
|
+ left: 0;
|
|
//left: 176px;
|
|
//left: 176px;
|
|
background: #04b49c;
|
|
background: #04b49c;
|
|
}
|
|
}
|
|
@@ -728,25 +904,26 @@ export default defineComponent({
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
width: 20px;
|
|
width: 20px;
|
|
- height: 48px;
|
|
|
|
- right: 3px;
|
|
|
|
|
|
+ height: 72px;
|
|
|
|
+ right: -3px;
|
|
|
|
+ // z-index: 444;
|
|
//left: 286px;
|
|
//left: 286px;
|
|
|
|
|
|
.end {
|
|
.end {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
left: 10px;
|
|
left: 10px;
|
|
- width: 2px;
|
|
|
|
- height: 48px;
|
|
|
|
|
|
+ width: 3px;
|
|
|
|
+ height: 72px;
|
|
background: #04b49c;
|
|
background: #04b49c;
|
|
}
|
|
}
|
|
|
|
|
|
.end-radio {
|
|
.end-radio {
|
|
- width: 14px;
|
|
|
|
|
|
+ width: 18px;
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 15px;
|
|
|
|
- left: 4px;
|
|
|
|
- height: 14px;
|
|
|
|
|
|
+ top: 25px;
|
|
|
|
+ left: 2px;
|
|
|
|
+ height: 18px;
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
|
|
box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
|
|
@@ -754,32 +931,44 @@ export default defineComponent({
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+.add-time-btn {
|
|
|
|
+ position: absolute;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
+ // width: 100%;
|
|
|
|
+ bottom: 5vh;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ display: flex;
|
|
|
|
+ padding-top: 24px;
|
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .add-time-btn {
|
|
|
|
- display: flex;
|
|
|
|
- padding-top: 24px;
|
|
|
|
- text-align: center;
|
|
|
|
-
|
|
|
|
- .cancel-btn {
|
|
|
|
- width: 120px;
|
|
|
|
- height: 50px;
|
|
|
|
- line-height: 50px;
|
|
|
|
- background: #ffffff;
|
|
|
|
- border: 1px solid #c3c7cb;
|
|
|
|
- border-radius: 25px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- margin-right: 20px;
|
|
|
|
- }
|
|
|
|
|
|
+ .cancel-btn {
|
|
|
|
+ // width: 32%;
|
|
|
|
+ width: 170px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ line-height: 50px;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border: 1px solid #c3c7cb;
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #1f2529;
|
|
|
|
+ }
|
|
|
|
|
|
- .comfirm-btn {
|
|
|
|
- width: 195px;
|
|
|
|
- height: 50px;
|
|
|
|
- line-height: 50px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- background: #ffe723;
|
|
|
|
- border-radius: 25px;
|
|
|
|
- color: #1f2429;
|
|
|
|
- }
|
|
|
|
|
|
+ .comfirm-btn {
|
|
|
|
+ // width: 52%;
|
|
|
|
+ width: 265px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ line-height: 50px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: #ce9f27;
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|