http://www.manongjc.com/detail/41-ybkhpesrpqiftqs.html
https://www.cnblogs.com/dubhlinn/p/10740838.html
《template>
《div class=“v3c”>
《ul class=“v3c-tab”>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 1 }”
@click=“onHandleTab(1)”
>
秒
《/li>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 2 }”
@click=“onHandleTab(2)”
>
分
《/li>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 3 }”
@click=“onHandleTab(3)”
>
时
《/li>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 4 }”
@click=“onHandleTab(4)”
>
天
《/li>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 5 }”
@click=“onHandleTab(5)”
>
月
《/li>
《li
class=“v3c-tab-item”
:class=“{ ‘v3c-active’: tabActive == 6 }”
@click=“onHandleTab(6)”
>
年
《/li>
《/ul>
《!-- 秒 -->
《div class=“v3c-content” v-show=“tabActive == 1”>
《!-- 每一秒 -->
《div>
《el-radio label=“1” v-model=“state.second.cronEvery”>每一秒钟《/el-radio>
《/div>
《!-- 每隔多久 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.second.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.second.incrementIncrement”
:min=“1”
:max=“60”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>秒执行, 从《/span>
《el-input-number
v-model=“state.second.incrementStart”
:min=“0”
:max=“59”
controls-position=“right”
/>
《span>秒开始《/span>
《/div>
《!-- 具体秒数 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.second.cronEvery”>具体秒数(可多选)《/el-radio>
《el-select
v-model=“state.second.specificSpecific”
multiple
clearable
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 60”
:key=“index”
:label=“index”
:value=“index”
/>
《/el-select>
《/div>
《!-- 周期从 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.second.cronEvery”>周期从《/el-radio>
《el-input-number
v-model=“state.second.rangeStart”
:min=“0”
:max=“59”
controls-position=“right”
/>
《sapn>秒《/sapn>《span class=“ml-10 mr-5”>到《/span>
《el-input-number
v-model=“state.second.rangeEnd”
:min=“0”
:max=“59”
controls-position=“right”
/>
《sapn>秒《/sapn>
《/div>
《/div>
《!-- 分钟 -->
《div class=“v3c-content” v-show=“tabActive == 2”>
《!-- 每一分钟 -->
《div>
《el-radio label=“1” v-model=“state.minute.cronEvery”>每一分钟《/el-radio>
《/div>
《!-- 每隔多久 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.minute.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.minute.incrementIncrement”
:min=“1”
:max=“60”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>分执行,从《/span>
《el-input-number
v-model=“state.minute.incrementStart”
:min=“0”
:max=“59”
controls-position=“right”
/>
《span>分开始《/span>
《/div>
《!-- 具体分钟数 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.minute.cronEvery”>具体分钟数(可多选)《/el-radio>
《el-select
v-model=“state.minute.specificSpecific”
multiple
clearable
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 60”
:key=“index”
:label=“index”
:value=“index”
/>
《/el-select>
《/div>
《!-- 周期从 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.minute.cronEvery”>周期从《/el-radio>
《el-input-number
v-model=“state.minute.rangeStart”
:min=“0”
:max=“59”
controls-position=“right”
/>
《span>分《/span>《span class=“ml-10 mr-5”>到《/span>
《el-input-number
v-model=“state.minute.rangeEnd”
:min=“0”
:max=“59”
controls-position=“right”
/>
《span>分《/span>
《/div>
《/div>
《!-- 小时 -->
《div class=“v3c-content” v-show=“tabActive == 3”>
《!-- 每一小时 -->
《div>
《el-radio label=“1” v-model=“state.hour.cronEvery”>每一小时《/el-radio>
《/div>
《!-- 每隔多久 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.hour.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.hour.incrementIncrement”
:min=“1”
:max=“24”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>小时执行,从《/span>
《el-input-number
v-model=“state.hour.incrementStart”
:min=“0”
:max=“23”
controls-position=“right”
/>
《span>小时开始《/span>
《/div>
《!-- 具体小时数 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.hour.cronEvery”>具体小时数(可多选)《/el-radio>
《el-select
v-model=“state.hour.specificSpecific”
multiple
clearable
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 24”
:key=“index”
:label=“index”
:value=“index”
/>
《/el-select>
《/div>
《!-- 周期从 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.hour.cronEvery”>周期从《/el-radio>
《el-input-number
v-model=“state.hour.rangeStart”
:min=“0”
:max=“23”
controls-position=“right”
/>
《span>时《/span>《span class=“ml-10 mr-5”>到《/span>
《el-input-number
v-model=“state.hour.rangeEnd”
:min=“0”
:max=“23”
controls-position=“right”
/>
《span>时《/span>
《/div>
《/div>
《!-- 天 -->
《div class=“v3c-content” v-show=“tabActive == 4”>
《!-- 1 -->
《div>
《el-radio label=“1” v-model=“state.day.cronEvery”>每一天《/el-radio>
《/div>
《!-- 2 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.day.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.week.incrementIncrement”
:min=“1”
:max=“60”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>周执行,从《/span>
《el-input-number
v-model=“state.week.incrementStart”
:min=“1”
:max=“52”
controls-position=“right”
/>
《span>周开始《/span>
《/div>
《!-- 3 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.day.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.day.incrementIncrement”
:min=“1”
:max=“30”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>天执行,从《/span>
《el-input-number
v-model=“state.day.incrementStart”
:min=“1”
:max=“30”
controls-position=“right”
/>
《span>天开始《/span>
《/div>
《!-- 4 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.day.cronEvery”>具体星期几(可多选)《/el-radio>
《el-select
v-model=“state.week.specificSpecific”
multiple
clearable
style=“width: 140px”
>
《el-option
v-for=“(item, index) in weekList”
:key=“index”
:label=“item.name”
:value=“item.value”
/>
《/el-select>
《/div>
《!-- 5 -->
《div class=“mt-15”>
《el-radio label=“5” v-model=“state.day.cronEvery”>具体天数(可多选)《/el-radio>
《el-select
v-model=“state.day.specificSpecific”
multiple
clearable
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 31”
:key=“index”
:label=“item”
:value=“item”
/>
《/el-select>
《/div>
《/div>
《!-- 月 -->
《div class=“v3c-content” v-show=“tabActive == 5”>
《!-- 1 -->
《div>
《el-radio label=“1” v-model=“state.month.cronEvery”>每一月《/el-radio>
《/div>
《!-- 2 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.month.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.month.incrementIncrement”
:min=“1”
:max=“12”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>月执行,从《/span>
《el-input-number
v-model=“state.month.incrementStart”
:min=“1”
:max=“12”
controls-position=“right”
/>
《span>月开始《/span>
《/div>
《!-- 3 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.month.cronEvery”>具体月数(可多选)《/el-radio>
《el-select
multiple
clearable
v-model=“state.month.specificSpecific”
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 12”
:key=“index”
:label=“item”
:value=“item”
/>
《/el-select>
《/div>
《!-- 4 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.month.cronEvery”>周期从《/el-radio>
《el-input-number
v-model=“state.month.rangeStart”
:min=“1”
:max=“12”
controls-position=“right”
/>
《span>月《/span>《span class=“ml-10 mr-5”>到《/span>
《el-input-number
v-model=“state.month.rangeEnd”
:min=“1”
:max=“12”
controls-position=“right”
/>
《span>月《/span>
《/div>
《/div>
《!-- 年 -->
《div class=“v3c-content” v-show=“tabActive == 6”>
《!-- 1 -->
《div>
《el-radio label=“1” v-model=“state.year.cronEvery”>每一年《/el-radio>
《/div>
《!-- 2 -->
《div class=“mt-15”>
《el-radio label=“2” v-model=“state.year.cronEvery”>每隔《/el-radio>
《el-input-number
v-model=“state.year.incrementIncrement”
:min=“1”
:max=“99”
controls-position=“right”
/>
《span class=“ml-5 mr-5”>年执行,从《/span>
《el-input-number
v-model=“state.year.incrementStart”
:min=“currYear”
:max=“currYear + 10”
controls-position=“right”
style=“width: 100px”
/>
《span>年开始《/span>
《/div>
《!-- 3 -->
《div class=“mt-15”>
《el-radio label=“3” v-model=“state.year.cronEvery”>具体年份(可多选)《/el-radio>
《el-select
multiple
clearable
v-model=“state.year.specificSpecific”
style=“width: 140px”
>
《el-option
v-for=“(item, index) in 100”
:key=“index”
:label=“currYear + item”
:value=“currYear + item”
/>
《/el-select>
《/div>
《!-- 4 -->
《div class=“mt-15”>
《el-radio label=“4” v-model=“state.year.cronEvery”>周期从《/el-radio>
《el-input-number
v-model=“state.year.rangeStart”
:min=“currYear”
:max=“currYear + 10”
controls-position=“right”
style=“width: 100px”
/>
《span>年《/span>《span class=“ml-10 mr-5”>到《/span>
《el-input-number
v-model=“state.year.rangeEnd”
:min=“currYear”
:max=“currYear + 10”
controls-position=“right”
style=“width: 100px”
/>
《span>年《/span>
《/div>
《/div>
《/div>
《/template>
《script>
import { reactive, computed, toRefs, defineComponent, ref, watch, onMounted } from “vue”;
// (默认是每一分钟一次)
export default defineComponent({
name: “Vue3Cron”,
props: {
maxHeight: String,
change: Function,
value: String,
},
setup(props, { emit }) {
const weekList = ref([
{ name: “星期日”, value: “SUN”, val: 1 },
{ name: “星期一”, value: “MON”, val: 2 },
{ name: “星期二”, value: “TUE”, val: 3 },
{ name: “星期三”, value: “WED”, val: 4 },
{ name: “星期四”, value: “THU”, val: 5 },
{ name: “星期五”, value: “FRI”, val: 6 },
{ name: “星期六”, value: “SAT”, val: 7 },
]);
const tabActive = ref(1);
const currYear = ref(new Date().getFullYear());
const onHandleTab = (index) => {
tabActive.value = index;
};
// (默认是每一分钟一次)
const state = reactive({
second: {
cronEvery: "1",
incrementStart: 0,
incrementIncrement: 1,
rangeStart: 0,
rangeEnd: 0,
specificSpecific: [],
},
minute: {
cronEvery: "1",
incrementStart: 0,
incrementIncrement: 1,
rangeStart: 0,
rangeEnd: 0,
specificSpecific: [],
},
hour: {
cronEvery: "1",
incrementStart: 1,
incrementIncrement: 1,
rangeStart: 0,
rangeEnd: 0,
specificSpecific: [],
},
day: {
cronEvery: "1",
incrementStart: 1,
incrementIncrement: 1,
rangeStart: 0,
rangeEnd: 0,
specificSpecific: [],
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: 0,
cronDaysNearestWeekday: 1,
},
week: {
cronEvery: "1",
incrementStart: 1,
incrementIncrement: 1,
specificSpecific: [],
cronNthDayDay: 1,
cronNthDayNth: 1,
},
month: {
cronEvery: "1",
incrementStart: 1,
incrementIncrement: 1,
rangeStart: 1,
rangeEnd: 1,
specificSpecific: [],
},
year: {
cronEvery: "1",
incrementStart: new Date().getFullYear(),
incrementIncrement: 1,
rangeStart: new Date().getFullYear(),
rangeEnd: new Date().getFullYear(),
specificSpecific: [],
},
output: {
second: "",
minute: "",
hour: "",
day: "",
month: "",
Week: "",
year: "",
},
secondsText: computed(() => {
let seconds = "";
let cronEvery = state.second.cronEvery;
switch (cronEvery?.toString()) {
case "1":
seconds = "*";
break;
case "2":
seconds = state.second.incrementStart + "/" + state.second.incrementIncrement;
break;
case "3":
state.second.specificSpecific.map((val) => {
seconds += val + ",";
});
seconds = seconds.slice(0, -1);
break;
case "4":
seconds = state.second.rangeStart + "-" + state.second.rangeEnd;
break;
}
return seconds;
}),
minutesText: computed(() => {
let minutes = "";
let cronEvery = state.minute.cronEvery;
switch (cronEvery?.toString()) {
case "1":
minutes = "*";
break;
case "2":
minutes = state.minute.incrementStart + "/" + state.minute.incrementIncrement;
break;
case "3":
state.minute.specificSpecific.map((val) => {
minutes += val + ",";
});
minutes = minutes.slice(0, -1);
break;
case "4":
minutes = state.minute.rangeStart + "-" + state.minute.rangeEnd;
break;
}
return minutes;
}),
hoursText: computed(() => {
let hours = "";
let cronEvery = state.hour.cronEvery;
switch (cronEvery?.toString()) {
case "1":
hours = "*";
break;
case "2":
hours = state.hour.incrementStart + "/" + state.hour.incrementIncrement;
break;
case "3":
state.hour.specificSpecific.map((val) => {
hours += val + ",";
});
hours = hours.slice(0, -1);
break;
case "4":
hours = state.hour.rangeStart + "-" + state.hour.rangeEnd;
break;
}
return hours;
}),
daysText: computed(() => {
let days = "";
let cronEvery = state.day.cronEvery;
switch (cronEvery?.toString()) {
case "1":
break;
case "2":
case "4":
case "11":
days = "?";
break;
case "3":
days = state.day.incrementStart + "/" + state.day.incrementIncrement;
break;
case "5":
state.day.specificSpecific.map((val) => {
days += val + ",";
});
days = days.slice(0, -1);
break;
case "6":
days = "L";
break;
case "7":
days = "LW";
break;
case "8":
days = state.day.cronLastSpecificDomDay + "L";
break;
case "9":
days = "L-" + state.day.cronDaysBeforeEomMinus;
break;
case "10":
days = state.day.cronDaysNearestWeekday + "W";
break;
}
return days;
}),
weeksText: computed(() => {
let weeks = "";
let cronEvery = state.day.cronEvery;
switch (cronEvery?.toString()) {
case "1":
case "3":
case "5":
weeks = "?";
break;
case "2":
weeks = state.week.incrementStart + "/" + state.week.incrementIncrement;
break;
case "4":
state.week.specificSpecific.map((val) => {
weeks += val + ",";
});
weeks = weeks.slice(0, -1);
break;
case "6":
case "7":
case "8":
case "9":
case "10":
weeks = "?";
break;
case "11":
weeks = state.week.cronNthDayDay + "#" + state.week.cronNthDayNth;
break;
}
return weeks;
}),
monthsText: computed(() => {
let months = "";
let cronEvery = state.month.cronEvery;
switch (cronEvery?.toString()) {
case "1":
months = "*";
break;
case "2":
months = state.month.incrementStart + "/" + state.month.incrementIncrement;
break;
case "3":
state.month.specificSpecific.map((val) => {
months += val + ",";
});
months = months.slice(0, -1);
break;
case "4":
months = state.month.rangeStart + "-" + state.month.rangeEnd;
break;
}
return months;
}),
yearsText: computed(() => {
let years = "";
// TODO,目前先不指定年份,注释以下代码
let cronEvery = state.year.cronEvery;
switch (cronEvery?.toString()) {
case "1":
years = "*";
break;
case "2":
years = state.year.incrementStart + "/" + state.year.incrementIncrement;
break;
case "3":
state.year.specificSpecific.map((val) => {
years += val + ",";
});
years = years.slice(0, -1);
break;
case "4":
years = state.year.rangeStart + "-" + state.year.rangeEnd;
break;
}
return years;
}),
cron: computed(() => {
// 日和周,最多一个为 ?
let weeksText = "";
if (state.weeksText) {
weeksText = state.weeksText;
} else {
weeksText = state.daysText === "?" ? "*" : "?";
}
return `${state.secondsText || "*"} ${state.minutesText || "*"} ${
state.hoursText || "*"
} ${state.daysText || "*"} ${state.monthsText || "*"} ${weeksText} ${
state.yearsText || ""
}`;
}),
});
const handleChange = () => {
if (typeof state.cron !== "string") return false;
emit("change", state.cron);
};
const rest = (data) => {
for (let i in data) {
if (data[i] instanceof Object) {
this.rest(data[i]);
} else {
switch (typeof data[i]) {
case "object":
data[i] = [];
break;
case "string":
data[i] = "";
break;
}
}
}
};
watch(
() => state.cron,
(value) => {
if (typeof state.cron !== "string") return;
emit("update:value", value);
}
);
// 回显
function handelCron() {
let num = props.value?.split(" ");
num = num.filter((ele) => ele);
if (num?.length === 6) {
num.push("*");
}
num?.forEach((item, i) => {
switch (i) {
// 秒
case 0: {
if (item === "*") {
state.second.cronEvery = "1";
} else if (item.split("/").length === 2) {
state.second.cronEvery = "2";
const ele = item.split("/");
state.second.incrementStart = ele[0];
state.second.incrementIncrement = ele[1];
} else if (item.split("-").length === 2) {
state.second.cronEvery = "4";
const ele = item.split("-");
state.second.rangeStart = ele[0];
state.second.rangeEnd = ele[1];
} else {
state.second.cronEvery = "3";
const ele = item.split(",");
state.second.specificSpecific = ele.map((el) => {
return Number(el);
});
}
break;
}
// 分
case 1: {
if (item === "*") {
state.minute.cronEvery = "1";
} else if (item.split("/").length === 2) {
state.minute.cronEvery = "2";
const ele = item.split("/");
state.minute.incrementStart = ele[0];
state.minute.incrementIncrement = ele[1];
} else if (item.split("-").length === 2) {
state.minute.cronEvery = "4";
const ele = item.split("-");
state.minute.rangeStart = ele[0];
state.minute.rangeEnd = ele[1];
} else {
state.minute.cronEvery = "3";
const ele = item.split(",");
state.minute.specificSpecific = ele.map((el) => {
return Number(el);
});
}
break;
}
// 时
case 2: {
if (item === "*") {
state.hour.cronEvery = "1";
} else if (item.split("/").length === 2) {
state.hour.cronEvery = "2";
const ele = item.split("/");
state.hour.incrementStart = ele[0];
state.hour.incrementIncrement = ele[1];
} else if (item.split("-").length === 2) {
state.hour.cronEvery = "4";
const ele = item.split("-");
state.hour.rangeStart = ele[0];
state.hour.rangeEnd = ele[1];
} else {
state.hour.cronEvery = "3";
const ele = item.split(",");
state.hour.specificSpecific = ele.map((el) => {
return Number(el);
});
}
break;
}
// 日
case 3: {
if (item === "*") {
state.day.cronEvery = "1";
} else if (item === "?") {
// 周 2'/' 或4 下拉多选
if (num[5].split("/").length === 2) {
state.day.cronEvery = "2";
const ele = num[5].split("/");
state.week.incrementIncrement = ele[1];
state.week.incrementStart = ele[0];
} else {
state.day.cronEvery = "4";
const ele = num[5].split(",");
state.week.specificSpecific = ele.map((el) => {
if (el === "?" || el === "*") {
return undefined;
} else {
return el;
}
});
state.week.specificSpecific = state.week.specificSpecific.filter(
(el) => el
);
}
} else if (item.split("/").length === 2) {
state.day.cronEvery = "3";
const ele = item.split("/");
state.day.incrementStart = ele[0];
state.day.incrementIncrement = ele[1];
} else {
state.day.cronEvery = "5";
const ele = item.split(",");
state.day.specificSpecific = ele.map((el) => {
return Number(el);
});
}
break;
}
// 月
case 4: {
if (item === "*") {
state.month.cronEvery = "1";
} else if (item.split("/").length === 2) {
state.month.cronEvery = "2";
const ele = item.split("/");
state.month.incrementStart = ele[0];
state.month.incrementIncrement = ele[1];
} else if (item.split("-").length === 2) {
state.month.cronEvery = "4";
const ele = item.split("-");
state.month.rangeStart = ele[0];
state.month.rangeEnd = ele[1];
} else {
state.month.cronEvery = "3";
const ele = item.split(",");
state.month.specificSpecific = ele.map((el) => {
return Number(el);
});
}
break;
}
// 周
case 5: {
break;
}
// 年 可省略,表示每年
case 6: {
if (item === "*") {
state.year.cronEvery = "1";
} else if (item.split("/").length === 2) {
state.year.cronEvery = "2";
const ele = item.split("/");
state.year.incrementStart = ele[0];
state.year.incrementIncrement = ele[1];
} else if (item.split("-").length === 2) {
state.year.cronEvery = "4";
const ele = item.split("-");
state.year.rangeStart = ele[0];
state.year.rangeEnd = ele[1];
} else {
state.year.cronEvery = "3";
state.year.specificSpecific = item?.join(",");
}
break;
}
}
});
}
onMounted(() => {
handelCron();
});
return {
weekList,
state,
handleChange,
rest,
tabActive,
onHandleTab,
currYear,
};
},
});
《/script>
《style lang=“css” scoped>
:deep(.el-input-number) {
width: 80px;
margin-right: 5px;
}
:deep(.el-radio) {
margin-right: 10px;
}
.v3c {
width: auto;
border: 1px solid #f5f7fa;
}
.v3c-tab {
padding: 0;
list-style: none;
margin: 0;
background-color: #f5f7fa;
display: flex;
}
.v3c-tab-item {
flex: 1;
text-align: center;
cursor: pointer;
padding: 6px;
}
.v3c-tab-item.v3c-active {
background-color: #409eff;
color: #ffffff;
}
.v3c-lang-btn {
background-color: #61ddaa;
color: #ffffff;
/* border-radius: 10px; */
}
.v3c-content {
padding: 20px;
max-height: v-bind(maxHeight);
overflow: hidden;
overflow-y: auto;
}
.p-20 {
padding: 20px;
}
.v3c-footer {
background-color: #f5f7fa;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
text-align: center;
}
.v3c input[type=“text”] {
width: 80px;
}
.v3c input[type=“number”] {
width: 80px;
height: 28px;
border: 1px solid #d9d9d9;
}
.v3c select {
width: 80px;
height: 32px;
border: 1px solid #d9d9d9;
}
.v3c select[multiple] {
width: 80px;
height: 100px;
border: 1px solid #d9d9d9;
}
.btn-ok {
line-height: 1.5715;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
box-shadow: 0 2px #00000004;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
height: 32px;
padding: 4px 15px;
font-size: 14px;
border-radius: 2px;
color: #fff;
background: #409eff;
border-color: #409eff;
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
box-shadow: 0 2px #0000000b;
}
.btn-close {
line-height: 1.5715;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
box-shadow: 0 2px #00000004;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
height: 32px;
padding: 4px 15px;
font-size: 14px;
border-radius: 2px;
color: #fff;
background: #61ddaa;
border-color: #61ddaa;
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
box-shadow: 0 2px #0000000b;
}
.cron {
background-color: #61ddaa;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
}
《/style>