pages_style.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. page{
  2. background-color: $page-color;
  3. }
  4. .page-view{
  5. display: flex;
  6. flex-direction: column;
  7. width: 100%;
  8. height: 100%;
  9. overflow-x: hidden; //隐藏多余的页面
  10. }
  11. .title{
  12. line-height: 35rpx;
  13. font-size: 35rpx;
  14. font-weight: bold;
  15. color: $title;
  16. }
  17. .subtitle{
  18. line-height: 30rpx;
  19. font-size: 30rpx;
  20. font-weight: bold;
  21. color: $subtitle;
  22. }
  23. .YS-title{
  24. line-height: 35rpx;
  25. font-size: 35rpx;
  26. color: $title;
  27. font-family: YSfont;
  28. }
  29. .YS-subtitle{
  30. line-height: 32rpx;
  31. font-size: 32rpx;
  32. color: $subtitle;
  33. font-family: YSfont;
  34. }
  35. //标题头
  36. .front-tag {
  37. margin-right: 20rpx;
  38. height: 100%;
  39. width: 5rpx;
  40. border-radius: 6rpx;
  41. background-image: linear-gradient(#4169E1, rgba(65,105,225,0.3));
  42. z-index: 99;
  43. }
  44. //标题底
  45. .bottom-tag{
  46. margin-top: -10rpx;
  47. margin-left: 20%;
  48. height: 20rpx;
  49. width: 90%;
  50. border-radius: 12rpx;
  51. background-image: linear-gradient(to right, #4169E1, rgba(1,1,1,0));
  52. z-index: -1;
  53. }
  54. //标签
  55. .tag {
  56. border-radius: 50rpx;
  57. border: 1rpx solid $color-blue;
  58. padding: 2rpx 12rpx;
  59. .tag-text {
  60. font-size: 22rpx;
  61. color: $color-blue;
  62. }
  63. }
  64. //标签
  65. .tag-fill{
  66. display: flex;
  67. align-items: center;
  68. border-radius: 6rpx;
  69. background-color: $color-blue;
  70. padding: 6rpx 12rpx;
  71. .tag-text {
  72. font-size: 24rpx;
  73. color: #FFF;
  74. }
  75. }
  76. //卡片
  77. .card-view {
  78. display: flex;
  79. flex-flow: row wrap;
  80. margin: 20rpx;
  81. justify-content: space-between;
  82. .card-item {
  83. margin: 2% 0;
  84. width: 48%;
  85. height: auto;
  86. display: flex;
  87. flex-direction: column;
  88. background-color: #FFF;
  89. border-radius: $border-radius;
  90. overflow: hidden;
  91. z-index: 55;
  92. .card-title {
  93. display: flex;
  94. align-items: center;
  95. padding: 20rpx;
  96. z-index: 55;
  97. .title {
  98. font-size: 32rpx;
  99. line-height: 40rpx;
  100. }
  101. }
  102. }
  103. }
  104. //横向flex布局
  105. .flex-row{
  106. display:flex;
  107. align-items: center;
  108. }
  109. //竖向flex布局
  110. .flex-column{
  111. display:flex;
  112. flex-direction: column;
  113. }
  114. //横向baseline布局
  115. .flex-baseline{
  116. display: flex;
  117. align-items: baseline;
  118. }
  119. //插画
  120. .detail-image {
  121. width: 100%;
  122. height: 450rpx;
  123. background-size: cover; //背景图片自适应
  124. background-repeat: no-repeat;
  125. z-index: 50;
  126. }
  127. //图标
  128. .t-icon {
  129. display: inline-block;
  130. width: 40rpx;
  131. height: 40rpx;
  132. background-repeat: no-repeat;
  133. background-position: center;
  134. background-size: 100%;
  135. }
  136. //头部背景
  137. .bg-box1 {
  138. position: fixed;
  139. width: 100%;
  140. height: 800rpx;
  141. background-size: 100%;
  142. background-repeat: no-repeat;
  143. background-image: linear-gradient(to top, #f3f4f9, rgba(255, 255, 255, 0) 45%),url('https://image.meiye.art/pic_1628634662880');
  144. }
  145. .bg-box2{
  146. position: fixed;
  147. width: 100%;
  148. height: 800rpx;
  149. background-size: 100%;
  150. background-repeat: no-repeat;
  151. background-image: linear-gradient(to top, #f3f4f9, rgba(255, 255, 255, 0) 45%),url('https://image.meiye.art/pic_1628634712718');
  152. }