feat: 日期调整

罗广辉

2025-03-28 21cafdf0d0a032a991fdd1a1449d19405747e330

 src/components/CommonDateTime.vue

@@ -5,10 +5,16 @@
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-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)">
      <div
        class="card-item"
        :class="item == checked ? 'active' : ''"
        v-for="item in timeList"
        @click="timeClick(item)"
      >
                {{ item }}
            </div>
         </div>
@@ -20,29 +26,34 @@
let timeList = ['今日','本周','本月','本年' ];

let checked = ref('今日');
let timeClick = (item) => {
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) {
    box-shadow: none;
    width: 0;
    flex: 1;
    margin-right: 4px;

            background: rgba(0,15,34,0.5);
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #306FCA;
    border: 1px solid #306fca;
            height: 28px;
            
            .el-input__wrapper {
                background-color: transparent;
                box-shadow: 0 0 0 1px #0070FF;
      box-shadow: 0 0 0 1px #0070ff;
                
                &.is-focus {
                    box-shadow: 0 0 0 1px #0070FF;
        box-shadow: 0 0 0 1px #0070ff;
                }
            }

@@ -50,33 +61,35 @@
                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;
    text-align: center;
    background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
    border: 1px solid #306fca;
    font-family: Source Han Sans CN, Source Han Sans CN, serif;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
    color: #ffffff;
            display: flex;
            .card-item {
                width: 40px;
                height: 28px;
                line-height: 28px;

    .card-item {
      width: 39px;
      height: 100%;
      line-height: 26px;
                cursor: pointer;
            }

            .active {
                background: linear-gradient( 270deg, #19AD8D 0%, rgba(25,173,141,0) 100%);
      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;
            }
        }
    }