<template>
<div>
<div v-if="dateObj.includes(dateType)">
<!-- checkMore -->
<div class="checkDate" v-if="checkMore">
<div class="leftDateDiv">
<el-date-picker @change="validateDate1And2"
v-model="dateValue1"
:type="dateType"
placeholder="请选择计划开始日期"
:disabled="disabled"
>
</el-date-picker>
</div>
<div class="middleDateDiv">至</div>
<div class="rightDateDiv">
<el-date-picker @change="validateDate2And1"
v-model="dateValue2"
:type="dateType"
placeholder="请选择计划结束日期"
:disabled="disabled"
>
</el-date-picker>
</div>
</div>
<div v-if="checkMoreRule" style="width: 100%;">
<el-row type="flex" align="middle">
<el-col>
<el-dropdown @visible-change="handleDropdownVisibleChange" trigger="click" :hide-on-click="dropdownHide"
:disabled="dropdownDisabled"
@command="dropdownFn"
>
<span v-if="dropdownDisabled" style="font-size: 12px" class="placeChoice">请先选择起止日期<i
class="el-icon-arrow-down el-icon--right"
></i>
</span>
<span v-else style="font-size: 12px" class="placeChoice">请选择重复规则<i
class="el-icon-arrow-down el-icon--right"
></i>
</span>
<el-dropdown-menu #default="dropdown">
<el-dropdown-item icon="el-icon-plus" style="height: max-content;"
:style="dropdownItemWidth"
>
<div style="width: 100%;height: 100%;">
<div style="margin-bottom: 20px;width: 100%;height: 20%;"
>
<el-button-group>
<el-row type="flex">
<el-col>
<el-button class="leftBtnRadio" type="success" :class="{clickedBtn:!isPlain1}"
size="mini"
@click="toggleChecked(1)"
>每天
</el-button>
</el-col>
<el-col>
<el-button class="secondBtnRadio" type="success" :class="{clickedBtn:!isPlain2}"
size="mini"
@click="toggleChecked(2)"
>周
</el-button>
</el-col>
<el-col>
<el-button class="threeBtnRadio" type="success" :class="{clickedBtn:!isPlain3}"
size="mini"
@click="toggleChecked(3)"
>月
</el-button>
</el-col>
<el-col>
<el-button class="rightBtnRadio" type="success" :class="{clickedBtn:!isPlain4}"
size="mini"
@click="toggleChecked(4)"
>年
</el-button>
</el-col>
</el-row>
</el-button-group>
<div style="margin-top: 30px;">
<el-row>
<el-col v-if="allChecked">
<el-checkbox @change="CheckedAll" v-if="!checkAllIscheckedOrcancel" v-model="checked">全选
</el-checkbox>
<el-checkbox v-else @change="CheckedAll" v-model="checked">取消</el-checkbox>
</el-col>
</el-row>
</div>
</div>
<div
class="weeksDiv"
>
<!-- 周列表 -->
<div v-if="dateType1==='week'">
<span class="weeksSpan" v-for="(item) in weeksList" :key="item.label"
@click="changeWeekFn(item)" :class="{activeBgc:item.control}"
>{{ item.label }}</span>
</div>
<!-- 月列表 -->
<div v-else-if="dateType1==='month'">
<el-checkbox-group v-model="checkedDatesList" @change="changeMonthFn"
>
<el-checkbox :label="item.label"
v-for="(item,) in datesList"
:key="item.value"
>{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
<!-- 年列表 -->
<div v-else-if="dateType1==='year'" class="defaultNoneTodayClass">
<el-checkbox-group v-model="checkedMonthsList" @change="changeMonthFn">
<el-checkbox :label="item.label"
v-for="(item,) in monthsList"
:key="item.value"
>{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div v-if="checkedDateType" class="submitAndCancelBTN">
<div style="width: max-content;height: 100%;margin-top: 30px;">
<el-button plain type="primary" :disabled="dropDownSubmitBtnDisabled"
@click="handleSubmit"
>确定
</el-button>
<el-button plain @click="handleCancel">取消</el-button>
</div>
</div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'timePicker',
props: {
dateType: { // 时间选择器类型
required: true,
type: String,
default: 'week'
},
/*
* 一级 选择 之后切换二级重复规则的标识
* */
checkMore: {
type: Boolean,
default: false
},
checkMoreRule: {
type: Boolean,
default: false
},
/*
* 禁用 日期选择器标识
* */
dropdownDisabled: {
type: Boolean,
default: true
},
/*
* 一级 时间选择 起始截止时间选择 组成的数组
* */
dateArr: {
type: Array,
default: () => []
},
/*
* 禁用 日期选择器标识
* */
disabled: {
type: Boolean,
default: true
},
/*
* 编辑策略 二次修改切换标识 二次重选重复规则之后 切换展示对应的重复规则
* */
toggleEdit: {
type: Boolean,
default: true
}
},
data() {
return {
isMonthBtn: false,//是否是月按钮 控制展开的下拉框的尺寸标识
windowInnerWidth: '',//是否是月按钮 宽度 65% 浏览器宽度
checked: false,
checkAllIscheckedOrcancel: true,//全选 取消切换标识
allChecked: false,
isPlain1: true,
isPlain2: true,
isPlain3: true,
isPlain4: true,
isPlain5: true,
dropdownHide: false,
dateType1: '',//下拉框根据日期类型切换输入内容的标识
cities: [
{ label: '一', value: 1 },
{ label: '二', value: 2 } // 假数据用于在下拉框中自定义html 否则不可显示不能删除 超一项
],
cities1: [
{ label: '每天', value: 1 },
{ label: '周', value: 2 },
{ label: '月', value: 3 },
{ label: '年', value: 4 }
],
weeksList: [
{ label: '日', value: 7, control: false },
{ label: '一', value: 1, control: false },
{ label: '二', value: 2, control: false },
{ label: '三', value: 3, control: false },
{ label: '四', value: 4, control: false },
{ label: '五', value: 5, control: false },
{ label: '六', value: 6, control: false }
],
datesList: [
{ label: '1号', value: 1 },
{ label: '2号', value: 2 },
{ label: '3号', value: 3 },
{ label: '4号', value: 4 },
{ label: '5号', value: 5 },
{ label: '6号', value: 6 },
{ label: '7号', value: 7 },
{ label: '8号', value: 8 },
{ label: '9号', value: 9 },
{ label: '10号', value: 10 },
{ label: '11号', value: 11 },
{ label: '12号', value: 12 },
{ label: '13号', value: 13 },
{ label: '14号', value: 14 },
{ label: '15号', value: 15 },
{ label: '16号', value: 16 },
{ label: '17号', value: 17 },
{ label: '18号', value: 18 },
{ label: '19号', value: 19 },
{ label: '20号', value: 20 },
{ label: '21号', value: 21 },
{ label: '22号', value: 22 },
{ label: '23号', value: 23 },
{ label: '24号', value: 24 },
{ label: '25号', value: 25 },
{ label: '26号', value: 26 },
{ label: '27号', value: 27 },
{ label: '28号', value: 28 },
{ label: '29号', value: 29 },
{ label: '30号', value: 30 },
{ label: '31号', value: 31 }
],
monthsList: [
{ label: '一月', value: 1 },
{ label: '二月', value: 2 },
{ label: '三月', value: 3 },
{ label: '四月', value: 4 },
{ label: '五月', value: 5 },
{ label: '六月', value: 6 },
{ label: '七月', value: 7 },
{ label: '八月', value: 8 },
{ label: '九月', value: 9 },
{ label: '十月', value: 10 },
{ label: '十一月', value: 11 },
{ label: '十二月', value: 12 }
],
checkedWeekList: [],//已选择的星期的数组数据
checkedMonthsList: [],//已选择的月份的数组数据
checkedDatesList: [],//已选择的单月日份的数组数据
value2: '',
checkedDateType: '',//
dateObj: ['year', 'date'],
dateObj1: [
{ date: 'year', value: 4 },
{ date: 'month', value: 3 },
{ date: 'week', value: 2 },
{
date: 'date',
value: 1
}
],
dateValue1: '',
dateValue2: '',
result: false,
yearArr: []// ['2020', '2021'] 可以设置默认值
}
},
mounted() {
this.getWindowWidth()
},
methods: {
handleDropdownVisibleChange(visible) {
if (!visible) {
this.resetDropdownState()
}
},
resetDropdownState() {
this.checkedWeekList = [],
this.checkedMonthsList = [],
this.checkedDatesList = [],
this.checkedDateType = '',
this.dateType1 = '',
this.checkAllIscheckedOrcancel = true,
this.checked = false,
this.allChecked = false,
this.isMonthBtn = false,
this.weeksList = [
{ label: '日', value: 7, control: false },
{ label: '一', value: 1, control: false },
{ label: '二', value: 2, control: false },
{ label: '三', value: 3, control: false },
{ label: '四', value: 4, control: false },
{ label: '五', value: 5, control: false },
{ label: '六', value: 6, control: false }
],
this.isPlain1 = true,
this.isPlain2 = true,
this.isPlain3 = true,
this.isPlain4 = true
},
getWindowWidth() {
this.windowInnerWidth = (Number(window.innerWidth) * 55 / 100).toFixed(0) + 'px'
},
disabledDate(time) {
const startYear = this.formatDate(this.dateArr[0], 1)
const endYear = this.formatDate(this.dateArr[1], 1)
const year = time.getFullYear()
return year < startYear || year > endYear
},
handleCancel() {
this.dropdownHide = true
},
checkTime(startTime, endTime, checkedDateType) {
const startDate = new Date(startTime)
const endDate = new Date(endTime)
// 计算日期差距
const delta = (endDate - startDate) / (1000 * 60 * 60 * 24)
// 如果日期差距大于等于365天，则说明满一年
/* 周 计划起止满一周 */
/* 月 计划起止满一年 */
if (checkedDateType === 2) {
return delta >= 7
} else if (checkedDateType === 3) {
return delta >= 31
} else if (checkedDateType === 4) {
return delta >= 365
} else {
return true
}
},
async handleSubmit() {
console.log(this.checkedDateType)
switch (this.checkedDateType) {
case 1:
this.$emit('transferRepeatType', this.checkedDateType)
break
case 2:
if (this.dateType === 'date' && this.checkedDateType === 2 && Array.isArray(this.dateArr)) {
if (!this.checkTime(this.dateArr[0], this.dateArr[1], this.checkedDateType)) {
try {
await this.$confirm('所选计划日期不能完整覆盖一个重复周期,确认重选计划日期吗？')
this.dateValue1 = ''
this.dateValue2 = ''
this.$emit('reEdit')
return
} catch (e) {
this.$emit('reEdit')
return
}
}
}
const checkedWeekList = this.checkedWeekList.join()
console.log(checkedWeekList)
this.$emit('transferDate', checkedWeekList)
this.$emit('transferRepeatType', this.checkedDateType)
break
case 3:
if (this.dateType === 'date' && this.checkedDateType === 3 && Array.isArray(this.dateArr)) {
if (!this.checkTime(this.dateArr[0], this.dateArr[1], this.checkedDateType)) {
try {
await this.$confirm('所选计划日期不能完整覆盖一个重复周期,确认重选计划日期吗？')
this.dateValue1 = ''
this.dateValue2 = ''
this.$emit('reEdit')
return
} catch (e) {
this.$emit('reEdit')
return
}
}
}
let checkedDatesList = []
this.checkedDatesList.forEach(item => {
this.datesList.forEach(item1 => {
if (item === item1.label) {
checkedDatesList.push(item1)
}
})
})
checkedDatesList = checkedDatesList.map(item => item.value).join()
this.$emit('transferDate', checkedDatesList)
this.$emit('transferRepeatType', this.checkedDateType)
break
case 4:
if (this.dateType === 'date' && this.checkedDateType === 4 && Array.isArray(this.dateArr)) {
if (!this.checkTime(this.dateArr[0], this.dateArr[1], this.checkedDateType)) {
try {
await this.$confirm('所选计划日期不能完整覆盖一个重复周期,确认重选计划日期吗？')
this.dateValue1 = ''
this.dateValue2 = ''
this.$emit('reEdit')
return
} catch (e) {
this.$emit('reEdit')
return
}
}
}
let checkedMonthsList = []
this.checkedMonthsList.forEach(item => {
this.monthsList.forEach(item1 => {
if (item === item1.label) {
checkedMonthsList.push(item1)
}
})
})
checkedMonthsList = checkedMonthsList.map(item => item.value).join()
this.$emit('transferDate', checkedMonthsList)
this.$emit('transferRepeatType', this.checkedDateType)
break
default:
break
}
this.dropdownHide = true
if (!this.toggleEdit) {
console.log('超级测试')
this.$emit('toggleEdit', this.checkedDateType)
}//生产目标管理 二次编辑策略 后切换展示对应的周期重复规则
},
dropdownFn() {
this.dropdownHide = false
},
validateYearRange(dateValue1, dateValue2) {
const now1 = new Date(dateValue1)
const currentYear1 = now1.getFullYear()
const now2 = new Date(dateValue2)
const currentYear2 = now2.getFullYear()
return currentYear1 !== currentYear2 && currentYear2 - currentYear1 >= 1
},
validateDateRange(dateValue1, dateValue2) {
const startDate = new Date(dateValue1)
const endDate = new Date(dateValue2)
const diffTime = endDate.getTime() - startDate.getTime()
const diffDays = diffTime / (1000 * 3600 * 24)
return startDate !== endDate && startDate < endDate && diffDays >= 2
},
validateDate1And2() {
if (!(this.dateValue1 && this.dateValue2)) return this.$emit('dropdownDisabled', true)
const arr = []
if (this.dateType === 'year') {
if (!this.validateYearRange(this.dateValue1, this.dateValue2)) {
this.$emit('dropdownDisabled', true)
return this.$message({
type: 'warning',
message: '请重新选择年份'
})
} else {
arr.push(this.dateValue1)
arr.push(this.dateValue2)
this.$emit('onetransferDate', arr)//校验成功后数据回传
this.$emit('dropdownDisabled', false)
}
} else if (this.dateType === 'date') {
if (!this.validateDateRange(this.dateValue1, this.dateValue2)) {
this.$emit('dropdownDisabled', true)
return this.$message({
type: 'warning',
message: '请重新选择日期'
})
} else {
arr.push(this.dateValue1)
arr.push(this.dateValue2)
this.$emit('onetransferDate', arr)//校验成功后数据回传
this.$emit('dropdownDisabled', false)
}
}
},
validateDate2And1() {
this.validateDate1And2()
},
changeMonthFn(arr) {
this.$emit('transferDate', arr)
},
CheckedAll() {
this.isPlain1 = true
this.isPlain2 = true
this.isPlain3 = true
this.isPlain4 = true
this.isPlain5 = !this.isPlain5
if (!this.isPlain5 && this.dateType1 === 'week') {
this.isPlain2 = false
this.checkAllIscheckedOrcancel = false
if (this.checkedWeekList.length !== 0) {
this.checkedWeekList.splice(0, this.checkedWeekList.length - 1)
}
this.weeksList.forEach(item => {
item.control = true
this.checkedWeekList.push(item.value)
this.checkedWeekList = this.checkedWeekList.filter((value, index, self) => {
return self.indexOf(value) === index
})
})
} else if (!this.isPlain5 && this.dateType1 === 'month') {
this.isPlain3 = false
this.checkAllIscheckedOrcancel = false
this.checkedDatesList = []
this.datesList.forEach(item => {
this.checkedDatesList.push(item.label)
})
} else if (!this.isPlain5 && this.dateType1 === 'year') {
this.isPlain4 = false
this.checkAllIscheckedOrcancel = false
this.checkedMonthsList = []
this.monthsList.forEach(item => {
this.checkedMonthsList.push(item.label)
})
} else if (this.isPlain5 && this.dateType1 === 'week') {
this.checkAllIscheckedOrcancel = true
this.toggleCheckedPannel()
this.isPlain2 = false
this.weeksList.forEach(item => {
item.control = false
})
this.checkedWeekList = []
} else if (this.isPlain5 && this.dateType1 === 'month') {
this.checkAllIscheckedOrcancel = true
this.toggleCheckedPannel()
this.isPlain3 = false
this.checkedDatesList = []
} else if (this.isPlain5 && this.dateType1 === 'year') {
this.checkAllIscheckedOrcancel = true
this.toggleCheckedPannel()
this.isPlain4 = false
this.checkedMonthsList = []
}
if (this.dateType1 === 'week' && !this.comWeeksOrMonthsList && !this.checkAllIscheckedOrcancel) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = true
})
}
},
toggleCheckedPannel() {
this.isPlain1 = true
this.isPlain2 = true
this.isPlain3 = true
this.isPlain4 = true
this.isPlain5 = true
},
toggleChecked(dateValue) {
this.checkedDateType = dateValue
switch (dateValue) {
case 1:
this.toggleCheckedPannel()
this.isPlain1 = false
this.allChecked = false
this.isMonthBtn = false
break
case 2:
this.toggleCheckedPannel()
this.isPlain2 = false
this.allChecked = true
this.isMonthBtn = false
break
case 3:
this.toggleCheckedPannel()
this.isPlain3 = false
this.allChecked = true
this.isMonthBtn = true
break
case 4:
this.toggleCheckedPannel()
this.isPlain4 = false
this.allChecked = true
this.isMonthBtn = false
break
default:
break
}
if ((this.dateType1 === 'week' || this.dateType1 === 'month') && this.comWeeksOrMonthsList) {
this.isPlain5 = false
}
this.dropdownHide = false
this.dateType1 = this.dateObj1.find(item => item.value === dateValue).date
},
changeWeekFn({ value: value1 }) {
this.weeksList.find(item => item.value === value1).control = !(this.weeksList.find(item => item.value === value1).control)
this.checkedWeekList.push(value1)
this.checkedWeekList = this.checkedWeekList.filter((value, index, self) => {
return self.indexOf(value) === index
})
this.weeksList.forEach((item) => {
this.checkedWeekList.forEach((item1, index1) => {
if (!item.control && item1 === item.value) {
this.checkedWeekList.splice(index1, 1)
}
})
})
if (this.dateType1 === 'week' && this.comWeeksOrMonthsList && this.checkAllIscheckedOrcancel) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
this.isPlain5 = true
})
}
},
formatDate(date, dateType) {
const currentDate = new Date(date)
const year = currentDate.getFullYear()
const month = String(currentDate.getMonth() + 1).padStart(2, '0')
const day = String(currentDate.getDate()).padStart(2, '0')
if (dateType === 2) {
return `${year}-${month}-${day}`
} else if (dateType === 1) {
return year
}
}
},
computed: {
dropDownSubmitBtnDisabled() {
switch (this.checkedDateType) {
case 1:
return false
case 2 :
return this.checkedWeekList.length === 0
case 3 :
return this.checkedDatesList.length === 0
case 4 :
return this.checkedMonthsList.length === 0
default:
break
}
},
dropdownItemWidth() {
return this.isMonthBtn ? { 'width': `${this.windowInnerWidth}` } : {}
},
comWeeksOrMonthsList() {
switch (this.dateType1) {
case 'week':
return this.checkedWeekList.length === 7
break
case 'month':
return this.checkedDatesList.length === 31
break
case 'year':
return this.checkedMonthsList.length === 12
break
default:
break
}
}
},
watch: {
dateValue1(newValue, oldValue) {
if (oldValue && newValue === null) {
this.validateDate1And2()
}
},
dateValue2(newValue, oldValue) {
if (oldValue && newValue === null) {
this.validateDate1And2()
}
},
dateArr() {
function getDateInfo(dateArr) {
let date = new Date(dateArr)
let year = date.getFullYear() // 获取年份
let month = date.getMonth() // 月份是从0开始计数的，所以要加1
let day = date.getDate() // 获取日期
return { year: year, month: month, day: day }
}
if (this.dateArr.length !== 0 && this.dateType === 'date') {
this.dateValue1 = new Date(getDateInfo(this.dateArr[0]).year, getDateInfo(this.dateArr[0]).month, getDateInfo(this.dateArr[0]).day)
this.dateValue2 = new Date(getDateInfo(this.dateArr[1]).year, getDateInfo(this.dateArr[1]).month, getDateInfo(this.dateArr[1]).day)
} else if (this.dateArr.length !== 0 && this.dateType === 'year') {
this.dateValue1 = String(getDateInfo(this.dateArr[0]).year)
this.dateValue2 = String(getDateInfo(this.dateArr[1]).year)
}
},
isPlain5(newValue, oldValue) {
if (newValue !== oldValue) {
this.checked = !newValue
}
},
dateType1(newValue, oldValue) {
if (newValue !== oldValue) {
if (oldValue === '' && (newValue === 'month' || newValue === 'week')) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
})
} else if (newValue === 'week' && (oldValue === 'year' || oldValue === 'date')) {
if (this.comWeeksOrMonthsList) {
// console.log('everything——>周')
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = true
this.isPlain2 = false
this.isPlain5 = false
})
} else if (!this.comWeeksOrMonthsList) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
this.isPlain2 = false
this.isPlain5 = true
})
}
} else if (newValue === 'month' && (oldValue === 'year' || oldValue === 'date')) {
// console.log('everything——>月')
if (this.comWeeksOrMonthsList) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = true
this.isPlain3 = false
this.isPlain5 = false
})
} else if (!this.comWeeksOrMonthsList) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
this.isPlain3 = false
this.isPlain5 = true
})
}
} else if (newValue === 'week' && oldValue === 'month') {
// console.log('月——周')
if (this.comWeeksOrMonthsList === false) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
})
} else if (this.comWeeksOrMonthsList === true) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = true
this.isPlain2 = false
this.isPlain5 = false
})
}
} else if (newValue === 'month' && oldValue === 'week') {
// console.log('周——月')
if (!this.comWeeksOrMonthsList) {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = false
})
} else {
this.$nextTick(() => {
this.checkAllIscheckedOrcancel = true
this.isPlain3 = false
this.isPlain5 = false
})
}
}
}
},
comWeeksOrMonthsList(newValue, oldValue) {
if (newValue !== oldValue) {
if (newValue && this.dateType1 === 'week') {
this.checkAllIscheckedOrcancel = true
this.isPlain2 = false
this.isPlain5 = false
} else if (!newValue && this.dateType1 === 'week') {
this.checkAllIscheckedOrcancel = false
this.isPlain2 = false
this.isPlain5 = true
} else if (newValue && this.dateType1 === 'month') {
this.checkAllIscheckedOrcancel = true
this.isPlain3 = false
this.isPlain5 = false
} else if (!newValue && this.dateType1 === 'month') {
this.checkAllIscheckedOrcancel = false
this.isPlain3 = false
this.isPlain5 = true
} else if (newValue && this.dateType1 === 'year') {
this.checkAllIscheckedOrcancel = true
this.isPlain4 = false
this.isPlain5 = false
} else if (!newValue && this.dateType1 === 'year') {
this.checkAllIscheckedOrcancel = false
this.isPlain4 = false
this.isPlain5 = true
}
}
}
}
}
</script>
<style lang="scss" scoped>
.checkDate {
display: flex;
align-items: center;
.leftDateDiv {
flex: 3;
margin: 0 10px;
}
.middleDateDiv {
flex: 1;
text-align: center;
}
.rightDateDiv {
flex: 3;
margin: 0 10px;
}
}
.optionNone {
display: none;
}
.weeksDiv {
width: 100%;
line-height: 40px;
display: flex;
justify-content: space-evenly;
align-items: center;
.weeksSpan {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 30px;
color: #333333;
margin: 0 1px;
border: 1px solid rgba(18, 31, 50, 0.3);
&.activeBgc {
background-color: #4772fa;
}
}
}
.submitAndCancelBTN {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.el-button.is-disabled {
background-color: #16a4a9 !important;
color: #FFF !important;
border-color: #16a4a9 !important;
}
}
.sixNextWrap {
white-space: pre-wrap;
}
.el-dropdown-menu__item {
background-color: #FFFFFF;
}
.el-dropdown-menu__item:hover {
background-color: #FFFFFF;
}
.leftBtnRadio {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background-color: #f4f4f4;
border: 0 solid red;
margin-right: 2px;
color: #333333;
}
.rightBtnRadio {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #f4f4f4;
border: 0 solid red;
color: #333333;
}
.secondBtnRadio {
background-color: #f4f4f4;
border: 0 solid red;
color: #333333;
margin-right: 2px;
}
.threeBtnRadio {
background-color: #f4f4f4;
border: 0 solid red;
color: #333333;
margin-right: 2px;
}
.allBtnRadio {
background-color: #f4f4f4;
border: 0 solid red;
color: #333333;
margin-right: 2px;
}
.clickedBtn {
background-color: #11b95c;
color: #FFFFFF;
}
.disabledLine {
//text-decoration: line-through;
}
.placeChoice[disabled] {
color: #606266!important;
}
</style>
<!-- 时间组件的使用 -->
<!-- 组件效果展示 -->
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
