style.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @import "../../style/common";
  2. /* */
  3. .layout-comment-container{
  4. padding: 30upx 0 25rpx;
  5. }
  6. /* 容器 */
  7. /* 头像 */
  8. .comment-avatar{
  9. width: 40upx;
  10. height: 40upx;
  11. border-radius: 50%;
  12. background-color: #EEEEEE;
  13. margin-right: 10upx;
  14. }
  15. /* 头像 */
  16. /* 内容 */
  17. .layout-comment-content{
  18. font-size: 24upx;
  19. line-height: 30upx;
  20. color: #333;
  21. padding-top: 6upx;
  22. }
  23. .comment-time{
  24. font-size: 22upx;
  25. color: #999999;
  26. margin-top: 10upx;
  27. }
  28. .layout-comment-context{
  29. margin-top: 20upx;
  30. }
  31. $comment-image-size:192upx;
  32. .layout-comment-image{
  33. width: $comment-image-size;
  34. height: $comment-image-size;
  35. margin-right: 10upx;
  36. border-radius: 10upx;
  37. background-color: #EEEEEE;
  38. margin-top: 16upx;
  39. }
  40. .layout-comment-image:nth-of-type(3n){
  41. margin-right: 0;
  42. }
  43. /* 内容 */
  44. /* 骨架 */
  45. .layout-comment-skeleton{
  46. background-color: #f2f2f2;
  47. }
  48. .layout-comment-skeleton-title,.layout-comment-skeleton-time,.layout-comment-skeleton-context{
  49. height: 30upx;
  50. width: 100upx;
  51. }
  52. .layout-comment-skeleton-time{
  53. height: 30upx;
  54. width: 150upx;
  55. }
  56. .layout-comment-skeleton-context{
  57. width: 50%;
  58. }
  59. /* 骨架 */
  60. /* 图片 */
  61. .layout-comment-big .layout-comment-image{
  62. width: 204upx;
  63. height: 204upx;
  64. }
  65. /* 图片 */
  66. /* 控件 */
  67. .layout-comment-control-footer{
  68. padding: 15upx 0;
  69. }
  70. .layout-comment-control-item{
  71. font-size: 28upx;
  72. line-height: 30upx;
  73. color: #999;
  74. margin-left: 40upx;
  75. }
  76. .layout-control-icon{
  77. width: 22upx;
  78. height: 22upx;
  79. margin-left: 8upx;
  80. }
  81. /* 控件 */