btxui 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/demo.html +1 -0
  2. package/index.common.js +93 -0
  3. package/index.common.js.map +1 -0
  4. package/index.umd.js +104 -0
  5. package/index.umd.js.map +1 -0
  6. package/index.umd.min.js +2 -0
  7. package/index.umd.min.js.map +1 -0
  8. package/package.json +12 -23
  9. package/README.md +0 -42
  10. package/app.vue +0 -162
  11. package/assets/css/_main.js +0 -73
  12. package/assets/css/btx.min.css +0 -1
  13. package/assets/css/btx.mob.min.css +0 -1
  14. package/assets/css/btx.pad.min.css +0 -1
  15. package/assets/css/btx.webapp.min.css +0 -1
  16. package/assets/css/custom_fonts/iconfont.css +0 -37
  17. package/assets/css/custom_fonts/iconfont.eot +0 -0
  18. package/assets/css/custom_fonts/iconfont.svg +0 -47
  19. package/assets/css/custom_fonts/iconfont.ttf +0 -0
  20. package/assets/css/custom_fonts/iconfont.woff +0 -0
  21. package/assets/css/custom_fonts/iconfont.woff2 +0 -0
  22. package/assets/css/res-l.css +0 -47
  23. package/assets/css/res-m.css +0 -47
  24. package/assets/css/res-s.css +0 -61
  25. package/assets/custom_fonts/iconfont.css +0 -37
  26. package/assets/custom_fonts/iconfont.eot +0 -0
  27. package/assets/custom_fonts/iconfont.svg +0 -47
  28. package/assets/custom_fonts/iconfont.ttf +0 -0
  29. package/assets/custom_fonts/iconfont.woff +0 -0
  30. package/assets/custom_fonts/iconfont.woff2 +0 -0
  31. package/assets/js/Btx.js +0 -196
  32. package/assets/js/Utils.js +0 -421
  33. package/assets/js/fastclick.js +0 -802
  34. package/assets/js/lazy.min.js +0 -2
  35. package/assets/js/touchwipe.js +0 -111
  36. package/assets/server.js +0 -8
  37. package/assets/start_site_code_str.js +0 -119
  38. package/cdn/css/btx.min.css +0 -1
  39. package/cdn/css/btx.min.css.map +0 -1
  40. package/cdn/fonts/iconfont.ttf +0 -0
  41. package/cdn/fonts/iconfont.woff +0 -0
  42. package/cdn/fonts/iconfont.woff2 +0 -0
  43. package/components/BTXUI/app/app-wid.vue +0 -182
  44. package/components/BTXUI/btn/btn-wid.vue +0 -128
  45. package/components/BTXUI/carousel/carousel-wid.vue +0 -138
  46. package/components/BTXUI/checkbox/checkbox-wid.vue +0 -72
  47. package/components/BTXUI/confirm/confirm-wid.vue +0 -279
  48. package/components/BTXUI/content/content-checkbox-wid.vue +0 -44
  49. package/components/BTXUI/content/content-node-wid.vue +0 -114
  50. package/components/BTXUI/content/content-tag-wid.vue +0 -25
  51. package/components/BTXUI/content/content-wid.vue +0 -254
  52. package/components/BTXUI/core/anis/ani-fail.vue +0 -46
  53. package/components/BTXUI/core/anis/ani-loading.vue +0 -32
  54. package/components/BTXUI/core/anis/ani-notic.vue +0 -47
  55. package/components/BTXUI/core/anis/ani-success.vue +0 -48
  56. package/components/BTXUI/core/b-drag.vue +0 -258
  57. package/components/BTXUI/core/b-grid.vue +0 -84
  58. package/components/BTXUI/core/b-hot.vue +0 -171
  59. package/components/BTXUI/core/b-icon.vue +0 -76
  60. package/components/BTXUI/core/b-img.vue +0 -84
  61. package/components/BTXUI/core/b-input.vue +0 -198
  62. package/components/BTXUI/core/b-list.vue +0 -276
  63. package/components/BTXUI/core/b-text/doc.ts +0 -9
  64. package/components/BTXUI/core/b-text/index.vue +0 -16
  65. package/components/BTXUI/core/b-textarea.vue +0 -58
  66. package/components/BTXUI/core/b-video.vue +0 -35
  67. package/components/BTXUI/core/b-view/doc.ts +0 -10
  68. package/components/BTXUI/core/b-view/index.vue +0 -20
  69. package/components/BTXUI/core/b-webview.vue +0 -20
  70. package/components/BTXUI/core/lib/ChapterLink.js +0 -49
  71. package/components/BTXUI/core/lib/Search.vue +0 -60
  72. package/components/BTXUI/core/styles/doc.ts +0 -55
  73. package/components/BTXUI/core/styles/index.vue +0 -98
  74. package/components/BTXUI/core/styles/prestyles.ts +0 -471
  75. package/components/BTXUI/core/styles/theme.ts +0 -29
  76. package/components/BTXUI/drawer/drawer-wid.vue +0 -165
  77. package/components/BTXUI/drawer/title-tag-wid.vue +0 -114
  78. package/components/BTXUI/form/form-select-wid.vue +0 -57
  79. package/components/BTXUI/form/form-wid.vue +0 -324
  80. package/components/BTXUI/formPannel/form-pannel-wid.vue +0 -133
  81. package/components/BTXUI/imgsUpload/imgs-upload-wid.vue +0 -149
  82. package/components/BTXUI/index.js +0 -83
  83. package/components/BTXUI/pageFlip/page-flip-wid.vue +0 -206
  84. package/components/BTXUI/pannel/pannel-wid.vue +0 -167
  85. package/components/BTXUI/range/range-wid.vue +0 -134
  86. package/components/BTXUI/search/search-wid.vue +0 -80
  87. package/components/BTXUI/select/select-wid.vue +0 -186
  88. package/components/BTXUI/slider/slider-wid.vue +0 -444
  89. package/components/BTXUI/tab/tab-wid.vue +0 -109
  90. package/components/BTXUI/table/table-wid.vue +0 -324
  91. package/components/BTXUI/tag/tag-wid.vue +0 -183
  92. package/components/BTXUI/tags/tags-wid.vue +0 -121
  93. package/components/BTXUI/tooltip/tooltip-wid.vue +0 -146
  94. package/components/BTXUI/upload/upload-wid.vue +0 -215
  95. package/components/BTXUI/waterfall/waterfall-wid.vue +0 -166
  96. package/components/header-info.vue +0 -167
  97. package/composables/@types.ts +0 -4
  98. package/composables/api.ts +0 -18
  99. package/env.d.ts +0 -5
  100. package/main.js +0 -16
  101. package/nuxt.config.ts +0 -51
  102. package/pages/article.vue +0 -16
  103. package/pages/download.vue +0 -50
  104. package/pages/example/app_wid/app/data_demo.vue +0 -9
  105. package/pages/example/app_wid/app/download_demo.vue +0 -9
  106. package/pages/example/app_wid/app/list_demo.vue +0 -11
  107. package/pages/example/app_wid/app/system_demo.vue +0 -9
  108. package/pages/example/app_wid/app_wid_demo.vue +0 -198
  109. package/pages/example/app_wid/btn_wid_demo.vue +0 -179
  110. package/pages/example/app_wid/carousel_wid_demo.vue +0 -152
  111. package/pages/example/app_wid/checkbox_wid_demo.vue +0 -65
  112. package/pages/example/app_wid/confirm_wid_demo.vue +0 -197
  113. package/pages/example/app_wid/content_wid_demo.vue +0 -369
  114. package/pages/example/app_wid/drawer_wid_demo.vue +0 -155
  115. package/pages/example/app_wid/form_pannel_wid_demo.vue +0 -338
  116. package/pages/example/app_wid/form_wid_demo.vue +0 -550
  117. package/pages/example/app_wid/imgs_upload_wid_demo.vue +0 -159
  118. package/pages/example/app_wid/index.js +0 -158
  119. package/pages/example/app_wid/page_flip_wid_demo.vue +0 -99
  120. package/pages/example/app_wid/pannel_wid_demo.vue +0 -177
  121. package/pages/example/app_wid/range_wid_demo.vue +0 -101
  122. package/pages/example/app_wid/search_wid_demo.vue +0 -75
  123. package/pages/example/app_wid/select_wid_demo.vue +0 -217
  124. package/pages/example/app_wid/slider_wid_demo.vue +0 -143
  125. package/pages/example/app_wid/tab_wid_demo.vue +0 -170
  126. package/pages/example/app_wid/table_wid_demo.vue +0 -377
  127. package/pages/example/app_wid/tag_wid_demo.vue +0 -133
  128. package/pages/example/app_wid/tags_wid_demo.vue +0 -143
  129. package/pages/example/app_wid/tooltip_wid_demo.vue +0 -117
  130. package/pages/example/app_wid/upload_wid_demo.vue +0 -123
  131. package/pages/example/base_wid/b_drag_demo.vue +0 -159
  132. package/pages/example/base_wid/b_grid_demo.vue +0 -225
  133. package/pages/example/base_wid/b_hot_demo.vue +0 -135
  134. package/pages/example/base_wid/b_icon_demo.vue +0 -80
  135. package/pages/example/base_wid/b_img_demo.vue +0 -95
  136. package/pages/example/base_wid/b_input_demo.vue +0 -171
  137. package/pages/example/base_wid/b_list_demo.vue +0 -241
  138. package/pages/example/base_wid/b_style_demo.vue +0 -928
  139. package/pages/example/base_wid/b_text_demo.vue +0 -36
  140. package/pages/example/base_wid/b_textarea_demo.vue +0 -64
  141. package/pages/example/base_wid/b_video_demo.vue +0 -42
  142. package/pages/example/base_wid/b_view_demo.vue +0 -36
  143. package/pages/example/base_wid/index.js +0 -76
  144. package/pages/example/content.js +0 -49
  145. package/pages/example/global_style/animation.vue +0 -197
  146. package/pages/example/global_style/color.vue +0 -134
  147. package/pages/example/global_style/decoration.vue +0 -546
  148. package/pages/example/global_style/icon.vue +0 -345
  149. package/pages/example/global_style/index.js +0 -52
  150. package/pages/example/global_style/layout.vue +0 -846
  151. package/pages/example/global_style/special.vue +0 -37
  152. package/pages/example/global_style/table.vue +0 -298
  153. package/pages/example/global_style/text.vue +0 -159
  154. package/pages/index.vue +0 -43
  155. package/pages/level_widget.vue +0 -11
  156. package/pages/start.vue +0 -200
  157. package/plugins/index.ts +0 -2
  158. package/public/favicon.gif +0 -0
  159. package/public/fonts/iconfont.ttf +0 -0
  160. package/public/fonts/iconfont.woff +0 -0
  161. package/public/fonts/iconfont.woff2 +0 -0
  162. package/public/img/banner.jpg +0 -0
  163. package/public/img/banner2.jpg +0 -0
  164. package/public/img/bg_pattern.png +0 -0
  165. package/public/img/btx.jpg +0 -0
  166. package/public/img/btx_ui.jpg +0 -0
  167. package/public/img/dir.png +0 -0
  168. package/public/img/f.png +0 -0
  169. package/public/img/head.jpg +0 -0
  170. package/public/img/head2.jpg +0 -0
  171. package/public/img/home_ico.png +0 -0
  172. package/public/img/icons.svg +0 -164
  173. package/public/img/mechanism/b-style.png +0 -0
  174. package/public/img/mechanism/slider-wid.png +0 -0
  175. package/public/img/mechanism/upload-wid.png +0 -0
  176. package/public/img/transform_origin.png +0 -0
  177. package/sass/animation.scss +0 -400
  178. package/sass/btx.mob.scss +0 -10
  179. package/sass/btx.pad.scss +0 -3
  180. package/sass/btx.scss +0 -22
  181. package/sass/btx.webapp.scss +0 -22
  182. package/sass/colors.scss +0 -65
  183. package/sass/decoration.scss +0 -220
  184. package/sass/flex.scss +0 -29
  185. package/sass/icons.scss +0 -100
  186. package/sass/layout.scss +0 -88
  187. package/sass/reset.scss +0 -111
  188. package/sass/response/flex_mixin.scss +0 -91
  189. package/sass/response/layout_mixin.scss +0 -227
  190. package/sass/response/main.scss +0 -59
  191. package/sass/response/text_mixin.scss +0 -65
  192. package/sass/scroll.scss +0 -100
  193. package/sass/special.scss +0 -13
  194. package/sass/table.scss +0 -103
  195. package/sass/text.scss +0 -86
  196. package/sass/webpack.config.js +0 -31
  197. package/tsconfig.json +0 -4
