common.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. /**
  2. *全局样式,以 App- 前缀命名
  3. */
  4. *{
  5. margin: 0;
  6. padding: 0;
  7. }
  8. page, body {
  9. font-family: 'microsoft yahei';
  10. font-size: 24px;
  11. height: 100%;
  12. // line-height: 1;
  13. }
  14. .app-wh100 {
  15. width: 100%;
  16. height: 100%;
  17. }
  18. // .App_bg {
  19. // height: 100%;
  20. // }
  21. .App{
  22. // line-height: 1;
  23. min-height: 100vh;
  24. }
  25. .App_gray{
  26. // line-height: 1;
  27. min-height: 100vh;
  28. background-color: #f5f5f5;
  29. }
  30. .App_row {
  31. display: flex;
  32. justify-content: center;
  33. }
  34. .App_col {
  35. display: flex;
  36. align-items: center;
  37. flex-direction: column;
  38. }
  39. .App_border-box * {
  40. box-sizing: border-box;
  41. }
  42. footer {
  43. width: 100%;
  44. // max-width: 750px;
  45. min-width: 320px;
  46. height: 100px;
  47. position: fixed;
  48. text-align: center;
  49. bottom: 0;
  50. background: #fff;
  51. box-shadow: -1px -1px 10px #cccccc; /*no*/
  52. z-index: 100;
  53. }
  54. // 按钮公共样式
  55. .main_btn_com {
  56. display: flex;
  57. color: $auxiliaryColor1;
  58. font-size: 30px;
  59. padding: 15px 40px;
  60. background-color: $mainColor;
  61. border-radius: 50px;
  62. }
  63. .bottom_btn_com {
  64. height: 100px;
  65. line-height: 100px;
  66. color: $auxiliaryColor1;
  67. font-size: 30px;
  68. background-color: $mainColor;
  69. text-align: center;
  70. }
  71. // 带统计字数文本域
  72. .textarea_wrap {
  73. position: relative;
  74. textarea {
  75. display: block;
  76. background-color: #fff;
  77. padding: 30px 31px;
  78. border: 0 none;
  79. width: 100%;
  80. height: 270px;
  81. }
  82. .count {
  83. position: absolute;
  84. line-height: 1;
  85. right: 30px;
  86. bottom: 30px;
  87. font-size:24px;
  88. color:rgba(153,153,153,1);
  89. }
  90. }
  91. /* 超出隐藏 */
  92. .ellipsis_line_com {
  93. overflow: hidden;
  94. white-space: nowrap;
  95. text-overflow: ellipsis;
  96. }
  97. /* 超出两行隐藏 */
  98. .ellipsis_two_line_com {
  99. text-overflow: -o-ellipsis-lastline;
  100. overflow: hidden;
  101. text-overflow: ellipsis;
  102. display: -webkit-box;
  103. -webkit-line-clamp: 2;
  104. line-clamp: 2;
  105. -webkit-box-orient: vertical;
  106. line-height: 1.3;
  107. }
  108. /* 修改vant输入框样式 */
  109. .van-field__body {
  110. padding-left: 20px;
  111. height: 100%;
  112. }
  113. .van-field__control {
  114. height: 100%;
  115. }
  116. .van-field__control::placeholder {
  117. font-size: 34px;
  118. font-weight: normal;
  119. font-stretch: normal;
  120. letter-spacing: 0.7px;
  121. color: #cccccc;
  122. }
  123. /* 黑色蒙版 */
  124. .black_mask {
  125. position: fixed;
  126. top: 0;
  127. bottom: 0;
  128. left: 0;
  129. right: 0;
  130. width: 100vw;
  131. height: 100vh;
  132. background-color: rgba(0,0,0,0.7);
  133. z-index: 999;
  134. &.center {
  135. display: flex;
  136. justify-content: center;
  137. align-items: center;
  138. }
  139. }
  140. // 弹窗关闭按钮
  141. .closemask {
  142. position: absolute;
  143. width: 30px;
  144. height: 30px;
  145. right: 39px;
  146. top: 39px;
  147. }
  148. // 公共底部样式
  149. .pub_footer {
  150. width: 100%;
  151. height: 100px;
  152. position: fixed;
  153. text-align: center;
  154. bottom: 0;
  155. background: white;
  156. box-shadow: -1px -1px 5px #cccccc;
  157. z-index: 100;
  158. }
  159. .app-footer {
  160. width: 100%;
  161. max-width: 750px; /*no*/
  162. min-width: 320px; /*no*/
  163. height: 100px;
  164. position: fixed;
  165. text-align: center;
  166. bottom: 0;
  167. background: white;
  168. box-shadow: -1px -1px 1px #cccccc; /*no*/
  169. z-index: 100;
  170. font-size: 32px;
  171. color: #3a1b04;
  172. line-height: 90px;
  173. background: #ffd11a;
  174. display: flex;
  175. justify-content: center;
  176. align-items: center;
  177. letter-spacing: 3px;
  178. & .add {
  179. width: 38px;
  180. height: 38px;
  181. margin-right: 20px;
  182. }
  183. }
  184. .noMore{
  185. color: #969799;
  186. font-size: 24upx;
  187. line-height: 50px;
  188. text-align: center;
  189. padding: 30px 0;
  190. }
  191. li{
  192. list-style: none;
  193. }
  194. // .app-seach-box {
  195. // position: relative;
  196. // z-index: 999;
  197. // & .app-filter_wrap {
  198. // padding-left: 30px;
  199. // display: flex;
  200. // justify-content: center;
  201. // align-items: center;
  202. // position: relative;
  203. // color: #666666;
  204. // border-right: 1px;
  205. // & > view {
  206. // padding: 0 5px;
  207. // }
  208. // &::after {
  209. // content: '';
  210. // height: 60px;
  211. // position: absolute;
  212. // background-color: #dddddd;
  213. // width: 1Px;
  214. // left: 0;
  215. // top: 50%;
  216. // transform: translate(0 ,-50%);
  217. // }
  218. // }
  219. // }
  220. /* 分享按钮的公共样式 */
  221. .go_share {
  222. width: 60upx;
  223. height: 60upx;
  224. position: fixed;
  225. right: 5%;
  226. top: 35upx;
  227. opacity: 0.7;
  228. float: right;
  229. z-index: 99;
  230. }
  231. .go_share img {
  232. width: 60upx;
  233. height: 60upx;
  234. float: right;
  235. }
  236. /*返回按钮的公共样式*/
  237. .returnback {
  238. width: 60upx;
  239. height: 60upx;
  240. position: fixed;
  241. left: 5%;
  242. top: 35upx;
  243. opacity: .7;
  244. float: left;
  245. z-index: 1;
  246. }
  247. .returnback img {
  248. width: 60upx;
  249. height: 60upx;
  250. float: left;
  251. }
  252. .includecontent p img{
  253. width: 100%;
  254. height: auto;
  255. }
  256. .uni-overflow-hidden{
  257. overflow: hidden;
  258. height: 100vh;
  259. }
  260. .inputTip_box {
  261. position: relative;
  262. width: 100%;
  263. .inputTip {
  264. position: absolute;
  265. top: 50%;
  266. transform: translateY(-50%);
  267. right: 0;
  268. color: #f44;
  269. font-size: 28upx;
  270. }
  271. }
  272. .text-overflow{
  273. overflow: hidden;
  274. text-overflow: ellipsis;
  275. white-space: nowrap;
  276. }