anytrek-front-public-component 1.0.2 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/auto-imports.d.ts +10 -0
- package/components.d.ts +13 -0
- package/index.html +1 -1
- package/package.json +7 -5
- package/src/App.vue +38 -6
- package/src/assets/Inter/Inter-Black.ttf +0 -0
- package/src/assets/Inter/Inter-Bold.ttf +0 -0
- package/src/assets/Inter/Inter-Light.ttf +0 -0
- package/src/assets/Inter/Inter-Medium.ttf +0 -0
- package/src/assets/Inter/Inter-Regular.ttf +0 -0
- package/src/assets/css/main.scss +136 -0
- package/src/component/anytrekTimePick/anytrekTimePickTime.vue +280 -0
- package/src/component/anytrekTimerangePick/anytrekTimerangePickBody.vue +711 -0
- package/src/component/anytrekTimerangePick/anytrekTimerangePickTime.vue +377 -0
- package/src/component/anytrekTimerangePick/timeSelect.vue +231 -0
- package/src/icons/svg/arrow-icon.svg +3 -0
- package/src/icons/svg/cancel-icon.svg +3 -0
- package/src/icons/svg/check-icon.svg +3 -0
- package/src/icons/svg/confirm-icon.svg +3 -0
- package/src/icons/svg/date-icon.svg +3 -0
- package/src/icons/svg-icon.vue +41 -0
- package/src/main.ts +3 -1
- package/src/plugin/component/anytrekTimePick.vue +557 -0
- package/src/plugin/component/anytrekTimerangePick.vue +518 -0
- package/src/plugin/index.ts +4 -3
- package/src/utils/common.ts +57 -0
- package/tsconfig.app.json +1 -1
- package/tsconfig.json +1 -1
- package/vite.config.ts +23 -1
- package/vue.d.ts +10 -0
- package/src/assets/vue.svg +0 -1
- package/src/plugin/component/anytrekTimepick.vue +0 -17
package/components.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
// Generated by unplugin-vue-components
|
|
4
|
+
// Read more: https://github.com/vuejs/core/pull/3399
|
|
5
|
+
export {}
|
|
6
|
+
|
|
7
|
+
/* prettier-ignore */
|
|
8
|
+
declare module 'vue' {
|
|
9
|
+
export interface GlobalComponents {
|
|
10
|
+
ElPopover: typeof import('element-plus/es')['ElPopover']
|
|
11
|
+
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
|
12
|
+
}
|
|
13
|
+
}
|
package/index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" href="
|
|
5
|
+
<link rel="icon" href="./favicon.ico">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>AnyFleet | Anytrek Management System</title>
|
|
8
8
|
</head>
|
package/package.json
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "anytrek-front-public-component",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "some common component",
|
|
5
5
|
"main": "src/plugin/index.ts",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"dev": "vite"
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"preview": "vite preview"
|
|
7
|
+
"dev": "vite"
|
|
10
8
|
},
|
|
11
9
|
"author": "xbin_liao@anytrek.cn",
|
|
12
10
|
"keywords": [
|
|
@@ -16,13 +14,17 @@
|
|
|
16
14
|
],
|
|
17
15
|
"license": "ISC",
|
|
18
16
|
"dependencies": {
|
|
17
|
+
"dayjs": "^1.11.13",
|
|
18
|
+
"element-plus": "^2.8.6",
|
|
19
19
|
"vue": "^3.5.12"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@vitejs/plugin-vue": "^5.1.4",
|
|
23
23
|
"sass": "^1.80.4",
|
|
24
24
|
"typescript": "~5.6.2",
|
|
25
|
+
"unplugin-auto-import": "^0.18.3",
|
|
26
|
+
"unplugin-vue-components": "^0.27.4",
|
|
25
27
|
"vite": "^5.4.9",
|
|
26
|
-
"
|
|
28
|
+
"vite-plugin-svg-icons": "^2.0.1"
|
|
27
29
|
}
|
|
28
30
|
}
|
package/src/App.vue
CHANGED
|
@@ -1,14 +1,46 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import anytrekTimepick from './plugin/component/anytrekTimepick.vue';
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
1
|
<template>
|
|
6
|
-
<
|
|
2
|
+
<h1>组件一：anytrekTimerangePick</h1>
|
|
3
|
+
<anytrekTimerangePick
|
|
4
|
+
v-model:visible="anytrekTimerangePickVisible"
|
|
5
|
+
v-model:value="anytrekTimerangePickValue"
|
|
6
|
+
v-model:valueType="anytrekTimerangePickValueType"
|
|
7
|
+
v-model:startTime="anytrekTimerangePickStartTime"
|
|
8
|
+
v-model:endTime="anytrekTimerangePickEndTime"
|
|
9
|
+
v-model:timeZone="timeZone"
|
|
10
|
+
:showQuick="true"
|
|
11
|
+
:immediate="true"
|
|
12
|
+
/>
|
|
13
|
+
<h1>组件二：anytrekTimePick</h1>
|
|
14
|
+
<anytrekTimePick
|
|
15
|
+
v-model:value="anytrekTimePickValue"
|
|
16
|
+
v-model:timeZone="anytrekTimePickTimeZone"
|
|
17
|
+
v-model:visible="anytrekTimePickVisible"
|
|
18
|
+
:immediate="true"
|
|
19
|
+
/>
|
|
7
20
|
</template>
|
|
21
|
+
<script setup lang="ts">
|
|
22
|
+
import { ref, watch } from 'vue';
|
|
23
|
+
import anytrekTimerangePick from './plugin/component/anytrekTimerangePick.vue';
|
|
24
|
+
import anytrekTimePick from './plugin/component/anytrekTimepick.vue';
|
|
25
|
+
const anytrekTimerangePickVisible = ref<boolean>(false);
|
|
26
|
+
const anytrekTimerangePickValue = ref<'custom' | '' | number>('custom');
|
|
27
|
+
const anytrekTimerangePickValueType = ref<string>('week');
|
|
28
|
+
const anytrekTimerangePickStartTime = ref<string>('');
|
|
29
|
+
const anytrekTimerangePickEndTime = ref<string>('');
|
|
30
|
+
const timeZone = ref<string>('');
|
|
8
31
|
|
|
9
|
-
|
|
32
|
+
const anytrekTimePickValue = ref<string>('2018-01-31T14:32:19.213Z');
|
|
33
|
+
const anytrekTimePickTimeZone = ref<string>('');
|
|
34
|
+
const anytrekTimePickVisible = ref<boolean>(false);
|
|
35
|
+
</script>
|
|
36
|
+
<style lang="scss">
|
|
10
37
|
body {
|
|
11
38
|
margin: 0;
|
|
12
39
|
padding: 0;
|
|
40
|
+
padding-left: 16px;
|
|
41
|
+
}
|
|
42
|
+
h1 {
|
|
43
|
+
margin-top: 0;
|
|
44
|
+
margin-bottom: 20px;
|
|
13
45
|
}
|
|
14
46
|
</style>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
html, body {
|
|
2
|
+
height: 100%;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
font-size: 14px;
|
|
6
|
+
font-family: Inter;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: "Inter";
|
|
11
|
+
font-weight: 900;
|
|
12
|
+
src: url("../Inter/Inter-Black.ttf") format("truetype");
|
|
13
|
+
}
|
|
14
|
+
@font-face {
|
|
15
|
+
font-family: "Inter";
|
|
16
|
+
font-weight: 800;
|
|
17
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
18
|
+
}
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: "Inter";
|
|
21
|
+
font-weight: 700;
|
|
22
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
23
|
+
}
|
|
24
|
+
@font-face {
|
|
25
|
+
font-family: "Inter";
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
28
|
+
}
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: "Inter";
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
src: url("../Inter/Inter-Medium.ttf") format("truetype");
|
|
33
|
+
}
|
|
34
|
+
@font-face {
|
|
35
|
+
font-family: "Inter";
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
src: url("../Inter/Inter-Regular.ttf") format("truetype");
|
|
38
|
+
}
|
|
39
|
+
@font-face {
|
|
40
|
+
font-family: "Inter";
|
|
41
|
+
font-weight: 300;
|
|
42
|
+
src: url("../Inter/Inter-Light.ttf") format("truetype");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
* {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
p {
|
|
50
|
+
margin: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
input:-internal-autofill-selected {
|
|
54
|
+
transition: background-color 5000s ease-in-out 0s;
|
|
55
|
+
background-color: transparent !important;
|
|
56
|
+
}
|
|
57
|
+
:focus-visible {
|
|
58
|
+
outline: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* 滚动条样式 */
|
|
62
|
+
::-webkit-scrollbar {
|
|
63
|
+
width: 6px;
|
|
64
|
+
height: 6px;
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
}
|
|
67
|
+
::-webkit-scrollbar-track {
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
}
|
|
71
|
+
::-webkit-scrollbar-thumb {
|
|
72
|
+
border-radius: 4px;
|
|
73
|
+
background-color: rgba(144, 147, 153, 0.3);
|
|
74
|
+
}
|
|
75
|
+
::-webkit-scrollbar-thumb:hover {
|
|
76
|
+
background-color: rgba(144, 147, 153, 0.5);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.el-popper.anytrek-timerange-popper {
|
|
80
|
+
--el-popover-border-color: rgba(223, 223, 223, 1);
|
|
81
|
+
--el-box-shadow-light: 0px 4px 15.1px 0px rgba(0, 0, 0, 0.15);
|
|
82
|
+
--el-popover-border-radius: 10px;
|
|
83
|
+
--el-popover-padding: 24px;
|
|
84
|
+
--el-popover-font-size: 16px;
|
|
85
|
+
line-height: 18px;
|
|
86
|
+
--el-text-color-regular: #000;
|
|
87
|
+
|
|
88
|
+
}
|
|
89
|
+
.el-popper.choose-item-popper {
|
|
90
|
+
--el-popover-padding: 10px;
|
|
91
|
+
min-width: unset;
|
|
92
|
+
}
|
|
93
|
+
.el-popper.choose-timeselect-popper {
|
|
94
|
+
padding-top: 0;
|
|
95
|
+
padding-bottom: 0;
|
|
96
|
+
}
|
|
97
|
+
.popper-choose-list {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
}
|
|
101
|
+
.popper-choose-list-one {
|
|
102
|
+
height: 40px;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
width: 100%;
|
|
106
|
+
padding-left: 12px;
|
|
107
|
+
gap: 8px;
|
|
108
|
+
font-size: 14px;
|
|
109
|
+
font-weight: 400;
|
|
110
|
+
line-height: 16px;
|
|
111
|
+
color: #000;
|
|
112
|
+
border-radius: 6px;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
&:hover {
|
|
115
|
+
background-color: rgba(0, 0, 0, 0.04);
|
|
116
|
+
}
|
|
117
|
+
& > span {
|
|
118
|
+
max-width: 45px;
|
|
119
|
+
}
|
|
120
|
+
& > .check-icon {
|
|
121
|
+
opacity: 0;
|
|
122
|
+
user-select: none;
|
|
123
|
+
pointer-events: none;
|
|
124
|
+
}
|
|
125
|
+
&.active {
|
|
126
|
+
& > .check-icon {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.over-ellipsis {
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
}
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="anytrekTimerangePickTime">
|
|
3
|
+
<div class="anytrekTimerangePickTime-date">
|
|
4
|
+
<div class="anytrekTimerangePickTime-date-year-choose">
|
|
5
|
+
<SvgIcon name="arrow-icon" @click="preYear"></SvgIcon>
|
|
6
|
+
<span>{{ showYear }}</span>
|
|
7
|
+
<SvgIcon name="arrow-icon" @click="nextYear"></SvgIcon>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="anytrekTimerangePickTime-date-year-choose">
|
|
10
|
+
<SvgIcon name="arrow-icon" @click="preMonth"></SvgIcon>
|
|
11
|
+
<span>{{ monthList[showMonth - 1] }}</span>
|
|
12
|
+
<SvgIcon name="arrow-icon" @click="nextMonth"></SvgIcon>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="anytrekTimerangePickTime-date-day-word">
|
|
16
|
+
<span v-for="(i, index) in weekList" :key="i" :class="{ active: getWeekActive(index) }">{{ i }}</span>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="anytrekTimerangePickTime-date-day-pcik">
|
|
19
|
+
<div
|
|
20
|
+
v-for="(i, index) in dayList"
|
|
21
|
+
:key="index + 0.1"
|
|
22
|
+
:class="{ notNow: !i.isCurrentMonth }"
|
|
23
|
+
@click="handleClick(i)"
|
|
24
|
+
>
|
|
25
|
+
<span :class="getDayClass(i)">{{ i.date }}</span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
<script lang="ts" setup>
|
|
31
|
+
import 'virtual:svg-icons-register';
|
|
32
|
+
import SvgIcon from '../../icons/svg-icon.vue';
|
|
33
|
+
import dayjs from 'dayjs';
|
|
34
|
+
import utc from 'dayjs/plugin/utc';
|
|
35
|
+
import timezone from 'dayjs/plugin/timezone';
|
|
36
|
+
dayjs.extend(utc);
|
|
37
|
+
dayjs.extend(timezone);
|
|
38
|
+
import { computed } from 'vue';
|
|
39
|
+
|
|
40
|
+
const props = defineProps({
|
|
41
|
+
showYear: {
|
|
42
|
+
type: Number,
|
|
43
|
+
default: 2024,
|
|
44
|
+
},
|
|
45
|
+
showMonth: {
|
|
46
|
+
type: Number,
|
|
47
|
+
default: 12,
|
|
48
|
+
},
|
|
49
|
+
chooseDay: {
|
|
50
|
+
type: String,
|
|
51
|
+
default: '',
|
|
52
|
+
},
|
|
53
|
+
disableFuntion: {
|
|
54
|
+
type: Function,
|
|
55
|
+
},
|
|
56
|
+
timeZone: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: '',
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
const emit = defineEmits([
|
|
62
|
+
'changeMonth',
|
|
63
|
+
'update:chooseDay',
|
|
64
|
+
]);
|
|
65
|
+
|
|
66
|
+
const weekList = [
|
|
67
|
+
'Sun',
|
|
68
|
+
'Mon',
|
|
69
|
+
'Tue',
|
|
70
|
+
'Wed',
|
|
71
|
+
'Thu',
|
|
72
|
+
'Fri',
|
|
73
|
+
'Sat',
|
|
74
|
+
];
|
|
75
|
+
|
|
76
|
+
function getWeekActive(index: number) {
|
|
77
|
+
const tableString = dayjs().set('year', props.showYear).set('month', props.showMonth - 1).set('date', 12).format('YYYY-MM');
|
|
78
|
+
if (props.chooseDay) {
|
|
79
|
+
const chooseDayOne = dayjs(props.chooseDay, 'YYYY-MM-DD');
|
|
80
|
+
if (chooseDayOne.format('YYYY-MM') === tableString && chooseDayOne.day() === index) {
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
return false;
|
|
84
|
+
}
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const monthList = [
|
|
89
|
+
'Jan',
|
|
90
|
+
'Feb',
|
|
91
|
+
'Mar',
|
|
92
|
+
'Apr',
|
|
93
|
+
'May',
|
|
94
|
+
'Jun',
|
|
95
|
+
'Jul',
|
|
96
|
+
'Aug',
|
|
97
|
+
'Sep',
|
|
98
|
+
'Oct',
|
|
99
|
+
'Nov',
|
|
100
|
+
'Dec',
|
|
101
|
+
];
|
|
102
|
+
|
|
103
|
+
// 日历的日期列表（42天6行）
|
|
104
|
+
const dayList = computed(() => {
|
|
105
|
+
const nowMonth = dayjs().set('year', props.showYear).set('month', props.showMonth - 1).set('date', 15).set('hour', 12);
|
|
106
|
+
// 获取当月第一天是周几
|
|
107
|
+
const firstDay = nowMonth.startOf('month').day();
|
|
108
|
+
// 获取当月最后一天是周几
|
|
109
|
+
const lastDay = nowMonth.endOf('month').day();
|
|
110
|
+
// 获取当月最后一天是几号
|
|
111
|
+
const lastDate = +nowMonth.endOf('month').format('DD');
|
|
112
|
+
// 获取上个月最后一天是几号
|
|
113
|
+
const lastDateOfLastMonth = +nowMonth.subtract(1, 'month').endOf('month').format('DD');
|
|
114
|
+
// 获取上个月最后一天是周几
|
|
115
|
+
const lastDayOfLastMonth = nowMonth.subtract(1, 'month').endOf('month').day();
|
|
116
|
+
// 根据上面的信息生成一个42天的数组
|
|
117
|
+
const dayList = [];
|
|
118
|
+
// 上个月的日期
|
|
119
|
+
for (let i = 0; i < firstDay; i++) {
|
|
120
|
+
dayList.push({
|
|
121
|
+
date: lastDateOfLastMonth - lastDayOfLastMonth + i,
|
|
122
|
+
isCurrentMonth: false,
|
|
123
|
+
year: props.showYear,
|
|
124
|
+
month: props.showMonth - 1,
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
// 当月的日期
|
|
128
|
+
for (let i = 0; i < lastDate; i++) {
|
|
129
|
+
dayList.push({
|
|
130
|
+
date: i + 1,
|
|
131
|
+
isCurrentMonth: true,
|
|
132
|
+
year: props.showYear,
|
|
133
|
+
month: props.showMonth,
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
if (dayList.length % 7 !== 0) {
|
|
137
|
+
// 下个月的日期
|
|
138
|
+
for (let i = 0; i < 6 - lastDay; i++) {
|
|
139
|
+
dayList.push({
|
|
140
|
+
date: i + 1,
|
|
141
|
+
isCurrentMonth: false,
|
|
142
|
+
year: props.showYear,
|
|
143
|
+
month: props.showMonth + 1,
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
return dayList;
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const getDayClass = computed(() => {
|
|
151
|
+
return (i: any) => {
|
|
152
|
+
const f = dayjs().set('year', props.showYear).set('month', props.showMonth - 1).set('date', i.date).set('hour', 12).format('YYYY-MM-DD');
|
|
153
|
+
const txt: any = {};
|
|
154
|
+
if (props.disableFuntion) {
|
|
155
|
+
if (props.disableFuntion(f, props.timeZone)) {
|
|
156
|
+
txt.disable = true;
|
|
157
|
+
return txt;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
if (!i.isCurrentMonth) {
|
|
161
|
+
return txt;
|
|
162
|
+
}
|
|
163
|
+
if (props.chooseDay) {
|
|
164
|
+
if (props.chooseDay === f) {
|
|
165
|
+
txt.inDay = true;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
return txt;
|
|
169
|
+
};
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
function preMonth() {
|
|
173
|
+
emit('changeMonth', 'month', 'pre');
|
|
174
|
+
}
|
|
175
|
+
function nextMonth() {
|
|
176
|
+
emit('changeMonth', 'month', 'next');
|
|
177
|
+
}
|
|
178
|
+
function preYear() {
|
|
179
|
+
emit('changeMonth', 'year', 'pre');
|
|
180
|
+
}
|
|
181
|
+
function nextYear() {
|
|
182
|
+
emit('changeMonth', 'year', 'next');
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// 点击日期
|
|
186
|
+
function handleClick(i: any) {
|
|
187
|
+
if (getDayClass.value(i).disable) {
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
const f = dayjs().set('year', props.showYear).set('month', props.showMonth - 1).set('date', i.date).set('hour', 12).format('YYYY-MM-DD');
|
|
191
|
+
emit('update:chooseDay', f);
|
|
192
|
+
};
|
|
193
|
+
</script>
|
|
194
|
+
<style lang="scss" scoped>
|
|
195
|
+
.anytrekTimerangePickTime-date {
|
|
196
|
+
display: flex;
|
|
197
|
+
height: 32px;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: space-between;
|
|
200
|
+
padding: 0 24px;
|
|
201
|
+
}
|
|
202
|
+
.anytrekTimerangePickTime-date-year-choose {
|
|
203
|
+
display: flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
gap: 8px;
|
|
206
|
+
font-size: 18px;
|
|
207
|
+
font-weight: 400;
|
|
208
|
+
line-height: 24px;
|
|
209
|
+
color: #000;
|
|
210
|
+
& > span {
|
|
211
|
+
user-select: none;
|
|
212
|
+
}
|
|
213
|
+
.svg-icon {
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
&:hover {
|
|
216
|
+
background-color: rgba(0, 0, 0, 0.04);
|
|
217
|
+
border-radius: 4px;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
& > .svg-icon:nth-of-type(2) {
|
|
221
|
+
transform: rotate(180deg);
|
|
222
|
+
transform-origin: center;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
.anytrekTimerangePickTime-date-day-word {
|
|
226
|
+
margin-top: 16px;
|
|
227
|
+
display: flex;
|
|
228
|
+
gap: 8px;
|
|
229
|
+
padding-bottom: 16px;
|
|
230
|
+
border-bottom: 1px solid rgba(223, 223, 223, 1);
|
|
231
|
+
span {
|
|
232
|
+
display: block;
|
|
233
|
+
height: 40px;
|
|
234
|
+
width: 40px;
|
|
235
|
+
text-align: center;
|
|
236
|
+
line-height: 40px;
|
|
237
|
+
font-size: 16px;
|
|
238
|
+
color: rgba(154, 154, 154, 1);
|
|
239
|
+
user-select: none;
|
|
240
|
+
&.active {
|
|
241
|
+
color: #000;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
.anytrekTimerangePickTime-date-day-pcik {
|
|
246
|
+
margin-top: 16px;
|
|
247
|
+
display: flex;
|
|
248
|
+
flex-wrap: wrap;
|
|
249
|
+
gap: 8px;
|
|
250
|
+
.notNow {
|
|
251
|
+
opacity: 0;
|
|
252
|
+
pointer-events: none;
|
|
253
|
+
user-select: none;
|
|
254
|
+
}
|
|
255
|
+
span {
|
|
256
|
+
display: block;
|
|
257
|
+
height: 40px;
|
|
258
|
+
width: 40px;
|
|
259
|
+
text-align: center;
|
|
260
|
+
line-height: 40px;
|
|
261
|
+
font-size: 16px;
|
|
262
|
+
color: #000;
|
|
263
|
+
user-select: none;
|
|
264
|
+
cursor: pointer;
|
|
265
|
+
border-radius: 6px;
|
|
266
|
+
&.inDay {
|
|
267
|
+
background-color: rgba(11, 165, 236, 1);
|
|
268
|
+
color: #fff;
|
|
269
|
+
}
|
|
270
|
+
&:not(.disable):hover {
|
|
271
|
+
background-color: rgba(11, 165, 236, 1);
|
|
272
|
+
color: #fff;
|
|
273
|
+
}
|
|
274
|
+
&.disable {
|
|
275
|
+
color: rgba(154, 154, 154, 1);
|
|
276
|
+
cursor: not-allowed;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
</style>
|