user.ttss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. page {
  2. background-color: #ffffff;
  3. }
  4. @charset "UTF-8";
  5. /**
  6. * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
  7. * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
  8. */
  9. .home.data-v-80842834 {
  10. position: relative;
  11. }
  12. .home .userinfo.data-v-80842834 {
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. padding: 30rpx 0;
  17. z-index: 100;
  18. height: 310rpx;
  19. color: #ffffff;
  20. }
  21. .home .corrugated.data-v-80842834 {
  22. bottom: -2rpx;
  23. left: 0;
  24. position: absolute;
  25. width: 100%;
  26. height: 50%;
  27. overflow: hidden;
  28. z-index: 0;
  29. }
  30. .home .corrugated .wave-item.data-v-80842834 {
  31. position: absolute;
  32. width: 200%;
  33. left: 0;
  34. height: 200rpx;
  35. background-repeat: repeat no-repeat;
  36. background-position: 0 bottom;
  37. -webkit-transform-origin: center bottom;
  38. transform-origin: center bottom;
  39. }
  40. .home .corrugated .wave-top.data-v-80842834 {
  41. opacity: 0.5;
  42. -webkit-animation: wave-animation 3s;
  43. animation: wave-animation 3s;
  44. -webkit-animation-delay: 1s;
  45. animation-delay: 1s;
  46. background-size: 50% 60rpx;
  47. z-index: 15;
  48. }
  49. .home .corrugated .wave-middle.data-v-80842834 {
  50. opacity: 0.75;
  51. -webkit-animation: wavemove-data-v-80842834 10s linear infinite;
  52. animation: wavemove-data-v-80842834 10s linear infinite;
  53. background-size: 50% 80rpx;
  54. z-index: 10;
  55. }
  56. .home .corrugated .wave-bottom.data-v-80842834 {
  57. -webkit-animation: wavemove-data-v-80842834 15s linear infinite;
  58. animation: wavemove-data-v-80842834 15s linear infinite;
  59. background-size: 50% 45rpx;
  60. z-index: 5;
  61. }
  62. .comment.data-v-80842834 {
  63. display: flex;
  64. padding: 30rpx;
  65. border-bottom: 1px solid #eee;
  66. }
  67. .comment .left image.data-v-80842834 {
  68. width: 180rpx;
  69. height: 130rpx;
  70. background-color: #f2f2f2;
  71. border-radius: 10rpx;
  72. }
  73. .comment .right.data-v-80842834 {
  74. flex: 1;
  75. padding-left: 20rpx;
  76. font-size: 28rpx;
  77. }
  78. .comment .right .content.data-v-80842834 {
  79. margin-bottom: 10rpx;
  80. }
  81. .comment .right .reply-box.data-v-80842834 {
  82. background-color: #f2f2f2;
  83. border-radius: 12rpx;
  84. }
  85. .comment .right .reply-box .item.data-v-80842834 {
  86. padding: 20rpx;
  87. word-break: break-word;
  88. }
  89. @-webkit-keyframes wavemove-data-v-80842834 {
  90. 0% {
  91. -webkit-transform: translateX(0) translateZ(0) scaleY(1);
  92. transform: translateX(0) translateZ(0) scaleY(1);
  93. }
  94. 50% {
  95. -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55);
  96. transform: translateX(-25%) translateZ(0) scaleY(0.55);
  97. }
  98. 100% {
  99. -webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
  100. transform: translateX(-50%) translateZ(0) scaleY(1);
  101. }
  102. }
  103. @keyframes wavemove-data-v-80842834 {
  104. 0% {
  105. -webkit-transform: translateX(0) translateZ(0) scaleY(1);
  106. transform: translateX(0) translateZ(0) scaleY(1);
  107. }
  108. 50% {
  109. -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55);
  110. transform: translateX(-25%) translateZ(0) scaleY(0.55);
  111. }
  112. 100% {
  113. -webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
  114. transform: translateX(-50%) translateZ(0) scaleY(1);
  115. }
  116. }