mky-vent-base/src/views/vent/home/common/danelBd.vue

<template>
    <div class="danelBd">
        <div v-if="moduleName" class="dane-title"
            :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
            <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
                <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
                <span>{{ moduleName }}</span>
            </div>

            <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
                <!-- 下拉框 -->
                <div class="common-navR-select" v-if="commonTitle=='selected'">
                    <a-select style="width: 140px" v-model="selectVal" size="small" allowClear class="code-mode-select"
                        placeholder="请选择">
                        <a-select-option v-for="device in selectList" :key="device.value" :value="device.value">{{
                            device.label
                        }}
                        </a-select-option>
                    </a-select>
                </div>
                <!-- 日期组件 -->
                <div class="common-navR-date" v-if="commonTitle=='datePikers'">
                    <a-range-picker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }"
                        format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
                </div>
                <!-- 开关组件 -->
                <div class="common-navR-switch" v-if="commonTitle=='switchs'">
                    <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
                    <a-switch v-model:checked="checked" />
                    <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
                </div>

            </div>
        </div>
        <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH, }">
            <div class="t-line"></div>
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps } from 'vue'

let props = defineProps({
    //标题
    moduleName: {
        type: String,
        default: ''
    },
    //样式
    contentStyle: {
        type: Object,
        default: () => {
            return {
                contentH: '0px',
            }
        }
    },

    commonTitle: {
        type: String,
        default: ''
    }
})

let selectVal = ref('')
let selectList = reactive([
    { label: '全部', value: '全部' }
])

let checked=ref(false)

//切换时间选项
function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}
function onOk(val) {
    console.log('onOk: ', val);
}





</script>

<style scoped lang='less'>
.danelBd {
    width: 100%;
    height: 100%;
    position: relative;

    .dane-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 43px;
        padding: 0px 10px;
        box-sizing: border-box;
        background: url('../../../../assets/images/fire/firehome/title-1.png') no-repeat center;
        background-size: 100% 100%;

        .common-navL {
            width: 70%;
            display: flex;
            align-items: center;

            img {
                width: 18px;
                height: 18px;
            }

            span {
                font-size: 18px;
                color: #a1dff8;
                margin-left: 10px;
            }
        }

        .common-navL1 {
            width: 50%;
            display: flex;
            align-items: center;

            img {
                width: 18px;
                height: 18px;
            }

            span {
                font-size: 18px;
                color: #a1dff8;
                margin-left: 10px;
            }
        }

        .common-navR {
            width: 30%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .common-navR1 {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .common-navR-switch{
            width: 70%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .status-text{
                color: #1fb3f7;
            }
            .status-text1{
                color: #a1dff8;
            }
        }


    }

    .dane-content {
        position: relative;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background: url('../../../../assets/images/fire/firehome/title-3.png') no-repeat center;
        background-size: 100% 100%;

        .t-line {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 20px;
            background: url('../../../../assets/images/fire/firehome/title-4.png') no-repeat center;
            background-size: 100% 100%;
        }

    }

}

::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
    background-color: rgba(255, 255, 255, .1);
    border: none;
}

::v-deep .zxm-select-selection-item {
    color: #a1dff8 !important;
}

::v-deep .zxm-select-arrow {
    color: #a1dff8 !important;
}

::v-deep .zxm-select-selection-placeholder {
    color: #a1dff8 !important;
}

::v-deep .zxm-picker {
    background-color: rgba(255, 255, 255, .1) !important;
    border: 1px solid #a1dff8 !important;

}

::v-deep .zxm-picker-input>input {
    text-align: center !important;
    color: #a1dff8 !important;
}
::v-deep .zxm-picker-separator{
    color: #a1dff8 !important;
}
::v-deep .zxm-picker-range .zxm-picker-active-bar{
    display: none !important;
}
::v-deep .zxm-picker-suffix{
    color: #a1dff8 !important;
}
::v-deep .zxm-switch{
    min-width: 55px !important;
}
::v-deep .zxm-switch-checked {
    background-color: rgba(8, 59, 90) !important;
}
::v-deep .zxm-switch-handle::before{
    background-color: rgba(33, 179, 247) !important;
}
</style>