zj-teach/pages/stuList/stuList.wxss

/* pages/stuList/stuList.wxss */

/* 搜索学员 */
/* 找学员的按钮 */
.toOpenSearch{
    width: 140rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-left: 20rpx;
    border: 1rpx solid gray;
    border-radius: 70rpx;
    padding: 4rpx 20rpx;
}
.mask{
    height: 300rpx;
}
/* 筛选区的样式 */
.searchContainer {
    z-index: 3;
    display: flex;
    padding-bottom: 10rpx;
    width: 100%;
    line-height: 50rpx;
    background-color: #fff;
    font-size: 28rpx;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
}
/* 筛选区列表的样式 */
.searchList{
    width: 28%;
    height: 50rpx;
    text-align: center;
    margin-top: 10rpx;
    margin-left: 20rpx;
    border: 1rpx solid gray;
    border-radius: 30rpx;
    overflow: hidden;
}
/* 下拉箭头图标 */
.iconImg {
    width: 26rpx;
    height: 26rpx;
}
/* 搜索按钮 */
/* 搜索按钮外层容器 */
.searchBtn-container{
    z-index: 3;
    height: 50rpx;
    background-color: #fff;
    display: flex;
    position: sticky;
    top: 200rpx;
}
/* 搜索按钮和清除选择按钮的公共样式 */
.searchBtn,
.clearBtn{
    border:1rpx solid gray;
    border-radius: 30rpx;
    height: 38rpx;
    line-height: 40rpx;
    padding: 4rpx 20rpx;
    font-size: 28rpx;
}
/* 搜索按钮 */
.searchBtn{
    margin-left: 20rpx;
}
/* 清除选择按钮 */
.clearBtn{
    display: flex;
    position: absolute;
    margin-left: auto;
    right: 20rpx;
}

/* 搜索区下方的隔离区 */
.interval{
    height: 10rpx;
    margin-top: 20rpx;
    background-color: gray;
}
/* 间隔线 */
.stuListInterval{
    height: 10rpx;
    margin-left: -20rpx;
    margin-top: 10rpx;
    background-color: #F1F1F1;
}

/* 学生列表区 */
.stuListContainer{
    margin-left: 20rpx;
    font-size: 28rpx;
    position: relative;
}
.stuListDetail{
    display: flex;
}
/* 左侧部分 */
.stuLeft{
    display: flex;
    flex-direction: column;
    width: 60%;
    margin-top: 10rpx;
}

.stuTitle{
    font-weight: bold;
    color: yellowgreen;
}
.stuDesc{
    margin: 20rpx 0;
}
/* 右侧部分 */
.stuRight{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 20rpx;
    color: #979797;
    margin-top: 10rpx;
}
/* 薪水 */
.salary{
    color: #FF970F;
}

/* 课程科目 */
.course{
    z-index: 3;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 124rpx;
    background-color: #F3F3F3;
    border: 1rpx solid #E6E6E6;
}

.courseLists{
    width: 160rpx;
    height: 40rpx;
    /* background-color: yellow; */
    border-right: 1rpx solid red;
    border-bottom: 1rpx solid red;
    padding: 20rpx 20rpx 20rpx 40rpx;
}
/* 选中课程科目的样式 */
.courseActive{
    width: 160rpx;
    height: 40rpx;
    color: #ff9000;
    font-weight: bold;
    border-bottom: 1rpx solid gray;
    padding: 20rpx 20rpx 20rpx 40rpx;
}

/* 课程详情 */
.courseDetail{
    z-index: 3;
    position: fixed;
    width: calc(100vw - 224rpx);
    /* height: 100%; */
    top: 124rpx;
    left: 224rpx;
    background-color: #F3F3F3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.courseDetailLists{
    padding: 20rpx;
    border: 1rpx solid #E6E6E6;
    border-radius: 16rpx;
    height: 30rpx;
    line-height: 30rpx;
    margin: 10rpx;
}
/* 选中课程详情的样式 */
.courseDetailActive{
    height: 40rpx;
    color: #ff9000;
    font-weight: bold;
    padding: 20rpx;
    border: 1rpx solid #E6E6E6;
    border-radius: 16rpx;
    height: 30rpx;
    line-height: 30rpx;
    margin: 10rpx;
}

/* 辅导方式、学生性别、教员类型、教员学历选项区的公共样式 */
.teachPositions,
.choosestuSex,
.teachType,
.eduList,
.teachSex
{
    background-color: #F3F3F3;
    border: 1rpx solid #E6E6E6;
    position: fixed;
    padding: 10rpx;
    z-index: 3;
}

/* 辅导方式选项区 */
.teachPositions{
    top: 124rpx;
    left: 34%;
    width: 30%;
}
/* 辅导方式筛选内容区的公共样式 */
.detail{
    margin: 30rpx 0;
}
/* 学生性别 */
.choosestuSex{
    width: 30%;
    top: 124rpx;
    right: 20rpx;
}

/* 老师身份选项区 */
.teachType{
    top: 188rpx;
    left: 20rpx;
}

/* 老师学历选项区 */
.eduList{
    width: 30%;
    top: 188rpx;
    left: 34%;
}

/* 老师性别选项区 */
.teachSex{
    width: 30%;
    top: 188rpx;
    right: 20rpx;
}

/* 老师照片选项区 */
.teachImgList{
    background-color: #F3F3F3;
    border: 1rpx solid #E6E6E6;
    position: fixed;
    padding: 10rpx;
    z-index: 3;
}
.teachImgList{
    width: 180rpx;
    top: 252rpx;
    left: 20rpx;
}