app.acss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. page {
  2. background: #145A83;
  3. }
  4. .page {
  5. /*width: 100vw;*/
  6. width: 750rpx;
  7. height: 100vh;
  8. overflow: hidden;
  9. background: url('https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/static/home/bg.png') no-repeat;
  10. background-size: 100% 100%;
  11. background-attachment: fixed;
  12. position: relative;
  13. }
  14. .main {
  15. /*width: 100vw;*/
  16. width: 750rpx;
  17. height: 460rpx;
  18. margin: auto;
  19. /* text-align: center; */
  20. position: relative;
  21. top: 50%;
  22. transform: translateY(-50%);
  23. /* 向上移动自身高度的一半 */
  24. }
  25. .portrait-main {
  26. width: 750rpx;
  27. height: 460rpx;
  28. margin: auto;
  29. /* text-align: center; */
  30. position: relative;
  31. top: 50%;
  32. transform: translateY(-50%);
  33. /* 向上移动自身高度的一半 */
  34. }
  35. .information-sn {
  36. font-size: 11rpx;
  37. color: #145A83;
  38. position: absolute;
  39. bottom: 13rpx;
  40. left: 11rpx;
  41. }
  42. .logout-btn {
  43. background-color: #80C269;
  44. border-radius: 50%;
  45. font-size: 14rpx;
  46. color: #fff;
  47. position: absolute;
  48. bottom: 3.5rpx;
  49. right: 107rpx;
  50. text-align: center;
  51. padding: 14rpx 9rpx;
  52. }
  53. .sure-btn {
  54. background-color: #13B5B1;
  55. border-radius: 50%;
  56. font-size: 14rpx;
  57. color: #fff;
  58. position: absolute;
  59. bottom: 15rpx;
  60. right: 37rpx;
  61. text-align: center;
  62. padding: 20rpx 15rpx;
  63. }
  64. .flex1 {
  65. display: flex;
  66. justify-content: space-between;
  67. }
  68. .flex2 {
  69. display: flex;
  70. justify-content: right;
  71. }
  72. .magnify {
  73. transition: transform 0.1s ease;
  74. /* 平滑过渡效果 */
  75. transform: scale(1);
  76. /* 默认大小 */
  77. }
  78. .magnify:active {
  79. transform: scale(1.1);
  80. /* 点击时放大1.1倍 */
  81. }
  82. .magnify-btn:active {
  83. transform: scale(1.3);
  84. background-color: #379391 !important;
  85. }
  86. .flex {
  87. display: flex;
  88. justify-content: center;
  89. align-items: center;
  90. }
  91. .flex-column {
  92. display: flex;
  93. flex-direction: column;
  94. align-items: center;
  95. }
  96. .flex-column-center {
  97. display: flex;
  98. flex-direction: column;
  99. align-items: center;
  100. justify-content: center;
  101. }
  102. .flex-column-center-start {
  103. display: flex;
  104. flex-direction: column !important;
  105. justify-content: center !important;
  106. align-items: flex-start !important;
  107. }
  108. .flex-column-start-start{
  109. display: flex;
  110. flex-direction: column;
  111. justify-content: flex-start;
  112. align-items: flex-start;
  113. }
  114. .flex-column-end {
  115. display: flex;
  116. flex-direction: column;
  117. align-items: center;
  118. justify-content: flex-end;
  119. }
  120. .flex-column-around {
  121. display: flex;
  122. flex-direction: column;
  123. justify-content: space-around;
  124. }
  125. .flex-align-center {
  126. display: flex;
  127. align-items: center;
  128. }
  129. .flex-around {
  130. display: flex;
  131. justify-content: space-around;
  132. align-items: center;
  133. }
  134. .flex-between {
  135. display: flex;
  136. justify-content: space-between;
  137. align-items: center;
  138. }
  139. .flex-end {
  140. display: flex;
  141. justify-content: flex-end;
  142. align-items: center;
  143. }