videopage.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. .container{
  2. width: 100%;
  3. .video-box {
  4. width: 100%;
  5. .video {
  6. width: 100%;
  7. }
  8. }
  9. .block-tag-box{
  10. border-radius: 6rpx;
  11. border: 1rpx solid $color-mixblue;
  12. padding: 5rpx 14rpx;
  13. .block-tag{
  14. font-size: 22rpx;
  15. color: $color-mixblue;
  16. }
  17. }
  18. .info-box {
  19. width: 650rpx;
  20. display: flex;
  21. align-items: center;
  22. justify-content: space-between;
  23. padding: 30rpx 50rpx;
  24. height: 145rpx;
  25. background-color: #FFF;
  26. .info-name {
  27. font-size: 40rpx;
  28. font-weight: bold;
  29. color: $color-title;
  30. }
  31. .info-time {
  32. font-size: 28rpx;
  33. color: $color-subtitle;
  34. }
  35. .info-msg{
  36. font-weight: bold;
  37. font-size: 30rpx;
  38. color: $color-subtitle;
  39. }
  40. }
  41. .list-name-box{
  42. display: flex;
  43. align-items: center;
  44. margin:20rpx 0 20rpx 50rpx;
  45. .list-name{
  46. margin-left:15rpx;
  47. margin-bottom: 4rpx;
  48. font-size: 36rpx;
  49. font-weight: bold;
  50. color: #3B4144;
  51. line-height: 40rpx;
  52. }
  53. }
  54. .video-list{
  55. margin: 16rpx 0;
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. .class-block{
  60. display: flex;
  61. flex-direction: column;
  62. justify-content: center;
  63. background-color: #FFF;
  64. padding: 16rpx 30rpx;
  65. height: 110rpx;
  66. width: 100%;
  67. .content-box{
  68. width: 100%;
  69. display: flex;
  70. align-items: center;
  71. justify-content: space-between;
  72. // margin-top: -32rpx;
  73. }
  74. .content-info {
  75. font-size: 30rpx;
  76. font-weight: bold;
  77. color: $color-title;
  78. }
  79. .info-time {
  80. font-size: 22rpx;
  81. color: $color-subtitle;
  82. }
  83. }
  84. .btn{
  85. display: flex;
  86. align-items: center;
  87. justify-content: center;
  88. margin-left: 20rpx;
  89. height: 70rpx;
  90. width: 140rpx;
  91. border-radius: 10rpx;
  92. }
  93. }
  94. .flex-box{
  95. display: flex;
  96. justify-content: space-between;
  97. flex-direction: column;
  98. }
  99. .flex{
  100. display: flex;
  101. align-items: center;
  102. justify-content: space-between;
  103. }
  104. .t-icon {
  105. size: 60rpx;
  106. }
  107. .start-tag{
  108. height: 40rpx;
  109. }
  110. .content-subtitle {
  111. font-size: 25rpx;
  112. font-weight: bold;
  113. color: #FFF;
  114. }
  115. .title-box{
  116. position: relative;
  117. top: -45rpx;
  118. width:fit-content;
  119. height: 36rpx;
  120. border-radius: 10rpx;
  121. padding: 5rpx 20rpx;
  122. }
  123. .u-action-sheet__header__title.data-v-b62b882e{
  124. color: $color-title !important;
  125. }
  126. .flex-icon{
  127. display: flex;
  128. justify-content: space-between;
  129. padding: 50rpx 100rpx 70rpx 100rpx;
  130. .t-icon{
  131. width: 80rpx;
  132. height: 80rpx;
  133. }
  134. .text{
  135. margin-top: 20rpx;
  136. color: $color-title;
  137. font-size:30rpx;
  138. }
  139. }
  140. .timeInfo{
  141. font-weight: bold;
  142. font-size: 40rpx;
  143. color: #aaaaaa;
  144. }
  145. }