feat:ai伴学的未报名已报名完善央视修改,投诉功能完善,ai助手bug修改,
This commit is contained in:
parent
8e146666f7
commit
b3ed88602f
@ -126,8 +126,8 @@
|
|||||||
|
|
||||||
<!-- 课程描述 -->
|
<!-- 课程描述 -->
|
||||||
<div class="course-description">
|
<div class="course-description">
|
||||||
<div>本课程中的部分图片、音频和视频素材来源于网络,仅供教学使用。如有问题,请点击 <span>这里</span> 反馈</div>
|
<div>本课程中的部分图片、音频和视频素材来源于网络,仅供教学使用。如有问题,请点击 <span @click="openComplaintModal('feedback')">这里</span> 反馈</div>
|
||||||
<span>稿件投诉</span>
|
<span @click="openComplaintModal('complaint')">稿件投诉</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -696,10 +696,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ai-assistant-interface">
|
<div class="ai-assistant-interface">
|
||||||
<div class="banner-button">
|
<!-- <div class="banner-button">
|
||||||
<img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
|
<img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
|
||||||
<span class="button-text">普通</span>
|
<span class="button-text">普通</span>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
<!-- AI主要内容区域 -->
|
<!-- AI主要内容区域 -->
|
||||||
@ -966,6 +966,59 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 投诉/反馈弹窗 -->
|
||||||
|
<n-modal v-model:show="complaintModalVisible" style="width: 600px;">
|
||||||
|
<div class="complaint-modal">
|
||||||
|
<!-- 自定义标题 -->
|
||||||
|
<div class="complaint-modal-header">
|
||||||
|
<div class="complaint-modal-title">投诉/反馈</div>
|
||||||
|
<div class="complaint-modal-divider"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="complaint-modal-content">
|
||||||
|
<!-- 投诉内容 -->
|
||||||
|
<div class="complaint-section">
|
||||||
|
<div class="complaint-label">投诉内容:</div>
|
||||||
|
<div class="complaint-input-wrapper">
|
||||||
|
<n-input
|
||||||
|
v-model:value="complaintContent"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入您想要投诉或反馈的内容"
|
||||||
|
:rows="8"
|
||||||
|
:maxlength="500"
|
||||||
|
show-count
|
||||||
|
class="complaint-textarea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上传图片 -->
|
||||||
|
<div class="upload-section">
|
||||||
|
<div class="upload-label">上传图片:</div>
|
||||||
|
<div class="upload-wrapper">
|
||||||
|
<n-upload
|
||||||
|
v-model:file-list="uploadFileList"
|
||||||
|
:max="5"
|
||||||
|
list-type="image-card"
|
||||||
|
accept="image/*"
|
||||||
|
:custom-request="handleUpload"
|
||||||
|
>
|
||||||
|
<div class="upload-area">
|
||||||
|
<div class="upload-plus">+</div>
|
||||||
|
</div>
|
||||||
|
</n-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="modal-actions">
|
||||||
|
<n-button @click="cancelComplaint" class="cancel-btn">取消</n-button>
|
||||||
|
<n-button type="primary" @click="submitComplaint" class="submit-btn">提交</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -1935,6 +1988,63 @@ const notesList = ref([
|
|||||||
])
|
])
|
||||||
const editingNoteIndex = ref(-1)
|
const editingNoteIndex = ref(-1)
|
||||||
|
|
||||||
|
// 投诉/反馈弹窗相关状态
|
||||||
|
const complaintModalVisible = ref(false)
|
||||||
|
const complaintContent = ref('')
|
||||||
|
const complaintType = ref<'feedback' | 'complaint'>('feedback')
|
||||||
|
const uploadFileList = ref([])
|
||||||
|
|
||||||
|
// 打开投诉弹窗
|
||||||
|
const openComplaintModal = (type: 'feedback' | 'complaint') => {
|
||||||
|
complaintType.value = type
|
||||||
|
complaintModalVisible.value = true
|
||||||
|
complaintContent.value = ''
|
||||||
|
uploadFileList.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消投诉
|
||||||
|
const cancelComplaint = () => {
|
||||||
|
complaintModalVisible.value = false
|
||||||
|
complaintContent.value = ''
|
||||||
|
uploadFileList.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交投诉
|
||||||
|
const submitComplaint = async () => {
|
||||||
|
if (!complaintContent.value.trim()) {
|
||||||
|
message.warning('请输入投诉内容')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 这里可以调用API提交投诉
|
||||||
|
console.log('提交投诉:', {
|
||||||
|
type: complaintType.value,
|
||||||
|
content: complaintContent.value,
|
||||||
|
files: uploadFileList.value
|
||||||
|
})
|
||||||
|
|
||||||
|
message.success('提交成功,我们会尽快处理您的反馈')
|
||||||
|
complaintModalVisible.value = false
|
||||||
|
complaintContent.value = ''
|
||||||
|
uploadFileList.value = []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交投诉失败:', error)
|
||||||
|
message.error('提交失败,请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理文件上传
|
||||||
|
const handleUpload = ({ file, onFinish, onError }: any) => {
|
||||||
|
// 这里可以实现真实的文件上传逻辑
|
||||||
|
console.log('上传文件:', file)
|
||||||
|
|
||||||
|
// 模拟上传成功
|
||||||
|
setTimeout(() => {
|
||||||
|
onFinish()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
// 发送聊天消息
|
// 发送聊天消息
|
||||||
const sendMessage = () => {
|
const sendMessage = () => {
|
||||||
if (chatMessage.value.trim()) {
|
if (chatMessage.value.trim()) {
|
||||||
@ -2097,9 +2207,10 @@ onActivated(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
/* max-width: 1400px; */
|
max-width: none;
|
||||||
width: 100%;
|
margin: 0;
|
||||||
margin: 0 auto;
|
padding-left: 120px;
|
||||||
|
padding-right: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
@ -2126,7 +2237,7 @@ onActivated(() => {
|
|||||||
|
|
||||||
.course-content {
|
.course-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 32px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
@ -4109,7 +4220,8 @@ onActivated(() => {
|
|||||||
/* AI助手界面样式 */
|
/* AI助手界面样式 */
|
||||||
.ai-assistant-interface {
|
.ai-assistant-interface {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 360px;
|
width: 360px; /* 固定宽度,不再自适应 */
|
||||||
|
flex-shrink: 0; /* 防止收缩 */
|
||||||
/* background: white; */
|
/* background: white; */
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
@ -5023,10 +5135,29 @@ onActivated(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
|
/* 大屏幕 - 使用120px左右边距 */
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
padding-left: 120px;
|
||||||
|
padding-right: 120px;
|
||||||
|
max-width: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-content {
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1399px) and (min-width: 1200px) {
|
@media (max-width: 1399px) and (min-width: 1200px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-content {
|
||||||
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -5038,6 +5169,7 @@ onActivated(() => {
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
max-width: 992px;
|
max-width: 992px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-content {
|
.course-content {
|
||||||
@ -5054,6 +5186,7 @@ onActivated(() => {
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-content {
|
.course-content {
|
||||||
@ -5070,6 +5203,7 @@ onActivated(() => {
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
max-width: 576px;
|
max-width: 576px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-content {
|
.course-content {
|
||||||
@ -5091,6 +5225,7 @@ onActivated(() => {
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
max-width: 576px;
|
max-width: 576px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player.unregistered {
|
.video-player.unregistered {
|
||||||
@ -5355,6 +5490,8 @@ onActivated(() => {
|
|||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 480px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player.unregistered {
|
.video-player.unregistered {
|
||||||
@ -5413,6 +5550,8 @@ onActivated(() => {
|
|||||||
@media (max-width: 360px) {
|
@media (max-width: 360px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player.unregistered {
|
.video-player.unregistered {
|
||||||
@ -5599,7 +5738,7 @@ onActivated(() => {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 16px; /* 调整字体大小从12px到16px */
|
||||||
color: #666;
|
color: #666;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
@ -6189,4 +6328,167 @@ onActivated(() => {
|
|||||||
.no-comments {
|
.no-comments {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 投诉/反馈弹窗样式 */
|
||||||
|
.complaint-modal {
|
||||||
|
background: white;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-modal-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-modal-title {
|
||||||
|
width: 72px;
|
||||||
|
height: 22px;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-modal-divider {
|
||||||
|
width: 506px;
|
||||||
|
height: 1px;
|
||||||
|
background: #E6E6E6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-modal-content {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-section {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-input-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaint-textarea {
|
||||||
|
width: 428px;
|
||||||
|
height: 214px;
|
||||||
|
background: #F5F8FB;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-section {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: white;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 1px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area:hover {
|
||||||
|
border-color: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-plus {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-plus::before,
|
||||||
|
.upload-plus::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-plus::before {
|
||||||
|
width: 10px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-plus::after {
|
||||||
|
width: 1px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn:hover {
|
||||||
|
background: #e6f7ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover {
|
||||||
|
background: #40a9ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 课程描述中的可点击元素样式 */
|
||||||
|
.course-description span {
|
||||||
|
color: #1890ff;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-description span:hover {
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
x
Reference in New Issue
Block a user