index.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. ::v-deep .u-swiper__wrapper__item__wrapper__image{
  2. border-radius: 0!important;
  3. }
  4. ::v-deep .u-swiper__wrapper__item{
  5. z-index: 0!important;
  6. }
  7. ::v-deep .u-swiper__wrapper__item__wrapper{
  8. z-index: 0!important;
  9. }
  10. .container::-webkit-scrollbar {
  11. display: none!important;
  12. }
  13. .swiperBox{
  14. position: relative;
  15. z-index: 0;
  16. }
  17. .mainContent{
  18. padding-top: 32rpx;
  19. padding-right: 32rpx;
  20. padding-left: 20rpx;
  21. margin-top:-38rpx;
  22. position: relative;
  23. z-index: 9;
  24. background:#CCDBE9;
  25. min-height:calc(100vh - 450rpx);
  26. border-radius: 0rpx 56rpx 0rpx 0rpx;
  27. border: 4rpx solid #FFFFFF;
  28. padding-bottom: 180rpx;
  29. .topBox{
  30. height: 220rpx;
  31. background: white;
  32. border-radius: 32rpx;
  33. display: flex;
  34. border: 4rpx solid #FFFFFF;
  35. .left{
  36. width: 60%;
  37. height: 100%;
  38. display: flex;
  39. align-items: center;
  40. flex-wrap: nowrap;
  41. overflow-x: scroll;
  42. .item{
  43. width: 164rpx;
  44. height: 164rpx;
  45. border-radius: 32rpx;
  46. margin-right: 20rpx;
  47. flex-shrink:0
  48. }
  49. .item:last-child{
  50. margin-right: 32rpx;
  51. }
  52. }
  53. .right{
  54. height: 220rpx;
  55. width: 42%;
  56. background: linear-gradient(132deg, #0298FF 0%, #017AFF 100%);
  57. border-radius: 0rpx 32rpx 32rpx 0rpx;
  58. padding-left: 32rpx;
  59. padding-top: 50rpx;
  60. box-sizing: border-box;
  61. .t1{
  62. font-size: 20rpx;
  63. font-family: SourceHanSansCN, SourceHanSansCN;
  64. font-weight: 500;
  65. color: #FFFFFF;
  66. }
  67. .t2{
  68. font-size: 32rpx;
  69. font-family: SourceHanSansCN, SourceHanSansCN;
  70. font-weight: 800;
  71. color: #FFFFFF;
  72. // margin-top: 6rpx;
  73. }
  74. .btnBox{
  75. width: 198rpx;
  76. height: 54rpx;
  77. background: linear-gradient(180deg, #90E5FF 0%, #4EDCFF 100%);
  78. border-radius: 8rpx;
  79. display: flex;
  80. align-items: center;
  81. justify-content: center;
  82. font-size: 32rpx;
  83. font-family: SourceHanSansCN, SourceHanSansCN;
  84. font-weight: 500;
  85. color: #FFFFFF;
  86. margin-top: 24rpx;
  87. // .txt{
  88. // width: 100%;
  89. // }
  90. .arrIcon{
  91. width: 28rpx;
  92. height: 28rpx;
  93. background: #FFFFFF;
  94. opacity: 0.19;
  95. margin-left: 8rpx;
  96. }
  97. }
  98. }
  99. }
  100. .botBox{
  101. .title{
  102. font-size: 36rpx;
  103. font-family: SourceHanSansCN, SourceHanSansCN;
  104. font-weight: 800;
  105. color: #333333;
  106. .bookIcon{
  107. width: 35rpx;
  108. height: 35rpx;
  109. }
  110. }
  111. .list{
  112. display: flex;
  113. flex-wrap: wrap;
  114. justify-content:space-between;
  115. .item{
  116. width: 48%;
  117. // height: 408rpx;
  118. background: #FFFFFF;
  119. box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,14,83,0.02);
  120. border-radius: 16rpx;
  121. margin-bottom: 18rpx;
  122. .pic{
  123. width: 100%;
  124. min-height: 336rpx;
  125. border-radius: 20rpx;
  126. }
  127. .des{
  128. font-size: 24rpx;
  129. font-family: PingFang-SC, PingFang-SC;
  130. font-weight: bold;
  131. color: #333333;
  132. height: 72rpx;
  133. display: flex;
  134. align-items: center;
  135. padding-left: 20rpx;
  136. }
  137. }
  138. }
  139. }
  140. }