This commit is contained in:
yuk255 2025-09-01 20:52:10 +08:00
commit 27f41332d4
7 changed files with 371 additions and 49 deletions

View File

@ -19,8 +19,8 @@ export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localho
export const API_ENDPOINTS = { export const API_ENDPOINTS = {
// 认证相关 // 认证相关
AUTH: { AUTH: {
LOGIN: '/biz/user/login', LOGIN: '/aiol/aiolUser/login',
USER_INFO: '/biz/user/info', USER_INFO: '/aiol/aiolUser/info',
REGISTER: '/auth/register', REGISTER: '/auth/register',
LOGOUT: '/auth/logout', LOGOUT: '/auth/logout',
REFRESH: '/auth/refresh', REFRESH: '/auth/refresh',
@ -36,12 +36,12 @@ export const API_ENDPOINTS = {
// 课程相关 // 课程相关
COURSES: { COURSES: {
LIST: '/biz/course/list', LIST: '/aiol/aiolCourse/query_list',
SEARCH: '/courses/search', SEARCH: '/courses/search',
POPULAR: '/courses/popular', POPULAR: '/courses/popular',
LATEST: '/courses/latest', LATEST: '/courses/latest',
RECOMMENDED: '/courses/recommended', RECOMMENDED: '/courses/recommended',
DETAIL: '/biz/course/detail', DETAIL: '/aiol/aiolCourse/detail',
CHAPTERS: '/courses/:id/chapters', CHAPTERS: '/courses/:id/chapters',
LESSONS: '/courses/:id/lessons', LESSONS: '/courses/:id/lessons',
ENROLL: '/courses/:id/enroll', ENROLL: '/courses/:id/enroll',
@ -54,18 +54,18 @@ export const API_ENDPOINTS = {
// 分类相关 // 分类相关
CATEGORIES: { CATEGORIES: {
LIST: '/biz/course/category/list', LIST: '/aiol/aiolCourse/category/list',
COURSES: '/categories/:id/courses', COURSES: '/categories/:id/courses',
}, },
// 专题相关 // 专题相关
SUBJECTS: { SUBJECTS: {
LIST: '/biz/course/subject/list', LIST: '/aiol/aiolCourse/subject/list',
}, },
// 难度相关 // 难度相关
DIFFICULTIES: { DIFFICULTIES: {
LIST: '/biz/course/difficulty/list', LIST: '/aiol/aiolCourse/difficulty/list',
}, },
// 章节课时相关 // 章节课时相关
@ -187,14 +187,14 @@ export const API_ENDPOINTS = {
// 考试题库相关 // 考试题库相关
EXAM: { EXAM: {
// 题库管理 // 题库管理
REPO_CREATE: '/biz/repo/courseAdd', REPO_CREATE: '/aiol/repo/courseAdd',
REPO_LIST: '/biz/repo/repoList', REPO_LIST: '/aiol/repo/repoList',
REPO_DELETE: '/gen/repo/repo/delete', REPO_DELETE: '/gen/repo/repo/delete',
REPO_EDIT: '/gen/repo/repo/edit', REPO_EDIT: '/gen/repo/repo/edit',
// 题目管理 // 题目管理
QUESTION_LIST: '/biz/repo/questionList/:repoId', QUESTION_LIST: '/aiol/repo/questionList/:repoId',
QUESTION_DETAIL: '/biz/repo/repoList/:questionId', QUESTION_DETAIL: '/aiol/repo/repoList/:questionId',
QUESTION_ADD: '/gen/question/question/add', QUESTION_ADD: '/gen/question/question/add',
QUESTION_EDIT: '/gen/question/question/edit', QUESTION_EDIT: '/gen/question/question/edit',
QUESTION_DELETE: '/gen/question/question/delete', QUESTION_DELETE: '/gen/question/question/delete',

View File

@ -25,10 +25,10 @@ export class AuthApi {
password: data.password password: data.password
} }
console.log('🚀 发送登录请求:', { url: '/biz/user/login', data: { ...loginData, password: '***' } }) console.log('🚀 发送登录请求:', { url: '/aiol/aiolUser/login', data: { ...loginData, password: '***' } })
// 调用后端API // 调用后端API
const response = await ApiRequest.post<any>('/biz/user/login', loginData) const response = await ApiRequest.post<any>('/aiol/aiolUser/login', loginData)
console.log('🔍 Login API Response:', response) console.log('🔍 Login API Response:', response)
console.log('🔍 Response Code:', response.code) console.log('🔍 Response Code:', response.code)
@ -231,7 +231,7 @@ export class AuthApi {
// 获取当前用户信息 - 使用后端实际接口 // 获取当前用户信息 - 使用后端实际接口
static async getUserInfo(): Promise<UserInfoResponse> { static async getUserInfo(): Promise<UserInfoResponse> {
const response = await ApiRequest.get<any>('/biz/user/info') const response = await ApiRequest.get<any>('/aiol/aiolUser/info')
console.log('🔍 getUserInfo - 原始响应:', response) console.log('🔍 getUserInfo - 原始响应:', response)

View File

@ -12,7 +12,7 @@ export class ContentApi {
static async getContent(contentKey: string): Promise<any> { static async getContent(contentKey: string): Promise<any> {
try { try {
console.log(`🚀 调用内容APIcontentKey: ${contentKey}`) console.log(`🚀 调用内容APIcontentKey: ${contentKey}`)
const response = await ApiRequest.get(`/biz/index/content/${contentKey}`) const response = await ApiRequest.get(`/aiol/index/content/${contentKey}`)
console.log('📋 内容API响应:', response) console.log('📋 内容API响应:', response)
return response return response
} catch (error) { } catch (error) {

View File

@ -109,7 +109,7 @@ export class CourseApi {
console.log('🔍 查询参数:', queryParams) console.log('🔍 查询参数:', queryParams)
// 调用后端API // 调用后端API
const response = await ApiRequest.get<any>('/biz/course/list', queryParams) const response = await ApiRequest.get<any>('/aiol/aiolCourse/query_list', queryParams)
console.log('🔍 课程列表API响应:', response) console.log('🔍 课程列表API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -187,7 +187,7 @@ export class CourseApi {
console.log('🚀 调用课程详情API课程ID:', id) console.log('🚀 调用课程详情API课程ID:', id)
// 调用后端API // 调用后端API
const response = await ApiRequest.get<any>('/biz/course/detail', { id }) const response = await ApiRequest.get<any>('/aiol/aiolCourse/detail', { id })
console.log('🔍 课程详情API响应:', response) console.log('🔍 课程详情API响应:', response)
@ -294,7 +294,7 @@ export class CourseApi {
static async getCourseById(id: string): Promise<ApiResponse<Course>> { static async getCourseById(id: string): Promise<ApiResponse<Course>> {
try { try {
// 调用后端课程详情接口 // 调用后端课程详情接口
const response = await ApiRequest.get<any>('/biz/course/detail', { id }) const response = await ApiRequest.get<any>('/aiol/aiolCourse/detail', { id })
console.log('🔍 课程详情API响应:', response) console.log('🔍 课程详情API响应:', response)
@ -408,7 +408,7 @@ export class CourseApi {
console.log('🚀 获取课程分类列表') console.log('🚀 获取课程分类列表')
// 调用后端API不需要token // 调用后端API不需要token
const response = await ApiRequest.get<any>('/biz/course/category/list') const response = await ApiRequest.get<any>('/aiol/aiolCourse/category/list')
console.log('🔍 分类API响应:', response) console.log('🔍 分类API响应:', response)
@ -452,7 +452,7 @@ export class CourseApi {
console.log('🚀 获取课程专题列表') console.log('🚀 获取课程专题列表')
// 调用后端API不需要token // 调用后端API不需要token
const response = await ApiRequest.get<any>('/biz/course/subject/list') const response = await ApiRequest.get<any>('/aiol/aiolCourse/subject/list')
console.log('🔍 专题API响应:', response) console.log('🔍 专题API响应:', response)
@ -496,7 +496,7 @@ export class CourseApi {
console.log('🚀 获取课程难度列表') console.log('🚀 获取课程难度列表')
// 调用后端API不需要token // 调用后端API不需要token
const response = await ApiRequest.get<any>('/biz/course/difficulty/list') const response = await ApiRequest.get<any>('/aiol/aiolCourse/difficulty/list')
console.log('🔍 难度API响应:', response) console.log('🔍 难度API响应:', response)
@ -551,9 +551,9 @@ export class CourseApi {
}>> { }>> {
try { try {
console.log('🔍 报名课程课程ID:', courseId) console.log('🔍 报名课程课程ID:', courseId)
console.log('🔍 API请求URL: /biz/course/' + courseId + '/enroll') console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/enroll')
const response = await ApiRequest.post<any>(`/biz/course/${courseId}/enroll`) const response = await ApiRequest.post<any>(`/aiol/aiolCourse/${courseId}/enroll`)
console.log('🔍 报名API响应:', response) console.log('🔍 报名API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -623,9 +623,9 @@ export class CourseApi {
}>> { }>> {
try { try {
console.log('🔍 检查课程报名状态课程ID:', courseId) console.log('🔍 检查课程报名状态课程ID:', courseId)
console.log('🔍 API请求URL: /biz/course/' + courseId + '/is_enrolled') console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/is_enrolled')
const response = await ApiRequest.get<any>(`/biz/course/${courseId}/is_enrolled`) const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/is_enrolled`)
console.log('🔍 报名状态API响应:', response) console.log('🔍 报名状态API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -695,9 +695,9 @@ export class CourseApi {
static async getCourseSections(courseId: string): Promise<ApiResponse<CourseSectionListResponse>> { static async getCourseSections(courseId: string): Promise<ApiResponse<CourseSectionListResponse>> {
try { try {
console.log('🔍 获取课程章节数据课程ID:', courseId) console.log('🔍 获取课程章节数据课程ID:', courseId)
console.log('🔍 API请求URL: /biz/course/' + courseId + '/section') console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/section')
const response = await ApiRequest.get<any>(`/biz/course/${courseId}/section`) const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/section`)
console.log('🔍 章节API响应:', response) console.log('🔍 章节API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -907,9 +907,9 @@ export class CourseApi {
static async getCourseInstructors(courseId: string): Promise<ApiResponse<Instructor[]>> { static async getCourseInstructors(courseId: string): Promise<ApiResponse<Instructor[]>> {
try { try {
console.log('🔍 获取课程讲师数据课程ID:', courseId) console.log('🔍 获取课程讲师数据课程ID:', courseId)
console.log('🔍 API请求URL: /biz/course/' + courseId + '/teachers') console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/teachers')
const response = await ApiRequest.get<any>(`/biz/course/${courseId}/teachers`) const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/teachers`)
console.log('🔍 讲师API响应:', response) console.log('🔍 讲师API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -968,9 +968,9 @@ export class CourseApi {
static async getSectionVideos(courseId: string, sectionId: string): Promise<ApiResponse<SectionVideo[]>> { static async getSectionVideos(courseId: string, sectionId: string): Promise<ApiResponse<SectionVideo[]>> {
try { try {
console.log('🔍 获取章节视频数据课程ID:', courseId, '章节ID:', sectionId) console.log('🔍 获取章节视频数据课程ID:', courseId, '章节ID:', sectionId)
console.log('🔍 API请求URL: /biz/course/' + courseId + '/section_video/' + sectionId) console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/section_video/' + sectionId)
const response = await ApiRequest.get<any>(`/biz/course/${courseId}/section_video/${sectionId}`) const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/section_video/${sectionId}`)
console.log('🔍 章节视频API响应:', response) console.log('🔍 章节视频API响应:', response)
// 处理后端响应格式 // 处理后端响应格式
@ -1090,9 +1090,9 @@ export class CourseApi {
static async getCourseComments(courseId: string): Promise<ApiResponse<CourseComment[]>> { static async getCourseComments(courseId: string): Promise<ApiResponse<CourseComment[]>> {
try { try {
console.log('🔍 获取课程评论数据课程ID:', courseId) console.log('🔍 获取课程评论数据课程ID:', courseId)
console.log('🔍 API请求URL: /biz/comment/course/' + courseId + '/list') console.log('🔍 API请求URL: /aiol/aiolComment/course/' + courseId + '/list')
const response = await ApiRequest.get<any>(`/biz/comment/course/${courseId}/list`) const response = await ApiRequest.get<any>(`/aiol/aiolComment/course/${courseId}/list`)
console.log('🔍 评论API响应:', response) console.log('🔍 评论API响应:', response)
// 处理后端响应格式 // 处理后端响应格式

View File

@ -29,7 +29,7 @@ export class ExamApi {
*/ */
static async createCourseRepo(data: CreateRepoRequest): Promise<ApiResponse<string>> { static async createCourseRepo(data: CreateRepoRequest): Promise<ApiResponse<string>> {
console.log('🚀 创建课程题库:', data) console.log('🚀 创建课程题库:', data)
const response = await ApiRequest.post<string>('/biz/repo/courseAdd', data) const response = await ApiRequest.post<string>('/aiol/repo/courseAdd', data)
console.log('✅ 创建课程题库成功:', response) console.log('✅ 创建课程题库成功:', response)
return response return response
} }
@ -38,7 +38,7 @@ export class ExamApi {
* *
*/ */
static async getCourseRepoList(): Promise<ApiResponseWithResult<Repo[]>> { static async getCourseRepoList(): Promise<ApiResponseWithResult<Repo[]>> {
const response = await ApiRequest.get<{ result: Repo[] }>(`/biz/repo/repoList`) const response = await ApiRequest.get<{ result: Repo[] }>(`/aiol/repo/repoList`)
console.log('✅ 获取课程题库列表成功:', response) console.log('✅ 获取课程题库列表成功:', response)
return response return response
} }

View File

@ -1697,9 +1697,10 @@ onMounted(() => {
} }
.container { .container {
max-width: 1400px; max-width: none;
margin: 0 auto; margin: 0;
padding: 0 32px; padding-left: 120px;
padding-right: 125px;
} }
.breadcrumb { .breadcrumb {
@ -1723,7 +1724,7 @@ onMounted(() => {
.course-content { .course-content {
display: flex; display: flex;
gap: 30px; gap: 64px;
width: 100%; width: 100%;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -3635,10 +3636,21 @@ onMounted(() => {
} }
/* 响应式设计 */ /* 响应式设计 */
/* 大屏幕 - 使用120px左右边距 */
@media (min-width: 1400px) {
.container {
padding-left: 120px;
padding-right: 120px;
max-width: none;
margin: 0;
}
}
@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;
} }
.sidebar { .sidebar {
@ -3650,6 +3662,7 @@ onMounted(() => {
.container { .container {
padding: 0 20px; padding: 0 20px;
max-width: 992px; max-width: 992px;
margin: 0 auto;
} }
.course-content { .course-content {
@ -3666,6 +3679,7 @@ onMounted(() => {
.container { .container {
padding: 0 16px; padding: 0 16px;
max-width: 768px; max-width: 768px;
margin: 0 auto;
} }
.course-content { .course-content {
@ -3682,6 +3696,7 @@ onMounted(() => {
.container { .container {
padding: 0 16px; padding: 0 16px;
max-width: 576px; max-width: 576px;
margin: 0 auto;
} }
.course-content { .course-content {
@ -3703,6 +3718,7 @@ onMounted(() => {
.container { .container {
padding: 0 16px; padding: 0 16px;
max-width: 576px; max-width: 576px;
margin: 0 auto;
} }
.video-player.unregistered { .video-player.unregistered {
@ -3967,6 +3983,8 @@ onMounted(() => {
@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 {
@ -4025,6 +4043,8 @@ onMounted(() => {
@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 {

View File

@ -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>