.listWrap { min-height: 100%; padding: 32px; background-color: #fff; border-radius: 20px; } .teacherSection { display: flex; align-items: center; border-bottom: 1px solid #E9E9E9; margin-bottom: 30px; padding-bottom: 24px; .tTemp { display: flex; align-content: center; } .infos { padding: 13px; background: #FFFFFF; border-radius: 10px; .homeTitle { font-size: max(17px, 14Px); font-family: PingFangSC, PingFang SC; font-weight: 600; color: #000000; padding-bottom: 5px; } .homeContent { padding-bottom: 5px; } .homeworkText { display: flex; align-items: flex-start; .pSection { max-width: 500px; } .p1, .p2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p1::before, .p2::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #198CFE; margin-right: 7px; border-radius: 50%; flex-shrink: 0; transform: translateY(-3px); } .p2 { padding-top: 6px; } .p2::before { background: #F44040; } } .title { font-size: max(13px, 12Px); color: #777777; flex-shrink: 0; } .text { font-size: max(13px, 12Px); font-weight: 500; color: #333333; line-height: 22px; } } .stitcTitle { display: flex; align-items: center; font-size: max(20px, 16Px); font-family: PingFangSC, PingFang SC; font-weight: 600; color: #000000; line-height: 28px; padding-bottom: 30px; &::before { content: ''; display: inline-block; width: 4px; height: 14px; background: #198CFE; border-radius: 2px; margin-right: 8px; } } .stitcConent { :global { .n-progress { width: 116Px; } } .contentRect { text-align: center; .text { padding-top: 5px; font-size: 12Px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #777777; line-height: 17px; } } .nums { display: flex; align-items: center; font-size: max(26px, 18Px); font-family: DINAlternate, DINAlternate; font-weight: bold; color: #000000; line-height: 30px; i { font-style: normal; font-size: max(20px, 14Px); } span { font-size: 12Px; font-family: PingFangSC, PingFang SC; font-weight: 500; color: #333333; line-height: 17px; } } } } .teacherList { display: flex; // align-items: center; flex-direction: column; // margin-bottom: 32px; flex: 1; margin-right: 60px; position: relative; &::after { content: ''; position: absolute; right: 0; width: 1px; height: 120px; background: #E9E9E9; top: 50%; margin-top: -60px; } .teacherHeader { width: 100px; height: 100px; padding: 4px; border-radius: 99px; background: linear-gradient(228deg, rgba(2, 186, 255, 1), rgba(0, 122, 254, 1)); margin-right: 20px; .teacherHeaderBorder { width: 100%; height: 100%; background: #fff; border-radius: 99px; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 4px; } } .teacherHeaderImg { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; } .workafterInfo { display: flex; justify-content: center; flex-direction: column; h4 { font-size: 22px; line-height: 30px; font-weight: 600; color: #131415; margin-bottom: 12px; } p { font-size: max(16px, 12Px); line-height: 22px; color: #777; span { color: #ea4132; } } } } .wordDetailModel { width: 1012px; }