layout.nvue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u-row customStyle="margin-bottom: 10px">
  7. <u-col span="6">
  8. <view class="demo-layout bg-purple-light"></view>
  9. </u-col>
  10. <u-col span="6">
  11. <view class="demo-layout bg-purple"></view>
  12. </u-col>
  13. </u-row>
  14. <u-row customStyle="margin-bottom: 10px">
  15. <u-col span="4">
  16. <view class="demo-layout bg-purple"></view>
  17. </u-col>
  18. <u-col span="4">
  19. <view class="demo-layout bg-purple-light"></view>
  20. </u-col>
  21. <u-col span="4">
  22. <view class="demo-layout bg-purple-dark"></view>
  23. </u-col>
  24. </u-row>
  25. <u-row justify="space-between">
  26. <u-col span="3">
  27. <view class="demo-layout bg-purple"></view>
  28. </u-col>
  29. <u-col span="3">
  30. <view class="demo-layout bg-purple-light"></view>
  31. </u-col>
  32. <u-col span="3">
  33. <view class="demo-layout bg-purple"></view>
  34. </u-col>
  35. <u-col span="3">
  36. <view class="demo-layout bg-purple-light"></view>
  37. </u-col>
  38. </u-row>
  39. </view>
  40. </view>
  41. <view class="u-demo-block">
  42. <text class="u-demo-block__title">分栏间隔</text>
  43. <view class="u-demo-block__content">
  44. <u-row justify="space-between" gutter="10">
  45. <u-col span="3">
  46. <view class="demo-layout bg-purple"></view>
  47. </u-col>
  48. <u-col span="3">
  49. <view class="demo-layout bg-purple-light"></view>
  50. </u-col>
  51. <u-col span="3">
  52. <view class="demo-layout bg-purple"></view>
  53. </u-col>
  54. <u-col span="3">
  55. <view class="demo-layout bg-purple-light"></view>
  56. </u-col>
  57. </u-row>
  58. </view>
  59. </view>
  60. <view class="u-demo-block">
  61. <text class="u-demo-block__title">混合布局</text>
  62. <view class="u-demo-block__content">
  63. <u-row justify="space-between" gutter="10">
  64. <u-col span="2">
  65. <view class="demo-layout bg-purple-light"></view>
  66. </u-col>
  67. <u-col span="4">
  68. <view class="demo-layout bg-purple"></view>
  69. </u-col>
  70. <u-col span="6">
  71. <view class="demo-layout bg-purple-dark"></view>
  72. </u-col>
  73. </u-row>
  74. </view>
  75. </view>
  76. <view class="u-demo-block">
  77. <text class="u-demo-block__title">分栏偏移</text>
  78. <view class="u-demo-block__content">
  79. <u-row
  80. justify="space-between"
  81. customStyle="margin-bottom: 10px"
  82. >
  83. <u-col span="3" offset="3">
  84. <view class="demo-layout bg-purple-light"></view>
  85. </u-col>
  86. <u-col span="3" offset="3">
  87. <view class="demo-layout bg-purple"></view>
  88. </u-col>
  89. </u-row>
  90. <u-row>
  91. <u-col span="3">
  92. <view class="demo-layout bg-purple-light"></view>
  93. </u-col>
  94. <u-col span="3" offset="3">
  95. <view class="demo-layout bg-purple"></view>
  96. </u-col>
  97. </u-row>
  98. </view>
  99. </view>
  100. <view class="u-demo-block">
  101. <text class="u-demo-block__title">对齐方式</text>
  102. <view class="u-demo-block__content">
  103. <u-row
  104. justify="space-between"
  105. customStyle="margin-bottom: 10px"
  106. >
  107. <u-col span="3">
  108. <view class="demo-layout bg-purple-light"></view>
  109. </u-col>
  110. <u-col span="3">
  111. <view class="demo-layout bg-purple"></view>
  112. </u-col>
  113. </u-row>
  114. <u-row>
  115. <u-col span="3">
  116. <view class="demo-layout bg-purple-light"></view>
  117. </u-col>
  118. <u-col span="3">
  119. <view class="demo-layout bg-purple"></view>
  120. </u-col>
  121. </u-row>
  122. </view>
  123. </view>
  124. </view>
  125. </template>
  126. <script>
  127. export default {
  128. data() {
  129. return {};
  130. },
  131. };
  132. </script>
  133. <style lang="scss">
  134. .wrap {
  135. padding: 12px;
  136. }
  137. .demo-layout {
  138. height: 25px;
  139. border-radius: 4px;
  140. }
  141. .bg-purple {
  142. background: #ced7e1;
  143. }
  144. .bg-purple-light {
  145. background: #e5e9f2;
  146. }
  147. .bg-purple-dark {
  148. background: #99a9bf;
  149. }
  150. </style>