WorkConfig.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748
  1. <template>
  2. <div class="scene-config">
  3. <!--开放办公区-->
  4. <div class="time-box" :class="timerText.classColor">
  5. <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
  6. <div class="time-text">
  7. <span>{{ timerText.text }}</span>
  8. <span>{{ timerText.timer }}</span>
  9. </div>
  10. <div
  11. class="time-btn"
  12. :class="timerText.showDel ? 'time-btn-small' : ''"
  13. @click="triggerWork"
  14. >
  15. <span> {{ timerText.btnText }}</span>
  16. </div>
  17. </div>
  18. <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
  19. <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
  20. <div class="del-text">
  21. <span>我要</span>
  22. <span>离开</span>
  23. </div>
  24. </div>
  25. </div>
  26. <!--加班点击我要离开触发-->
  27. <leave-dailog
  28. :isShowLeaveDailog="isShowLeaveDailog"
  29. v-if="isShowLeaveDailog"
  30. @closeDailog="closeLeavDailog"
  31. >
  32. </leave-dailog>
  33. </template>
  34. <script lang="ts">
  35. import {
  36. defineComponent,
  37. reactive,
  38. toRefs,
  39. onBeforeMount,
  40. onMounted,
  41. ref,
  42. watch,
  43. getCurrentInstance,
  44. } from "vue";
  45. import { useRouter } from "vue-router";
  46. import {
  47. formatDate,
  48. formatDateStr,
  49. formateTimeContinuous,
  50. formatTimerStr,
  51. getRelNowTime,
  52. getWeekDate,
  53. parseImgUrl,
  54. } from "@/utils";
  55. import { UserActionTypes } from "@/store/modules/user/action-types";
  56. import { useStore } from "@/store";
  57. import { saveBatchCustomScene } from "@/apis/envmonitor";
  58. // import { Dialog } from "vant";
  59. import LeaveDailog from "@/views/envmonitor/components/ManualWork/LeaveDailog.vue";
  60. export default defineComponent({
  61. props: {
  62. scenarioArr: {
  63. type: Array,
  64. default: () => [],
  65. },
  66. workkArr: {
  67. type: Array,
  68. default: () => [],
  69. },
  70. },
  71. components: {
  72. LeaveDailog,
  73. },
  74. setup(props, contx) {
  75. const proxyGlobal: any = getCurrentInstance();
  76. let router: any = useRouter();
  77. let timerText: any = {
  78. text: "",
  79. timer: "", // 工作时间
  80. btnText: "",
  81. showDel: false, // 是否展示我要离开按钮
  82. classColor: "grey",
  83. };
  84. let text: any = "";
  85. const store = useStore();
  86. const delTimeArr: any = [];
  87. let customSceneList: any = [];
  88. let workkArr: any = [];
  89. const proxyData = reactive({
  90. parseImgUrl: parseImgUrl,
  91. leaveBtnFlag: false,
  92. scenarioArr: props.scenarioArr,
  93. workkArr: props.workkArr,
  94. forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
  95. onSubmit(values: any) {
  96. router.push({ path: "/choice-project" });
  97. },
  98. // 触发加班按钮
  99. triggerWork() {
  100. contx.emit("triggerWork", 1);
  101. },
  102. timerText: timerText,
  103. text: text,
  104. // 处理时间和第二天和未来连续的问题
  105. formateTimeContinuous(
  106. index: any = 1,
  107. startTime: any,
  108. endTime: any,
  109. type: any = 1
  110. ) {
  111. let data: any = proxyData.workkArr;
  112. proxyData.text = "";
  113. return formateTimeContinuous(
  114. index,
  115. startTime,
  116. endTime,
  117. type,
  118. data,
  119. proxyData
  120. );
  121. },
  122. // 判断当前时间在不在加班时间里面
  123. beforeWorkTime(data: any, nowTime: any) {
  124. let flag: any = true; // 是否在所有加班时间之前
  125. for (let i = 0; i < data.length; i++) {
  126. if (data[i].startTime < nowTime) {
  127. flag = false;
  128. }
  129. }
  130. return flag;
  131. },
  132. // 当前时间是否在所有加班时间之后
  133. afterWorkTime(data: any, nowTime: any) {
  134. let flag: any = true; // 是否在所有加班时间之前
  135. for (let i = 0; i < data.length; i++) {
  136. if (data[i].endTime > nowTime) {
  137. flag = false;
  138. }
  139. }
  140. return flag;
  141. },
  142. // 查询时间段的范围
  143. checkWorkTime(data: any, nowTime: any) {
  144. let obj: any = {
  145. type: 0, // type=1 当前时间在所有加班时间之前 type=2 当前时间在所有加班时间后 type=3 当前时间在某段加班时间 type=4 当前时间在加班之外,在某一段中间
  146. startTime: 0,
  147. endTime: 0,
  148. };
  149. if (proxyData.beforeWorkTime(data, nowTime)) {
  150. obj.type = 1;
  151. } else if (proxyData.afterWorkTime(data, nowTime)) {
  152. obj.type = 2;
  153. } else {
  154. let flag = true;
  155. for (let i = 0; i < data.length; i++) {
  156. if (nowTime >= data[i].startTime && nowTime <= data[i].endTime) {
  157. obj.startTime = data[i].startTime;
  158. obj.endTime = data[i].endTime;
  159. obj.type = 3;
  160. flag = false;
  161. break;
  162. }
  163. }
  164. if (flag) {
  165. obj.type = 4;
  166. }
  167. }
  168. return obj;
  169. },
  170. // 格式化日期
  171. delTimeArr: delTimeArr,
  172. customSceneList: customSceneList, // 当前日期的加班
  173. formateWorkTime() {
  174. // debugger;
  175. let data: any = proxyData.workkArr;
  176. let nowDate: any = formatDate("YYYY-MM-DD");
  177. for (let i = 0; i < data.length; i++) {
  178. let date: any = formatDateStr(data[i].date);
  179. let cusStartTime: any = data[i].cusStartTime;
  180. let cusEndTime: any = data[i].cusEndTime;
  181. let customSceneList: any = data[i]?.customSceneList ?? [];
  182. let nowTime: any = getRelNowTime();
  183. let week: any = getWeekDate(new Date(date).getDay());
  184. if (date === nowDate) {
  185. // isActive = true;
  186. week = "今天";
  187. }
  188. // console.log("nowTime===" + nowTime);
  189. if (date === nowDate) {
  190. proxyData.customSceneList = customSceneList;
  191. // debugger
  192. // 1.当天没有服务定制时间和加班时间
  193. /**a.未来有服务定制和加班**/
  194. // 2.当天有服务定制时间无加班时间
  195. // 当天在服务定制之内+加班+和未来的时间连续
  196. // a.在服务定制之内
  197. // b.已过了服务定制和1相同处理
  198. // 3.当天有服务定制和加班时间
  199. // a.在服务定制之内,并和加班时间不连着
  200. // b.在服务定制之内,并和加班连续
  201. // c.在加班时间之内,并和后面加班时间连续
  202. // d.在加班时间之内,并且和后面加班不连续
  203. // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
  204. /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */
  205. let startTime: any = "";
  206. let endTime: any = "";
  207. if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
  208. // 查找最近的一段预约数据
  209. let btnObj: any = proxyData.formateTimeContinuous(
  210. 0,
  211. startTime,
  212. endTime,
  213. 2
  214. );
  215. if (btnObj && btnObj.text) {
  216. proxyData.timerText.text = `已预约(${btnObj.text})`;
  217. proxyData.timerText.timer =
  218. formatTimerStr(btnObj.startTime) +
  219. "~" +
  220. formatTimerStr(btnObj.endTime);
  221. } else {
  222. proxyData.timerText.text = "请选择工作时间段";
  223. proxyData.timerText.timer = "将自动开启办公服务";
  224. }
  225. proxyData.timerText.classColor = "grey";
  226. proxyData.timerText.btnText = "预约时间";
  227. proxyData.timerText.showDel = false;
  228. proxyData.forcedOverTimeFlag = true;
  229. } else if (cusStartTime && cusEndTime && !customSceneList.length) {
  230. if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
  231. proxyData.timerText.text = "工作时间";
  232. proxyData.timerText.timer =
  233. formatTimerStr(cusStartTime) +
  234. "~" +
  235. formatTimerStr(cusEndTime);
  236. proxyData.timerText.classColor = "yellow";
  237. proxyData.timerText.btnText = "预约延时";
  238. proxyData.timerText.showDel = false;
  239. proxyData.forcedOverTimeFlag = false;
  240. } else {
  241. let btnObj: any = proxyData.formateTimeContinuous(
  242. 0,
  243. startTime,
  244. endTime,
  245. 2
  246. );
  247. if (btnObj && btnObj.text) {
  248. proxyData.timerText.text = `已预约(${btnObj.text})`;
  249. proxyData.timerText.timer =
  250. formatTimerStr(btnObj.startTime) +
  251. "~" +
  252. formatTimerStr(btnObj.endTime);
  253. } else {
  254. proxyData.timerText.text = "请选择工作时间段";
  255. proxyData.timerText.timer = "将自动开启办公服务";
  256. }
  257. proxyData.timerText.classColor = "grey";
  258. proxyData.timerText.btnText = "预约时间";
  259. proxyData.timerText.showDel = false;
  260. proxyData.forcedOverTimeFlag = true;
  261. }
  262. } else {
  263. if (
  264. cusStartTime &&
  265. cusEndTime &&
  266. nowTime >= cusStartTime &&
  267. nowTime <= cusEndTime
  268. ) {
  269. // debugger
  270. startTime = cusStartTime;
  271. endTime = cusEndTime;
  272. customSceneList.map((item: any) => {
  273. if (endTime === item.startTime) {
  274. endTime = item.endTime;
  275. }
  276. });
  277. /**
  278. * 需要补加上和未来时间连续的问题
  279. */
  280. let btnObj: any = proxyData.formateTimeContinuous(
  281. 1,
  282. startTime,
  283. endTime,
  284. 1
  285. );
  286. proxyData.timerText.text = `工作时间`;
  287. proxyData.timerText.timer =
  288. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  289. if (btnObj && btnObj.text) {
  290. proxyData.timerText.text = `工作时间(今日~${btnObj.text})`;
  291. proxyData.timerText.timer =
  292. formatTimerStr(btnObj.startTime) +
  293. "~" +
  294. formatTimerStr(btnObj.endTime);
  295. }
  296. proxyData.timerText.classColor = "yellow";
  297. proxyData.timerText.btnText = "预约延时";
  298. proxyData.timerText.showDel = false;
  299. proxyData.forcedOverTimeFlag = false;
  300. } else {
  301. let obj: any = proxyData.checkWorkTime(
  302. customSceneList,
  303. nowTime
  304. );
  305. if (obj.type === 3) {
  306. startTime = obj.startTime;
  307. endTime = obj.endTime;
  308. customSceneList.map((item: any) => {
  309. let oldTimeStart: any = startTime;
  310. let oldTimeEnd: any = endTime;
  311. // debugger
  312. if (
  313. startTime === item.startTime &&
  314. endTime === item.endTime
  315. ) {
  316. // proxyData.delTimeArr.push(item);
  317. } // 点击我要离开的时候需要删除的数据
  318. if (oldTimeEnd === item.startTime) {
  319. endTime = item.endTime;
  320. // proxyData.delTimeArr.push(item);
  321. }
  322. });
  323. if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
  324. // 在服务定制时间之前的时候需要处理连续时间的问题
  325. if (endTime === cusStartTime) {
  326. endTime = cusEndTime;
  327. }
  328. customSceneList.map((item: any) => {
  329. if (endTime === item.startTime) {
  330. endTime = item.endTime;
  331. }
  332. });
  333. }
  334. /**
  335. * 需要补加上和未来时间连续的问题
  336. */
  337. let btnObj: any = proxyData.formateTimeContinuous(
  338. 1,
  339. startTime,
  340. endTime,
  341. 1
  342. );
  343. // debugger
  344. proxyData.timerText.text = `工作时间`;
  345. proxyData.timerText.timer =
  346. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  347. if (btnObj && btnObj.text) {
  348. proxyData.timerText.text = `工作时间~${btnObj.text}`;
  349. proxyData.timerText.timer =
  350. formatTimerStr(btnObj.startTime) +
  351. "~" +
  352. formatTimerStr(btnObj.endTime);
  353. }
  354. proxyData.timerText.classColor = "yellow";
  355. proxyData.timerText.btnText = "预约延时";
  356. proxyData.timerText.showDel = true;
  357. proxyData.forcedOverTimeFlag = false;
  358. } else {
  359. let btnObj: any = proxyData.formateTimeContinuous(
  360. 0,
  361. startTime,
  362. endTime,
  363. 2
  364. );
  365. if (
  366. btnObj &&
  367. btnObj.text &&
  368. btnObj.startTime &&
  369. btnObj.endTime
  370. ) {
  371. proxyData.timerText.text = `已预约(${btnObj.text})`;
  372. proxyData.timerText.timer =
  373. formatTimerStr(btnObj.startTime) +
  374. "~" +
  375. formatTimerStr(btnObj.endTime);
  376. } else {
  377. proxyData.timerText.text = "请选择工作时间段";
  378. proxyData.timerText.timer = "将自动开启办公服务";
  379. }
  380. proxyData.timerText.classColor = "grey";
  381. proxyData.timerText.btnText = "预约时间";
  382. proxyData.timerText.showDel = false;
  383. proxyData.forcedOverTimeFlag = true;
  384. }
  385. }
  386. }
  387. // debugger
  388. // 记录开灯标记
  389. contx.emit("setForceOverTimeFlag", proxyData.forcedOverTimeFlag);
  390. }
  391. }
  392. },
  393. // 时间拼接
  394. timeJoin(customSceneList: any, nowTime: any) {
  395. let startTime: any = 0;
  396. let endTime: any = 0;
  397. let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
  398. if (obj.type === 3) {
  399. startTime = obj.startTime;
  400. endTime = obj.endTime;
  401. customSceneList.map((item: any) => {
  402. let oldTimeStart: any = startTime;
  403. let oldTimeEnd: any = endTime;
  404. // debugger
  405. if (startTime === item.startTime && endTime === item.endTime) {
  406. // proxyData.delTimeArr.push(item);
  407. } // 点击我要离开的时候需要删除的数据
  408. if (oldTimeEnd === item.startTime) {
  409. endTime = item.endTime;
  410. // proxyData.delTimeArr.push(item);
  411. }
  412. });
  413. /**
  414. * 需要补加上和未来时间连续的问题
  415. */
  416. proxyData.timerText.text = "工作时间";
  417. proxyData.timerText.timer =
  418. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  419. proxyData.timerText.classColor = "yellow";
  420. proxyData.timerText.btnText = "预约延时";
  421. proxyData.timerText.showDel = true;
  422. proxyData.forcedOverTimeFlag = false;
  423. } else {
  424. customSceneList.map((item: any) => {
  425. if (nowTime < item.startTime) {
  426. let oldTimeStart: any = startTime;
  427. let oldTimeEnd: any = endTime;
  428. if (item.startTime < startTime) {
  429. startTime = item.startTime;
  430. endTime = item.endTime;
  431. } else if (endTime === item.startTime) {
  432. endTime = item.endTime;
  433. }
  434. }
  435. });
  436. /**
  437. *需要补加上和未来时间连续的问题
  438. */
  439. if (startTime && endTime) {
  440. proxyData.timerText.text = "已预约(今日)";
  441. proxyData.timerText.timer =
  442. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  443. proxyData.timerText.classColor = "grey";
  444. proxyData.timerText.btnText = "预约时间";
  445. proxyData.timerText.showDel = false;
  446. proxyData.forcedOverTimeFlag = true;
  447. } else {
  448. proxyData.timerText.text = "请选择工作时间段";
  449. proxyData.timerText.timer = "将自动开启办公服务";
  450. proxyData.timerText.classColor = "grey";
  451. proxyData.timerText.btnText = "预约时间";
  452. proxyData.timerText.showDel = false;
  453. proxyData.forcedOverTimeFlag = true;
  454. }
  455. }
  456. },
  457. // 格式化需要删除的数据
  458. formatDataDel() {
  459. proxyData.delTimeArr = [];
  460. let customSceneList: any = proxyData.customSceneList;
  461. let nowTime: any = getRelNowTime();
  462. let startTime: any = 0;
  463. let endTime: any = 0;
  464. let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
  465. if (obj.type === 3) {
  466. startTime = obj.startTime;
  467. endTime = obj.endTime;
  468. customSceneList.map((item: any) => {
  469. let oldTimeEnd: any = endTime;
  470. if (startTime === item.startTime && endTime === item.endTime) {
  471. item.type = 3; // 3=我要离开
  472. proxyData.delTimeArr.push(item);
  473. } // 点击我要离开的时候需要删除的数据
  474. if (oldTimeEnd === item.startTime) {
  475. endTime = item.endTime;
  476. item.type = 3;
  477. proxyData.delTimeArr.push(item);
  478. }
  479. });
  480. }
  481. },
  482. // 我要离开
  483. myLeaving() {
  484. // 格式化当前时间
  485. proxyData.formatDataDel();
  486. // 设置真实的离开时间
  487. proxyData.setLeavingTime(); // // 3=我要离开
  488. console.log("离开了=====");
  489. console.log(proxyData.delTimeArr);
  490. proxyData.leaveBtnFlag = true;
  491. // 取消加班
  492. proxyData.saveBatchCustomScene();
  493. },
  494. // 设置真实的离开时间
  495. setLeavingTime() {
  496. let nowTime: any = getRelNowTime();
  497. proxyData.delTimeArr.map((delTime: any) => {
  498. if (nowTime >= delTime.startTime && nowTime <= delTime.endTime) {
  499. delTime.endTimeReal = nowTime;
  500. // delTime.type = 3
  501. } else if (nowTime < delTime.startTime) {
  502. delTime.type = 1; // 时间还未开始直接取消加班记录
  503. } else if (nowTime > delTime.endTime) {
  504. delTime.endTimeReal = delTime.endTime;
  505. }
  506. });
  507. },
  508. // 取消加班记录
  509. saveBatchCustomScene() {
  510. // proxyGlobal.proxy.$loadingStart(0);
  511. proxyData.openLeavDailog();
  512. saveBatchCustomScene(proxyData.delTimeArr)
  513. .then((res) => {
  514. proxyData.leaveBtnFlag = false;
  515. contx.emit("closeWork");
  516. // console.log(res);
  517. // proxyGlobal.proxy.$loadinngEnd();
  518. })
  519. .catch(() => {
  520. proxyData.leaveBtnFlag = false;
  521. // proxyGlobal.proxy.$loadinngEnd();
  522. });
  523. },
  524. isShowLeaveDailog: false,
  525. openLeavDailog() {
  526. proxyData.isShowLeaveDailog = true;
  527. },
  528. closeLeavDailog() {
  529. proxyData.isShowLeaveDailog = false;
  530. },
  531. // 数组排序
  532. compare(obj1: any, obj2: any) {
  533. var val1 = obj1.startTime;
  534. var val2 = obj2.startTime;
  535. if (val1 < val2) {
  536. return -1;
  537. } else if (val1 > val2) {
  538. return 1;
  539. } else {
  540. return 0;
  541. }
  542. },
  543. // 手动控制加班处理时间段拼接的逻辑
  544. formateManualWorkTime() {
  545. // debugger
  546. let data: any = proxyData.workkArr;
  547. for (let i = 0; i < data.length; i++) {
  548. let item: any = data[i];
  549. let spaceCustomContentList: any =
  550. data[i].spaceCustomContentList || [];
  551. spaceCustomContentList = spaceCustomContentList.sort(
  552. proxyData.compare
  553. );
  554. item.spaceCustomContentList = spaceCustomContentList;
  555. let nowTime: any = getRelNowTime();
  556. let nowDate: any = formatDate("YYYY-MM-DD");
  557. let date: any = formatDateStr(data[i].date);
  558. item.cusStartTime = spaceCustomContentList[0]
  559. ? spaceCustomContentList[0].startTime
  560. : "";
  561. item.cusEndTime = spaceCustomContentList[0]
  562. ? spaceCustomContentList[0].endTime
  563. : "";
  564. if (nowDate == date) {
  565. // 当前时间
  566. item.cusStartTime = "";
  567. item.cusEndTime = "";
  568. }
  569. for (let j = 0; j < spaceCustomContentList.length; j++) {
  570. if (item.cusStartTime && item.cusEndTime) {
  571. if (item.cusEndTime + 1 === spaceCustomContentList[j].startTime) {
  572. item.cusEndTime = spaceCustomContentList[j].endTime;
  573. }
  574. } else {
  575. if (
  576. nowTime >= spaceCustomContentList[j].startTime &&
  577. nowTime <= spaceCustomContentList[j].endTime
  578. ) {
  579. item.cusStartTime = spaceCustomContentList[j].startTime;
  580. item.cusEndTime = spaceCustomContentList[j].endTime;
  581. }
  582. }
  583. }
  584. if (!item.cusStartTime) {
  585. item.cusStartTime = spaceCustomContentList[0]
  586. ? spaceCustomContentList[0].startTime
  587. : "";
  588. item.cusEndTime = spaceCustomContentList[0]
  589. ? spaceCustomContentList[0].endTime
  590. : "";
  591. }
  592. }
  593. },
  594. });
  595. watch(
  596. props,
  597. (newProps: any) => {
  598. proxyData.scenarioArr = newProps.scenarioArr;
  599. proxyData.workkArr = newProps.workkArr;
  600. if (proxyData.workkArr && proxyData.workkArr.length) {
  601. proxyData.formateManualWorkTime();
  602. proxyData.formateWorkTime();
  603. }
  604. },
  605. {
  606. deep: true,
  607. immediate: true,
  608. }
  609. );
  610. onMounted(() => {
  611. // proxyData.formateWorkTime();
  612. });
  613. return {
  614. ...toRefs(proxyData),
  615. };
  616. },
  617. });
  618. </script>
  619. <style lang="scss" scoped>
  620. @import "~@/styles/comMedia.scss";
  621. .scene-config {
  622. display: flex;
  623. flex-wrap: wrap;
  624. justify-content: space-between;
  625. padding: 15px;
  626. width: 100%;
  627. height: 100%;
  628. background: #ffffff;
  629. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  630. border-radius: 25px;
  631. .grey {
  632. background: rgba(159, 183, 205, 0.15) !important;
  633. }
  634. .yellow {
  635. background: rgba(206, 159, 39, 0.4);
  636. }
  637. .time-box {
  638. position: relative;
  639. // width: 69%;
  640. flex: 2.4;
  641. height: 100%;
  642. line-height: 70px;
  643. background: rgba(206, 159, 39, 0.4);
  644. // opacity: 0.4;
  645. border-radius: 16px;
  646. img {
  647. display: inline-block;
  648. vertical-align: middle;
  649. width: 20px;
  650. height: 20px;
  651. margin-left: 10px;
  652. }
  653. .time-text {
  654. display: inline-block;
  655. vertical-align: middle;
  656. padding-left: 10px;
  657. span {
  658. display: block;
  659. &:nth-child(1) {
  660. font-family: "Montserrat";
  661. font-style: normal;
  662. font-weight: 500;
  663. font-size: 12px;
  664. line-height: 20px;
  665. color: #4d5262;
  666. }
  667. &:nth-child(2) {
  668. font-family: "Montserrat";
  669. padding-top: 5px;
  670. font-style: normal;
  671. font-weight: 500;
  672. font-size: 15px;
  673. line-height: 20px;
  674. color: #1f2429;
  675. }
  676. }
  677. }
  678. .time-btn {
  679. position: absolute;
  680. // padding-top: 9px;
  681. right: 4px;
  682. top: 50%;
  683. transform: translateY(-50%);
  684. display: inline-block;
  685. width: 98px;
  686. // width: 64px;
  687. height: 58px;
  688. line-height: 20px;
  689. background: #ffffff;
  690. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  691. 0px 4px 10px rgba(0, 0, 0, 0.07);
  692. border-radius: 12px;
  693. span {
  694. position: absolute;
  695. padding: 0 4px;
  696. width: 100%;
  697. top: 50%;
  698. transform: translateY(-50%);
  699. display: block;
  700. font-size: 13px;
  701. // line-height: 16px;
  702. text-align: center;
  703. color: #000000;
  704. }
  705. }
  706. .time-btn-small {
  707. width: 45px;
  708. }
  709. }
  710. .time-del {
  711. // width: 27%;
  712. padding-top: 14px;
  713. flex: 1;
  714. margin-left: 10px;
  715. background: #f1f4f8;
  716. border-radius: 16px;
  717. text-align: center;
  718. img {
  719. display: inline-block;
  720. vertical-align: middle;
  721. width: 20px;
  722. height: 20px;
  723. // margin-left: 10px;
  724. }
  725. .del-text {
  726. display: inline-block;
  727. vertical-align: middle;
  728. padding-left: 10px;
  729. // padding-top: 9px;
  730. span {
  731. display: block;
  732. font-size: 13px;
  733. line-height: 20px;
  734. text-align: center;
  735. color: #000000;
  736. }
  737. }
  738. }
  739. }
  740. </style>
  741. <style lang="scss">
  742. </style>