<!-- 项目详情-整改记录 -->
<template>
    <view class="MainBox">
        <u-virtual-list :list-data="dataSource" :item-height="260" height="100%">
            <template #default="{ item }">
                <view class="CardBox">
                    <view class="fw-600">{{ item.name }}</view>
                    <view class="FlexBox">
                        <view class="LableBox">整改内容：</view>
                        <view class="TxtBox">{{ item.details }}</view>
                    </view>
                    <view class="FlexBox">
                        <view class="imgBox" v-for="(img, index) in item.imgUrl" :key="index">
                            <image :src="img" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="FlexBox">
                        <view>审核意见：</view>
                        <view>{{ item.details }}</view>
                    </view>
                    <view class="fb-gray">{{ item.time }}</view>
                </view>
            </template>

        </u-virtual-list>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const dataSource = ref([
    {
        id: 1,
        name: '消防器械摆放不当',
        time: '2023-08-01 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg', 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
    },
    {
        id: 2,
        name: '项目风险管控类型',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
    },
    {
        id: 3,
        name: '项目风险管控类型',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
    },
])
</script>
<style lang="scss" scoped>
.FlexBox {
    display: flex;
    // align-items: flex-start;
    gap: 20rpx;
}

.fb-gray {
    color: #999;
}

.fw-600 {
    font-weight: bold;
    color: #333;
}



.MainBox {
    height: 100%;
    overflow: hidden;
    padding: 20rpx;
    background-color: #fff;
    padding: 20rpx;


    .CardBox {
        width: 100%;
        height: 380rpx;
        background-color: #fff;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        border: 1rpx solid #c7c7c7;
        // box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
        border-radius: 10rpx;
        gap: 20rpx;

        .LableBox {
            width: 160rpx;
            font-size: 24rpx;
            color: #666;
        }

        .TxtBox {
            width: calc(100% - 160rpx);
            font-size: 24rpx;
            color: #333;
            font-weight: bold;

            overflow: hidden;
            /* 隐藏溢出内容 */
            white-space: nowrap;
            /* 强制不换行 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .imgBox {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>