common.scss 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. /* 全局公共样式 */
  2. page{
  3. font-size: $global-font-size-base;
  4. color: $global-text-color;
  5. width: 100%;
  6. min-height: calc(100% - calc(50px + constant(safe-area-inset-bottom)));
  7. min-height: calc(100% - calc(50px + env(safe-area-inset-bottom)));
  8. background-color: $global-bg-color;
  9. padding-bottom: calc(50px + constant(safe-area-inset-bottom));
  10. padding-bottom: calc(50px + env(safe-area-inset-bottom));
  11. }
  12. view{
  13. box-sizing: border-box;
  14. }
  15. .flex{
  16. display: flex;
  17. }
  18. /* 卡片列表样式 */
  19. .global-list-card{
  20. border: 1px solid rgba(112, 112, 112, 0.05);
  21. box-shadow: 3rpx 3rpx 12rpx rgba(161, 161, 161, 0.14);
  22. border-radius: 16rpx;
  23. overflow: hidden;
  24. }
  25. /* 公共按钮 */
  26. .global-btn-yellow-change{
  27. background: linear-gradient(270deg, #EEC795 0%, #D9A360 100%);
  28. border-radius: 35rpx;
  29. color: $global-text-color-white;
  30. text-align: center;
  31. line-height: 70rpx;
  32. }
  33. .global-btn-yellow-plain{
  34. text-align: center;
  35. color: $global-text-color-main;
  36. border-radius: 35rpx;
  37. border: 1px solid $global-text-color-main;
  38. line-height: 70rpx;
  39. }
  40. .global-btn-disable{
  41. text-align: center;
  42. color:$global-text-color-white;
  43. background-color: #E6E6E6;
  44. border-radius: 35rpx;
  45. line-height: 70rpx;
  46. }
  47. /* 公共弹窗 */
  48. .global-pup{
  49. background-color: #fff;
  50. width: 90vw;
  51. min-height: 200rpx;
  52. font-size: $global-font-size-lg;
  53. .content{
  54. padding: 34rpx;
  55. text-align: center;
  56. min-height: 250rpx;
  57. display: flex;
  58. align-items: center;
  59. text-align: center;
  60. line-height: 1.7;
  61. rich-text{
  62. flex: 1;
  63. }
  64. }
  65. .bot{
  66. border-top: 1px solid $global-border-color;
  67. view{
  68. line-height: 96rpx;
  69. flex: 1;
  70. text-align: center;
  71. border-right: 1px solid $global-border-color;
  72. color:$global-text-color-main;
  73. }
  74. view:last-child {
  75. border: none;
  76. }
  77. }
  78. }
  79. /* 报告模块公共空白页 */
  80. .report-empty-box{
  81. text-align: center;
  82. font-size: 32rpx;
  83. color: #999;
  84. padding-top: 150rpx;
  85. image{
  86. width: 346rpx;
  87. margin-bottom: 57rpx;
  88. }
  89. }
  90. .text_oneLine {
  91. overflow: hidden;
  92. text-overflow: ellipsis;
  93. white-space: nowrap;
  94. }
  95. /* 问答模块单个问答样式*/
  96. .question-item {
  97. margin-bottom: 20rpx;
  98. &::after{
  99. content: '';
  100. display: block;
  101. height:10rpx;
  102. margin:0 -30rpx;
  103. background-color: #F9F9F9;
  104. }
  105. &:last-child{
  106. &::after{
  107. background-color: #FFFFFF;
  108. }
  109. }
  110. .question-info{
  111. display: flex;
  112. padding: 10rpx 0;
  113. .question-title{
  114. font-size: 32rpx;
  115. color:#333333;
  116. .item-label{
  117. padding:7rpx 12rpx;
  118. font-size: 22rpx;
  119. text-align: center;
  120. background-color: #333333;
  121. color: #E4B478;
  122. border-radius: 21rpx;
  123. margin-right:15rpx ;
  124. }
  125. }
  126. .item-answer {
  127. display: flex;
  128. align-items: center;
  129. .answer {
  130. width:150rpx;
  131. height: 97rpx;
  132. box-sizing: border-box;
  133. padding:30rpx 15rpx;
  134. border-radius: 18rpx;
  135. background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
  136. display: flex;
  137. justify-content: space-around;
  138. align-items: center;
  139. color: #FFFFFF;
  140. font-size: 24rpx;
  141. .load-img{
  142. width: 34rpx;
  143. height: 34rpx;
  144. margin-right: 10rpx;
  145. animation: circle 1s linear infinite;
  146. }
  147. .music-img{
  148. width: 25rpx;
  149. height: 34rpx;
  150. margin-right: 10rpx;
  151. }
  152. @keyframes circle {
  153. 0%{
  154. transform: rotateZ(0);
  155. }
  156. 100%{
  157. transform: rotateZ(360deg);
  158. }
  159. }
  160. }
  161. }
  162. }
  163. .item-time {
  164. color: #999999;
  165. font-size: 24rpx;
  166. margin:20rpx 0;
  167. display: block;
  168. }
  169. }
  170. /* 问答模块无权限样式 */
  171. .noAuth-wrap{
  172. display: flex;
  173. flex-direction: column;
  174. align-items: center;
  175. font-size: $global-font-size-lg;
  176. .auth-text{
  177. /* color:#999999; */
  178. text-align: center;
  179. text{
  180. margin-left: 15rpx;
  181. color:#E6B77D;
  182. }
  183. }
  184. .img{
  185. width: 100%;
  186. margin-bottom: 50rpx;
  187. }
  188. .btn{
  189. width: 380rpx;
  190. line-height: 70rpx;
  191. margin-left: auto;
  192. margin-right: auto;
  193. margin-top: 40rpx;
  194. }
  195. .apply{
  196. margin-top: 40rpx;
  197. width:390rpx;
  198. height:80rpx;
  199. background-color: #E6B77D;
  200. color: #FFFFFF;
  201. text-align: center;
  202. line-height: 80rpx;
  203. border-radius: 40rpx;
  204. }
  205. }
  206. // 跳转去提问的悬浮按钮
  207. .to-question-fixed-box{
  208. width: 162rpx;
  209. height: 145rpx;
  210. background: #FFFFFF;
  211. box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.08);
  212. border: 1px solid #F2F2F2;
  213. display: flex;
  214. align-items: center;
  215. flex-direction: column;
  216. justify-content: center;
  217. border-radius: 16rpx;
  218. image{
  219. width: 84rpx;
  220. height: 84rpx;
  221. }
  222. text{
  223. font-size: 28rpx;
  224. font-weight: 400;
  225. color: #E3B377;
  226. }
  227. }