gypsy-crm-frontend-vu/components/cwg-image.vue

<template>
    <image :src="props.src" mode="widthFix" class="preview-image" @click="handlePreviewImage" />
</template>

<script setup>
const props = defineProps({
    // 文件路径
    src: {
        type: String,
        default: ''
    },
})
// 预览图片
const handlePreviewImage = () => {
    if (!props.src) return

    uni.previewImage({
        urls: [props.src],
        current: 0
    })
}
</script>

<style scoped lang="scss">
.pdf-link {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
    padding: px2rpx(4) px2rpx(8);
    background-color: #fff1f0;
    border-radius: px2rpx(4);
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        background-color: #ffe7e6;
    }

    .pdf-text {
        color: #ff0000;
        font-size: px2rpx(14);
        max-width: px2rpx(200);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.image-preview {
    .preview-image {
        width: px2rpx(60);
        height: px2rpx(60);
        border-radius: px2rpx(4);
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.3s;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.file-info {
    display: flex;
    align-items: center;

    .file-name {
        color: var(--bs-heading-color);
        font-size: px2rpx(14);
        max-width: px2rpx(200);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>