gx

chenyc

2025-10-28 f10f14ad1e100246c6bd19d30f275204147c8981

 src/views/paiban/index.vue

@@ -6,9 +6,8 @@
            left-arrow
            @click="fanhui"
        />
        <div>
        <div style="padding: 10px;">
            <van-calendar
                color="#769AFF"
                :min-date="minDate"
                @month-show="monthShow"
                :poppable="false"
@@ -124,12 +123,10 @@
        const index= selectDate.value.findIndex(el=>{return el.y===year&&el.m===month&&el.d===date})
        if (index>0){
            console.log(day)
            // 定义颜色映射
            let color = ''
            if (selectDate.value[index].透析单状态){
                color = 'red'
                day.type='end'
            } else {
                color = 'blue'
                day.type='start'
            }
            day.text=selectDate.value[index].type
            if (selectDate.value[index].timeSlot===0){
@@ -141,8 +138,9 @@
            else {
                day.bottomInfo='晚上'
            }
            day.className = `custom-day ${color}-text` // 添加自定义类名
            console.log(day,'有排班' )
        }

        return day
    }
    onMounted(()=>{
@@ -166,7 +164,7 @@
}

.listdiv {
    margin-top: 20px;
    // margin-top: 20px;

    .listrow {
        margin-top: 10px;
@@ -236,28 +234,23 @@
    }
}

.fanhui {
    // padding-top: 20px;
    width: 100%;
    background: #4696f9;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    height: 36px;
    line-height: 36px;
/* eslint-disable selector-class-pattern */

/* eslint-disable selector-pseudo-element-no-unknown */

/* eslint-disable color-named */
/* stylelint-disable selector-pseudo-class-no-unknown */

:deep(.van-calendar__day--end) {
    background: #46a8f9;
    border-radius: 10px;
    font-size: 12px;
}

/* 自定义文字颜色 */
.red-text {
    color: #ee0a24 !important; /* Vant 红色 */
:deep(.van-calendar__day--start) {
    background: #f98546;
    border-radius: 10px;
    font-size: 12px;
}

.blue-text { /* 也可以换成蓝色 #0066cc */
    color: #06c !important; /* 医疗蓝 */
}

/* 可选：让颜色更突出一点 */
.custom-day {
    font-weight: 500;
}
</style>