index.wxss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .wux-image {
  2. position: relative;
  3. overflow: hidden;
  4. display: flex;
  5. box-sizing: border-box
  6. }
  7. .wux-image--rounded {
  8. border-radius: 8rpx
  9. }
  10. .wux-image--circle {
  11. border-radius: 50%
  12. }
  13. .wux-image--thumbnail {
  14. background-color: #fff;
  15. border-radius: 8rpx
  16. }
  17. .wux-image--thumbnail::after {
  18. content: " ";
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. width: 200%;
  23. height: 200%;
  24. transform: scale(.5);
  25. transform-origin: 0 0;
  26. pointer-events: none;
  27. box-sizing: border-box;
  28. border: 0 solid #d9d9d9;
  29. border-width: 1PX;
  30. border-radius: 16rpx
  31. }
  32. .wux-image--thumbnail .wux-image__inner,
  33. .wux-image--thumbnail .wux-image__mask {
  34. top: 8rpx;
  35. right: 8rpx;
  36. bottom: 8rpx;
  37. left: 8rpx;
  38. width: calc(100% - 16rpx)!important;
  39. height: calc(100% - 16rpx)!important
  40. }
  41. .wux-image--widthFix .wux-image__inner {
  42. position: relative
  43. }
  44. .wux-image image,
  45. .wux-image__thumb {
  46. display: inline-block;
  47. overflow: hidden;
  48. width: 100%;
  49. height: 100%;
  50. vertical-align: middle
  51. }
  52. .wux-image__inner {
  53. position: absolute;
  54. top: 0;
  55. right: 0;
  56. bottom: 0;
  57. left: 0;
  58. z-index: 10;
  59. width: 100%;
  60. height: 100%;
  61. opacity: 0
  62. }
  63. .wux-image--loaded .wux-image__inner {
  64. opacity: 1
  65. }
  66. .wux-image__mask {
  67. position: absolute;
  68. top: 0;
  69. right: 0;
  70. bottom: 0;
  71. left: 0;
  72. z-index: 20
  73. }
  74. .wux-image__mask--text {
  75. display: flex;
  76. align-items: center;
  77. justify-content: center
  78. }
  79. .wux-image__text {
  80. color: rgba(0,0,0,.45);
  81. text-align: center;
  82. padding: 20rpx
  83. }