You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
2.9 KiB
148 lines
2.9 KiB
1 month ago
|
/* 设置整个容器的样式 */
|
||
|
|
.container {
|
||
|
|
padding: 0rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
/* background-color: #f8f8f8; 轻微的灰色背景 */
|
||
|
|
width: 100%; /* 宽度占满整个屏幕 */
|
||
|
|
/* height: 100vh; */
|
||
|
|
background-image: linear-gradient(to bottom, #effffa, #f2ffff, #f7feff, #fcfeff, #ffffff);
|
||
|
|
}
|
||
|
|
/* 设置副标题文本的样式 */
|
||
|
|
.subtitle-text {
|
||
|
|
/* display: flex; */
|
||
|
|
font-size: 20px;
|
||
|
|
color: #555;
|
||
|
|
max-width: 80%; /*限制文本宽度，防止过长*/
|
||
|
|
line-height: 1.5; /* 行高 */
|
||
|
|
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.swiper-container {
|
||
|
|
overflow: hidden;
|
||
|
|
width: 90%;
|
||
|
|
height: 360rpx; /* 根据需要调整高度 */
|
||
|
|
border-radius: 28rpx;
|
||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.swiper-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 300rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* 设置课程列表的样式 */
|
||
|
|
.course-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 设置单个课程项的样式 */
|
||
|
|
.course-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
width:50%; /*设置宽度为容器的50%*/
|
||
|
|
margin-top: 10rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
margin-left: 35rpx;
|
||
|
|
margin-right: 35rpx;
|
||
|
|
padding: 15rpx;
|
||
|
|
background-color: rgb(239, 255, 250);
|
||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
||
|
|
border-radius: 28rpx;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.png{
|
||
|
|
text-align:center ;
|
||
|
|
margin: auto;
|
||
|
|
width: 200rpx;
|
||
|
|
height:300rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* 设置课程标题的样式 */
|
||
|
|
.course-title {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333;
|
||
|
|
margin: auto;
|
||
|
|
font-weight: bolder;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 设置课程内容的样式
|
||
|
|
.course-content {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #555;
|
||
|
|
opacity: 0.8; 降低透明度，以区分标题和内容
|
||
|
|
line-height: 1.5;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.NewLesson{
|
||
|
|
background-color: transparent;
|
||
|
|
border-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* 为课程项添加鼠标悬停效果 */
|
||
|
|
.course-item:hover {
|
||
|
|
transform: translateY(-5px); /* 向上移动 */
|
||
|
|
transition: transform 0.3s ease-in-out; /* 平滑过渡动画 */
|
||
|
|
}
|
||
|
|
.category-contanier{
|
||
|
|
/*课程列表大容器*/
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lessonlist{
|
||
|
|
/*课表*/
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;/*垂直居中*/
|
||
|
|
justify-content: center;/*水平居中*/
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_container{
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;/*垂直居中*/
|
||
|
|
justify-content: center;/*水平居中*/
|
||
|
|
width: 100%;
|
||
|
|
height: 475rpx;
|
||
|
|
}
|
||
|
|
.blackboard{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.li-item-father{
|
||
|
|
position: absolute;
|
||
|
|
z-index:2;
|
||
|
|
}
|
||
|
|
.li-item{
|
||
|
|
width: 80%;
|
||
|
|
padding: 20rpx;
|
||
|
|
/* border: 1rpx solid gray; */
|
||
|
|
border-radius: 27rpx;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
}
|
||
|
|
.li-name{
|
||
|
|
font-size: 50rpx;
|
||
|
|
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
|
||
|
|
font-weight: bolder;
|
||
|
|
color: #f7feff;
|
||
|
|
}
|
||
|
|
.li-status{
|
||
|
|
font-size:40rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|