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