package/pages/example/global_style/layout.vue DELETED
@@ -1,846 +0,0 @@
1
- <template>
2
- <article>
3
- <!--盒子模型-->
4
- <section>
5
- <h5>盒子模型</h5>
6
- <p>BTX·UI 框架对全部元素进行了 "怪异盒模型" 初始化，即 <b>box-sizing: border-box</b>，可通过
7
- <code>.box-normal</code> 类恢复标准盒模型。</p>
8
- <p></p>
9
- </section>
10
-
11
- <!--显示及隐藏-->
12
- <section>
13
- <h5>显示及隐藏</h5>
14
- <table class="table">
15
- <thead>
16
- <tr>
17
- <th>样式类</th>
18
- <th>效果</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <tr>
23
- <td>
24
- <code>.show</code>
25
- </td>
26
- <td>强制元素显示（display: block）</td>
27
- </tr>
28
- <tr>
29
- <td>
30
- <code>.hide</code>
31
- </td>
32
- <td>强制元素隐藏（display: none）</td>
33
- </tr>
34
- </tbody>
35
- </table>
36
- <p></p>
37
- </section>
38
-
39
- <!--版心容器-->
40
- <section>
41
- <h5>版心容器</h5>
42
- <p>
43
- 可以为页面内容和栅格系统包裹一个
44
- <code>.container</code> 容器，作为版心布局。
45
- </p>
46
- <table class="table">
47
- <thead>
48
- <tr>
49
- <th>样式类</th>
50
- <th>效果</th>
51
- </tr>
52
- </thead>
53
- <tbody>
54
- <tr>
55
- <td>
56
- <code>.container</code>
57
- </td>
58
- <td>1200px 宽度，默认版心容器</td>
59
- </tr>
60
- <tr>
61
- <td>
62
- <code>.container-md</code>
63
- </td>
64
- <td>960px 宽度，中等版心容器</td>
65
- </tr>
66
- <tr>
67
- <td>
68
- <code>.container-sm</code>
69
- </td>
70
- <td>736px 宽度，小型版心容器</td>
71
- </tr>
72
- </tbody>
73
- </table>
74
- <p></p>
75
- </section>
76
-
77
- <!--flex 弹性布局-->
78
- <section>
79
- <h5>flex 弹性布局</h5>
80
- <p>BTX·UI 框架的布局核心是基于 flex 的，<code>.flex</code> 及 <code>.flex-*</code> 样式类，可以对容器内的元素进行九宫格式对齐定位。<code>.flex-between</code> 及 <code>.flex-around</code> 样式类可以设置元素均分排列。而 <code>.flex-column</code> 可以设置纵向生长弹性布局容器。此外框架还提供了 <code>.grow-*</code> 样式类，值域为 0 - 9，共 10 档，用于设置元素的自生长比率。</p>
81
- <p>通过 <code>.order-*</code> 可以设置弹性布局的项目排序。预置的排序值：0、1、2、3、4、5。</p>
82
- <p>【示例】：横向生长九宫格对齐定位</p>
83
- <div class="grid fsize-d9 pcenter">
84
- <div class="col-4 pad-1">
85
- <div class="flex-1 h-5 round-sm bg-color-lgray mrg-b-d5">
86
- <div class="w-2 h-2 round-sm bg-color-sub">1</div>
87
- </div>
88
- <div><code>.flex-1</code></div>
89
- </div>
90
- <div class="col-4 pad-1">
91
- <div class="flex-2 h-5 round-sm bg-color-lgray mrg-b-d5">
92
- <div class="w-2 h-2 round-sm bg-color-sub">2</div>
93
- </div>
94
- <div><code>.flex-2</code></div>
95
- </div>
96
- <div class="col-4 pad-1">
97
- <div class="flex-3 h-5 round-sm bg-color-lgray mrg-b-d5">
98
- <div class="w-2 h-2 round-sm bg-color-sub">3</div>
99
- </div>
100
- <div><code>.flex-3</code></div>
101
- </div>
102
- <div class="col-4 pad-1">
103
- <div class="flex-4 h-5 round-sm bg-color-lgray mrg-b-d5">
104
- <div class="w-2 h-2 round-sm bg-color-sub">4</div>
105
- </div>
106
- <div><code>.flex-4</code></div>
107
- </div>
108
- <div class="col-4 pad-1">
109
- <div class="flex-5 h-5 round-sm bg-color-lgray mrg-b-d5">
110
- <div class="w-2 h-2 round-sm bg-color-sub">5</div>
111
- </div>
112
- <div><code>.flex-5</code></div>
113
- </div>
114
- <div class="col-4 pad-1">
115
- <div class="flex-6 h-5 round-sm bg-color-lgray mrg-b-d5">
116
- <div class="w-2 h-2 round-sm bg-color-sub">6</div>
117
- </div>
118
- <div><code>.flex-6</code></div>
119
- </div>
120
- <div class="col-4 pad-1">
121
- <div class="flex-7 h-5 round-sm bg-color-lgray mrg-b-d5">
122
- <div class="w-2 h-2 round-sm bg-color-sub">7</div>
123
- </div>
124
- <div><code>.flex-7</code></div>
125
- </div>
126
- <div class="col-4 pad-1">
127
- <div class="flex-8 h-5 round-sm bg-color-lgray mrg-b-d5">
128
- <div class="w-2 h-2 round-sm bg-color-sub">8</div>
129
- </div>
130
- <div><code>.flex-8</code></div>
131
- </div>
132
- <div class="col-4 pad-1">
133
- <div class="flex-9 h-5 round-sm bg-color-lgray mrg-b-d5">
134
- <div class="w-2 h-2 round-sm bg-color-sub">9</div>
135
- </div>
136
- <div><code>.flex-9</code></div>
137
- </div>
138
- </div>
139
- <p></p>
140
- <p>【示例】：竖向生长九宫格对齐定位</p>
141
- <div class="grid fsize-d9 pcenter">
142
- <div class="col-4 pad-1">
143
- <div class="flex-column flex-1 h-5 round-sm bg-color-lgray mrg-b-d5">
144
- <div class="w-2 h-2 round-sm bg-color-sub">1</div>
145
- </div>
146
- <div><code>.flex-1</code></div>
147
- </div>
148
- <div class="col-4 pad-1">
149
- <div class="flex-column flex-2 h-5 round-sm bg-color-lgray mrg-b-d5">
150
- <div class="w-2 h-2 round-sm bg-color-sub">2</div>
151
- </div>
152
- <div><code>.flex-2</code></div>
153
- </div>
154
- <div class="col-4 pad-1">
155
- <div class="flex-column flex-3 h-5 round-sm bg-color-lgray mrg-b-d5">
156
- <div class="w-2 h-2 round-sm bg-color-sub">3</div>
157
- </div>
158
- <div><code>.flex-3</code></div>
159
- </div>
160
- <div class="col-4 pad-1">
161
- <div class="flex-column flex-4 h-5 round-sm bg-color-lgray mrg-b-d5">
162
- <div class="w-2 h-2 round-sm bg-color-sub">4</div>
163
- </div>
164
- <div><code>.flex-4</code></div>
165
- </div>
166
- <div class="col-4 pad-1">
167
- <div class="flex-column flex-5 h-5 round-sm bg-color-lgray mrg-b-d5">
168
- <div class="w-2 h-2 round-sm bg-color-sub">5</div>
169
- </div>
170
- <div><code>.flex-5</code></div>
171
- </div>
172
- <div class="col-4 pad-1">
173
- <div class="flex-column flex-6 h-5 round-sm bg-color-lgray mrg-b-d5">
174
- <div class="w-2 h-2 round-sm bg-color-sub">6</div>
175
- </div>
176
- <div><code>.flex-6</code></div>
177
- </div>
178
- <div class="col-4 pad-1">
179
- <div class="flex-column flex-7 h-5 round-sm bg-color-lgray mrg-b-d5">
180
- <div class="w-2 h-2 round-sm bg-color-sub">7</div>
181
- </div>
182
- <div><code>.flex-7</code></div>
183
- </div>
184
- <div class="col-4 pad-1">
185
- <div class="flex-column flex-8 h-5 round-sm bg-color-lgray mrg-b-d5">
186
- <div class="w-2 h-2 round-sm bg-color-sub">8</div>
187
- </div>
188
- <div><code>.flex-8</code></div>
189
- </div>
190
- <div class="col-4 pad-1">
191
- <div class="flex-column flex-9 h-5 round-sm bg-color-lgray mrg-b-d5">
192
- <div class="w-2 h-2 round-sm bg-color-sub">9</div>
193
- </div>
194
- <div><code>.flex-9</code></div>
195
- </div>
196
- </div>
197
- <p></p>
198
- </section>
199
-
200
- <!--栅格系统-->
201
- <section>
202
- <h5>栅格系统</h5>
203
- <p>通过基础的 12 分栏，迅速简便地创建布局。</p>
204
- <p>【示例】等分布局：</p>
205
- <div class="pcenter fsize-d8">
206
- <div class="grid pad-b-1">
207
- <div class="col-12 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-12</span>
208
- </div>
209
- </div>
210
- <div class="grid pad-b-1">
211
- <div class="col-6 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-6</span>
212
- </div>
213
- <div class="col-6 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-6</span>
214
- </div>
215
- </div>
216
- <div class="grid pad-b-1">
217
- <div class="col-4 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-4</span>
218
- </div>
219
- <div class="col-4 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-4</span>
220
- </div>
221
- <div class="col-4 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-4</span>
222
- </div>
223
- </div>
224
- <div class="grid pad-b-1">
225
- <div class="col-3 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-3</span>
226
- </div>
227
- <div class="col-3 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-3</span>
228
- </div>
229
- <div class="col-3 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-3</span>
230
- </div>
231
- <div class="col-3 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-3</span>
232
- </div>
233
- </div>
234
- <div class="grid pad-b-1">
235
- <div class="col-2 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
236
- </div>
237
- <div class="col-2 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
238
- </div>
239
- <div class="col-2 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
240
- </div>
241
- <div class="col-2 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
242
- </div>
243
- <div class="col-2 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
244
- </div>
245
- <div class="col-2 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
246
- </div>
247
- </div>
248
- <div class="grid">
249
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
250
- </div>
251
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
252
- </div>
253
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
254
- </div>
255
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
256
- </div>
257
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
258
- </div>
259
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
260
- </div>
261
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
262
- </div>
263
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
264
- </div>
265
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
266
- </div>
267
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
268
- </div>
269
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
270
- </div>
271
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
272
- </div>
273
- </div>
274
- </div>
275
- <p></p>
276
- <p>【示例】非等分布局：</p>
277
- <div class="pcenter fsize-d8">
278
- <div class="grid pad-b-1">
279
- <div class="col-6 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-6</span>
280
- </div>
281
- <div class="col-4 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-4</span>
282
- </div>
283
- <div class="col-2 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
284
- </div>
285
- </div>
286
- <div class="grid pad-b-1">
287
- <div class="col-11 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-11</span>
288
- </div>
289
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
290
- </div>
291
- </div>
292
- <div class="grid">
293
- <div class="col-2 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
294
- </div>
295
- <div class="col-7 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-7</span>
296
- </div>
297
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">col-1</span>
298
- </div>
299
- <div class="col-2 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">col-2</span>
300
- </div>
301
- </div>
302
- </div>
303
- <p></p>
304
- <p>栅格布局可以通过嵌套来实现更为精细的分段。</p>
305
- <p>【示例】栅格嵌套布局，实现 24 等分：</p>
306
- <div class="pcenter fsize-d8">
307
- <div class="grid pad-b-1">
308
- <div class="col-6 grid">
309
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">1</span>
310
- </div>
311
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">2</span>
312
- </div>
313
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">3</span>
314
- </div>
315
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">4</span>
316
- </div>
317
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">5</span>
318
- </div>
319
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">6</span>
320
- </div>
321
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">7</span>
322
- </div>
323
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">8</span>
324
- </div>
325
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">9</span>
326
- </div>
327
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">10</span>
328
- </div>
329
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">11</span>
330
- </div>
331
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">12</span>
332
- </div>
333
- </div>
334
- <div class="col-6 grid">
335
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">13</span>
336
- </div>
337
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">14</span>
338
- </div>
339
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">15</span>
340
- </div>
341
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">16</span>
342
- </div>
343
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">17</span>
344
- </div>
345
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">18</span>
346
- </div>
347
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">19</span>
348
- </div>
349
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">20</span>
350
- </div>
351
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">21</span>
352
- </div>
353
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">22</span>
354
- </div>
355
- <div class="col-1 bg-color-lgray color-mgray line thick-1 round-sm"><span class="color-dgray">23</span>
356
- </div>
357
- <div class="col-1 bg-color-light color-mgray line thick-1 round-sm"><span class="color-dgray">24</span>
358
- </div>
359
- </div>
360
- </div>
361
- </div>
362
- <p></p>
363
- </section>
364
-
365
- <!--多列布局-->
366
- <section>
367
- <h5>多列布局</h5>
368
- <p>通过<code>.column-*</code> 可以使用预置的多列布局方案，常用于实现瀑布流布局。</p>
369
- <p>预置的列值：1、2、3、4、5。</p>
370
- <p>【示例】瀑布流布局：</p>
371
- <div class="column-4">
372
- <div class="pad-d5 item">
373
- <div class="flex-5 h-5 line line-mgray thick-1 round-sm bg-color-lgray ">A</div>
374
- </div>
375
- <div class="pad-d5 item">
376
- <div class="flex-5 h-8 line line-mgray thick-1 round-sm bg-color-lgray ">B</div>
377
- </div>
378
- <div class="pad-d5 item">
379
- <div class="flex-5 h-5 line line-mgray thick-1 round-sm bg-color-lgray ">C</div>
380
- </div>
381
- <div class="pad-d5 item">
382
- <div class="flex-5 h-3 line line-mgray thick-1 round-sm bg-color-lgray ">D</div>
383
- </div>
384
- <div class="pad-d5 item">
385
- <div class="flex-5 h-10 line line-mgray thick-1 round-sm bg-color-lgray ">E</div>
386
- </div>
387
- <div class="pad-d5 item">
388
- <div class="flex-5 h-15 line line-mgray thick-1 round-sm bg-color-lgray ">F</div>
389
- </div>
390
- </div>
391
- <p></p>
392
- </section>
393
-
394
- <!--内边距-->
395
- <section>
396
- <h5>内边距</h5>
397
- <p>通过<code>.pad-*</code> 可以使用预置的内边距方案。</p>
398
- <p>预置的内边距值：0、0.5、1、1.5、2、2.5、3、3.5、4、5、6、7、8、9、10，单位 rem。数值 "." 使用 "d" 代替，"0" 使用 "" 空字符串代替。比如 0.5 rem 内边距，类名为<code>.pad-d5</code>。</p>
399
- <table class="table">
400
- <thead>
401
- <tr>
402
- <th>样式类</th>
403
- <th>效果</th>
404
- </tr>
405
- </thead>
406
- <tbody>
407
- <tr>
408
- <td>
409
- <code>.pad-*</code>
410
- </td>
411
- <td>设置 4 个方向的内边距值</td>
412
- </tr>
413
- <tr>
414
- <td>
415
- <code>.pad-v-*</code>
416
- </td>
417
- <td>设置垂直方向内边距</td>
418
- </tr>
419
- <tr>
420
- <td>
421
- <code>.pad-h-*</code>
422
- </td>
423
- <td>设置水平方向内边距</td>
424
- </tr>
425
- <tr>
426
- <td>
427
- <code>.pad-l-*</code>
428
- </td>
429
- <td>设置左侧内边距</td>
430
- </tr>
431
- <tr>
432
- <td>
433
- <code>.pad-r-*</code>
434
- </td>
435
- <td>设置右侧内边距</td>
436
- </tr>
437
- <tr>
438
- <td>
439
- <code>.pad-t-*</code>
440
- </td>
441
- <td>设置上侧内边距</td>
442
- </tr>
443
- <tr>
444
- <td>
445
- <code>.pad-b-*</code>
446
- </td>
447
- <td>设置下侧内边距</td>
448
- </tr>
449
- </tbody>
450
- </table>
451
- <p></p>
452
- </section>
453
-
454
- <!--外边距-->
455
- <section>
456
- <h5>外边距</h5>
457
- <p>通过<code>mrg*</code> 可以使用预置的外边距方案。其值域范围等同于内边距，此外可设置 auto 值，但不支持负值。</p>
458
- <table class="table">
459
- <thead>
460
- <tr>
461
- <th>样式类</th>
462
- <th>效果</th>
463
- </tr>
464
- </thead>
465
- <tbody>
466
- <tr>
467
- <td>
468
- <code>.mrg-*</code>
469
- </td>
470
- <td>设置 4 个方向的外边距值</td>
471
- </tr>
472
- <tr>
473
- <td>
474
- <code>.mrg-v-*</code>
475
- </td>
476
- <td>设置垂直方向外边距</td>
477
- </tr>
478
- <tr>
479
- <td>
480
- <code>.mrg-h-*</code>
481
- </td>
482
- <td>设置水平方向外边距</td>
483
- </tr>
484
- <tr>
485
- <td>
486
- <code>.mrg-l-*</code>
487
- </td>
488
- <td>设置左侧外边距</td>
489
- </tr>
490
- <tr>
491
- <td>
492
- <code>.mrg-r-*</code>
493
- </td>
494
- <td>设置右侧外边距</td>
495
- </tr>
496
- <tr>
497
- <td>
498
- <code>.mrg-t-*</code>
499
- </td>
500
- <td>设置上侧外边距</td>
501
- </tr>
502
- <tr>
503
- <td>
504
- <code>.mrg-b-*</code>
505
- </td>
506
- <td>设置下侧外边距</td>
507
- </tr>
508
- </tbody>
509
- </table>
510
- <p></p>
511
- </section>
512
-
513
- <!--尺寸-->
514
- <section>
515
- <h5>尺寸</h5>
516
- <table class="table">
517
- <thead>
518
- <tr>
519
- <th>样式类</th>
520
- <th>效果</th>
521
- </tr>
522
- </thead>
523
- <tbody>
524
- <tr>
525
- <td>
526
- <code>.max-h</code>
527
- </td>
528
- <td>高度撑满容器</td>
529
- </tr>
530
- <tr>
531
- <td>
532
- <code>.max-w</code>
533
- </td>
534
- <td>宽度撑满容器</td>
535
- </tr>
536
- <tr>
537
- <td>
538
- <code>.max</code>
539
- </td>
540
- <td>宽度及高度撑满容器</td>
541
- </tr>
542
- </tbody>
543
- </table>
544
- <p></p>
545
- <p>也可以设置具体的宽高尺寸，框架预置了一些宽度 <code>w-*</code> 和高度 <code>h-*</code> 的规格。其值域为：auto、0、0.5、1 — 10、15、20、25、30、35、40、45、50、55、60、65、70、75、80、85、90、95、100，单位 rem。数值 "." 使用 "d" 代替，"0" 使用 "" 空字符串代替。比如 0.5 rem 宽度，类名为 <code>.w-d5</code>。</p>
546
- <p>【示例】1 rem 至 10 rem 方形：</p>
547
- <div class="flex-4 flex-between">
548
- <div class="w-1 h-1 bg-color-lgray round-sm fsize-d8 flex-5">1</div>
549
- <div class="w-2 h-2 bg-color-lgray round-sm fsize-d8 flex-5">2</div>
550
- <div class="w-3 h-3 bg-color-lgray round-sm fsize-d8 flex-5">3</div>
551
- <div class="w-4 h-4 bg-color-lgray round-sm fsize-d8 flex-5">4</div>
552
- <div class="w-5 h-5 bg-color-lgray round-sm fsize-d8 flex-5">5</div>
553
- </div>
554
- <div class="flex-4 flex-between">
555
- <div class="w-10 h-10 bg-color-lgray round-sm fsize-d8 flex-5">10</div>
556
- <div class="w-9 h-9 bg-color-lgray round-sm fsize-d8 flex-5">9</div>
557
- <div class="w-8 h-8 bg-color-lgray round-sm fsize-d8 flex-5">8</div>
558
- <div class="w-7 h-7 bg-color-lgray round-sm fsize-d8 flex-5">7</div>
559
- <div class="w-6 h-6 bg-color-lgray round-sm fsize-d8 flex-5">6</div>
560
- </div>
561
- <p></p>
562
- <p>【示例】配合自生长实现弹性布局：</p>
563
- <div class="flex">
564
- <div class="w-15 h-2 bg-color-sub"></div>
565
- <div class="w-d5 h-2 bg-color-dgray"></div>
566
- <div class="grow-1 bg-color-lgray fsize-d8 pcenter">grow-1</div>
567
- </div>
568
- <p></p>
569
- <p>还可以设置宽高尺寸的最大、最小值进行范围限制，框架预置的宽度限制为 <code>lw-*</code>（最小宽）、<code>rw-*</code>（最大宽）。其值域为：10p、20p、30p、40p、50p、60p、70p、80p、90p，单位 %；高度限制为 <code>th-*</code>（最大高）、<code>bh-*</code>（最小高）。其值域为：10、20、30、40、50、60、70、80、90、100，单位 rem。</p>
570
- <p></p>
571
- </section>
572
-
573
- <!--定位方式-->
574
- <section>
575
- <h5>定位方式</h5>
576
- <table class="table">
577
- <thead>
578
- <tr>
579
- <th>样式类</th>
580
- <th>效果</th>
581
- </tr>
582
- </thead>
583
- <tbody>
584
- <tr>
585
- <td>
586
- <code>.fixed</code>
587
- </td>
588
- <td>固定式定位</td>
589
- </tr>
590
- <tr>
591
- <td>
592
- <code>.rel</code>
593
- </td>
594
- <td>相对定位</td>
595
- </tr>
596
- <tr>
597
- <td>
598
- <code>.abs</code>
599
- </td>
600
- <td>绝对定位</td>
601
- </tr>
602
- </tbody>
603
- </table>
604
- <p></p>
605
- </section>
606
-
607
- <!--z 轴层级-->
608
- <section>
609
- <h5>z 轴层级</h5>
610
- <p>
611
- 框架预置了 -1 — 10 的 z-index 层级样式，通过
612
- <code>z*</code> 样式类实现。如：-1 为
613
- <code>z-1</code>、10 为
614
- <code>z10</code>。
615
- </p>
616
- <p></p>
617
- </section>
618
-
619
- <!--微调-->
620
- <section>
621
- <h5>微调</h5>
622
- <p>BTX·UI 提供了位移及放缩的微调样式，位移微调需基于绝对（absolute）、相对（relative）或固定式（fixed）定位。放缩、旋转微调则是基于 transform 二维变形实现的。</p>
623
- <table class="table">
624
- <thead>
625
- <tr>
626
- <th>样式类</th>
627
- <th>效果</th>
628
- </tr>
629
- </thead>
630
- <tbody>
631
- <tr>
632
- <td>
633
- <code>.l-*-rem|px|p</code>
634
- </td>
635
- <td>基于左侧水平位移</td>
636
- </tr>
637
- <tr>
638
- <td>
639
- <code>.r-*-rem|px|p</code>
640
- </td>
641
- <td>基于右侧水平位移</td>
642
- </tr>
643
- <tr>
644
- <td>
645
- <code>.t-*-rem|px|p</code>
646
- </td>
647
- <td>基于上侧垂直位移</td>
648
- </tr>
649
- <tr>
650
- <td>
651
- <code>.b-*-rem|px|p</code>
652
- </td>
653
- <td>基于下侧垂直位移</td>
654
- </tr>
655
- <tr>
656
- <td>
657
- <code>.translateX-*</code>
658
- </td>
659
- <td>基于自身宽度百分比水平位移</td>
660
- </tr>
661
- <tr>
662
- <td>
663
- <code>.translateY-*</code>
664
- </td>
665
- <td>基于自身高度百分比垂直位移</td>
666
- </tr>
667
- <tr>
668
- <td>
669
- <code>.scale-*</code>
670
- </td>
671
- <td>放缩</td>
672
- </tr>
673
- <tr>
674
- <td>
675
- <code>.rotate-*</code>
676
- </td>
677
- <td>旋转</td>
678
- </tr>
679
- </tbody>
680
- </table>
681
- <p></p>
682
- <p>位移：</p>
683
- <p>位移微调的单位支持 px 和 rem，由于框架标准字号是基于 12px 的（手机端为 10px），因此预置的微调位移值值域范围都是 0 — 11，比如基于上侧向下位移 5 像素，类名为 <code>.t-5px</code>。</p>
684
- <p>如果要进行反向移动，可以通过 "f" 设置负值，比如基于左侧向左位移 2rem，类名为 <code>.t-f2rem</code>。</p>
685
- <p>可以相对父容器尺寸进行百分比位移，使用单位 "p"。预置的比率值：10%、20%、30%、40%、50%、60%、70%、80%、90%、100%、200%。</p>
686
- <p>还可以相对自身尺寸进行百分比位移，使用单位 "p"。预置的比率值：10%、25%、50%、100%、200%、500%。</p>
687
- <p>最后也支持 auto 值设置：<code>.t-auto</code>、<code>.b-auto</code>、<code>.l-auto</code>、<code>.r-auto</code>。</p>
688
- <p>【示例】基础位移：</p>
689
- <div class="grid fsize-d8">
690
- <div class="col-3">
691
- <div class="bg-color-mgray round-sm w-10">
692
- <div class="rel l-6px h-7 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
693
- 向右位移 6px<br><code>.l-6px</code></div>
694
- </div>
695
- </div>
696
- <div class="col-3">
697
- <div class="bg-color-mgray round-sm w-10">
698
- <div class="rel l-1rem h-7 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
699
- 向右位移 1rem<br><code>.l-1rem</code></div>
700
- </div>
701
- </div>
702
- <div class="col-3">
703
- <div class="bg-color-mgray round-sm w-10">
704
- <div class="rel l-2rem h-7 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
705
- 向右位移 2rem<br><code>.l-2rem</code></div>
706
- </div>
707
- </div>
708
- <div class="col-3">
709
- <div class="bg-color-mgray round-sm w-10">
710
- <div class="rel l-f1rem h-7 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
711
- 向左位移 1rem<br><code>.l-f1rem</code></div>
712
- </div>
713
- </div>
714
- </div>
715
- <p>【示例】基于容器宽高百分比位移：</p>
716
- <div class="flex-between fsize-d8">
717
- <div class="bg-color-mgray round-sm w-10">
718
- <div class="rel l-100p w-10 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">向右位移容器宽度<b>100%</b><code>.l-100p</code></div>
719
- </div>
720
- <div class="bg-color-mgray round-sm w-10 h-8">
721
- <div class="rel t-f10p w-10 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">向上位移容器高度<b>10%</b><code>.t-f10p</code></div>
722
- </div>
723
- <div class="bg-color-mgray round-sm w-10">
724
- <div class="rel l-f50p w-10 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">向左位移容器宽度<b>50%</b><code>.l-f50p</code></div>
725
- </div>
726
- </div>
727
- <p>【示例】基于自身宽高百分比位移：</p>
728
- <div class="flex-between fsize-d8">
729
- <div class="bg-color-mgray round-sm w-10">
730
- <div class="translateX-50 w-15 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
731
- 向右位移自身宽度<b>50%</b><code>translateX-50</code>
732
- </div>
733
- </div>
734
- <div class="bg-color-mgray round-sm w-10">
735
- <div class="translateY-f10 w-15 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
736
- 向上位移自身高度<b>10%</b><code>translateY-f10</code>
737
- </div>
738
- </div>
739
- <div class="bg-color-mgray round-sm w-10">
740
- <div class="translateX-f25 w-15 h-8 bg-color-lgray flex-5 flex-column round-sm alpha-d9">
741
- 向左位移自身宽度<b>25%</b><code>translateX-f25</code>
742
- </div>
743
- </div>
744
- </div>
745
- <p></p>
746
- <p>放缩：</p>
747
- <p>预置的微调放缩值：0 — 0.9（缩小）；1.1 — 1.9、2 — 10（放大）。比如缩小为 0.5 倍，类名为 <code>.scale-d5</code>。数值 "."
748
- 使用 "d" 代替，"0" 使用 "" 空字符串代替。</p>
749
- <p>【示例】基于容器宽高百分比位移：</p>
750
- <div class="flex fsize-d8">
751
- <div class="flex-column flex-5 pcenter mrg-r-8">
752
- <div class="bg-color-dgray w-3 h-3 round">
753
- <div class="scale-d5 w-3 h-3 bg-color-mgray round alpha-d7"></div>
754
- </div>
755
- <div class="mrg-t-1d5">缩小一半<br><code>.scale-d5</code></div>
756
- </div>
757
- <div class="flex-column flex-5 pcenter mrg-r-8">
758
- <div class="bg-color-dgray w-3 h-3 round">
759
- <div class="scale-1d2 w-3 h-3 bg-color-mgray round alpha-d7"></div>
760
- </div>
761
- <div class="mrg-t-1d5">放大 1.2 倍<br><code>.scale-1d2</code></div>
762
- </div>
763
- <div class="flex-column flex-5 pcenter">
764
- <div class="bg-color-dgray w-3 h-3 round">
765
- <div class="scale-2 w-3 h-3 bg-color-mgray round alpha-d7"></div>
766
- </div>
767
- <div class="mrg-t-1d5">放大 2 倍<br><code>.scale-2</code></div>
768
- </div>
769
- </div>
770
- <p></p>
771
- <p>旋转：</p>
772
- <p>预置的微调旋转角度值：0、15、30、45、90、180、360 度。</p>
773
- <p>【示例】：</p>
774
- <div class="flex fsize-d8">
775
- <div class="flex-column flex-5 pcenter mrg-r-7">
776
- <div class="bg-color-dgray w-4 h-4">
777
- <div class="flex-5 rotate-15 w-4 h-4 bg-color-mgray alpha-d9 fsize-1d4 color-light">15</div>
778
- </div>
779
- <div class="mrg-t-1d5">旋转 15 度<br><code>.rotate-15</code></div>
780
- </div>
781
- <div class="flex-column flex-5 pcenter mrg-r-7">
782
- <div class="bg-color-dgray w-4 h-4">
783
- <div class="flex-5 rotate-45 w-4 h-4 bg-color-mgray alpha-d9 fsize-1d4 color-light">45</div>
784
- </div>
785
- <div class="mrg-t-1d5">旋转 45 度<br><code>.rotate-45</code></div>
786
- </div>
787
- <div class="flex-column flex-5 pcenter">
788
- <div class="bg-color-dgray w-4 h-4">
789
- <div class="flex-5 rotate-180 w-4 h-4 bg-color-mgray alpha-d9 fsize-1d4 color-light">180</div>
790
- </div>
791
- <div class="mrg-t-1d5">旋转 180 度<br><code>.rotate-180</code></div>
792
- </div>
793
- </div>
794
- <p></p>
795
- <p>变形中心点：</p>
796
- <p>通过 <code>origin-*</code> 九宫格形式设置变形中心点，其值域范围：1 — 9。</p>
797
- <p>
798
- <img class="" :src="require('@/assets/img/transform_origin.png')">
799
- </p>
800
- <p></p>
801
- </section>
802
-
803
- <!--内容溢出-->
804
- <section>
805
- <h5>内容溢出</h5>
806
- <p>框架重置了默认滚动条样式，其风格更靠近 IOS。</p>
807
- <table class="table">
808
- <thead>
809
- <tr>
810
- <th>样式类</th>
811
- <th>效果</th>
812
- </tr>
813
- </thead>
814
- <tbody>
815
- <tr>
816
- <td><code>.auto-scroll | .over-scroll</code></td>
817
- <td>内容垂直方向溢出滚动</td>
818
- </tr>
819
- <tr>
820
- <td><code>.wide-auto-scroll</code></td>
821
- <td>内容垂直方向溢出滚动（宽滚动条）</td>
822
- </tr>
823
- <tr>
824
- <td><code>.no-scroll | .over-hide</code></td>
825
- <td>内容溢出隐藏</td>
826
- </tr>
827
- <tr>
828
- <td><code>.auto-h-scroll</code></td>
829
- <td>内容水平方向溢出滚动</td>
830
- </tr>
831
- <tr>
832
- <td><code>.over-show</code></td>
833
- <td>内容溢出显示</td>
834
- </tr>
835
- </tbody>
836
- </table>
837
- </section>
838
-
839
- </article>
840
- </template>
841
-
842
- <script>
843
- export default {
844
- name: "layout"
845
- };
846
- </script>