5G-Loading-Bay-Web/src/views/dashboard/components/VehiclModal.vue

<template>
    <el-dialog class="vehiclModal-wrap" v-model="show" @close="handleClose">
        <!-- 自定义标题栏 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="flex items-center justify-between vehicl-dialog-header">
                <div class="flex items-center justify-center header-left">
                    <div class="header-icon mr-[12px]"></div>
                    <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">{{
                        "列车图片" }}</p>
                </div>
            </div>
        </template>
        <!-- 图片区域 -->
        <div class="vehicl-content">
            <div class="vehicl-content-top">
                <span class="vehicl-content-bottom-title">列车ID:</span>
                <div class="vehicl-content-top-img">
                    <div class="vehicl-content-top-img-box">
                        <img :src="info.arrive_img_url" alt=""></img>
                    </div>
                    <div class="vehicl-content-top-img-box">
                        <img :src="info.leave_img_url" alt=""></img>
                    </div>
                </div>
            </div>
            <div class="vehicl-content-bottom">
                <span class="vehicl-content-bottom-title">列车与车厢号</span>
                <div class="vehicl-content-bottom-vehicl">
                    <div class="vehicl-content-bottom-vehicl-header"></div>
                    <div :class="['vehicl-content-bottom-vehicl-body-box', { 'high-height': info?.data?.train_data?.length > 15 }]">
                        <div class="vehicl-content-bottom-vehicl-body" v-for="(item, index) in info?.data?.train_data" :key="index">
                            <div>{{ item.model }}</div>
                            <div>
                                <!-- <span class="mr-3">04</span> -->
                                <span>{{ item.carriage_number }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
    /** 弹窗显隐 */
    value: boolean;
    info: Record<string, any>;
    image: any;
}
interface Emits {
    (e: "update:value", val: boolean): void;
}
const props = withDefaults(defineProps<Props>(), {
    value: false,
    info: {},
    image: []
});

const emit = defineEmits<Emits>();

// 处理对话框关闭事件
const handleClose = () => {
    // emits('close');
};

const show = computed({
    get() {
        return props.value;
    },
    set(val: boolean) {
        emit("update:value", val);
    }
});

// 动态设置循环的数量
const itemCount = 16; // 这里可以根据实际需求动态设置
</script>

<style lang="scss">
.vehiclModal-wrap.el-dialog {
    border: none;
    overflow: hidden;
    box-shadow: none;
    background-color: transparent;
    background-image: url("@/assets/common/bg_real_dialog.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 1200px;
    height: 630px;
    padding: 0;

    .el-dialog__header.show-close {
        padding: 0;
    }

    .el-dialog__close {
        width: 56px;
        height: 56px;
        color: white;
        font-size: 18px;
        padding-top: 4px;
        padding-right: 20px;
    }

    .vehicl-dialog-header {
        color: white;
        padding: 0;
        padding-top: 8px;
        margin-bottom: 20px;
        .header-left {
            padding: 0 24px;
            font-weight: bold;
            font-size: 18px;

            .header-icon {
                margin-top: 4px;
                width: 24px;
                height: 48px;
                background-image: url("@/assets/common/alarm_title.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
        }
    }

    .vehicl-content {
        box-sizing: border-box;
        padding: 0 24px;
        width: 100%;
        height: 100%;
        .vehicl-content-top {
            box-sizing: border-box;
           
            width: 100%;
            height: 378px;
            .vehicl-content-top-img {
                box-sizing: border-box;
                padding-top: 16px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between; /* 水平方向均匀分布间距 */
                align-content: space-between; /* 垂直方向均匀分布间距 */

            }
            img {
                width: 568px;
                height: 334px;
            }
        }
        .vehicl-content-bottom {
            box-sizing: border-box;
            margin-top: 12px;
            .vehicl-content-bottom-vehicl {
                box-sizing: border-box;
                padding-top: 16px;
                display: flex;
                // align-items: flex-end;
                width: 100%;
                height: 98px;
                .vehicl-content-bottom-vehicl-header {
                    margin-right: 8px;
                    width: 82px;
                    height: 82px;
                    background-image: url("@/assets/common/vehicl_header.png");
                    background-size: 100% 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .vehicl-content-bottom-vehicl-body-box,
                .high-height {
                    box-sizing: border-box;
                    width: 100%;
                    display: flex;
                    align-items: flex-end;
                    overflow-x: auto; /* 开启横向滚动 */
                    white-space: nowrap; /* 防止车厢内容换行 */
                    // background-color: #003366; /* 设置与背景相近颜色，这里假设深蓝色背景 */
                    padding: 0; /* 去除默认内边距 */
                    margin: 0; /* 去除默认外边距 */
                    /* 自定义滚动条样式 */
                    &::-webkit-scrollbar {
                        height: 8px; /* 滚动条高度 */
                        background-color: transparent;
                    }
                    &::-webkit-scrollbar-thumb {
                        background-color: #003366; /* 滚动条滑块颜色 */
                        border-radius: 4px; /* 滑块圆角 */
                    }
                    .vehicl-content-bottom-vehicl-body {
                        box-sizing: border-box;
                        margin-right: 8px;
                        padding: 12px 8px;
                        width: 80px;
                        height: 66px;
                        background-image: url("@/assets/common/vehicl_body.png");
                        background-size: 100% 100%;
                        background-position: center;
                        background-repeat: no-repeat;
                        font-weight: 500;
                        font-size: 12px;
                        color: #154DDD;
                    }
                }
                .high-height {
                    height: 90px;
                }
            }
        }
        .vehicl-content-bottom-title {
            width: 100%;
            box-sizing: border-box;
            padding-left: 8px;
            height: 22px;
            font-weight: bold;
            font-size: 14px;
            color: #FFFFFF;
            border-left: 3px solid #46A9ED;
            line-height: 22px;
            
        }
    }

}
</style>