康巴易测肤/伤疤uniapp小程序类
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

face-bio-assay.wxss 8.9KB

1 月之前
1 月之前
1 月之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .safe-area-bottom.data-v-bbde6278 {
  28. padding-bottom: env(safe-area-inset-bottom);
  29. }
  30. text.data-v-bbde6278 {
  31. font-family: Source Han Sans CN;
  32. }
  33. .modal.data-v-bbde6278 {
  34. height: 100vh;
  35. position: fixed;
  36. top: 0;
  37. right: 0;
  38. bottom: 0;
  39. left: 0;
  40. z-index: 1000;
  41. opacity: 0.1;
  42. outline: 0;
  43. text-align: center;
  44. -webkit-backface-visibility: hidden;
  45. backface-visibility: hidden;
  46. -webkit-perspective: 2000rpx;
  47. perspective: 2000rpx;
  48. pointer-events: none;
  49. overflow: hidden;
  50. }
  51. .modal .back.data-v-bbde6278 {
  52. position: absolute;
  53. top: 30rpx;
  54. left: 0;
  55. height: 60rpx;
  56. /* line-height: 60rpx; */
  57. width: 100vw;
  58. padding: 0 20rpx;
  59. z-index: 9999;
  60. display: flex;
  61. justify-content: flex-start;
  62. align-items: center;
  63. }
  64. .modal .back .back-img.data-v-bbde6278 {
  65. height: 30rpx;
  66. width: 23rpx;
  67. }
  68. .modal .back .back-text.data-v-bbde6278 {
  69. padding-left: 12rpx;
  70. font-size: 30rpx;
  71. text-align: center;
  72. font-family: Alibaba PuHuiTi;
  73. }
  74. .modal .camera-con.data-v-bbde6278 {
  75. /* position: relative; */
  76. z-index: 9999;
  77. }
  78. .qhImage.data-v-bbde6278 {
  79. background-color: #ccc;
  80. width: 80rpx;
  81. height: 80rpx;
  82. z-index: 1001;
  83. margin: 30rpx;
  84. border-radius: 50%;
  85. padding: 16rpx;
  86. }
  87. .modal.data-v-bbde6278::before {
  88. content: "";
  89. display: inline-block;
  90. height: 100%;
  91. vertical-align: middle;
  92. }
  93. .modal.show.data-v-bbde6278 {
  94. opacity: 1;
  95. overflow-x: hidden;
  96. overflow-y: hidden;
  97. pointer-events: auto;
  98. }
  99. .modal.bottom-modal.data-v-bbde6278::before {
  100. vertical-align: bottom;
  101. }
  102. .modal.bottom-modal .dialog.data-v-bbde6278 {
  103. width: 100%;
  104. border-radius: 0;
  105. }
  106. .modal.bottom-modal.data-v-bbde6278 {
  107. margin-bottom: -1000rpx;
  108. }
  109. .modal.bottom-modal.show.data-v-bbde6278 {
  110. margin-bottom: 0;
  111. }
  112. .dialog.data-v-bbde6278 {
  113. position: fixed;
  114. display: inline-block;
  115. vertical-align: middle;
  116. margin-left: auto;
  117. margin-right: auto;
  118. /* width: 680rpx; */
  119. height: 80vh;
  120. width: 100vw;
  121. max-width: 100%;
  122. background-color: #f8f8f8;
  123. border-radius: 10rpx;
  124. overflow: hidden;
  125. left: 0;
  126. top: 0;
  127. }
  128. .bar.data-v-bbde6278 {
  129. display: flex;
  130. position: relative;
  131. align-items: center;
  132. min-height: 90rpx;
  133. height: 90rpx;
  134. padding: 0rpx 40rpx;
  135. justify-content: space-between;
  136. }
  137. .bg-white.data-v-bbde6278 {
  138. background-color: #ffffff;
  139. color: #666666;
  140. }
  141. .img.data-v-bbde6278 {
  142. height: 60rpx;
  143. width: 60rpx;
  144. object-fit: contain;
  145. }
  146. .detectInfo.data-v-bbde6278 {
  147. padding: 20rpx 0rpx;
  148. font-size: 34rpx;
  149. text-align: center;
  150. -webkit-animation-duration: 1.5s;
  151. animation-duration: 1.5s;
  152. color: #000000;
  153. z-index: 999;
  154. }
  155. .faceContent.data-v-bbde6278 {
  156. height: 700rpx;
  157. position: relative;
  158. }
  159. .successImage.data-v-bbde6278 {
  160. overflow: hidden;
  161. width: 600rpx;
  162. height: 600rpx;
  163. border-radius: 50%;
  164. position: absolute;
  165. top: 0;
  166. left: 50%;
  167. z-index: 999;
  168. -webkit-transform: translateX(-50%);
  169. transform: translateX(-50%);
  170. }
  171. .tipsTextCss.data-v-bbde6278 {
  172. -webkit-animation: 1.5s tipsTextAnimation-data-v-bbde6278;
  173. animation: 1.5s tipsTextAnimation-data-v-bbde6278;
  174. -webkit-animation-duration: 1.5s;
  175. animation-duration: 1.5s;
  176. }
  177. @-webkit-keyframes tipsTextAnimation-data-v-bbde6278 {
  178. 0% {
  179. -webkit-transform: scale(1);
  180. transform: scale(1);
  181. }
  182. 20% {
  183. -webkit-transform: scale(1.5);
  184. transform: scale(1.5);
  185. }
  186. 70% {
  187. -webkit-transform: scale(1.5);
  188. transform: scale(1.5);
  189. }
  190. 100% {
  191. -webkit-transform: scale(1);
  192. transform: scale(1);
  193. }
  194. }
  195. @keyframes tipsTextAnimation-data-v-bbde6278 {
  196. 0% {
  197. -webkit-transform: scale(1);
  198. transform: scale(1);
  199. }
  200. 20% {
  201. -webkit-transform: scale(1.5);
  202. transform: scale(1.5);
  203. }
  204. 70% {
  205. -webkit-transform: scale(1.5);
  206. transform: scale(1.5);
  207. }
  208. 100% {
  209. -webkit-transform: scale(1);
  210. transform: scale(1);
  211. }
  212. }
  213. .cover.data-v-bbde6278 {
  214. width: 100vw;
  215. height: 100vh;
  216. display: flex;
  217. flex-direction: column;
  218. /* overflow: hidden; */
  219. }
  220. .cover-bottom.data-v-bbde6278 {
  221. height: 60rpx;
  222. display: flex;
  223. justify-content: center;
  224. }
  225. .cover-item.data-v-bbde6278 {
  226. height: 60rpx;
  227. width: 100%;
  228. background-color: #FFFFFF;
  229. display: flex;
  230. justify-content: space-around;
  231. align-items: center;
  232. }
  233. .load-fail.data-v-bbde6278 {
  234. position: absolute;
  235. top: 0;
  236. left: 0;
  237. height: 100vh;
  238. width: 100vw;
  239. overflow: hidden;
  240. display: flex;
  241. justify-content: center;
  242. align-items: center;
  243. }
  244. .load-reset.data-v-bbde6278 {
  245. width: 260rpx;
  246. font-size: 28rpx;
  247. padding: 20rpx;
  248. color: #fff;
  249. background-color: #8f7aed;
  250. border-radius: 15rpx;
  251. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
  252. }
  253. .camera.data-v-bbde6278 {
  254. width: 100vw;
  255. height: 100vh;
  256. -webkit-transform: scale(1.05);
  257. transform: scale(1.05);
  258. z-index: 999;
  259. overflow: hidden;
  260. }
  261. .camera-tips.data-v-bbde6278 {
  262. position: fixed;
  263. top: 50%;
  264. left: 0;
  265. height: 120rpx;
  266. width: 100%;
  267. background-color: #FFFFFF;
  268. display: flex;
  269. justify-content: space-around;
  270. align-items: center;
  271. }
  272. .camera-action.data-v-bbde6278 {
  273. position: absolute;
  274. bottom: 0;
  275. left: 0;
  276. width: 100%;
  277. display: flex;
  278. justify-content: space-around;
  279. align-items: center;
  280. z-index: 99999;
  281. overflow: hidden;
  282. background: #333;
  283. padding: 10rpx 0;
  284. }
  285. .camera-action .action .img.data-v-bbde6278 {
  286. height: 51rpx;
  287. width: 58rpx;
  288. object-fit: contain;
  289. }
  290. .camera-action .action.photoimg .img.data-v-bbde6278 {
  291. height: 161rpx;
  292. width: 161rpx;
  293. }
  294. .camera-action .action.QHimg .img.data-v-bbde6278 {
  295. height: 56rpx;
  296. width: 64rpx;
  297. }
  298. .face-con.data-v-bbde6278 {
  299. position: absolute;
  300. bottom: 22vh;
  301. left: 0;
  302. width: 100vw;
  303. z-index: 9999;
  304. display: flex;
  305. justify-content: space-between;
  306. align-items: center;
  307. flex-direction: column;
  308. }
  309. .face-con .title.data-v-bbde6278 {
  310. height: 200rpx;
  311. line-height: 200rpx;
  312. width: 100%;
  313. font-family: Alibaba PuHuiTi;
  314. font-weight: bold;
  315. font-size: 30rpx;
  316. color: #FFFFFF;
  317. text-align: center;
  318. }
  319. .face-con .face-img.data-v-bbde6278 {
  320. padding: 0 70rpx;
  321. height: 826rpx;
  322. width: calc(100vw - 140rpx);
  323. /* z-index: 9999; */
  324. object-fit: contain;
  325. }
  326. .face-tips.data-v-bbde6278 {
  327. position: absolute;
  328. bottom: 15vh;
  329. left: 0;
  330. z-index: 9999;
  331. width: 100vw;
  332. }
  333. .face-tips .title.data-v-bbde6278 {
  334. font-family: Alibaba PuHuiTi;
  335. font-weight: bold;
  336. font-size: 30rpx;
  337. color: #FFFFFF;
  338. line-height: 38rpx;
  339. }
  340. .face-tips .tips-con.data-v-bbde6278 {
  341. padding: 0 100rpx 0 100rpx;
  342. }
  343. .face-tips .tips-con .tips-list.data-v-bbde6278 {
  344. width: 100%;
  345. display: flex;
  346. justify-content: flex-start;
  347. align-items: center;
  348. flex-wrap: nowrap;
  349. }
  350. .face-tips .tips-con .tips-list .item.data-v-bbde6278 {
  351. height: 120rpx;
  352. width: 30%;
  353. padding: 30rpx 0 0 0;
  354. /* margin-top: 30rpx; */
  355. display: flex;
  356. justify-content: space-between;
  357. align-items: center;
  358. flex-direction: column;
  359. margin: 0 20rpx;
  360. }
  361. .face-tips .tips-con .tips-list .item .item-img.data-v-bbde6278 {
  362. height: 100%;
  363. width: 100%;
  364. object-fit: contain;
  365. }
  366. .face-tips .tips-con .tips-list .item .item-img.phone.data-v-bbde6278 {
  367. width: 36rpx;
  368. height: 52rpx;
  369. /* padding-bottom: 25rpx; */
  370. }
  371. .face-tips .tips-con .tips-list .item .item-img.line.data-v-bbde6278 {
  372. width: 61rpx;
  373. height: 61rpx;
  374. padding-top: 10rpx;
  375. /* padding-bottom: 18rpx; */
  376. }
  377. .face-tips .tips-con .tips-list .item .item-img.smile.data-v-bbde6278 {
  378. width: 56rpx;
  379. height: 56rpx;
  380. /* padding-bottom: 24rpx; */
  381. }
  382. .face-tips .tips-con .tips-list .item .item-img.brush.data-v-bbde6278 {
  383. width: 56rpx;
  384. height: 61rpx;
  385. padding-top: 10rpx;
  386. /* padding-bottom: 12rpx; */
  387. }
  388. .face-tips .tips-con .tips-list .item .item-img.glasses.data-v-bbde6278 {
  389. width: 62rpx;
  390. height: 39rpx;
  391. padding-top: 20rpx;
  392. }
  393. .face-tips .tips-con .tips-list .item .item-img.hat.data-v-bbde6278 {
  394. width: 54rpx;
  395. height: 37rpx;
  396. padding-top: 20rpx;
  397. /* padding-bottom: 35rpx; */
  398. }
  399. .face-tips .tips-con .tips-list .item .item-text.data-v-bbde6278 {
  400. width: auto;
  401. font-family: Alibaba PuHuiTi;
  402. font-weight: bold;
  403. font-size: 24rpx;
  404. color: #FFFFFF;
  405. line-height: 38rpx;
  406. }