avatar.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .nut-avatar{
  2. background-size:100% 100%;
  3. background-repeat: no-repeat;
  4. background-position: center center;
  5. display: inline-block;
  6. position: relative;
  7. margin-right: 10px;
  8. .icon{
  9. width:50%;
  10. height: 50%;
  11. background-size:100% 100%;
  12. position: absolute;
  13. top:50%;
  14. left:50%;
  15. transform: translate(-50%,-50%);
  16. }
  17. .text{
  18. display: inline-block;
  19. width:100%;
  20. height: 100%;
  21. text-align: center;
  22. overflow: hidden;
  23. }
  24. .dot{
  25. position: absolute;
  26. min-width: 18px;
  27. min-height: 18px;
  28. display: flex;
  29. justify-content: center;
  30. align-items: center;
  31. padding: 2px;
  32. text-align: center;
  33. border-radius: 50%;
  34. background:red;
  35. top:-4px;
  36. right: -5px;
  37. color: #fff;
  38. font-size: 12px;
  39. transform: scale(0.8);
  40. line-height: 1;
  41. }
  42. }
  43. .avatar-large{
  44. width: 40px;
  45. height: 40px;
  46. line-height: 40px;
  47. }
  48. .avatar-small{
  49. width: 24px;
  50. height: 24px;
  51. line-height: 24px;
  52. }
  53. .avatar-normal{
  54. width:32px;
  55. height: 32px;
  56. line-height: 32px;
  57. }
  58. .avatar-round{
  59. border-radius: 50%
  60. }
  61. .avatar-square{
  62. border-radius: 5px;
  63. }