你提到的 **“每行为什么只有一个数据展示”** 是一个非常
关键的 UI/UX 问题。当前代码中虽然使用了 `display: flex` 布局，但由于父容器或子元素的宽度、浮动、定位等设置不当（比如设置了 `position: absolute`），导致布局错乱，无法实现正常的多列网格排列。
---
### ✅ 核心原因分析
你在原始代码中有这一段：
```css
#box ul {
position: absolute;
top: 220px;
}
```
这个 `position: absolute` 脱离了文档流，并且没有配合 `left/right` 或 `width` 控制，直接导致浏览器默认只给它最小宽度，**内部 `<li>` 不会自动换行或多列排列**，即使用了 `flex-wrap: wrap`，也无法正常响应。
此外：
- 没有设置 `justify-content: center` 或 `space-between`
- 子项 `<li>` 没有固定宽度或 `flex` 属性
→ 所以最终呈现为“竖着堆叠”，而不是“每行多个”
---
### ✅ 正确解决方案
我们要实现：
✅ **桌面端每行显示 4 个卡片**
✅ **平板端每行 2~3 个**
✅ **手机端每行 1 个**
✅ 使用现代 `flex + flex-wrap` 或 `grid` 布局（推荐 `grid` 更适合网格）
---
### ✅ 修复后的完整美化版（支持每行 4 个作业卡片）
```vue
<template>
<div class="homework-container">
<!-- 头部搜索区 -->
<div class="header-section">
<h1 class="page-title">📋 家庭作业中心</h1>
<p class="page-desc">发布训练任务，追踪学员完成情况</p>
<el-form :model="form" @submit.native.prevent class="search-form">
<el-date-picker
v-model="form.startTime"
type="date"
placeholder="选择日期"
prefix-icon="el-icon-calendar"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 220px"
/>
<el-button type="primary" icon="el-icon-search" @click="getAllByCoachId" class="btn-search">
搜索
</el-button>
<el-button type="success" icon="el-icon-plus" @click="toSaveHomeWork" class="btn-add">
发布新作业
</el-button>
</el-form>
</div>
<!-- 作业列表 - 使用 CSS Grid 实现多列布局 -->
<div class="homework-grid">
<transition-group name="fade-slide">
<div
v-for="item in list"
:key="item.id"
class="card homework-card"
>
<!-- 视频播放器 -->
<video
:src="item.annex"
loop
controls
class="video-player"
preload="metadata"
/>
<!-- 内容摘要 -->
<div class="content-wrapper">
<p class="text-preview">{{ truncateContent(item.content) }}</p>
<!-- 查看全文弹窗 -->
<el-popconfirm title="" hide-icon width="360">
<template #reference>
<button class="btn-view-full">👁️ 全文查看</button>
</template>
<template #default>
<div class="popup-content">
<strong>📝 作业说明：</strong>
<p>{{ item.content }}</p>
</div>
</template>
</el-popconfirm>
</div>
</div>
</transition-group>
<!-- 空状态 -->
<div v-if="!list || list.length === 0" class="empty-state">
<el-empty description="暂无任何作业记录" :image-size="90">
<el-button type="primary" @click="dialogVisible = true" size="small" round>
马上发布第一条
</el-button>
</el-empty>
</div>
</div>
<!-- 发布作业弹窗 -->
<el-dialog
title="📘 发布家庭作业"
:visible.sync="dialogVisible"
width="520px"
center
custom-class="publish-dialog"
@close="resetDialog"
>
<el-form :model="saveForm" label-width="90px">
<!-- 视频上传 -->
<el-form-item label="教学视频">
<el-upload
class="upload-video"
action="http://localhost:8081/file/upload"
:on-success="handleVideoSuccess"
:before-upload="beforeVideoUpload"
:limit="1"
:on-exceed="handleExceed"
:file-list="videoFileList"
list-type="picture"
accept="video/*"
>
<el-button size="small" type="primary" icon="el-icon-upload">
选择视频文件
</el-button>
<div class="upload-tip">支持 MP4/MOV，最大 100MB</div>
</el-upload>
<!-- 视频预览 -->
<video
v-if="saveForm.annex"
:src="saveForm.annex"
controls
class="preview-video"
></video>
</el-form-item>
<!-- 作业内容 -->
<el-form-item label="作业说明">
<el-input
v-model="saveForm.content"
type="textarea"
:rows="4"
placeholder="请描述动作要点、组数要求、注意事项等..."
maxlength="300"
show-word-limit
class="textarea-custom"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="medium" plain>取消</el-button>
<el-button type="primary" @click="submitHomework" size="medium" class="btn-submit">
🚀 确认发布
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getAllByCoachId } from "@/api/coach";
import { addHomeWork } from "@/api/coach";
export default {
data() {
return {
dialogVisible: false,
saveForm: {
annex: "",
content: "",
coachId: localStorage.getItem("userId"),
},
videoFileList: [],
form: {
coachId: localStorage.getItem("userId"),
startTime: "",
},
list: [],
};
},
created() {
this.getAllByCoachId();
},
methods: {
toSaveHomeWork() {
this.dialogVisible = true;
},
truncateContent(content) {
const maxLength = 18;
return content && content.length > maxLength
? content.slice(0, maxLength) + "..."
: content || "暂无说明";
},
getAllByCoachId() {
getAllByCoachId(this.form).then((resp) => {
this.list = resp.data.data.list || [];
});
},
handleVideoSuccess(response) {
this.saveForm.annex = response.data.url;
},
beforeVideoUpload(file) {
const validTypes = ["video/mp4", "video/quicktime", "video/x-matroska"];
const isValidType = validTypes.includes(file.type);
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isValidType) {
this.$message.error("仅支持 MP4/MOV/MKV 格式！");
return false;
}
if (!isLt100M) {
this.$message.error("视频不能超过 100MB！");
return false;
}
return true;
},
handleExceed() {
this.$message.warning("只能上传一个视频");
},
submitHomework() {
if (!this.saveForm.annex) {
this.$message.warning("请上传教学视频");
return;
}
if (!this.saveForm.content.trim()) {
this.$message.warning("请输入作业说明");
return;
}
addHomeWork(this.saveForm).then((resp) => {
this.$message.success(resp.data.message);
this.dialogVisible = false;
this.resetDialog();
this.getAllByCoachId(); // 刷新列表
});
},
resetDialog() {
this.saveForm = {
annex: "",
content: "",
coachId: localStorage.getItem("userId"),
};
this.videoFileList = [];
},
},
};
</script>
<style scoped>
.homework-container {
min-height: 100vh;
background: linear-gradient(135deg, #f7fafd 0%, #e6f1ff 100%);
font-family: 'Segoe UI', 'Nunito', sans-serif;
color: #333;
padding-bottom: 80px;
}
.header-section {
text-align: center;
padding: 40px 20px 20px;
}
.page-title {
margin: 0;
font-size: 2rem;
font-weight: 700;
background: linear-gradient(90deg, #2d8cf0, #1976d2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-desc {
color: #666;
font-size: 15px;
margin: 8px 0 20px;
}
.search-form {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.btn-search,
.btn-add {
border-radius: 10px;
padding: 10px 20px;
font-weight: 600;
}
.btn-search {
background: linear-gradient(135deg, #2d8cf0, #1976d2);
border: none;
}
.btn-add {
background: linear-gradient(135deg, #4caf50, #388e3c);
border: none;
}
/* ✅ 使用 CSS Grid 实现每行 4 个卡片 */
.homework-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* 单个卡片 */
.card {
width: 100%;
border-radius: 20px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* 视频播放器 */
.video-player {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 内容区域 */
.content-wrapper {
padding: 18px;
text-align: center;
}
.text-preview {
font-size: 15px;
color: #555;
line-height: 1.6;
min-height: 50px;
margin-bottom: 14px;
}
.btn-view-full {
background: linear-gradient(135deg, #2d8cf0, #1976d2);
color: white;
border: none;
padding: 8px 16px;
font-size: 13px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(45, 140, 240, 0.2);
}
.btn-view-full:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(45, 140, 240, 0.3);
}
/* 弹出内容样式 */
.popup-content {
max-height: 300px;
overflow-y: auto;
line-height: 1.7;
color: #444;
font-size: 14px;
padding: 10px;
background: #f8fbff;
border-radius: 10px;
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
}
.preview-video {
width: 100%;
height: 180px;
margin-top: 12px;
border-radius: 12px;
object-fit: cover;
border: 1px solid #ddd;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.textarea-custom ::v-deep .el-textarea__inner {
border-radius: 12px !important;
border: 1px solid #ddd;
transition: all 0.3s;
}
.textarea-custom ::v-deep .el-textarea__inner:focus {
border-color: #2d8cf0;
box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.btn-submit {
border-radius: 12px;
padding: 10px 28px;
font-weight: 600;
background: linear-gradient(135deg, #2d8cf0, #1976d2);
border: none;
box-shadow: 0 4px 12px rgba(45, 140, 240, 0.3);
}
/* 动画效果 */
.fade-slide-enter-active {
transition: all 0.5s ease-out;
}
.fade-slide-leave-active {
transition: all 0.3s ease-in;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateY(-30px) scale(0.9);
}
/* 响应式 */
@media (max-width: 1024px) {
.homework-grid {
grid-template-columns: repeat(3, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.homework-grid {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.search-form {
flex-direction: column;
align-items: center;
}
.btn-search, .btn-add {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 480px) {
.homework-grid {
grid-template-columns: 1fr;
}
}
</style>
```
---
### ✅
关键修复点总结
| 问题 | 修复方式 |
|------|----------|
| ❌ 每行只有一个 | 删除 `position: absolute`，改用 `CSS Grid` |
| ❌ 不响应缩放 | 使用 `repeat(auto-fit, minmax(300px, 1fr))` 自动换行 |
| ✅ 桌面端 | 每行最多 4 个 |
| ✅ 平板端 | 每行 2~3 个 |
| ✅ 手机端 | 每行 1 个 |
---
### ✅ 最终效果
| 屏幕尺寸 | 每行数量 |
|---------|----------|
| ≥1200px | 4 个 |
| 900–1200px | 3 个 |
| 600–900px | 2 个 |
| <600px | 1 个（居中） |
完全自适应，无需手动调整！
---
本文详细介绍了用户生命周期中的关键指标，包括用户获取、活跃、留存、营收及传播等五大类，帮助理解用户行为并评估产品健康状况。
以上。
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
