findTeacher.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /* pages/findTeacher/findTeacher.wxss */
  2. /* 设置页面背景 */
  3. .teachWrapper{
  4. background-color: #E2F0D9;
  5. height: 100%;
  6. padding: 20rpx;
  7. }
  8. /* 设置单个教员背景 */
  9. .teachDetail{
  10. display: flex;
  11. position: relative;
  12. /* border: 1rpx solid gray; */
  13. padding: 10rpx 0;
  14. border-radius: 20rpx;
  15. background-color: #FFF2CC;
  16. margin-bottom: 20rpx;
  17. font-weight: bold;
  18. font-size: 28rpx;
  19. }
  20. .teachIntroTop{
  21. display: flex;
  22. }
  23. /* 教员头像 */
  24. .teachImg{
  25. width: 22%;
  26. margin: 10rpx;
  27. border-radius: 20rpx;
  28. }
  29. .teachIntro{
  30. margin-left: 10rpx;
  31. }
  32. /* 科目 */
  33. .course{
  34. display: flex;
  35. }
  36. .teachCourse{
  37. margin-left: 10rpx;
  38. width: 160rpx;
  39. display: block;
  40. white-space: nowrap;
  41. overflow: hidden;
  42. text-overflow: ellipsis;
  43. }
  44. /* 右侧部分定位 */
  45. .teachIntroRight{
  46. position: absolute;
  47. /* right: 30rpx; */
  48. left: 65%;
  49. }
  50. /* 教员学历和教龄 */
  51. .teachEduAndAge{
  52. display: flex;
  53. }
  54. /* 教龄图标 */
  55. .teachAgeIcon {
  56. margin-left: 20rpx;
  57. padding: 2rpx;
  58. border: 1rpx solid;
  59. border-radius: 10rpx;
  60. font-size: 26rpx;
  61. color: white;
  62. background-color: #FF6666;
  63. }
  64. /* 教龄 */
  65. .teachAge{
  66. margin-left: 10rpx;
  67. font-weight: bold;
  68. color: red;
  69. }
  70. /* 距离 */
  71. .teachDistance{
  72. margin-top: 20rpx;
  73. color: red;
  74. }
  75. /* 距离数字 */
  76. .distance{
  77. margin: 0 10rpx;
  78. font-size: 40rpx;
  79. font-weight: bold;
  80. }
  81. /* 成功经验 */
  82. .experience{
  83. display: flex;
  84. }
  85. .teachExperience{
  86. width: 300rpx;
  87. margin-left: 10rpx;
  88. display: block;
  89. white-space: nowrap;
  90. overflow: hidden;
  91. text-overflow: ellipsis;
  92. }