教师端

This commit is contained in:
Admin 2025-08-20 21:47:52 +08:00
parent 34738a29e1
commit 3fed1249c4
3 changed files with 442 additions and 9 deletions

View File

@ -1,19 +1,452 @@
<template>
<div>
<h1>课程分类</h1>
<div class="course-category">
<!-- 顶部 -->
<div class="top">
<div class="nav-links">
<a href="" class="active">全部</a>
<a href="">发布中</a>
<a href="">下架中</a>
</div>
<div class="actions">
<button class="create-btn">创建课程</button>
<div class="search-container">
<input type="text" placeholder="请输入想要搜索的内容">
<button class="search-btn">搜索</button>
</div>
</div>
</div>
<!-- 主体 -->
<div class="course-container">
<div class="course-grid">
<div class="course-card" v-for="course in courseList" :key="course.id">
<div class="course-image-container">
<div class="section-title" :class="{'offline': course.status === '下架中'}">{{ course.status }}</div>
<div class="more-options">
<span class="more-icon"></span>
<div class="options-menu">
<a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">编辑</a>
<a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">查看</a>
<a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">删除</a>
<a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">更多</a>
</div>
</div>
</div>
<div class="course-info">
<img :src="course.image" alt="">
<a href="#" class="course-name">{{ course.name }}</a>
</div>
</div>
</div>
</div>
<!-- 底部翻页按钮 -->
<div class="pagination">
<div class="pagination-content">
<div class="page-numbers">
<a href="#" class="page-number">首页</a>
<a href="#" class="page-number">上一页</a>
<a href="#" class="page-number page-number-bordered active">1</a>
<a href="#" class="page-number page-number-bordered">2</a>
<a href="#" class="page-number page-number-bordered">3</a>
<a href="#" class="page-number page-number-bordered">4</a>
<a href="#" class="page-number page-number-bordered">5</a>
<a href="#" class="page-number">...</a>
<a href="#" class="page-number page-number-bordered">29</a>
<a href="#" class="page-number page-number-bordered">下一页</a>
<a href="#" class="page-number">下一页</a>
<a href="#" class="page-number">尾页</a>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//
const courseList = ref([
{ id: 1, name: '前端开发基础课程', status: '发布中', image: 'https://picsum.photos/200/200?random=1' },
{ id: 2, name: 'Vue.js 实战教程', status: '发布中', image: 'https://picsum.photos/200/200?random=2' },
{ id: 3, name: 'React 入门到精通', status: '发布中', image: 'https://picsum.photos/200/200?random=3' },
{ id: 4, name: 'Node.js 后端开发', status: '下架中', image: 'https://picsum.photos/200/200?random=4' },
{ id: 5, name: 'TypeScript 高级教程', status: '发布中', image: 'https://picsum.photos/200/200?random=5' },
{ id: 6, name: 'JavaScript 设计模式', status: '发布中', image: 'https://picsum.photos/200/200?random=6' },
{ id: 7, name: 'CSS 动画与特效', status: '下架中', image: 'https://picsum.photos/200/200?random=7' },
{ id: 8, name: 'HTML5 新特性详解', status: '发布中', image: 'https://picsum.photos/200/200?random=8' },
{ id: 9, name: 'Web 性能优化指南', status: '发布中', image: 'https://picsum.photos/200/200?random=9' },
{ id: 10, name: '移动端适配实战', status: '发布中', image: 'https://picsum.photos/200/200?random=10' },
{ id: 11, name: '微信小程序开发', status: '下架中', image: 'https://picsum.photos/200/200?random=11' },
{ id: 12, name: 'Flutter 跨平台开发', status: '发布中', image: 'https://picsum.photos/200/200?random=12' },
]);
</script>
<style scoped>
body{
.course-category{
background-color: #ffffff;
width: 1920px;
height: 1793px;
width: 100%;
max-width: 100%;
height: auto;
min-height: 1181px;
margin-right: 28px;
box-sizing: border-box;
padding: 10px; /* 添加内边距以便更好地观察布局 */
position: relative; /* 添加相对定位,使分页按钮的绝对定位基于此容器 */
}
.top {
white-space: nowrap; /* 防止链接换行 */
padding: 0 20px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f0f0f0;
width: 100%; /* 确保宽度充满父容器 */
box-sizing: border-box;
}
.nav-links {
display: flex;
align-items: center;
}
.actions {
display: flex;
align-items: center;
flex-shrink: 0;
}
.top a{
margin-right: 74px;
display: inline-block;
height: 60px;
line-height: 60px;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 16px;
color: #333333;
text-decoration: none;
position: relative;
}
.top a.active {
color: #1890ff;
}
.top a.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #1890ff;
}
.create-btn {
background-color: #1890ff;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
margin-right: 24px; /* 增加按钮与搜索框间距 */
transition: background-color 0.3s;
}
.create-btn:hover {
background-color: #40a9ff;
}
.search-container {
display: flex;
align-items: center;
border: 1px solid #d9d9d9;
border-radius: 4px;
overflow: hidden;
}
.search-container input {
border: none;
padding: 6px 12px;
outline: none;
font-size: 14px;
width: 240px; /* 增加搜索框宽度 */
}
.search-btn {
background-color: #0288D1;
border: none;
border-left: 1px solid #d9d9d9;
padding: 6px 16px;
cursor: pointer;
font-size: 16px;
color: #FFFFFF;
transition: background-color 0.3s;
line-height: 18px;
text-align: left;
font-style: normal;
text-transform: none;
}
.search-btn:hover {
background-color: #e8e8e8;
}
.course-container{
width: 100%;
margin-top: 30px;
padding: 20px;
box-sizing: border-box;
}
.course-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.course-card {
width: 190px;
height: 201px;
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-sizing: border-box;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.course-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.course-image-container {
position: relative;
padding: 0;
width: 100%;
height: 30px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.section-title {
width: 50px;
height: 20px;
background: #0288D1;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.section-title.offline {
background: #FF6C17;
}
.more-options {
cursor: pointer;
margin: 0;
padding: 0;
}
.more-icon {
font-size: 18px;
font-weight: bold;
color: #333;
display: block;
padding: 0;
margin: 0;
line-height: 1;
}
.course-image-container img {
width: 13px;
height: 13px;
}
/* 添加更多选项按钮样式 */
.more-options {
position: relative;
cursor: pointer;
}
.more-icon {
font-size: 18px;
font-weight: bold;
color: #333;
display: block;
padding: 5px;
margin: 0;
line-height: 1;
}
.options-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: none;
z-index: 10;
width: 59px;
height: 98px;
}
.more-options:hover .options-menu {
display: block;
}
.option-item {
display: flex;
align-items: center;
padding: 5px 8px;
color: #333;
text-decoration: none;
font-size: 12px;
text-align: center;
height: 24px;
line-height: 14px;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
}
.icon-edit, .icon-view, .icon-delete, .icon-more {
margin-right: 4px;
color: #1890ff;
}
.icon-view {
color: #52c41a;
}
.icon-delete {
color: #f5222d;
}
.icon-more {
color: #faad14;
}
.option-item:last-child {
border-bottom: none;
}
.option-item:hover {
background-color: #f5f5f5;
}
.course-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex: 1;
box-sizing: border-box;
padding: 0;
}
.course-info img{
width: 150px;
height: 105px;
/* 居中 */
display: block;
margin: 5px auto 10px;
position: relative;
top: -10px;
}
.course-name{
width: 138px;
height: 20px;
font-family: AppleSystemUIFont;
font-size: 14px;
color: #333333;
line-height: 20px;
text-align: center;
font-style: normal;
text-transform: none;
white-space: nowrap; /* 强制文本在一行显示 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
margin-top: -5px;
}
/* 分页样式 */
.pagination {
display: flex;
justify-content: center;
position: absolute;
bottom: 61px;
left: 0;
right: 0;
}
.pagination-content {
width: 703px;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 4px;
padding: 0 10px;
}
.page-numbers {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
white-space: nowrap; /* 确保所有页码在一行显示 */
}
.page-number {
display: inline-block;
min-width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
color: #333;
text-decoration: none;
font-size: 14px;
padding: 0 5px;
margin: 0 4px;
border-radius: 2px;
}
.page-number-bordered {
border: 1px solid #d9d9d9;
}
.page-number.active {
background-color: #1890ff;
color: white;
border-radius: 2px;
}
.page-btn {
background: none;
border: 1px solid #d9d9d9;
border-radius: 2px;
padding: 0 10px;
height: 32px;
cursor: pointer;
color: #333;
font-size: 14px;
}
/* 首页、上一页、下一页、末页按钮样式 */
.page-number:first-child,
.page-number:nth-child(2),
.page-number:nth-last-child(2),
.page-number:last-child {
padding: 0 8px;
}
.page-btn:hover {
color: #1890ff;
border-color: #1890ff;
}
</style>

View File

@ -475,7 +475,7 @@
</section>
<!-- 合作伙伴 -->
<section class="partners-section">
<!-- <section class="partners-section">
<div class="container">
<div class="section-header">
<div class="section-title-group">
@ -492,7 +492,7 @@
</div>
</div>
</div>
</section>
</section> -->
<!-- 登录模态框 -->
<LoginModal v-model:show="loginModalVisible" @success="handleAuthSuccess" />

View File

@ -19,7 +19,7 @@
<!-- 导航栏 -->
<div class="nav-container">
<router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
<img src="https://picsum.photos/200/200" alt="">
<img src="/images/teacher/路径 1.png" alt="">
<span>课程管理</span>
</router-link>
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">