_app-common.scss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. /* 从小程序 app.wxss 迁移过来的全局公用样式(partial)
  2. 统一在 theme/index.scss 中通过 @import 'mixins/app-common'; 引入
  3. 说明:该文件以 "_" 开头表示 Sass partial,不会单独生成 CSS
  4. */
  5. page {
  6. height: 100vh;
  7. /*主色 */
  8. --dominantColor: #74b72f;
  9. /*辅色 */
  10. --auxiliaryColor: #f08400;
  11. }
  12. /* 背景色 */
  13. .backgroundCustom,
  14. .p_bgcolor {
  15. background: var(--dominantColor) !important;
  16. color: #fff !important;
  17. }
  18. .backgroundCustom_F08 {
  19. background: var(--auxiliaryColor) !important;
  20. color: #fff !important;
  21. }
  22. .backgroundCustom_D9 {
  23. background-color: #d9d9d9 !important;
  24. color: #fff !important;
  25. }
  26. /* 字体颜色 */
  27. .colorCustom,
  28. .p_color {
  29. color: var(--dominantColor) !important;
  30. }
  31. .colorCustom_F08 {
  32. color: var(--auxiliaryColor) !important;
  33. }
  34. .colorCustom_999 {
  35. color: #999 !important;
  36. }
  37. .colorRed {
  38. color: #fa4844 !important;
  39. }
  40. /* 边框颜色 */
  41. .boderColorCustom {
  42. border-color: var(--dominantColor) !important;
  43. }
  44. .boderColorCustom::before {
  45. border-color: var(--dominantColor) !important;
  46. }
  47. .boderColorCustom_F08 {
  48. border-color: var(--auxiliaryColor) !important;
  49. }
  50. .boderColorCustom_F08::before {
  51. border-color: var(--auxiliaryColor) !important;
  52. }
  53. /* 初始化 */
  54. .container {
  55. height: 100%;
  56. box-sizing: border-box;
  57. background-color: #f1f1f6;
  58. color: #000;
  59. font-size: 28rpx;
  60. font-family: Source Han Sans CN;
  61. }
  62. .content {
  63. display: inline-block;
  64. width: 100%;
  65. background-color: #f1f1f6;
  66. }
  67. .content_inner {
  68. position: relative;
  69. z-index: 1;
  70. }
  71. button {
  72. width: 100% !important;
  73. padding: 0 !important;
  74. margin: 0 !important;
  75. }
  76. button:after {
  77. border: 0;
  78. border-radius: 0;
  79. }
  80. image {
  81. display: block;
  82. width: 100%;
  83. height: 100%;
  84. }
  85. view,
  86. image,
  87. text,
  88. navigator,
  89. form {
  90. box-sizing: border-box;
  91. line-height: 1em;
  92. }
  93. .fixed {
  94. position: fixed;
  95. top: 0;
  96. left: 0;
  97. width: 100%;
  98. }
  99. input {
  100. font-family: PingFang-SC-Medium;
  101. color: #303133;
  102. font-size: 30rpx;
  103. min-height: 0;
  104. width: 100%;
  105. }
  106. .placeholder {
  107. color: #ccc;
  108. font-family: SourceHanSansCN-Regular;
  109. font-size: 30rpx;
  110. }
  111. .flexCenter {
  112. display: flex;
  113. align-items: center;
  114. justify-content: center;
  115. }
  116. .flexBetween {
  117. display: flex;
  118. align-items: center;
  119. justify-content: space-between;
  120. }
  121. .flexColumnCenter {
  122. display: flex;
  123. align-items: center;
  124. flex-direction: column;
  125. justify-content: center;
  126. }
  127. .public_dialog {
  128. background-color: rgba(1, 1, 1, 0.6);
  129. position: fixed;
  130. top: 0;
  131. left: 0;
  132. width: 100%;
  133. height: 100%;
  134. z-index: 11;
  135. display: flex;
  136. align-items: center;
  137. justify-content: center;
  138. }
  139. /* 弹性布局-横向 */
  140. .displayFlexRow {
  141. display: flex;
  142. flex-direction: row;
  143. justify-content: center;
  144. align-items: center;
  145. }
  146. /* 弹性布局-纵向 */
  147. .displayFlexCol {
  148. display: flex;
  149. flex-direction: column;
  150. justify-content: center;
  151. align-items: center;
  152. }
  153. /* 弹性布局-横向两端对齐 */
  154. .displayFlexBetween {
  155. display: flex;
  156. flex-wrap: wrap;
  157. justify-content: space-between;
  158. align-items: center;
  159. }
  160. /* 弹性布局-靠左 */
  161. .displayFlexLeft {
  162. display: flex;
  163. flex-wrap: wrap;
  164. justify-content: left;
  165. align-items: center;
  166. }
  167. /* 提示 */
  168. .public_tip {
  169. padding: 40rpx 30rpx;
  170. font-size: 26rpx;
  171. font-family: Source Han Sans CN;
  172. font-weight: 400;
  173. color: rgba(166, 166, 166, 1);
  174. line-height: 40rpx;
  175. }
  176. /* 滑块 */
  177. .public_switch {
  178. transform: scale(0.7);
  179. margin-right: -20rpx;
  180. }
  181. /* 向右 图片 */
  182. .public_right_img {
  183. width: 12rpx;
  184. height: 21rpx;
  185. position: absolute;
  186. right: 0;
  187. top: 0;
  188. bottom: 0;
  189. margin: auto 0;
  190. }
  191. .public_right_img30 {
  192. right: 30rpx;
  193. }
  194. .arrow {
  195. width: 12rpx;
  196. height: 21rpx;
  197. margin-right: 30rpx;
  198. }
  199. /* 长按钮 */
  200. /*
  201. <view class="public_btn_con">
  202. <view class="public_btn backgroundCustom">添加就诊卡</view>
  203. </view>
  204. */
  205. .public_btn_con {
  206. position: fixed;
  207. left: 0;
  208. bottom: 0;
  209. width: 100%;
  210. height: 180rpx;
  211. padding: 30rpx 30rpx 52rpx;
  212. background-color: #f1f1f6;
  213. }
  214. .public_btn {
  215. border-radius: 49rpx;
  216. height: 88rpx;
  217. display: flex;
  218. align-items: center;
  219. justify-content: center;
  220. font-size: 34rpx;
  221. font-weight: 500;
  222. }
  223. .bg_white {
  224. background: #fff !important;
  225. }
  226. /* 头部组件固定 */
  227. .userInfoTopFixe {
  228. position: fixed;
  229. top: 0;
  230. width: 100%;
  231. z-index: 3;
  232. }
  233. /* 边框 */
  234. .border_top {
  235. position: relative;
  236. }
  237. .border_top::before {
  238. content: ' ';
  239. position: absolute;
  240. left: 0;
  241. top: 0;
  242. width: 100%;
  243. height: 1px;
  244. border-top: 1px solid #eee;
  245. -webkit-transform-origin: 0 0;
  246. transform-origin: 0 0;
  247. -webkit-transform: scaleY(0.5);
  248. transform: scaleY(0.5);
  249. }
  250. .border_bottom {
  251. position: relative;
  252. }
  253. .border_bottom::before {
  254. content: ' ';
  255. position: absolute;
  256. left: 0;
  257. bottom: 0;
  258. width: 100%;
  259. height: 1px;
  260. border-top: 1px solid #eee;
  261. -webkit-transform-origin: 0 0;
  262. transform-origin: 0 0;
  263. -webkit-transform: scaleY(0.5);
  264. transform: scaleY(0.5);
  265. }
  266. .border_left {
  267. position: relative;
  268. }
  269. .border_left::after {
  270. content: ' ';
  271. position: absolute;
  272. left: 0;
  273. bottom: 0;
  274. width: 1px;
  275. height: 100%;
  276. border-left: 1px solid #eee;
  277. -webkit-transform-origin: 0 0;
  278. transform-origin: 0 0;
  279. -webkit-transform: scaleX(0.5);
  280. transform: scaleX(0.5);
  281. }
  282. .border_right {
  283. position: relative;
  284. }
  285. .border_right::after {
  286. content: ' ';
  287. position: absolute;
  288. right: 0;
  289. bottom: 0;
  290. width: 1px;
  291. height: 100%;
  292. border-right: 1px solid #eee;
  293. -webkit-transform-origin: 0 0;
  294. transform-origin: 0 0;
  295. -webkit-transform: scaleX(0.5);
  296. transform: scaleX(0.5);
  297. }
  298. .border {
  299. position: relative;
  300. }
  301. .border::before {
  302. content: '';
  303. position: absolute;
  304. border: 1px solid #ccc;
  305. top: -50%;
  306. left: -50%;
  307. width: 200%;
  308. height: 200%;
  309. border-radius: 50px;
  310. transform: scale(0.5);
  311. box-sizing: border-box;
  312. }
  313. .border_fillet {
  314. position: relative;
  315. }
  316. .border_fillet::after {
  317. content: '';
  318. position: absolute;
  319. top: -50%;
  320. bottom: -50%;
  321. left: -50%;
  322. right: -50%;
  323. width: 200%;
  324. height: 200%;
  325. -webkit-transform: scale(0.5);
  326. transform: scale(0.5);
  327. border: solid 1px var(--dominantColor);
  328. border-radius: 600rpx;
  329. box-sizing: border-box;
  330. }
  331. /* 下拉加载更多样式 */
  332. .public_loadAllTip {
  333. text-align: center;
  334. padding: 35rpx 0;
  335. color: #999;
  336. }
  337. /* 暂无数据 */
  338. .noData {
  339. width: 100%;
  340. padding-top: 0;
  341. position: absolute;
  342. top: 50%;
  343. margin-top: -250rpx;
  344. }
  345. /* 遮罩 */
  346. .mask {
  347. width: 100%;
  348. height: 100%;
  349. background: rgba(0, 0, 0, 0.6);
  350. position: fixed;
  351. top: 0;
  352. left: 0;
  353. z-index: 3;
  354. }
  355. /* 互联网专用 */
  356. /* 弹性布局-横向 */
  357. .p_flexCenter {
  358. display: flex;
  359. flex-direction: row;
  360. justify-content: center;
  361. align-items: center;
  362. }
  363. /* 弹性布局-纵向 */
  364. .p_flexCenterCol {
  365. display: flex;
  366. flex-direction: column;
  367. justify-content: center;
  368. align-items: center;
  369. }
  370. /* 弹性布局-横向两端对齐 */
  371. .p_flexBetween {
  372. display: flex;
  373. justify-content: space-between;
  374. align-items: center;
  375. }
  376. /* 文本溢出省略 */
  377. .ellipsis {
  378. white-space: nowrap;
  379. overflow: hidden;
  380. text-overflow: ellipsis;
  381. }
  382. /* 弹性布局-起始对齐 */
  383. .displayFlexStart {
  384. display: flex;
  385. flex-direction: row;
  386. justify-content: flex-start;
  387. align-items: center;
  388. }
  389. /* 特殊色调 */
  390. .backgroundCustom_E35779 {
  391. background: #e35779 !important;
  392. color: #fff !important;
  393. }
  394. .p_color_E35779 {
  395. color: #e35779 !important;
  396. }
  397. /* 压缩图片canvas(隐藏到视口外) */
  398. .press_canvas {
  399. position: absolute;
  400. top: -1000px;
  401. background-color: gray;
  402. }
  403. uni-video {
  404. width: 100% !important;
  405. }