uni.css 25 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688
  1. @font-face {
  2. font-family: uniicons;
  3. font-weight: normal;
  4. font-style: normal;
  5. src: url('~@/static/uni.ttf') format('truetype');
  6. }
  7. .pc-hide {
  8. display: none !important;
  9. }
  10. progress,
  11. checkbox-group {
  12. width: 100%;
  13. }
  14. form {
  15. width: 100%;
  16. }
  17. .uni-flex {
  18. display: flex;
  19. flex-direction: row;
  20. }
  21. .uni-flex-item {
  22. flex: 1;
  23. }
  24. .uni-row {
  25. flex-direction: row;
  26. }
  27. .uni-column {
  28. flex-direction: column;
  29. }
  30. .uni-link {
  31. color: #576B95;
  32. font-size: 26rpx;
  33. }
  34. .uni-center {
  35. text-align: center;
  36. }
  37. .uni-inline-item {
  38. display: flex;
  39. flex-direction: row;
  40. align-items: center;
  41. }
  42. .uni-inline-item text {
  43. margin-right: 20rpx;
  44. }
  45. .uni-inline-item text:last-child {
  46. margin-right: 0rpx;
  47. margin-left: 20rpx;
  48. }
  49. /* page */
  50. .common-page-head {
  51. padding: 35rpx;
  52. text-align: center;
  53. }
  54. .common-page-head-title {
  55. display: inline-block;
  56. padding: 0 40rpx;
  57. font-size: 30rpx;
  58. height: 88rpx;
  59. line-height: 88rpx;
  60. color: #BEBEBE;
  61. box-sizing: border-box;
  62. border-bottom: 2rpx solid #D8D8D8;
  63. }
  64. .uni-padding-wrap {
  65. /* width:690rpx; */
  66. padding: 0 30rpx;
  67. }
  68. .uni-word {
  69. text-align: center;
  70. padding: 200rpx 100rpx;
  71. }
  72. .uni-title {
  73. font-size: 30rpx;
  74. font-weight: 500;
  75. padding: 20rpx 0;
  76. line-height: 1.5;
  77. }
  78. .uni-text {
  79. font-size: 28rpx;
  80. }
  81. .uni-title text {
  82. font-size: 24rpx;
  83. color: #888;
  84. }
  85. .uni-text-gray {
  86. color: #ccc;
  87. }
  88. .uni-text-small {
  89. font-size: 24rpx;
  90. }
  91. .uni-common-mb {
  92. margin-bottom: 30rpx;
  93. }
  94. .uni-common-pb {
  95. padding-bottom: 30rpx;
  96. }
  97. .uni-common-pl {
  98. padding-left: 30rpx;
  99. }
  100. .uni-common-mt {
  101. margin-top: 30rpx;
  102. }
  103. /* 背景色 */
  104. .uni-bg-red {
  105. background: #F76260;
  106. color: #FFF;
  107. }
  108. .uni-bg-green {
  109. background: #09BB07;
  110. color: #FFF;
  111. }
  112. .uni-bg-blue {
  113. background: #007AFF;
  114. color: #FFF;
  115. }
  116. /* 标题 */
  117. .uni-h1 {
  118. font-size: 80rpx;
  119. font-weight: 700;
  120. }
  121. .uni-h2 {
  122. font-size: 60rpx;
  123. font-weight: 700;
  124. }
  125. .uni-h3 {
  126. font-size: 48rpx;
  127. font-weight: 700;
  128. }
  129. .uni-h4 {
  130. font-size: 36rpx;
  131. font-weight: 700;
  132. }
  133. .uni-h5 {
  134. font-size: 28rpx;
  135. color: #8f8f94;
  136. }
  137. .uni-h6 {
  138. font-size: 24rpx;
  139. color: #8f8f94;
  140. }
  141. .uni-bold {
  142. font-weight: bold;
  143. }
  144. /* 文本溢出隐藏 */
  145. .uni-ellipsis {
  146. overflow: hidden;
  147. white-space: nowrap;
  148. text-overflow: ellipsis;
  149. }
  150. /* 竖向百分百按钮 */
  151. .uni-btn-v {
  152. padding: 10rpx 0;
  153. }
  154. .uni-btn-v button {
  155. margin: 20rpx 0;
  156. }
  157. /* 表单 */
  158. .uni-form-item {
  159. display: flex;
  160. width: 100%;
  161. padding: 10rpx 0;
  162. }
  163. .uni-form-item .title {
  164. padding: 10rpx 25rpx;
  165. }
  166. .uni-label {
  167. width: 210rpx;
  168. word-wrap: break-word;
  169. word-break: break-all;
  170. text-indent: 20rpx;
  171. }
  172. .uni-input {
  173. height: 50rpx;
  174. padding: 15rpx 25rpx;
  175. line-height: 50rpx;
  176. font-size: 28rpx;
  177. background: #FFF;
  178. flex: 1;
  179. }
  180. radio-group,
  181. checkbox-group {
  182. width: 100%;
  183. }
  184. radio-group label,
  185. checkbox-group label {
  186. padding-right: 20rpx;
  187. }
  188. .uni-form-item .with-fun {
  189. display: flex;
  190. flex-wrap: nowrap;
  191. background: #FFFFFF;
  192. }
  193. .uni-form-item .with-fun .uni-icon {
  194. width: 40px;
  195. height: 80rpx;
  196. line-height: 80rpx;
  197. flex-shrink: 0;
  198. }
  199. /* loadmore */
  200. .uni-loadmore {
  201. height: 80rpx;
  202. line-height: 80rpx;
  203. text-align: center;
  204. padding-bottom: 30rpx;
  205. }
  206. .uni-badge.uni-badge-inverted {
  207. padding: 0 5px 0 0;
  208. color: #929292;
  209. background-color: transparent
  210. }
  211. .uni-badge-primary {
  212. color: #fff;
  213. background-color: #007aff
  214. }
  215. .uni-badge-blue.uni-badge-inverted,
  216. .uni-badge-primary.uni-badge-inverted {
  217. color: #007aff;
  218. background-color: transparent
  219. }
  220. .uni-badge-green,
  221. .uni-badge-success {
  222. color: #fff;
  223. background-color: #4cd964;
  224. }
  225. .uni-badge-green.uni-badge-inverted,
  226. .uni-badge-success.uni-badge-inverted {
  227. color: #4cd964;
  228. background-color: transparent
  229. }
  230. .uni-badge-warning,
  231. .uni-badge-yellow {
  232. color: #fff;
  233. background-color: #f0ad4e
  234. }
  235. .uni-badge-warning.uni-badge-inverted,
  236. .uni-badge-yellow.uni-badge-inverted {
  237. color: #f0ad4e;
  238. background-color: transparent
  239. }
  240. .uni-badge-danger,
  241. .uni-badge-red {
  242. color: #fff;
  243. background-color: #dd524d
  244. }
  245. .uni-badge-danger.uni-badge-inverted,
  246. .uni-badge-red.uni-badge-inverted {
  247. color: #dd524d;
  248. background-color: transparent
  249. }
  250. .uni-badge-purple,
  251. .uni-badge-royal {
  252. color: #fff;
  253. background-color: #8a6de9
  254. }
  255. .uni-badge-purple.uni-badge-inverted,
  256. .uni-badge-royal.uni-badge-inverted {
  257. color: #8a6de9;
  258. background-color: transparent
  259. }
  260. /*折叠面板 */
  261. .uni-collapse-content {
  262. height: 0;
  263. width: 100%;
  264. overflow: hidden;
  265. }
  266. .uni-collapse-content.uni-active {
  267. height: auto;
  268. }
  269. /*卡片视图 */
  270. .uni-card {
  271. background: #fff;
  272. border-radius: 8rpx;
  273. margin: 20rpx 0;
  274. position: relative;
  275. /* box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3); */
  276. }
  277. .uni-card-content {
  278. font-size: 30rpx;
  279. }
  280. .uni-card-content.image-view {
  281. width: 100%;
  282. margin: 0;
  283. }
  284. .uni-card-content-inner {
  285. position: relative;
  286. padding: 30rpx;
  287. }
  288. .uni-card-footer,
  289. .uni-card-header {
  290. position: relative;
  291. display: flex;
  292. min-height: 50rpx;
  293. padding: 20rpx 30rpx;
  294. justify-content: space-between;
  295. align-items: center;
  296. }
  297. .uni-card-header {
  298. font-size: 36rpx;
  299. }
  300. .uni-card-footer {
  301. color: #6d6d72;
  302. }
  303. .uni-card-footer:before,
  304. .uni-card-header:after {
  305. position: absolute;
  306. top: 0;
  307. right: 0;
  308. left: 0;
  309. height: 2rpx;
  310. content: '';
  311. -webkit-transform: scaleY(.5);
  312. transform: scaleY(.5);
  313. background-color: #c8c7cc;
  314. }
  315. .uni-card-header:after {
  316. top: auto;
  317. bottom: 0;
  318. }
  319. .uni-card-media {
  320. justify-content: flex-start;
  321. }
  322. .uni-card-media-logo {
  323. height: 84rpx;
  324. width: 84rpx;
  325. margin-right: 20rpx;
  326. }
  327. .uni-card-media-body {
  328. height: 84rpx;
  329. display: flex;
  330. flex-direction: column;
  331. justify-content: space-between;
  332. align-items: flex-start;
  333. }
  334. .uni-card-media-text-top {
  335. line-height: 36rpx;
  336. font-size: 34rpx;
  337. }
  338. .uni-card-media-text-bottom {
  339. line-height: 30rpx;
  340. font-size: 28rpx;
  341. color: #8f8f94;
  342. }
  343. .uni-card-link {
  344. color: #007AFF;
  345. }
  346. /* 列表 */
  347. .uni-list {
  348. background-color: #FFFFFF;
  349. position: relative;
  350. width: 100%;
  351. display: flex;
  352. flex-direction: column;
  353. }
  354. .uni-list:after {
  355. position: absolute;
  356. z-index: 10;
  357. right: 0;
  358. bottom: 0;
  359. left: 0;
  360. height: 1px;
  361. content: '';
  362. -webkit-transform: scaleY(.5);
  363. transform: scaleY(.5);
  364. background-color: #c8c7cc;
  365. }
  366. /* .uni-list::before {
  367. position: absolute;
  368. z-index: 10;
  369. right: 0;
  370. top: 0;
  371. left: 0;
  372. height: 1px;
  373. content: '';
  374. -webkit-transform: scaleY(.5);
  375. transform: scaleY(.5);
  376. background-color: #c8c7cc;
  377. } */
  378. .uni-list-cell {
  379. position: relative;
  380. display: flex;
  381. flex-direction: row;
  382. justify-content: space-between;
  383. align-items: center;
  384. }
  385. .uni-list-cell-hover {
  386. background-color: #eee;
  387. }
  388. .uni-list-cell-pd {
  389. padding: 22rpx 30rpx;
  390. }
  391. .uni-list-cell-left {
  392. white-space: nowrap;
  393. font-size: 28rpx;
  394. padding: 0 30rpx;
  395. }
  396. .uni-list-cell-db,
  397. .uni-list-cell-right {
  398. flex: 1;
  399. }
  400. .uni-list-cell::after {
  401. position: absolute;
  402. z-index: 3;
  403. right: 0;
  404. bottom: 0;
  405. left: 30rpx;
  406. height: 1px;
  407. content: '';
  408. -webkit-transform: scaleY(.5);
  409. transform: scaleY(.5);
  410. background-color: #c8c7cc;
  411. }
  412. .uni-list .uni-list-cell:last-child::after {
  413. height: 0rpx;
  414. }
  415. .uni-list-cell-last.uni-list-cell::after {
  416. height: 0rpx;
  417. }
  418. .uni-list-cell-divider {
  419. position: relative;
  420. display: flex;
  421. color: #999;
  422. background-color: #f7f7f7;
  423. padding: 15rpx 20rpx;
  424. }
  425. .uni-list-cell-divider::before {
  426. position: absolute;
  427. right: 0;
  428. top: 0;
  429. left: 0;
  430. height: 1px;
  431. content: '';
  432. -webkit-transform: scaleY(.5);
  433. transform: scaleY(.5);
  434. background-color: #c8c7cc;
  435. }
  436. .uni-list-cell-divider::after {
  437. position: absolute;
  438. right: 0;
  439. bottom: 0;
  440. left: 0rpx;
  441. height: 1px;
  442. content: '';
  443. -webkit-transform: scaleY(.5);
  444. transform: scaleY(.5);
  445. background-color: #c8c7cc;
  446. }
  447. .uni-list-cell-navigate {
  448. font-size: 30rpx;
  449. padding: 22rpx 30rpx;
  450. line-height: 48rpx;
  451. position: relative;
  452. display: flex;
  453. box-sizing: border-box;
  454. width: 100%;
  455. flex: 1;
  456. justify-content: space-between;
  457. align-items: center;
  458. }
  459. .uni-list-cell-navigate {
  460. padding-right: 36rpx;
  461. }
  462. .uni-navigate-badge {
  463. padding-right: 50rpx;
  464. }
  465. .uni-list-cell-navigate.uni-navigate-right:after {
  466. font-family: uniicons;
  467. content: '\e583';
  468. position: absolute;
  469. right: 24rpx;
  470. top: 50%;
  471. color: #bbb;
  472. -webkit-transform: translateY(-50%);
  473. transform: translateY(-50%);
  474. }
  475. .uni-list-cell-navigate.uni-navigate-bottom:after {
  476. font-family: uniicons;
  477. content: '\e581';
  478. position: absolute;
  479. right: 24rpx;
  480. top: 50%;
  481. color: #bbb;
  482. -webkit-transform: translateY(-50%);
  483. transform: translateY(-50%);
  484. }
  485. .uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
  486. font-family: uniicons;
  487. content: '\e580';
  488. position: absolute;
  489. right: 24rpx;
  490. top: 50%;
  491. color: #bbb;
  492. -webkit-transform: translateY(-50%);
  493. transform: translateY(-50%);
  494. }
  495. .uni-collapse.uni-list-cell {
  496. flex-direction: column;
  497. }
  498. .uni-list-cell-navigate.uni-active {
  499. background: #eee;
  500. }
  501. .uni-list.uni-collapse {
  502. box-sizing: border-box;
  503. height: 0;
  504. overflow: hidden;
  505. }
  506. .uni-collapse .uni-list-cell {
  507. padding-left: 20rpx;
  508. }
  509. .uni-collapse .uni-list-cell::after {
  510. left: 52rpx;
  511. }
  512. .uni-list.uni-active {
  513. height: auto;
  514. }
  515. /* 三行列表 */
  516. .uni-triplex-row {
  517. display: flex;
  518. flex: 1;
  519. width: 100%;
  520. box-sizing: border-box;
  521. flex-direction: row;
  522. padding: 22rpx 30rpx;
  523. }
  524. .uni-triplex-right,
  525. .uni-triplex-left {
  526. display: flex;
  527. flex-direction: column;
  528. }
  529. .uni-triplex-left {
  530. width: 84%;
  531. }
  532. .uni-triplex-left .uni-title {
  533. padding: 8rpx 0;
  534. }
  535. .uni-triplex-left .uni-text,
  536. .uni-triplex-left .uni-text-small {
  537. color: #999999;
  538. }
  539. .uni-triplex-right {
  540. width: 16%;
  541. text-align: right;
  542. }
  543. /* 图文列表 */
  544. .uni-media-list {
  545. padding: 22rpx 30rpx;
  546. box-sizing: border-box;
  547. display: flex;
  548. width: 100%;
  549. flex-direction: row;
  550. }
  551. .uni-navigate-right.uni-media-list {
  552. padding-right: 74rpx;
  553. }
  554. .uni-pull-right {
  555. flex-direction: row-reverse;
  556. }
  557. .uni-pull-right>.uni-media-list-logo {
  558. margin-right: 0rpx;
  559. margin-left: 20rpx;
  560. }
  561. .uni-media-list-logo {
  562. height: 84rpx;
  563. width: 84rpx;
  564. margin-right: 20rpx;
  565. }
  566. .uni-media-list-logo image {
  567. height: 100%;
  568. width: 100%;
  569. }
  570. .uni-media-list-body {
  571. height: 84rpx;
  572. display: flex;
  573. flex: 1;
  574. flex-direction: column;
  575. justify-content: space-between;
  576. align-items: flex-start;
  577. overflow: hidden;
  578. }
  579. .uni-media-list-text-top {
  580. width: 100%;
  581. line-height: 36rpx;
  582. font-size: 30rpx;
  583. }
  584. .uni-media-list-text-bottom {
  585. width: 100%;
  586. line-height: 30rpx;
  587. font-size: 26rpx;
  588. color: #8f8f94;
  589. }
  590. /* 九宫格 */
  591. .uni-grid-9 {
  592. background: #f2f2f2;
  593. width: 750rpx;
  594. display: flex;
  595. flex-direction: row;
  596. flex-wrap: wrap;
  597. border-top: 2rpx solid #eee;
  598. }
  599. .uni-grid-9-item {
  600. width: 250rpx;
  601. height: 200rpx;
  602. display: flex;
  603. flex-direction: column;
  604. align-items: center;
  605. justify-content: center;
  606. border-bottom: 2rpx solid;
  607. border-right: 2rpx solid;
  608. border-color: #eee;
  609. box-sizing: border-box;
  610. }
  611. .no-border-right {
  612. border-right: none;
  613. }
  614. .uni-grid-9-image {
  615. width: 100rpx;
  616. height: 100rpx;
  617. }
  618. .uni-grid-9-text {
  619. width: 250rpx;
  620. line-height: 4rpx;
  621. height: 40rpx;
  622. text-align: center;
  623. font-size: 30rpx;
  624. }
  625. .uni-grid-9-item-hover {
  626. background: rgba(0, 0, 0, 0.1);
  627. }
  628. /* 上传 */
  629. .uni-uploader {
  630. flex: 1;
  631. flex-direction: column;
  632. }
  633. .uni-uploader-head {
  634. display: flex;
  635. flex-direction: row;
  636. justify-content: space-between;
  637. }
  638. .uni-uploader-info {
  639. color: #B2B2B2;
  640. }
  641. .uni-uploader-body {
  642. margin-top: 16rpx;
  643. }
  644. .uni-uploader__files {
  645. display: flex;
  646. flex-direction: row;
  647. flex-wrap: wrap;
  648. }
  649. .uni-uploader__file {
  650. margin: 10rpx;
  651. width: 210rpx;
  652. height: 210rpx;
  653. }
  654. .uni-uploader__img {
  655. display: block;
  656. width: 210rpx;
  657. height: 210rpx;
  658. }
  659. .uni-uploader__input-box {
  660. position: relative;
  661. margin: 10rpx;
  662. width: 208rpx;
  663. height: 208rpx;
  664. border: 2rpx solid #D9D9D9;
  665. }
  666. .uni-uploader__input-box:before,
  667. .uni-uploader__input-box:after {
  668. content: " ";
  669. position: absolute;
  670. top: 50%;
  671. left: 50%;
  672. -webkit-transform: translate(-50%, -50%);
  673. transform: translate(-50%, -50%);
  674. background-color: #D9D9D9;
  675. }
  676. .uni-uploader__input-box:before {
  677. width: 4rpx;
  678. height: 79rpx;
  679. }
  680. .uni-uploader__input-box:after {
  681. width: 79rpx;
  682. height: 4rpx;
  683. }
  684. .uni-uploader__input-box:active {
  685. border-color: #999999;
  686. }
  687. .uni-uploader__input-box:active:before,
  688. .uni-uploader__input-box:active:after {
  689. background-color: #999999;
  690. }
  691. .uni-uploader__input {
  692. position: absolute;
  693. z-index: 1;
  694. top: 0;
  695. left: 0;
  696. width: 100%;
  697. height: 100%;
  698. opacity: 0;
  699. }
  700. /*问题反馈*/
  701. .feedback-title {
  702. display: flex;
  703. flex-direction: row;
  704. justify-content: space-between;
  705. align-items: center;
  706. padding: 20rpx;
  707. color: #8f8f94;
  708. font-size: 28rpx;
  709. }
  710. .feedback-star-view.feedback-title {
  711. justify-content: flex-start;
  712. margin: 0;
  713. }
  714. .feedback-quick {
  715. position: relative;
  716. padding-right: 40rpx;
  717. }
  718. .feedback-quick:after {
  719. font-family: uniicons;
  720. font-size: 40rpx;
  721. content: '\e581';
  722. position: absolute;
  723. right: 0;
  724. top: 50%;
  725. color: #bbb;
  726. -webkit-transform: translateY(-50%);
  727. transform: translateY(-50%);
  728. }
  729. .feedback-body {
  730. background: #fff;
  731. }
  732. .feedback-textare {
  733. height: 200rpx;
  734. font-size: 34rpx;
  735. line-height: 50rpx;
  736. width: 100%;
  737. box-sizing: border-box;
  738. padding: 20rpx 30rpx 0;
  739. }
  740. .feedback-input {
  741. font-size: 34rpx;
  742. height: 50rpx;
  743. min-height: 50rpx;
  744. padding: 15rpx 20rpx;
  745. line-height: 50rpx;
  746. }
  747. .feedback-uploader {
  748. padding: 22rpx 20rpx;
  749. }
  750. .feedback-star {
  751. font-family: uniicons;
  752. font-size: 40rpx;
  753. margin-left: 6rpx;
  754. }
  755. .feedback-star-view {
  756. margin-left: 20rpx;
  757. }
  758. .feedback-star:after {
  759. content: '\e408';
  760. }
  761. .feedback-star.active {
  762. color: #FFB400;
  763. }
  764. .feedback-star.active:after {
  765. content: '\e438';
  766. }
  767. .feedback-submit {
  768. background: #007AFF;
  769. color: #FFFFFF;
  770. margin: 20rpx;
  771. }
  772. /* input group */
  773. .uni-input-group {
  774. position: relative;
  775. padding: 0;
  776. border: 0;
  777. background-color: #fff;
  778. }
  779. .uni-input-group:before {
  780. position: absolute;
  781. top: 0;
  782. right: 0;
  783. left: 0;
  784. height: 2rpx;
  785. content: '';
  786. transform: scaleY(.5);
  787. background-color: #c8c7cc;
  788. }
  789. .uni-input-group:after {
  790. position: absolute;
  791. right: 0;
  792. bottom: 0;
  793. left: 0;
  794. height: 2rpx;
  795. content: '';
  796. transform: scaleY(.5);
  797. background-color: #c8c7cc;
  798. }
  799. .uni-input-row {
  800. position: relative;
  801. display: flex;
  802. flex-direction: row;
  803. font-size: 28rpx;
  804. padding: 22rpx 30rpx;
  805. justify-content: space-between;
  806. }
  807. .uni-input-group .uni-input-row:after {
  808. position: absolute;
  809. right: 0;
  810. bottom: 0;
  811. left: 30rpx;
  812. height: 2rpx;
  813. content: '';
  814. transform: scaleY(.5);
  815. background-color: #c8c7cc;
  816. }
  817. .uni-input-row label {
  818. line-height: 70rpx;
  819. }
  820. /* textarea */
  821. .uni-textarea {
  822. width: 100%;
  823. background: #FFF;
  824. }
  825. .uni-textarea textarea {
  826. width: 96%;
  827. padding: 18rpx 2%;
  828. line-height: 1.6;
  829. font-size: 28rpx;
  830. height: 150rpx;
  831. }
  832. /* tab bar */
  833. .uni-tab-bar {
  834. display: flex;
  835. flex: 1;
  836. flex-direction: column;
  837. overflow: hidden;
  838. height: 100%;
  839. }
  840. .uni-tab-bar .list {
  841. width: 750rpx;
  842. height: 100%;
  843. }
  844. .uni-swiper-tab {
  845. width: 100%;
  846. white-space: nowrap;
  847. line-height: 100rpx;
  848. height: 100rpx;
  849. border-bottom: 1px solid #c8c7cc;
  850. }
  851. .swiper-tab-list {
  852. font-size: 30rpx;
  853. width: 150rpx;
  854. display: inline-block;
  855. text-align: center;
  856. color: #555;
  857. }
  858. .uni-tab-bar .active {
  859. color: #007AFF;
  860. }
  861. .uni-tab-bar .swiper-box {
  862. flex: 1;
  863. width: 100%;
  864. height: calc(100% - 100rpx);
  865. }
  866. .uni-tab-bar-loading {
  867. padding: 20rpx 0;
  868. }
  869. /* comment */
  870. .uni-comment {
  871. padding: 5rpx 0;
  872. display: flex;
  873. flex-grow: 1;
  874. flex-direction: column;
  875. }
  876. .uni-comment-list {
  877. flex-wrap: nowrap;
  878. padding: 10rpx 0;
  879. margin: 10rpx 0;
  880. width: 100%;
  881. display: flex;
  882. }
  883. .uni-comment-face {
  884. width: 70rpx;
  885. height: 70rpx;
  886. border-radius: 100%;
  887. margin-right: 20rpx;
  888. flex-shrink: 0;
  889. overflow: hidden;
  890. }
  891. .uni-comment-face image {
  892. width: 100%;
  893. border-radius: 100%;
  894. }
  895. .uni-comment-body {
  896. width: 100%;
  897. }
  898. .uni-comment-top {
  899. line-height: 1.5em;
  900. justify-content: space-between;
  901. }
  902. .uni-comment-top text {
  903. color: #0A98D5;
  904. font-size: 24rpx;
  905. }
  906. .uni-comment-date {
  907. line-height: 38rpx;
  908. flex-direction: row;
  909. justify-content: space-between;
  910. display: flex !important;
  911. flex-grow: 1;
  912. }
  913. .uni-comment-date view {
  914. color: #666666;
  915. font-size: 24rpx;
  916. line-height: 38rpx;
  917. }
  918. .uni-comment-content {
  919. line-height: 1.6em;
  920. font-size: 28rpx;
  921. padding: 8rpx 0;
  922. }
  923. .uni-comment-replay-btn {
  924. background: #FFF;
  925. font-size: 24rpx;
  926. line-height: 28rpx;
  927. padding: 5rpx 20rpx;
  928. border-radius: 30rpx;
  929. color: #333 !important;
  930. margin: 0 10rpx;
  931. }
  932. /* swiper msg */
  933. .uni-swiper-msg {
  934. width: 100%;
  935. padding: 12rpx 0;
  936. flex-wrap: nowrap;
  937. display: flex;
  938. }
  939. .uni-swiper-msg-icon {
  940. width: 50rpx;
  941. margin-right: 20rpx;
  942. }
  943. .uni-swiper-msg-icon image {
  944. width: 100%;
  945. flex-shrink: 0;
  946. }
  947. .uni-swiper-msg swiper {
  948. width: 100%;
  949. height: 50rpx;
  950. }
  951. .uni-swiper-msg swiper-item {
  952. line-height: 50rpx;
  953. }
  954. /* product */
  955. .uni-product-list {
  956. display: flex;
  957. width: 100%;
  958. flex-wrap: wrap;
  959. flex-direction: row;
  960. }
  961. .uni-product {
  962. padding: 20rpx;
  963. display: flex;
  964. flex-direction: column;
  965. }
  966. .image-view {
  967. height: 330rpx;
  968. width: 330rpx;
  969. margin: 12rpx 0;
  970. }
  971. .uni-product-image {
  972. height: 330rpx;
  973. width: 330rpx;
  974. }
  975. .uni-product-title {
  976. width: 300rpx;
  977. word-break: break-all;
  978. display: -webkit-box;
  979. overflow: hidden;
  980. line-height: 1.5;
  981. text-overflow: ellipsis;
  982. -webkit-box-orient: vertical;
  983. -webkit-line-clamp: 2;
  984. }
  985. .uni-product-price {
  986. margin-top: 10rpx;
  987. font-size: 28rpx;
  988. line-height: 1.5;
  989. position: relative;
  990. }
  991. .uni-product-price-original {
  992. color: #e80080;
  993. }
  994. .uni-product-price-favour {
  995. color: #888888;
  996. text-decoration: line-through;
  997. margin-left: 10rpx;
  998. }
  999. .uni-product-tip {
  1000. position: absolute;
  1001. right: 10rpx;
  1002. background-color: #ff3333;
  1003. color: #ffffff;
  1004. padding: 0 10rpx;
  1005. border-radius: 5rpx;
  1006. }
  1007. /* timeline */
  1008. .uni-timeline {
  1009. margin: 35rpx 0;
  1010. display: flex;
  1011. flex-direction: column;
  1012. position: relative;
  1013. }
  1014. .uni-timeline-item {
  1015. display: flex;
  1016. flex-direction: row;
  1017. position: relative;
  1018. padding-bottom: 20rpx;
  1019. box-sizing: border-box;
  1020. overflow: hidden;
  1021. }
  1022. .uni-timeline-item .uni-timeline-item-keynode {
  1023. width: 160rpx;
  1024. flex-shrink: 0;
  1025. box-sizing: border-box;
  1026. padding-right: 20rpx;
  1027. text-align: right;
  1028. line-height: 65rpx;
  1029. }
  1030. .uni-timeline-item .uni-timeline-item-divider {
  1031. flex-shrink: 0;
  1032. position: relative;
  1033. width: 30rpx;
  1034. height: 30rpx;
  1035. top: 15rpx;
  1036. border-radius: 50%;
  1037. background-color: #bbb;
  1038. }
  1039. .uni-timeline-item-divider::before,
  1040. .uni-timeline-item-divider::after {
  1041. position: absolute;
  1042. left: 15rpx;
  1043. width: 1rpx;
  1044. height: 100vh;
  1045. content: '';
  1046. background: inherit;
  1047. }
  1048. .uni-timeline-item-divider::before {
  1049. bottom: 100%;
  1050. }
  1051. .uni-timeline-item-divider::after {
  1052. top: 100%;
  1053. }
  1054. .uni-timeline-last-item .uni-timeline-item-divider:after {
  1055. display: none;
  1056. }
  1057. .uni-timeline-first-item .uni-timeline-item-divider:before {
  1058. display: none;
  1059. }
  1060. .uni-timeline-item .uni-timeline-item-content {
  1061. padding-left: 20rpx;
  1062. }
  1063. .uni-timeline-last-item .bottom-border::after {
  1064. display: none;
  1065. }
  1066. .uni-timeline-item-content .datetime {
  1067. color: #CCCCCC;
  1068. }
  1069. /* 自定义节点颜色 */
  1070. .uni-timeline-last-item .uni-timeline-item-divider {
  1071. background-color: #1AAD19;
  1072. }
  1073. /* uni-icon */
  1074. .uni-icon {
  1075. font-family: uniicons;
  1076. font-size: 24px;
  1077. font-weight: normal;
  1078. font-style: normal;
  1079. line-height: 1;
  1080. display: inline-block;
  1081. text-decoration: none;
  1082. -webkit-font-smoothing: antialiased;
  1083. }
  1084. .uni-icon.uni-active {
  1085. color: #007aff;
  1086. }
  1087. .uni-icon-contact:before {
  1088. content: '\e100';
  1089. }
  1090. .uni-icon-person:before {
  1091. content: '\e101';
  1092. }
  1093. .uni-icon-personadd:before {
  1094. content: '\e102';
  1095. }
  1096. .uni-icon-contact-filled:before {
  1097. content: '\e130';
  1098. }
  1099. .uni-icon-person-filled:before {
  1100. content: '\e131';
  1101. }
  1102. .uni-icon-personadd-filled:before {
  1103. content: '\e132';
  1104. }
  1105. .uni-icon-phone:before {
  1106. content: '\e200';
  1107. }
  1108. .uni-icon-email:before {
  1109. content: '\e201';
  1110. }
  1111. .uni-icon-chatbubble:before {
  1112. content: '\e202';
  1113. }
  1114. .uni-icon-chatboxes:before {
  1115. content: '\e203';
  1116. }
  1117. .uni-icon-phone-filled:before {
  1118. content: '\e230';
  1119. }
  1120. .uni-icon-email-filled:before {
  1121. content: '\e231';
  1122. }
  1123. .uni-icon-chatbubble-filled:before {
  1124. content: '\e232';
  1125. }
  1126. .uni-icon-chatboxes-filled:before {
  1127. content: '\e233';
  1128. }
  1129. .uni-icon-weibo:before {
  1130. content: '\e260';
  1131. }
  1132. .uni-icon-weixin:before {
  1133. content: '\e261';
  1134. }
  1135. .uni-icon-pengyouquan:before {
  1136. content: '\e262';
  1137. }
  1138. .uni-icon-chat:before {
  1139. content: '\e263';
  1140. }
  1141. .uni-icon-qq:before {
  1142. content: '\e264';
  1143. }
  1144. .uni-icon-videocam:before {
  1145. content: '\e300';
  1146. }
  1147. .uni-icon-camera:before {
  1148. content: '\e301';
  1149. }
  1150. .uni-icon-mic:before {
  1151. content: '\e302';
  1152. }
  1153. .uni-icon-location:before {
  1154. content: '\e303';
  1155. }
  1156. .uni-icon-mic-filled:before,
  1157. .uni-icon-speech:before {
  1158. content: '\e332';
  1159. }
  1160. .uni-icon-location-filled:before {
  1161. content: '\e333';
  1162. }
  1163. .uni-icon-micoff:before {
  1164. content: '\e360';
  1165. }
  1166. .uni-icon-image:before {
  1167. content: '\e363';
  1168. }
  1169. .uni-icon-map:before {
  1170. content: '\e364';
  1171. }
  1172. .uni-icon-compose:before {
  1173. content: '\e400';
  1174. }
  1175. .uni-icon-trash:before {
  1176. content: '\e401';
  1177. }
  1178. .uni-icon-upload:before {
  1179. content: '\e402';
  1180. }
  1181. .uni-icon-download:before {
  1182. content: '\e403';
  1183. }
  1184. .uni-icon-close:before {
  1185. content: '\e404';
  1186. }
  1187. .uni-icon-redo:before {
  1188. content: '\e405';
  1189. }
  1190. .uni-icon-undo:before {
  1191. content: '\e406';
  1192. }
  1193. .uni-icon-refresh:before {
  1194. content: '\e407';
  1195. }
  1196. .uni-icon-star:before {
  1197. content: '\e408';
  1198. }
  1199. .uni-icon-plus:before {
  1200. content: '\e409';
  1201. }
  1202. .uni-icon-minus:before {
  1203. content: '\e410';
  1204. }
  1205. .uni-icon-circle:before,
  1206. .uni-icon-checkbox:before {
  1207. content: '\e411';
  1208. }
  1209. .uni-icon-close-filled:before,
  1210. .uni-icon-clear:before {
  1211. content: '\e434';
  1212. }
  1213. .uni-icon-refresh-filled:before {
  1214. content: '\e437';
  1215. }
  1216. .uni-icon-star-filled:before {
  1217. content: '\e438';
  1218. }
  1219. .uni-icon-plus-filled:before {
  1220. content: '\e439';
  1221. }
  1222. .uni-icon-minus-filled:before {
  1223. content: '\e440';
  1224. }
  1225. .uni-icon-circle-filled:before {
  1226. content: '\e441';
  1227. }
  1228. .uni-icon-checkbox-filled:before {
  1229. content: '\e442';
  1230. }
  1231. .uni-icon-closeempty:before {
  1232. content: '\e460';
  1233. }
  1234. .uni-icon-refreshempty:before {
  1235. content: '\e461';
  1236. }
  1237. .uni-icon-reload:before {
  1238. content: '\e462';
  1239. }
  1240. .uni-icon-starhalf:before {
  1241. content: '\e463';
  1242. }
  1243. .uni-icon-spinner:before {
  1244. content: '\e464';
  1245. }
  1246. .uni-icon-spinner-cycle:before {
  1247. content: '\e465';
  1248. }
  1249. .uni-icon-search:before {
  1250. content: '\e466';
  1251. }
  1252. .uni-icon-plusempty:before {
  1253. content: '\e468';
  1254. }
  1255. .uni-icon-forward:before {
  1256. content: '\e470';
  1257. }
  1258. .uni-icon-back:before,
  1259. .uni-icon-left-nav:before {
  1260. content: '\e471';
  1261. }
  1262. .uni-icon-checkmarkempty:before {
  1263. content: '\e472';
  1264. }
  1265. .uni-icon-home:before {
  1266. content: '\e500';
  1267. }
  1268. .uni-icon-navigate:before {
  1269. content: '\e501';
  1270. }
  1271. .uni-icon-gear:before {
  1272. content: '\e502';
  1273. }
  1274. .uni-icon-paperplane:before {
  1275. content: '\e503';
  1276. }
  1277. .uni-icon-info:before {
  1278. content: '\e504';
  1279. }
  1280. .uni-icon-help:before {
  1281. content: '\e505';
  1282. }
  1283. .uni-icon-locked:before {
  1284. content: '\e506';
  1285. }
  1286. .uni-icon-more:before {
  1287. content: '\e507';
  1288. }
  1289. .uni-icon-flag:before {
  1290. content: '\e508';
  1291. }
  1292. .uni-icon-home-filled:before {
  1293. content: '\e530';
  1294. }
  1295. .uni-icon-gear-filled:before {
  1296. content: '\e532';
  1297. }
  1298. .uni-icon-info-filled:before {
  1299. content: '\e534';
  1300. }
  1301. .uni-icon-help-filled:before {
  1302. content: '\e535';
  1303. }
  1304. .uni-icon-more-filled:before {
  1305. content: '\e537';
  1306. }
  1307. .uni-icon-settings:before {
  1308. content: '\e560';
  1309. }
  1310. .uni-icon-list:before {
  1311. content: '\e562';
  1312. }
  1313. .uni-icon-bars:before {
  1314. content: '\e563';
  1315. }
  1316. .uni-icon-loop:before {
  1317. content: '\e565';
  1318. }
  1319. .uni-icon-paperclip:before {
  1320. content: '\e567';
  1321. }
  1322. .uni-icon-eye:before {
  1323. content: '\e568';
  1324. }
  1325. .uni-icon-arrowup:before {
  1326. content: '\e580';
  1327. }
  1328. .uni-icon-arrowdown:before {
  1329. content: '\e581';
  1330. }
  1331. .uni-icon-arrowleft:before {
  1332. content: '\e582';
  1333. }
  1334. .uni-icon-arrowright:before {
  1335. content: '\e583';
  1336. }
  1337. .uni-icon-arrowthinup:before {
  1338. content: '\e584';
  1339. }
  1340. .uni-icon-arrowthindown:before {
  1341. content: '\e585';
  1342. }
  1343. .uni-icon-arrowthinleft:before {
  1344. content: '\e586';
  1345. }
  1346. .uni-icon-arrowthinright:before {
  1347. content: '\e587';
  1348. }
  1349. .uni-icon-pulldown:before {
  1350. content: '\e588';
  1351. }
  1352. .uni-icon-scan:before {
  1353. content: "\e612";
  1354. }
  1355. /* 分界线 */
  1356. .uni-divider {
  1357. height: 110rpx;
  1358. display: flex;
  1359. align-items: center;
  1360. justify-content: center;
  1361. position: relative;
  1362. }
  1363. .uni-divider__content {
  1364. font-size: 28rpx;
  1365. color: #999;
  1366. padding: 0 20rpx;
  1367. position: relative;
  1368. z-index: 101;
  1369. background: #F4F5F6;
  1370. }
  1371. .uni-divider__line {
  1372. background-color: #CCCCCC;
  1373. height: 1px;
  1374. width: 100%;
  1375. position: absolute;
  1376. z-index: 100;
  1377. top: 50%;
  1378. left: 0;
  1379. transform: translateY(50%);
  1380. }
  1381. .left-win-active text {
  1382. color: #007AFF !important;
  1383. }