uni-ui.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. .uni-flex {
  2. display: flex;
  3. }
  4. .uni-flex-row {
  5. @extend .uni-flex;
  6. flex-direction: row;
  7. box-sizing: border-box;
  8. }
  9. .uni-flex-column {
  10. @extend .uni-flex;
  11. flex-direction: column;
  12. }
  13. .uni-color-gary {
  14. color: #3b4144;
  15. }
  16. /* 标题 */
  17. .uni-title {
  18. display: flex;
  19. margin-bottom: $uni-spacing-col-base;
  20. font-size: $uni-font-size-lg;
  21. font-weight: bold;
  22. color: #3b4144;
  23. }
  24. .uni-title-sub {
  25. display: flex;
  26. font-size: $uni-font-size-base;
  27. font-weight: 500;
  28. color: #3b4144;
  29. }
  30. /* 描述 额外文本 */
  31. .uni-note {
  32. margin-top: 10px;
  33. color: #999;
  34. font-size: $uni-font-size-sm;
  35. }
  36. /* 列表内容 */
  37. .uni-list-box {
  38. @extend .uni-flex-row;
  39. flex: 1;
  40. margin-top: 10px;
  41. }
  42. /* 略缩图 */
  43. .uni-thumb {
  44. flex-shrink: 0;
  45. margin-right: $uni-spacing-row-base;
  46. width: 125px;
  47. height: 75px;
  48. border-radius: $uni-border-radius-lg;
  49. overflow: hidden;
  50. border: 1px #f5f5f5 solid;
  51. image {
  52. width: 100%;
  53. height: 100%;
  54. }
  55. }
  56. .uni-media-box {
  57. @extend .uni-flex-row;
  58. border-radius: $uni-border-radius-lg;
  59. overflow: hidden;
  60. .uni-thumb {
  61. margin: 0;
  62. margin-left: 4px;
  63. flex-shrink: 1;
  64. width: 33%;
  65. border-radius:0;
  66. &:first-child {
  67. margin: 0;
  68. }
  69. }
  70. }
  71. /* 内容 */
  72. .uni-content {
  73. @extend .uni-flex-column;
  74. justify-content: space-between;
  75. }
  76. /* 列表footer */
  77. .uni-footer {
  78. @extend .uni-flex-row;
  79. justify-content: space-between;
  80. margin-top: $uni-spacing-col-lg;
  81. }
  82. .uni-footer-text {
  83. font-size: $uni-font-size-sm;
  84. color: $uni-text-color-grey;
  85. margin-left: 5px;
  86. }
  87. /* 标签 */
  88. .uni-tag {
  89. flex-shrink: 0;
  90. padding: 0 5px;
  91. border: 1px $uni-border-color solid;
  92. margin-right: $uni-spacing-row-sm;
  93. border-radius: $uni-border-radius-base;
  94. background: $uni-bg-color-grey;
  95. color: $uni-text-color;
  96. font-size: $uni-font-size-sm;
  97. }
  98. /* 链接 */
  99. .uni-link {
  100. margin-left: 10px;
  101. color: $uni-text-color;
  102. text-decoration: underline;
  103. }