<template>
|
<div class="common-date-time">
|
<el-date-picker
|
v-model="newTime"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
<div class="time-card">
|
<div class="card-item" :class="item==checked?'active':''" v-for="item in timeList" @click="timeClick(item)">
|
{{ item }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
const newTime = ref([]);
|
let timeList = ['今日','本周','本月','本年' ];
|
|
let checked = ref('今日');
|
let timeClick = (item) => {
|
checked.value = item;
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.common-date-time {
|
position: relative;
|
top: 19px;
|
display: flex ;
|
justify-content: space-between;
|
:deep(.el-date-editor) {
|
background: rgba(0,15,34,0.5);
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #306FCA;
|
height: 28px;
|
|
.el-input__wrapper {
|
background-color: transparent;
|
box-shadow: 0 0 0 1px #0070FF;
|
|
&.is-focus {
|
box-shadow: 0 0 0 1px #0070FF;
|
}
|
}
|
|
.el-range-input {
|
background-color: transparent;
|
color: #fff;
|
height: 28px;
|
&::placeholder {
|
color: rgba(255, 255, 255, 0.6);
|
}
|
}
|
}
|
.time-card {
|
width: 156px;
|
height: 28px;
|
background: linear-gradient( 270deg, #195BAD 0%, rgba(25,91,173,0) 100%);
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #306FCA;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
display: flex;
|
.card-item {
|
width: 40px;
|
height: 28px;
|
line-height: 28px;
|
text-align: center;
|
cursor: pointer;
|
}
|
.active {
|
background: linear-gradient( 270deg, #19AD8D 0%, rgba(25,173,141,0) 100%);
|
box-shadow: inset 0px 0px 8px 0px rgba(0,255,200,0.6);
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #30CAA9;
|
}
|
}
|
}
|
</style>
|
