fix：ai自适应
This commit is contained in:
小张
parent
ad5b5b5de0
commit
1a11290c97
238
src/views/Ai.vue
238
src/views/Ai.vue
@ -2818,4 +2818,242 @@ button:active {
|
||||
line-height: 18px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.page {
|
||||
width: 100% !important;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.block_1 {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.section_1 {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.group_3 {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.group_27 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.section_1 {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.group_12 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.group_21 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 调整卡片宽度 */
|
||||
.box_5, .group_13, .group_18, .group_20, .group_22, .group_23 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section_1 {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.text_13 {
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.group_3 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.box_5 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.group_27 {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.box_18, .box_20, .box_21, .box_22 {
|
||||
width: 100% !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 调整图片尺寸 */
|
||||
.image_7, .image_8, .image_9, .image_10, .image_11,
|
||||
.image_12, .image_13, .image_14, .image_15, .image_16,
|
||||
.image_17, .image_18 {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 左侧导航区域调整 */
|
||||
.group_5 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 项目卡片调整 */
|
||||
.group_12 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.group_13 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.group_18, .group_20 {
|
||||
width: 100% !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 底部导航调整 */
|
||||
.group_21 {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.group_22, .group_23 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.section_1 {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.text_13 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.group_3 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.group_6, .group_27 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 文字大小调整 */
|
||||
.text_19, .text_20, .text_32, .text_35, .text_38, .text_41 {
|
||||
font-size: 14px !important;
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.text_33, .text_36, .text_39, .text_42, .text_47, .text_50, .text_53, .text_56 {
|
||||
font-size: 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 按钮和交互元素调整 */
|
||||
.image-text_1, .image-text_2, .image-text_3, .image-text_15, .image-text_16 {
|
||||
padding: 8px !important;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
/* 卡片内边距调整 */
|
||||
.box_5, .box_11, .box_13, .box_18, .box_19, .box_20, .box_21, .box_22 {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
/* 标题文字换行 */
|
||||
.paragraph_1, .paragraph_2, .paragraph_3, .paragraph_4 {
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用响应式修复 */
|
||||
@media (max-width: 1920px) {
|
||||
/* 修复所有固定宽度元素 */
|
||||
.page, .block_1, .section_1, .group_1, .group_2 {
|
||||
width: 100% !important;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* 确保内容不会溢出 */
|
||||
* {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 图片响应式 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 文本容器响应式 */
|
||||
.text-wrapper_2, .text-group_1, .text-group_2, .text-group_3,
|
||||
.text-group_13, .text-group_14, .text-group_15, .text-group_16,
|
||||
.text-group_19, .text-group_20, .text-group_21, .text-group_22,
|
||||
.text-group_23, .text-group_24, .text-group_25, .text-group_26,
|
||||
.text-group_27, .text-group_28, .text-group_29, .text-group_30,
|
||||
.text-group_31, .text-group_32, .text-group_33, .text-group_34,
|
||||
.text-group_35, .text-group_36, .text-group_37, .text-group_38,
|
||||
.text-group_39, .text-group_40, .text-group_41, .text-group_42,
|
||||
.text-group_43 {
|
||||
width: auto !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -538,11 +538,24 @@ const router = useRouter()
|
||||
const courseStore = useCourseStore()
|
||||
// @ts-ignore
|
||||
const userStore = useUserStore()
|
||||
const { loginModalVisible, registerModalVisible, handleAuthSuccess } = useAuth()
|
||||
const { loginModalVisible, registerModalVisible, handleAuthSuccess: originalHandleAuthSuccess } = useAuth()
|
||||
|
||||
// 跳转到课程页面
|
||||
// 自定义认证成功处理，登录后跳转到个人中心
|
||||
const handleAuthSuccess = () => {
|
||||
originalHandleAuthSuccess()
|
||||
// 登录成功后跳转到个人中心
|
||||
router.push('/profile')
|
||||
}
|
||||
|
||||
// 跳转到个人中心页面（需要登录检查）
|
||||
const goToCoursesPage = () => {
|
||||
router.push('/courses')
|
||||
if (userStore.isLoggedIn) {
|
||||
// 已登录，跳转到个人中心
|
||||
router.push('/profile')
|
||||
} else {
|
||||
// 未登录，显示登录模态框
|
||||
loginModalVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到课程详情页面
|
||||
|
||||
@ -2290,7 +2290,7 @@ const isMessageTab = computed(() => activeTab.value === 'message')
|
||||
// 处理菜单选择
|
||||
const handleMenuSelect = (key: TabType) => {
|
||||
activeTab.value = key
|
||||
message.info(`切换到${getTabTitle(key)}`)
|
||||
// message.info(`切换到${getTabTitle(key)}`)
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
@ -4280,6 +4280,44 @@ onActivated(() => {
|
||||
padding: 16px;
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
/* 考试标题在小屏幕上给分数留出空间并允许换行 */
|
||||
.exam-title {
|
||||
padding-right: 80px; /* 给分数徽章留出空间 */
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* 分数徽章保持在右上角不换行 */
|
||||
.exam-score-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* 更小屏幕的适配 */
|
||||
@media (max-width: 480px) {
|
||||
.exam-card {
|
||||
padding: 12px;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.exam-title {
|
||||
padding-right: 70px; /* 给分数徽章留出更多空间 */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.exam-score-badge {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.score-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 简化的作业卡片样式 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user