609 lines
20 KiB
Vue
609 lines
20 KiB
Vue
<template>
|
||
<el-dialog
|
||
:model-value="visible"
|
||
title="反馈详情"
|
||
width="70%"
|
||
:before-close="handleClose"
|
||
class="feedback-detail-dialog"
|
||
top="5vh"
|
||
>
|
||
<template #header>
|
||
<div class="dialog-header">
|
||
<span class="el-dialog__title">反馈详情</span>
|
||
<el-button
|
||
type="primary"
|
||
:icon="Refresh"
|
||
circle
|
||
@click="handleRefresh"
|
||
:loading="loading"
|
||
title="刷新数据"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<div v-if="loading" v-loading="loading" class="loading-container"></div>
|
||
<div v-if="!loading && currentFeedback" class="detail-container">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="ID">{{ currentFeedback.id }}</el-descriptions-item>
|
||
<el-descriptions-item label="事件编号">{{ currentFeedback.eventId || '无' }}</el-descriptions-item>
|
||
<el-descriptions-item label="标题" :span="2">{{ currentFeedback.title }}</el-descriptions-item>
|
||
<el-descriptions-item label="污染类型">{{ formatPollutionType(currentFeedback.pollutionType) }}</el-descriptions-item>
|
||
<el-descriptions-item label="严重程度">
|
||
<el-tag :type="getSeverityTagType(currentFeedback.severityLevel)">
|
||
{{ formatSeverityLevel(currentFeedback.severityLevel) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="状态">
|
||
<el-tag :type="getStatusTagType(currentFeedback.status)">
|
||
{{ formatStatus(currentFeedback.status) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="提交时间">{{ formatDate(currentFeedback.createdAt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="更新时间">{{ formatDate(currentFeedback.updatedAt) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-descriptions :column="1" border class="mt-4">
|
||
<el-descriptions-item label="详细描述">
|
||
<div class="description-content">{{ currentFeedback.description }}</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="提交位置" v-if="currentFeedback.latitude && currentFeedback.longitude">
|
||
{{ currentFeedback.textAddress || `经纬度: (${currentFeedback.longitude}, ${currentFeedback.latitude})` }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="报告人信息" v-if="currentFeedback.user">
|
||
{{ currentFeedback.user.name }}
|
||
<el-tag size="small" style="margin-left: 8px;">{{ formatRole(currentFeedback.user.role) }}</el-tag>
|
||
<div class="mt-1">ID: {{ currentFeedback.user.id }}, 电话: {{ currentFeedback.reporterPhone || '未提供' }}</div>
|
||
<div class="user-note mt-1" v-if="currentFeedback.user.role === 'GRID_WORKER'">
|
||
<el-alert
|
||
type="warning"
|
||
:closable="false"
|
||
show-icon
|
||
title="注意：通常反馈应由公众监督员提交，此处显示为网格员可能是测试数据"
|
||
/>
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div class="task-details mt-4" v-if="currentFeedback.task">
|
||
<h4>任务详情</h4>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="任务ID">{{ currentFeedback.task.id }}</el-descriptions-item>
|
||
<el-descriptions-item label="任务状态">
|
||
<el-tag :type="getStatusTagType(currentFeedback.task.status)">
|
||
{{ formatStatus(currentFeedback.task.status) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="处理人" v-if="currentFeedback.task.assignee">
|
||
{{ currentFeedback.task.assignee.name }} (ID: {{ currentFeedback.task.assignee.id }})
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="处理人电话" v-if="currentFeedback.task.assignee">
|
||
{{ currentFeedback.task.assignee.phone || '未提供' }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="网格坐标" :span="2" v-if="currentFeedback.task.gridX !== null && currentFeedback.task.gridY !== null">
|
||
X: {{ currentFeedback.task.gridX }}, Y: {{ currentFeedback.task.gridY }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="分配时间" v-if="currentFeedback.task.assignment?.assignmentTime">
|
||
{{ formatDate(currentFeedback.task.assignment.assignmentTime) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="分配说明" v-if="currentFeedback.task.assignment?.remarks">
|
||
{{ currentFeedback.task.assignment.remarks }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<!-- 任务提交详情 -->
|
||
<div class="submission-details mt-4" v-if="currentFeedback.task && currentFeedback.task.submissionInfo">
|
||
<h4>任务提交详情</h4>
|
||
<el-descriptions :column="1" border>
|
||
<el-descriptions-item label="提交说明">
|
||
{{ currentFeedback.task.submissionInfo.comments }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="提交附件" v-if="currentFeedback.task.submissionInfo.attachments && currentFeedback.task.submissionInfo.attachments.length > 0">
|
||
<div v-for="att in currentFeedback.task.submissionInfo.attachments" :key="att.id">
|
||
<el-link :href="att.url" type="primary" target="_blank" :icon="Document">{{ att.fileName }}</el-link>
|
||
</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="无附件" v-else>
|
||
未提交任何附件
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<div class="image-gallery mt-4" v-if="currentFeedback.attachments && currentFeedback.attachments.length > 0">
|
||
<h4>相关图片</h4>
|
||
<el-image
|
||
v-for="att in currentFeedback.attachments"
|
||
:key="att.id"
|
||
:src="att.url"
|
||
:preview-src-list="currentFeedback.attachments.map(a => a.url)"
|
||
:initial-index="currentFeedback.attachments.findIndex(a => a.id === att.id)"
|
||
fit="cover"
|
||
class="feedback-image"
|
||
lazy
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-if="!loading && !currentFeedback" class="empty-state">
|
||
<el-empty description="无法加载反馈详情" />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleClose">关闭</el-button>
|
||
<!-- 任务审批按钮 -->
|
||
<template v-if="currentFeedback?.task?.status === 'SUBMITTED' && canManageSubmittedTask">
|
||
<el-button type="success" @click="handleApprove" :loading="approving">批准通过</el-button>
|
||
<el-button type="danger" @click="handleRejectTask" :loading="rejecting">打回任务</el-button>
|
||
</template>
|
||
<!-- 根据状态条件性显示操作按钮 -->
|
||
<el-button type="primary" @click="handleProcess" v-if="canProcess">处理</el-button>
|
||
<el-button type="success" @click="handleAssign" v-if="canAssign">分配任务</el-button>
|
||
<el-button type="warning" @click="handleRejectFeedback" v-if="canReject">拒绝反馈</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 分配任务对话框 -->
|
||
<el-dialog
|
||
v-model="assignDialogVisible"
|
||
title="分配任务"
|
||
width="30%"
|
||
:before-close="() => assignDialogVisible = false"
|
||
>
|
||
<div v-if="loadingGridWorkers">正在加载网格员...</div>
|
||
<el-select
|
||
v-else
|
||
v-model="selectedGridWorkerId"
|
||
placeholder="请选择网格员"
|
||
style="width: 100%;"
|
||
>
|
||
<el-option
|
||
v-for="worker in gridWorkers"
|
||
:key="worker.id"
|
||
:label="`${worker.name} (ID: ${worker.id})${worker.phone ? ' - ' + worker.phone : ''}`"
|
||
:value="worker.id"
|
||
/>
|
||
</el-select>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="assignDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirmAssign" :disabled="!selectedGridWorkerId">
|
||
确认分配
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, computed, onMounted, h } from 'vue';
|
||
import { useFeedbackStore } from '@/store/feedback';
|
||
import { storeToRefs } from 'pinia';
|
||
import { ElMessage, ElMessageBox, ElSelect, ElOption } from 'element-plus';
|
||
import { FeedbackStatus, PollutionType, SeverityLevel, processFeedback, assignFeedback, rejectFeedback, resolveFeedback } from '@/api/feedback';
|
||
import { approveTask, rejectTask } from '@/api/tasks';
|
||
import type { UserAccount } from '@/api/types';
|
||
import apiClient from '@/api/index';
|
||
import { Document, Refresh } from '@element-plus/icons-vue';
|
||
import { useAuthStore } from '@/stores/auth';
|
||
|
||
const props = defineProps<{
|
||
visible: boolean;
|
||
feedbackId: number | null;
|
||
}>();
|
||
|
||
const emit = defineEmits(['close', 'refresh']);
|
||
|
||
const feedbackStore = useFeedbackStore();
|
||
const { currentFeedbackDetail: currentFeedback, detailLoading: loading } = storeToRefs(feedbackStore);
|
||
const authStore = useAuthStore();
|
||
const currentUser = computed(() => authStore.user);
|
||
|
||
const approving = ref(false);
|
||
const rejecting = ref(false);
|
||
|
||
// 添加网格员列表状态
|
||
const gridWorkers = ref<UserAccount[]>([]);
|
||
const loadingGridWorkers = ref(false);
|
||
const selectedGridWorkerId = ref<number | null>(null);
|
||
const assignDialogVisible = ref(false);
|
||
|
||
const handleRefresh = () => {
|
||
if (props.feedbackId) {
|
||
feedbackStore.fetchFeedbackDetail(props.feedbackId);
|
||
}
|
||
};
|
||
|
||
// 加载网格员列表
|
||
const loadGridWorkers = async () => {
|
||
loadingGridWorkers.value = true;
|
||
try {
|
||
// 直接调用API
|
||
const response = await apiClient.get('/tasks/grid-workers');
|
||
// 根据apiClient的拦截器，response已经是处理过的数据了
|
||
gridWorkers.value = response as unknown as UserAccount[];
|
||
console.log('成功获取到网格员列表:', gridWorkers.value);
|
||
if (gridWorkers.value.length === 0) {
|
||
ElMessage.info('当前没有可用的网格员。');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载网格员列表失败:', error);
|
||
ElMessage.error('加载网格员列表失败，请检查后端服务是否正常。');
|
||
gridWorkers.value = []; // 失败时清空数组
|
||
} finally {
|
||
loadingGridWorkers.value = false;
|
||
}
|
||
};
|
||
|
||
// 获取模拟网格员数据
|
||
const getMockGridWorkers = (): UserAccount[] => {
|
||
return [
|
||
{
|
||
id: 1,
|
||
name: '张三',
|
||
email: 'zhangsan@example.com',
|
||
phone: '13800000001',
|
||
role: 'GRID_WORKER',
|
||
status: 'ACTIVE',
|
||
gender: 'MALE',
|
||
region: '北京市朝阳区',
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString(),
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '李四',
|
||
email: 'lisi@example.com',
|
||
phone: '13800000002',
|
||
role: 'GRID_WORKER',
|
||
status: 'ACTIVE',
|
||
gender: 'FEMALE',
|
||
region: '北京市海淀区',
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString(),
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '王五',
|
||
email: 'wangwu@example.com',
|
||
phone: '13800000003',
|
||
role: 'GRID_WORKER',
|
||
status: 'ACTIVE',
|
||
gender: 'MALE',
|
||
region: '北京市西城区',
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString(),
|
||
}
|
||
];
|
||
};
|
||
|
||
// 在对话框显示时加载网格员列表
|
||
watch(
|
||
() => props.visible,
|
||
(newVisible) => {
|
||
if (newVisible && canAssign.value) {
|
||
// 移除这里的加载，改为在点击分配按钮时加载
|
||
}
|
||
}
|
||
);
|
||
|
||
// --- Computed Properties for Action Buttons ---
|
||
|
||
const canManageSubmittedTask = computed(() => {
|
||
// Per user requirements, only ADMINs can manage tasks submitted by Grid Workers.
|
||
return authStore.user?.role === 'ADMIN';
|
||
});
|
||
|
||
const isActionableBySupervisor = computed(() => {
|
||
// This property now simply checks if the user has the authority to perform
|
||
// pre-assignment actions like processing or rejecting feedback.
|
||
if (!authStore.user) return false;
|
||
const viewerRole = authStore.user.role;
|
||
return viewerRole === 'ADMIN' || viewerRole === 'SUPERVISOR';
|
||
});
|
||
|
||
const canProcess = computed(() => {
|
||
if (!currentFeedback.value || !isActionableBySupervisor.value) return false;
|
||
const processableStatus = [
|
||
FeedbackStatus.AI_REVIEWING,
|
||
FeedbackStatus.PENDING_REVIEW,
|
||
FeedbackStatus.CONFIRMED,
|
||
];
|
||
return processableStatus.includes(currentFeedback.value.status);
|
||
});
|
||
|
||
const canAssign = computed(() => {
|
||
if (!currentFeedback.value || !authStore.user) return false;
|
||
|
||
const viewerRole = authStore.user.role;
|
||
const isEligibleRole = viewerRole === 'ADMIN' || viewerRole === 'SUPERVISOR';
|
||
if (!isEligibleRole) {
|
||
return false;
|
||
}
|
||
|
||
// As per user feedback, supervisors and admins should be able to assign tasks.
|
||
// The button should appear when the feedback is ready for assignment.
|
||
// Based on the 'handleProcess' function, this status is PENDING_ASSIGNMENT.
|
||
return currentFeedback.value.status === 'PENDING_ASSIGNMENT';
|
||
});
|
||
|
||
const canReject = computed(() => {
|
||
if (!currentFeedback.value || !isActionableBySupervisor.value) return false;
|
||
const rejectableStatus = [
|
||
FeedbackStatus.AI_REVIEWING,
|
||
FeedbackStatus.PENDING_REVIEW,
|
||
];
|
||
return rejectableStatus.includes(currentFeedback.value.status);
|
||
});
|
||
|
||
// 格式化显示内容的辅助函数
|
||
const formatPollutionType = (type: string) => {
|
||
const map: Record<string, string> = {
|
||
'PM25': 'PM2.5',
|
||
'O3': '臭氧',
|
||
'NO2': '二氧化氮',
|
||
'SO2': '二氧化硫',
|
||
'OTHER': '其他'
|
||
};
|
||
return map[type] || type;
|
||
};
|
||
|
||
const formatSeverityLevel = (level: string) => {
|
||
const map: Record<string, string> = {
|
||
'LOW': '低',
|
||
'MEDIUM': '中',
|
||
'HIGH': '高'
|
||
};
|
||
return map[level] || level;
|
||
};
|
||
|
||
const formatStatus = (status: string) => {
|
||
const map: Record<string, string> = {
|
||
'AI_REVIEWING': 'AI审核中',
|
||
'PENDING_REVIEW': '待人工审核',
|
||
'REJECTED': '已拒绝',
|
||
'CONFIRMED': '已确认',
|
||
'ASSIGNED': '已分配',
|
||
'IN_PROGRESS': '处理中',
|
||
'RESOLVED': '已处理',
|
||
'CLOSED': '已关闭',
|
||
'PENDING_ASSIGNMENT': '待分配',
|
||
'PROCESSED': '已处理',
|
||
'COMPLETED': '已处理',
|
||
'SUBMITTED': '已提交'
|
||
};
|
||
return map[status] || status;
|
||
};
|
||
|
||
const getSeverityTagType = (level: string) => {
|
||
const map: Record<string, 'info' | 'warning' | 'danger'> = {
|
||
'LOW': 'info',
|
||
'MEDIUM': 'warning',
|
||
'HIGH': 'danger'
|
||
};
|
||
return map[level] || 'info';
|
||
};
|
||
|
||
const getStatusTagType = (status: string) => {
|
||
const map: Record<string, 'info' | 'warning' | 'danger' | 'primary' | 'success'> = {
|
||
'AI_REVIEWING': 'info',
|
||
'PENDING_REVIEW': 'warning',
|
||
'REJECTED': 'danger',
|
||
'CONFIRMED': 'primary',
|
||
'ASSIGNED': 'primary',
|
||
'IN_PROGRESS': 'warning',
|
||
'RESOLVED': 'success',
|
||
'CLOSED': 'info',
|
||
'PENDING_ASSIGNMENT': 'warning',
|
||
'PROCESSED': 'success',
|
||
'COMPLETED': 'success',
|
||
'SUBMITTED': 'info'
|
||
};
|
||
return map[status] || 'info';
|
||
};
|
||
|
||
const getFeedbackDisplayStatus = (feedback: any): string => {
|
||
if (!feedback) return '未知状态';
|
||
if (feedback.task && feedback.task.status === 'COMPLETED') {
|
||
return '已处理';
|
||
}
|
||
return formatStatus(feedback.status);
|
||
};
|
||
|
||
const getFeedbackDisplayTagType = (feedback: any): 'info' | 'warning' | 'danger' | 'primary' | 'success' => {
|
||
if (!feedback) return 'info';
|
||
if (feedback.task && feedback.task.status === 'COMPLETED') {
|
||
return 'success';
|
||
}
|
||
return getStatusTagType(feedback.status);
|
||
};
|
||
|
||
const formatDate = (dateStr: string) => {
|
||
try {
|
||
return new Date(dateStr).toLocaleString();
|
||
} catch (e) {
|
||
return dateStr;
|
||
}
|
||
};
|
||
|
||
const formatRole = (role?: string) => {
|
||
const map: Record<string, string> = {
|
||
'ADMIN': '管理员',
|
||
'DECISION_MAKER': '决策人',
|
||
'SUPERVISOR': '监督员',
|
||
'GRID_WORKER': '网格员',
|
||
'PUBLIC_SUPERVISOR': '公众监督员'
|
||
};
|
||
if (!role) return '未知';
|
||
return map[role] || role;
|
||
};
|
||
|
||
watch(
|
||
() => props.feedbackId,
|
||
(newId) => {
|
||
if (newId && props.visible) {
|
||
feedbackStore.fetchFeedbackDetail(newId);
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
const handleClose = () => {
|
||
// 清空选中的网格员
|
||
selectedGridWorkerId.value = null;
|
||
emit('close');
|
||
};
|
||
|
||
const handleProcess = async () => {
|
||
if (!currentFeedback.value) return;
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'此操作将批准反馈并创建一个待分配的任务。',
|
||
'确认处理反馈',
|
||
{
|
||
confirmButtonText: '继续',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
}
|
||
);
|
||
await processFeedback(currentFeedback.value.id, {
|
||
status: FeedbackStatus.PENDING_ASSIGNMENT,
|
||
notes: '管理员已批准该反馈，准备分配任务。'
|
||
});
|
||
ElMessage.success('反馈已批准，进入待分配状态');
|
||
emit('refresh');
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
ElMessage.error('处理反馈失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleAssign = () => {
|
||
if (!currentFeedback.value) return;
|
||
loadGridWorkers();
|
||
assignDialogVisible.value = true;
|
||
};
|
||
|
||
const confirmAssign = async () => {
|
||
if (!currentFeedback.value || !selectedGridWorkerId.value) {
|
||
ElMessage.warning('请选择一个网格员');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await apiClient.post('/tasks/assign', {
|
||
feedbackId: currentFeedback.value.id,
|
||
assigneeId: selectedGridWorkerId.value
|
||
});
|
||
|
||
ElMessage.success('分配成功');
|
||
assignDialogVisible.value = false;
|
||
emit('refresh');
|
||
handleClose();
|
||
} catch (apiError) {
|
||
console.error('API分配失败:', apiError);
|
||
ElMessage.error('分配失败，请稍后重试');
|
||
}
|
||
};
|
||
|
||
const handleRejectTask = async () => {
|
||
const taskId = currentFeedback.value?.task?.id;
|
||
if (!taskId) {
|
||
ElMessage.error('无法获取任务ID，操作取消');
|
||
return;
|
||
}
|
||
|
||
ElMessageBox.prompt('请输入打回任务的理由：', '打回任务', {
|
||
confirmButtonText: '确认打回',
|
||
cancelButtonText: '取消',
|
||
inputPattern: /.+/,
|
||
inputErrorMessage: '理由不能为空',
|
||
})
|
||
.then(async ({ value }) => {
|
||
rejecting.value = true;
|
||
try {
|
||
await rejectTask(taskId, value);
|
||
ElMessage.success('任务已打回');
|
||
emit('refresh');
|
||
handleClose();
|
||
} catch (error) {
|
||
console.error('打回任务失败:', error);
|
||
ElMessage.error('操作失败，请重试');
|
||
} finally {
|
||
rejecting.value = false;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
ElMessage.info('已取消操作');
|
||
});
|
||
};
|
||
|
||
const handleApprove = async () => {
|
||
if (!currentFeedback.value?.task) return;
|
||
approving.value = true;
|
||
try {
|
||
await approveTask(currentFeedback.value.task.id);
|
||
ElMessage.success('任务已批准');
|
||
emit('refresh');
|
||
} catch (error) {
|
||
ElMessage.error('批准任务失败');
|
||
} finally {
|
||
approving.value = false;
|
||
}
|
||
};
|
||
|
||
const handleRejectFeedback = async () => {
|
||
if (!currentFeedback.value) return;
|
||
if (props.feedbackId) {
|
||
ElMessageBox.prompt('请输入拒绝此反馈的理由：', '拒绝反馈', {
|
||
confirmButtonText: '确认拒绝',
|
||
cancelButtonText: '取消',
|
||
})
|
||
.then(async ({ value }) => {
|
||
try {
|
||
await rejectFeedback(props.feedbackId!, { notes: value || '无明确理由' });
|
||
ElMessage.success('反馈已拒绝');
|
||
emit('refresh');
|
||
handleClose();
|
||
} catch (error) {
|
||
console.error('拒绝反馈失败:', error);
|
||
ElMessage.error('操作失败');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
ElMessage.info('已取消拒绝操作');
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.feedback-detail-dialog .loading-container {
|
||
height: 300px;
|
||
}
|
||
.detail-container {
|
||
max-height: 75vh;
|
||
overflow-y: auto;
|
||
}
|
||
.mt-4 {
|
||
margin-top: 1.5rem;
|
||
}
|
||
.mt-1 {
|
||
margin-top: 0.25rem;
|
||
}
|
||
.description-content {
|
||
white-space: pre-wrap;
|
||
}
|
||
.image-gallery {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.feedback-image {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|