Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
commit
fea00e8c1a
@ -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>
|
||||
|
@ -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" />
|
||||
|
@ -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)">
|
||||
|
Loading…
x
Reference in New Issue
Block a user