zj-teach/pages/teacherList/teacherList.wxss

/* pages/teacherList/teacherList.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 {
    display: flex;
    padding-bottom: 10rpx;
    width: 100%;
    line-height: 50rpx;
    background-color: #fff;
    font-size: 28rpx;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
}
/* 筛选区列表的样式 */
.searchList{
    display: flex;
    width: 28%;
    height: 50rpx;
    font-size: 26rpx;
    text-align: center;
    justify-content: center;
    margin-top: 10rpx;
    margin-left: 20rpx;
    border: 1rpx solid gray;
    border-radius: 30rpx;
    overflow: hidden;
}
/* 下拉箭头图标 */
.iconImg {
    width: 26rpx;
    height: 26rpx;
}
.searchList .iconImg{
    width: 26rpx;
    height: 26rpx;
    padding-top: 11rpx;
    padding-left: 10rpx;
}
/* 取消选择的图标样式 */
.iconCancelImg{
    width: 36rpx;
    height: 36rpx;
    padding-top: 7rpx;
    padding-left: 10rpx;
}

/* 搜索按钮 */
/* 搜索按钮外层容器 */
.searchBtn-container{
    height: 50rpx;
    background-color: #fff;
    display: flex;
    position: sticky;
    top: 136rpx;
}
/* 搜索按钮和清除选择按钮的公共样式 */
.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;
}

/* 老师列表 */
.teachInfo {
    width: 96%;
    display: flex;
    margin-top: 20rpx;
    margin-left: 10rpx;
    padding: 10rpx 0;
    /* border: 1rpx solid red; */
    border-bottom: 1rpx solid gray;
}

/* 老师头像 */
.teachImg {
    width: 20%;
    margin: 0 10rpx;
    border-radius: 20rpx;
}

/* 老师介绍外容器 */
.introduce {
    width: 70%;
    /* height: 400rpx; */
    /* border: 1rpx solid red; */
    padding: 10rpx;
}

/* 老师名字 */
.teachName {
    font-weight: bold;
}

/* 老师资质 */
.attribute {
    margin-left: 20rpx;
    color: rgb(12, 182, 12);
    font-size: 26rpx;
}

/* 日期 */
.day {
    float: right;
    color: pink;
    font-size: 28rpx;
}

/* 成交记录 */
.transactionContainer {
    margin-top: 10rpx;
    display: flex;
}
/* 教龄和成交记录的标签 */
.teachAgeIcon,
.transaction {
    /* margin: 10rpx; */
    padding: 2rpx;
    border: 1rpx solid;
    border-radius: 10rpx;
    font-size: 26rpx;
    color: white;
}
/* 教龄标签的背景色 */
.teachAgeIcon {
    background-color: rgba(255, 0, 0, .6);
}
/* 成交记录标签的背景色 */
.transaction {
    background-color: rgba(0, 128, 0, .6);
}
/* 教龄和成交记录标签后的文字 */
.teachYears,
.transactionTotal {
    font-size: 24rpx;
    margin-left: 10rpx;
}

/* 最新接单 */
.transactionList {
    margin-top: 10rpx;
    color: green;
    font-size: 24rpx;
}

/* 可授课科目 */
.courseList {
    margin-top: 10rpx;
    font-size: 30rpx;
}

/* 自我介绍 */
.introduceDetail {
    margin-top: 10rpx;
    font-size: 28rpx;
}
/* 自我介绍的内容 */
.introduceDetail text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*设置对齐模式*/
    -webkit-box-orient: vertical;
    /*设置多行的行数，本例为两行*/
    -webkit-line-clamp: 4;
}

/* 老师身份、学历、性别、大学、老师照片选项区的公共样式 */
.teachId,
.eduList,
.teachSex,
.schoolList,
.teachImgList
{
    background-color: #F3F3F3;
    border: 1rpx solid #E6E6E6;
    position: fixed;
    padding: 10rpx;
    z-index: 3;
}
/* 课程科目 */
.course{
    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{
    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;
}

/* 老师身份选项区 */
.teachId{
    top: 124rpx;
    left: 34%;
}
/* 老师身份、学历、性别、大学、老师照片筛选内容区的公共样式 */
.detail{
    margin: 30rpx 0;
}

/* 老师学历选项区 */
.eduList{
    width: 30%;
    top: 124rpx;
    right: 20rpx;
}

/* 老师性别选项区 */
.teachSex{
    width: 22%;
    top: 186rpx;
    left: 20rpx;
}
/* 大学选项区 */
.schoolList{
    width: 50%;
    top: 186rpx;
    left: 34%;
}
/* 老师照片选项区 */
.teachImgList{
    width: 180rpx;
    top: 186rpx;
    left: 66%;
}