<template>
|
<div class="top-qna" @mouseenter="disableTooltip" @mouseleave="enableTooltip">
|
<el-tooltip :disabled="tooltipDisabled" content="帮助中心" placement="bottom">
|
<el-icon @click="showHelp" class="help-icon">
|
<QuestionFilled />
|
</el-icon>
|
</el-tooltip>
|
<el-dialog v-model="dialogVisible" title="帮助中心" width="30%" @close="closeDialog">
|
<div class="dialog-content">
|
<div class="qa-item">
|
<span class="qa-title">Q1：智飞机场 2 支持哪些无人机？</span>
|
<span class="qa-text">
|
A1：智飞机场 2 仅支持 DJI Matrice 3D 系列无人机。
|
</span>
|
</div>
|
<div class="qa-item">
|
<span class="qa-title">Q2：智飞机场 2 如何应对意外断电？</span>
|
<span class="qa-text">
|
A2：若发生意外断电，机场仍可借助内置蓄电池独立工作超 5 小时，为飞行器预留充足的返航降落时间。
|
断电后，机场不支持飞行器充电、空调、舱盖加热、风速计加热等功能，请及时排查故障。
|
</span>
|
</div>
|
<div class="qa-item">
|
<span class="qa-title">Q3：智飞机场 2 和第一代智飞机场有什么区别？</span>
|
<span class="qa-text">
|
A3：相对于第一代智飞机场，智飞机场 2 在体积、重量上大幅下降，不仅轻量化、易部署，
|
且具备更强大的作业能力和云端智能功能，大幅降低了无人值守作业门槛，作业效率和质量也上升至全新高度。
|
</span>
|
</div>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="closeDialog">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'top-qna',
|
data() {
|
return {
|
dialogVisible: false, // 确保初始值为 false
|
tooltipDisabled: false, // 控制 tooltip 是否显示
|
};
|
},
|
methods: {
|
showHelp() {
|
this.dialogVisible = true;
|
},
|
closeDialog() {
|
this.dialogVisible = false;
|
},
|
disableTooltip() {
|
this.tooltipDisabled = true; // 禁用 tooltip
|
},
|
enableTooltip() {
|
this.tooltipDisabled = false; // 启用 tooltip
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.top-qna {
|
display: inline-block !important;
|
padding: 5px;
|
|
.help-icon {
|
font-size: 20px !important;
|
cursor: pointer;
|
color: #FFFFFF; /* 白色 */
|
display: inline-block !important;
|
line-height: 1 !important;
|
}
|
}
|
|
/* 优化弹出框样式 */
|
:deep(.el-dialog) {
|
border-radius: 8px; /* 圆角边框 */
|
overflow: visible; /* 防止内容溢出 */
|
.el-dialog__header {
|
padding: 15px 20px;
|
border-bottom: 1px solid #e8e8e8; /* 标题下边框 */
|
.el-dialog__title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
}
|
}
|
.el-dialog__body {
|
padding: 20px;
|
max-height: none; /* 取消高度限制 */
|
overflow: visible; /* 取消滚动条 */
|
word-wrap: break-word; /* 自动换行 */
|
word-break: break-word; /* 防止长单词溢出 */
|
white-space: normal; /* 确保文字自动换行 */
|
}
|
.el-dialog__footer {
|
padding: 10px 20px;
|
border-top: 1px solid #e8e8e8; /* 底部上边框 */
|
text-align: right;
|
}
|
}
|
|
/* 优化内容样式 */
|
.dialog-content {
|
.qa-item {
|
margin-bottom: 15px;
|
padding: 10px;
|
border: 1px solid #e8e8e8; /* 边框 */
|
border-radius: 4px; /* 圆角 */
|
background-color: #f9f9f9; /* 背景色 */
|
.qa-title {
|
font-size: 14px;
|
font-weight: bold;
|
color: #333;
|
display: block; /* 确保换行 */
|
margin-bottom: 5px;
|
}
|
.qa-text {
|
font-size: 14px;
|
color: #666;
|
line-height: 1.6; /* 行间距 */
|
display: block; /* 确保换行 */
|
}
|
}
|
}
|
</style>
|
