zj-teach/pages/index/index.wxss

/* pages/index/index.wxss */

/* 轮播图 */
.swWrapper {
    height: 400rpx;
}

.swImg {
    width: 100%;
    height: 400rpx;
}

/* 热门教员、热门学员标题 */
.hotTitle {
    display: flex;
    margin-top: 20rpx;
    justify-content: center;
    align-items: center;
}
/* 热门教员、热门学员标题前后的线条 */
.hotTitle::before {
    content: "";
    margin-right: 20rpx;
    height: 1px;
    border: none;
    border-top: 1px solid #000;
    flex: 1 1 0rpx;
}
.hotTitle::after {
    content: "";
    margin-left: 20rpx;
    height: 1px;
    border: none;
    border-top: 1px solid #000;
    flex: 1 1 0rpx;
}
/* 热门图标 */
.hotIcon {
    width: 40rpx;
    height: 40rpx;
}
/* 热门教员、热门学员 */
.hotTeacher,
.hotStudent{
    position: relative;
    display: flex;
    padding: 20rpx;
    height: 160rpx;
    align-items: center;
}
/* 教员、学员头像 */
.teachImg,
.studentImg{
    width: 25%;
    height: 100%;
}
/* 文字 */
.hotTeacherText,
.hotStudentText{
    margin-left: 40rpx; 
}
.teachTitle,
.teachDistance,
.studentTitle,
.studentDistance{
    height: 60rpx;
    line-height: 60rpx;
}
/* 距离字体颜色 */
.teachDistance,
.studentDistance{
    color: red;
}
/* 距离的数字样式 */
.teachDistance text,
.studentDistance text{
    margin-left: 20rpx;
    margin-right: 20rpx;
    font-weight: bold;
}

/* 明星级字样 */
.teachGrade,
.studentGrade{
    position: absolute;
    top: 0;
    border: 1rpx solid red;
    font-size: 26rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    padding: 2rpx 10rpx 2rpx 4rpx;
    background-color: red;
    color: white;
    z-index: 99;
}

/* 攻略、合作 */
.strategy,
.cooperation{
    display: flex;
    margin-top: 30rpx;
    padding: 20rpx;
    /* background-color: greenyellow; */
    align-items: center;
}

.strategyTitle,
.cooperationTitle{
    font-size: 42rpx;
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
}
/* 更多 */
.strategyMore,
.cooperationMore{
    display: flex;
    align-items: center;
    position: absolute;
    right: 30rpx;
    border: 1rpx solid gray;
    padding: 2rpx 20rpx;
    border-radius: 30rpx;
}
/* 箭头 */
.strategyImg,
.cooperationImg{
    width: 30rpx;
    height: 30rpx;
}
/* 内容区 */
.strategyContent{
    height: 300rpx;
    margin-left: 20rpx;
}

/* 攻略图片 */
.strategyScroll{
    display: flex;
    height: 300rpx;
}
.strategyItem,
.scrollItem{
    margin-right: 20rpx;
}
.strategyItem image,
.scrollItem image{
    height: 300rpx;
    border-radius: 20rpx;
}
/* 合作区 */
.cooperationContent{
    height: 350rpx;
    margin-left: 20rpx;
}
/* 合作图片 */
.cooperationScroll{
    display: flex;
    height: 300rpx;
}

.scrollItem{
    width: 350rpx;
}
.scrollItem image{
    width: 350rpx;
    
}