fix: ReviewDetail 内容居中与文字换行
- 页面内容 margin: 0 auto 居中 - 内容区和历史记录添加 word-break 防止长文本溢出 - 移除已删除的 .detail-head 死 CSS 和页面 header
This commit is contained in:
@@ -121,14 +121,6 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="review-detail-page">
|
<section class="review-detail-page">
|
||||||
<header class="surface-card detail-head">
|
|
||||||
<el-button @click="router.back()" :disabled="loading">← 返回</el-button>
|
|
||||||
<div>
|
|
||||||
<h1 class="page-title">复习详情</h1>
|
|
||||||
<p class="page-subtitle">查看完整内容,回忆当时所学</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- 当前条目内容 -->
|
<!-- 当前条目内容 -->
|
||||||
<article class="surface-card content-card" v-loading="loading">
|
<article class="surface-card content-card" v-loading="loading">
|
||||||
<div class="content-meta">
|
<div class="content-meta">
|
||||||
@@ -205,26 +197,7 @@ onMounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
|
||||||
.detail-head {
|
|
||||||
padding: 20px 22px;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-head .el-button {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-head h1 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-head p {
|
|
||||||
margin: 2px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-card {
|
.content-card {
|
||||||
@@ -255,6 +228,8 @@ onMounted(() => {
|
|||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-body p {
|
.content-body p {
|
||||||
@@ -334,6 +309,8 @@ onMounted(() => {
|
|||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clickable-text:hover {
|
.clickable-text:hover {
|
||||||
@@ -365,9 +342,4 @@ onMounted(() => {
|
|||||||
color: #b8860b;
|
color: #b8860b;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.detail-head {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user