avatar.wxss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /* ==================
  2. 头像
  3. ==================== */
  4. .avatar {
  5. font-variant: small-caps;
  6. margin: 0;
  7. padding: 0;
  8. display: inline-flex;
  9. text-align: center;
  10. justify-content: center;
  11. align-items: center;
  12. color: var(--white);
  13. white-space: nowrap;
  14. position: relative;
  15. width: 64rpx;
  16. height: 64rpx;
  17. background-size: cover;
  18. background-position: center;
  19. vertical-align: middle;
  20. font-size: 1.5em;
  21. }
  22. .avatar:not([class*="bg-"]) {
  23. background-color: #ccc;
  24. }
  25. .avatar.xs {
  26. width: 32rpx;
  27. height: 32rpx;
  28. font-size: 1em;
  29. }
  30. .avatar.small {
  31. width: 48rpx;
  32. height: 48rpx;
  33. font-size: 1em;
  34. }
  35. .avatar.large {
  36. width: 96rpx;
  37. height: 96rpx;
  38. font-size: 2em;
  39. }
  40. .avatar.xl {
  41. width: 128rpx;
  42. height: 128rpx;
  43. font-size: 2.5em;
  44. }
  45. .avatar .avatar-text {
  46. font-size: 0.4em;
  47. }
  48. .avatar-group {
  49. direction: rtl;
  50. unicode-bidi: bidi-override;
  51. padding: 0 10rpx 0 40rpx;
  52. display: inline-block;
  53. }
  54. .avatar-group .avatar {
  55. margin-left: -30rpx;
  56. border: 4rpx solid var(--ghostWhite);
  57. vertical-align: middle;
  58. }
  59. .avatar-group .avatar.small {
  60. margin-left: -20rpx;
  61. border: 1rpx solid var(--ghostWhite);
  62. }