少量更改

src/views/customerService/report/component/exportDialog.vue

@@ -1,13 +1,20 @@
 <template>
-	<el-dialog title="是否导出产品" v-model="isShowDialog" width="400px">
-		<div style="text-align: center; padding: 20px 0">
-			<p style="margin-bottom: 20px; font-size: 14px; color: #606266">确定要导数据吗？</p>
+	<el-dialog title="导出产品数据" v-model="isShowDialog" width="450px" align-center>
+		<div class="export-content">
+			<div class="export-icon">
+				<el-icon class="icon-download"><Download /></el-icon>
+			</div>
+			<p class="export-text">确定要导出产品数据吗？</p>
+			<p class="export-tip">导出的文件将包含所有产品信息</p>
 		</div>
 		<template #footer>
-			<span class="dialog-footer">
+			<div class="dialog-footer">
 				<el-button @click="isShowDialog = false">取消</el-button>
-				<el-button type="primary" @click="handleExport" :loading="loading">导出</el-button>
-			</span>
+				<el-button type="primary" @click="handleExport" :loading="loading">
+					<el-icon><Download /></el-icon>
+					导出
+				</el-button>
+			</div>
 		</template>
 	</el-dialog>
 </template>
@@ -15,6 +22,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
+import { Download } from '@element-plus/icons-vue';
 import { exportProduct } from '/@/api/customerService/report';
 
 const isShowDialog = ref(false);
@@ -97,3 +105,39 @@ defineExpose({
 	openDialog,
 });
 </script>
+
+<style lang="scss" scoped>
+.export-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px 0;
+
+	.export-icon {
+		margin-bottom: 16px;
+		.icon-download {
+			font-size: 48px;
+			color: #409eff;
+		}
+	}
+
+	.export-text {
+		margin: 0 0 12px 0;
+		font-size: 16px;
+		font-weight: 500;
+		color: #303133;
+	}
+
+	.export-tip {
+		margin: 0;
+		font-size: 13px;
+		color: #909399;
+	}
+}
+
+.dialog-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+</style>