btxui 1.0.1

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 (190) hide show
  1. package/README.md +42 -0
  2. package/app.vue +162 -0
  3. package/assets/css/_main.js +73 -0
  4. package/assets/css/btx.min.css +1 -0
  5. package/assets/css/btx.mob.min.css +1 -0
  6. package/assets/css/btx.pad.min.css +1 -0
  7. package/assets/css/btx.webapp.min.css +1 -0
  8. package/assets/css/custom_fonts/iconfont.css +37 -0
  9. package/assets/css/custom_fonts/iconfont.eot +0 -0
  10. package/assets/css/custom_fonts/iconfont.svg +47 -0
  11. package/assets/css/custom_fonts/iconfont.ttf +0 -0
  12. package/assets/css/custom_fonts/iconfont.woff +0 -0
  13. package/assets/css/custom_fonts/iconfont.woff2 +0 -0
  14. package/assets/css/res-l.css +47 -0
  15. package/assets/css/res-m.css +47 -0
  16. package/assets/css/res-s.css +61 -0
  17. package/assets/custom_fonts/iconfont.css +37 -0
  18. package/assets/custom_fonts/iconfont.eot +0 -0
  19. package/assets/custom_fonts/iconfont.svg +47 -0
  20. package/assets/custom_fonts/iconfont.ttf +0 -0
  21. package/assets/custom_fonts/iconfont.woff +0 -0
  22. package/assets/custom_fonts/iconfont.woff2 +0 -0
  23. package/assets/js/Btx.js +196 -0
  24. package/assets/js/Utils.js +421 -0
  25. package/assets/js/fastclick.js +802 -0
  26. package/assets/js/lazy.min.js +2 -0
  27. package/assets/js/touchwipe.js +111 -0
  28. package/assets/server.js +8 -0
  29. package/assets/start_site_code_str.js +119 -0
  30. package/cdn/css/btx.min.css +1 -0
  31. package/cdn/css/btx.min.css.map +1 -0
  32. package/cdn/fonts/iconfont.ttf +0 -0
  33. package/cdn/fonts/iconfont.woff +0 -0
  34. package/cdn/fonts/iconfont.woff2 +0 -0
  35. package/components/BTXUI/app/app-wid.vue +182 -0
  36. package/components/BTXUI/btn/btn-wid.vue +128 -0
  37. package/components/BTXUI/carousel/carousel-wid.vue +138 -0
  38. package/components/BTXUI/checkbox/checkbox-wid.vue +72 -0
  39. package/components/BTXUI/confirm/confirm-wid.vue +279 -0
  40. package/components/BTXUI/content/content-checkbox-wid.vue +44 -0
  41. package/components/BTXUI/content/content-node-wid.vue +114 -0
  42. package/components/BTXUI/content/content-tag-wid.vue +25 -0
  43. package/components/BTXUI/content/content-wid.vue +254 -0
  44. package/components/BTXUI/core/anis/ani-fail.vue +46 -0
  45. package/components/BTXUI/core/anis/ani-loading.vue +32 -0
  46. package/components/BTXUI/core/anis/ani-notic.vue +47 -0
  47. package/components/BTXUI/core/anis/ani-success.vue +48 -0
  48. package/components/BTXUI/core/b-drag.vue +258 -0
  49. package/components/BTXUI/core/b-grid.vue +84 -0
  50. package/components/BTXUI/core/b-hot.vue +171 -0
  51. package/components/BTXUI/core/b-icon.vue +76 -0
  52. package/components/BTXUI/core/b-img.vue +84 -0
  53. package/components/BTXUI/core/b-input.vue +198 -0
  54. package/components/BTXUI/core/b-list.vue +276 -0
  55. package/components/BTXUI/core/b-text/doc.ts +9 -0
  56. package/components/BTXUI/core/b-text/index.vue +16 -0
  57. package/components/BTXUI/core/b-textarea.vue +58 -0
  58. package/components/BTXUI/core/b-video.vue +35 -0
  59. package/components/BTXUI/core/b-view/doc.ts +10 -0
  60. package/components/BTXUI/core/b-view/index.vue +20 -0
  61. package/components/BTXUI/core/b-webview.vue +20 -0
  62. package/components/BTXUI/core/lib/ChapterLink.js +49 -0
  63. package/components/BTXUI/core/lib/Search.vue +60 -0
  64. package/components/BTXUI/core/styles/doc.ts +55 -0
  65. package/components/BTXUI/core/styles/index.vue +98 -0
  66. package/components/BTXUI/core/styles/prestyles.ts +471 -0
  67. package/components/BTXUI/core/styles/theme.ts +29 -0
  68. package/components/BTXUI/drawer/drawer-wid.vue +165 -0
  69. package/components/BTXUI/drawer/title-tag-wid.vue +114 -0
  70. package/components/BTXUI/form/form-select-wid.vue +57 -0
  71. package/components/BTXUI/form/form-wid.vue +324 -0
  72. package/components/BTXUI/formPannel/form-pannel-wid.vue +133 -0
  73. package/components/BTXUI/imgsUpload/imgs-upload-wid.vue +149 -0
  74. package/components/BTXUI/index.js +83 -0
  75. package/components/BTXUI/pageFlip/page-flip-wid.vue +206 -0
  76. package/components/BTXUI/pannel/pannel-wid.vue +167 -0
  77. package/components/BTXUI/range/range-wid.vue +134 -0
  78. package/components/BTXUI/search/search-wid.vue +80 -0
  79. package/components/BTXUI/select/select-wid.vue +186 -0
  80. package/components/BTXUI/slider/slider-wid.vue +444 -0
  81. package/components/BTXUI/tab/tab-wid.vue +109 -0
  82. package/components/BTXUI/table/table-wid.vue +324 -0
  83. package/components/BTXUI/tag/tag-wid.vue +183 -0
  84. package/components/BTXUI/tags/tags-wid.vue +121 -0
  85. package/components/BTXUI/tooltip/tooltip-wid.vue +146 -0
  86. package/components/BTXUI/upload/upload-wid.vue +215 -0
  87. package/components/BTXUI/waterfall/waterfall-wid.vue +166 -0
  88. package/components/header-info.vue +167 -0
  89. package/composables/@types.ts +4 -0
  90. package/composables/api.ts +18 -0
  91. package/env.d.ts +5 -0
  92. package/main.js +6 -0
  93. package/nuxt.config.ts +51 -0
  94. package/package.json +23 -0
  95. package/pages/article.vue +16 -0
  96. package/pages/download.vue +50 -0
  97. package/pages/example/app_wid/app/data_demo.vue +9 -0
  98. package/pages/example/app_wid/app/download_demo.vue +9 -0
  99. package/pages/example/app_wid/app/list_demo.vue +11 -0
  100. package/pages/example/app_wid/app/system_demo.vue +9 -0
  101. package/pages/example/app_wid/app_wid_demo.vue +198 -0
  102. package/pages/example/app_wid/btn_wid_demo.vue +179 -0
  103. package/pages/example/app_wid/carousel_wid_demo.vue +152 -0
  104. package/pages/example/app_wid/checkbox_wid_demo.vue +65 -0
  105. package/pages/example/app_wid/confirm_wid_demo.vue +197 -0
  106. package/pages/example/app_wid/content_wid_demo.vue +369 -0
  107. package/pages/example/app_wid/drawer_wid_demo.vue +155 -0
  108. package/pages/example/app_wid/form_pannel_wid_demo.vue +338 -0
  109. package/pages/example/app_wid/form_wid_demo.vue +550 -0
  110. package/pages/example/app_wid/imgs_upload_wid_demo.vue +159 -0
  111. package/pages/example/app_wid/index.js +158 -0
  112. package/pages/example/app_wid/page_flip_wid_demo.vue +99 -0
  113. package/pages/example/app_wid/pannel_wid_demo.vue +177 -0
  114. package/pages/example/app_wid/range_wid_demo.vue +101 -0
  115. package/pages/example/app_wid/search_wid_demo.vue +75 -0
  116. package/pages/example/app_wid/select_wid_demo.vue +217 -0
  117. package/pages/example/app_wid/slider_wid_demo.vue +143 -0
  118. package/pages/example/app_wid/tab_wid_demo.vue +170 -0
  119. package/pages/example/app_wid/table_wid_demo.vue +377 -0
  120. package/pages/example/app_wid/tag_wid_demo.vue +133 -0
  121. package/pages/example/app_wid/tags_wid_demo.vue +143 -0
  122. package/pages/example/app_wid/tooltip_wid_demo.vue +117 -0
  123. package/pages/example/app_wid/upload_wid_demo.vue +123 -0
  124. package/pages/example/base_wid/b_drag_demo.vue +159 -0
  125. package/pages/example/base_wid/b_grid_demo.vue +225 -0
  126. package/pages/example/base_wid/b_hot_demo.vue +135 -0
  127. package/pages/example/base_wid/b_icon_demo.vue +80 -0
  128. package/pages/example/base_wid/b_img_demo.vue +95 -0
  129. package/pages/example/base_wid/b_input_demo.vue +171 -0
  130. package/pages/example/base_wid/b_list_demo.vue +241 -0
  131. package/pages/example/base_wid/b_style_demo.vue +928 -0
  132. package/pages/example/base_wid/b_text_demo.vue +36 -0
  133. package/pages/example/base_wid/b_textarea_demo.vue +64 -0
  134. package/pages/example/base_wid/b_video_demo.vue +42 -0
  135. package/pages/example/base_wid/b_view_demo.vue +36 -0
  136. package/pages/example/base_wid/index.js +76 -0
  137. package/pages/example/content.js +49 -0
  138. package/pages/example/global_style/animation.vue +197 -0
  139. package/pages/example/global_style/color.vue +134 -0
  140. package/pages/example/global_style/decoration.vue +546 -0
  141. package/pages/example/global_style/icon.vue +345 -0
  142. package/pages/example/global_style/index.js +52 -0
  143. package/pages/example/global_style/layout.vue +846 -0
  144. package/pages/example/global_style/special.vue +37 -0
  145. package/pages/example/global_style/table.vue +298 -0
  146. package/pages/example/global_style/text.vue +159 -0
  147. package/pages/index.vue +29 -0
  148. package/pages/level_widget.vue +11 -0
  149. package/pages/start.vue +200 -0
  150. package/plugins/index.ts +2 -0
  151. package/public/favicon.gif +0 -0
  152. package/public/fonts/iconfont.ttf +0 -0
  153. package/public/fonts/iconfont.woff +0 -0
  154. package/public/fonts/iconfont.woff2 +0 -0
  155. package/public/img/banner.jpg +0 -0
  156. package/public/img/banner2.jpg +0 -0
  157. package/public/img/bg_pattern.png +0 -0
  158. package/public/img/btx.jpg +0 -0
  159. package/public/img/btx_ui.jpg +0 -0
  160. package/public/img/dir.png +0 -0
  161. package/public/img/f.png +0 -0
  162. package/public/img/head.jpg +0 -0
  163. package/public/img/head2.jpg +0 -0
  164. package/public/img/home_ico.png +0 -0
  165. package/public/img/icons.svg +164 -0
  166. package/public/img/mechanism/b-style.png +0 -0
  167. package/public/img/mechanism/slider-wid.png +0 -0
  168. package/public/img/mechanism/upload-wid.png +0 -0
  169. package/public/img/transform_origin.png +0 -0
  170. package/sass/animation.scss +400 -0
  171. package/sass/btx.mob.scss +10 -0
  172. package/sass/btx.pad.scss +3 -0
  173. package/sass/btx.scss +22 -0
  174. package/sass/btx.webapp.scss +22 -0
  175. package/sass/colors.scss +65 -0
  176. package/sass/decoration.scss +220 -0
  177. package/sass/flex.scss +29 -0
  178. package/sass/icons.scss +100 -0
  179. package/sass/layout.scss +88 -0
  180. package/sass/reset.scss +111 -0
  181. package/sass/response/flex_mixin.scss +91 -0
  182. package/sass/response/layout_mixin.scss +227 -0
  183. package/sass/response/main.scss +59 -0
  184. package/sass/response/text_mixin.scss +65 -0
  185. package/sass/scroll.scss +100 -0
  186. package/sass/special.scss +13 -0
  187. package/sass/table.scss +103 -0
  188. package/sass/text.scss +86 -0
  189. package/sass/webpack.config.js +31 -0
  190. package/tsconfig.json +4 -0
package/pages/example/base_wid/b_style_demo.vue ADDED
@@ -0,0 +1,928 @@
1
+ <template>
2
+ <article>
3
+ <header-info v-bind="header_info" />
4
+
5
+ <!--文本相关样式-->
6
+ <section>
7
+ <p>文本相关样式：</p>
8
+ <table response class="table">
9
+ <thead>
10
+ <tr>
11
+ <th>样式值</th>
12
+ <th>效果</th>
13
+ <th>值备注</th>
14
+ </tr>
15
+ </thead>
16
+ <tbody>
17
+ <tr>
18
+ <td><code>pleft</code></td>
19
+ <td>文本左对齐</td>
20
+ <td>-</td>
21
+ </tr>
22
+ <tr>
23
+ <td><code>pright</code></td>
24
+ <td>文本右对齐</td>
25
+ <td>-</td>
26
+ </tr>
27
+ <tr>
28
+ <td><code>pcenter</code></td>
29
+ <td>文本居中对齐</td>
30
+ <td>-</td>
31
+ </tr>
32
+ <tr>
33
+ <td><code>pjustify</code></td>
34
+ <td>文本两端对齐</td>
35
+ <td>-</td>
36
+ </tr>
37
+ <tr>
38
+ <td><code>font-*</code></td>
39
+ <td>指定字体</td>
40
+ <td>字体名（需引入对应字体样式文件）</td>
41
+ </tr>
42
+ <tr>
43
+ <td><code>fsize-*</code></td>
44
+ <td>字符间距</td>
45
+ <td>任意合法值，缺省单位 em</td>
46
+ </tr>
47
+ <tr>
48
+ <td><code>lspace-*</code></td>
49
+ <td>字符间距</td>
50
+ <td>任意合法值，缺省单位 rem</td>
51
+ </tr>
52
+ <tr>
53
+ <td><code>resize</code></td>
54
+ <td>重置初始字号及行高</td>
55
+ <td>-</td>
56
+ </tr>
57
+ <tr>
58
+ <td><code>ellipsis</code></td>
59
+ <td>单行文本溢出省略</td>
60
+ <td>-</td>
61
+ </tr>
62
+ <tr>
63
+ <td><code>no-wrap</code></td>
64
+ <td>文本禁止换行</td>
65
+ <td>-</td>
66
+ </tr>
67
+ </tbody>
68
+ </table>
69
+ <p></p>
70
+ </section>
71
+
72
+ <!--颜色相关样式-->
73
+ <section>
74
+ <p>颜色相关样式：</p>
75
+ <p>可以使用框架预置主题色，包括：none、main、sub、light、dgray、mgray、lgray、dark、red、green、blue、yellow、neutral。色值效果可参考 <b>"全局样式 - 色彩"</b>，此外其它任意标准 web 色彩模式都可以直接使用。</p>
76
+ <p>主题色支持扩展及修改，通常可在全局文件 <b>main.js</b> 引入 <code>BTXUI/core/styles/theme.js</code> 模块，执行 <code>append(colors)</code> 方法扩展。</p>
77
+ <p>【exp】扩展深红色：<code>Theme.append({ deep_red: "#ae0014" })</code></p>
78
+ <table class="table">
79
+ <thead>
80
+ <tr>
81
+ <th>样式值</th>
82
+ <th>效果</th>
83
+ <th>值备注</th>
84
+ </tr>
85
+ </thead>
86
+ <tbody>
87
+ <tr>
88
+ <td><code>bg-color-*</code></td>
89
+ <td>背景色</td>
90
+ <td>任意合法值或主题色</td>
91
+ </tr>
92
+ <tr>
93
+ <td><code>color-*</code></td>
94
+ <td>文字色</td>
95
+ <td>任意合法值或主题色</td>
96
+ </tr>
97
+ <tr>
98
+ <td><code>line-*</code></td>
99
+ <td>描边色</td>
100
+ <td>任意合法值或主题色</td>
101
+ </tr>
102
+ <tr>
103
+ <td><code>alpha-*</code></td>
104
+ <td>不透明度</td>
105
+ <td>值域范围：0 - 1</td>
106
+ </tr>
107
+ </tbody>
108
+ </table>
109
+ <p></p>
110
+ </section>
111
+
112
+ <!--布局相关样式-->
113
+ <section>
114
+ <p>布局相关样式：</p>
115
+ <table class="table">
116
+ <thead>
117
+ <tr>
118
+ <th>样式值</th>
119
+ <th>效果</th>
120
+ <th>值备注</th>
121
+ </tr>
122
+ </thead>
123
+ <tbody>
124
+ <tr>
125
+ <td><code>show</code></td>
126
+ <td>显示元素</td>
127
+ <td>-</td>
128
+ </tr>
129
+ <tr>
130
+ <td><code>hide</code></td>
131
+ <td>隐藏元素</td>
132
+ <td>-</td>
133
+ </tr>
134
+ <tr>
135
+ <td><code>flex</code></td>
136
+ <td>弹性布局容器</td>
137
+ <td>-</td>
138
+ </tr>
139
+ <tr>
140
+ <td><code>flex-*</code></td>
141
+ <td>弹性布局容器，九宫格式布局</td>
142
+ <td>值域范围：1 - 9</td>
143
+ </tr>
144
+ <tr>
145
+ <td><code>flex-between</code></td>
146
+ <td>弹性布局容器，均分排列，两端对齐</td>
147
+ <td>-</td>
148
+ </tr>
149
+ <tr>
150
+ <td><code>flex-around</code></td>
151
+ <td>弹性布局容器，均分排列</td>
152
+ <td>-</td>
153
+ </tr>
154
+ <tr>
155
+ <td><code>grid</code></td>
156
+ <td>弹性布局容器，可换行</td>
157
+ <td>-</td>
158
+ </tr>
159
+ <tr>
160
+ <td><code>flex-column</code></td>
161
+ <td>弹性布局容器，纵向生长</td>
162
+ <td>-</td>
163
+ </tr>
164
+ <tr>
165
+ <td><code>grow-*</code></td>
166
+ <td>元素自生长比率</td>
167
+ <td>任意合法值</td>
168
+ </tr>
169
+ <tr>
170
+ <td><code>order-*</code></td>
171
+ <td>弹性布局项目排序</td>
172
+ <td>任意合法值</td>
173
+ </tr>
174
+ <tr>
175
+ <td><code>column-*</code></td>
176
+ <td>多列布局容器</td>
177
+ <td>任意合法值</td>
178
+ </tr>
179
+ <tr>
180
+ <td><code>item</code></td>
181
+ <td>多列布局元素</td>
182
+ <td>-</td>
183
+ </tr>
184
+ <tr>
185
+ <td><code>pad-*</code></td>
186
+ <td>内边距</td>
187
+ <td>任意合法值，缺省单位 rem</td>
188
+ </tr>
189
+ <tr>
190
+ <td><code>pad-l-*</code></td>
191
+ <td>左侧内边距</td>
192
+ <td>任意合法值，缺省单位 rem</td>
193
+ </tr>
194
+ <tr>
195
+ <td><code>pad-r-*</code></td>
196
+ <td>右侧内边距</td>
197
+ <td>任意合法值，缺省单位 rem</td>
198
+ </tr>
199
+ <tr>
200
+ <td><code>pad-t-*</code></td>
201
+ <td>上侧内边距</td>
202
+ <td>任意合法值，缺省单位 rem</td>
203
+ </tr>
204
+ <tr>
205
+ <td><code>pad-b-*</code></td>
206
+ <td>下侧内边距</td>
207
+ <td>任意合法值，缺省单位 rem</td>
208
+ </tr>
209
+ <tr>
210
+ <td><code>pad-v-*</code></td>
211
+ <td>垂直方向内边距</td>
212
+ <td>任意合法值，缺省单位 rem</td>
213
+ </tr>
214
+ <tr>
215
+ <td><code>pad-h-*</code></td>
216
+ <td>水平方向内边距</td>
217
+ <td>任意合法值，缺省单位 rem</td>
218
+ </tr>
219
+ <tr>
220
+ <td><code>mrg-*</code></td>
221
+ <td>外边距</td>
222
+ <td>任意合法值，缺省单位 rem</td>
223
+ </tr>
224
+ <tr>
225
+ <td><code>mrg-l-*</code></td>
226
+ <td>左侧外边距</td>
227
+ <td>任意合法值，缺省单位 rem</td>
228
+ </tr>
229
+ <tr>
230
+ <td><code>mrg-r-*</code></td>
231
+ <td>右侧外边距</td>
232
+ <td>任意合法值，缺省单位 rem</td>
233
+ </tr>
234
+ <tr>
235
+ <td><code>mrg-t-*</code></td>
236
+ <td>上侧外边距</td>
237
+ <td>任意合法值，缺省单位 rem</td>
238
+ </tr>
239
+ <tr>
240
+ <td><code>mrg-b-*</code></td>
241
+ <td>下侧外边距</td>
242
+ <td>任意合法值，缺省单位 rem</td>
243
+ </tr>
244
+ <tr>
245
+ <td><code>mrg-v-*</code></td>
246
+ <td>垂直方向外边距</td>
247
+ <td>任意合法值，缺省单位 rem</td>
248
+ </tr>
249
+ <tr>
250
+ <td><code>mrg-h-*</code></td>
251
+ <td>水平方向外边距</td>
252
+ <td>任意合法值，缺省单位 rem</td>
253
+ </tr>
254
+ <tr>
255
+ <td><code>max-h</code></td>
256
+ <td>高度布满父容器</td>
257
+ <td>-</td>
258
+ </tr>
259
+ <tr>
260
+ <td><code>max-w</code></td>
261
+ <td>宽度布满父容器</td>
262
+ <td>-</td>
263
+ </tr>
264
+ <tr>
265
+ <td><code>max</code></td>
266
+ <td>宽高布满父容器</td>
267
+ <td>-</td>
268
+ </tr>
269
+ <tr>
270
+ <td><code>h-*</code></td>
271
+ <td>设置高度</td>
272
+ <td>任意合法值，缺省单位 rem</td>
273
+ </tr>
274
+ <tr>
275
+ <td><code>lh-*</code></td>
276
+ <td>设置行高</td>
277
+ <td>任意合法值</td>
278
+ </tr>
279
+ <tr>
280
+ <td><code>w-*</code></td>
281
+ <td>设置宽度</td>
282
+ <td>任意合法值，缺省单位 rem</td>
283
+ </tr>
284
+ <tr>
285
+ <td><code>lw-*</code></td>
286
+ <td>设置最小宽度</td>
287
+ <td>任意合法值，缺省单位 rem</td>
288
+ </tr>
289
+ <tr>
290
+ <td><code>rw-*</code></td>
291
+ <td>设置最大宽度</td>
292
+ <td>任意合法值，缺省单位 rem</td>
293
+ </tr>
294
+ <tr>
295
+ <td><code>bh-*</code></td>
296
+ <td>设置最小高度</td>
297
+ <td>任意合法值，缺省单位 rem</td>
298
+ </tr>
299
+ <tr>
300
+ <td><code>th-*</code></td>
301
+ <td>设置最大高度</td>
302
+ <td>任意合法值，缺省单位 rem</td>
303
+ </tr>
304
+ <tr>
305
+ <td><code>fixed</code></td>
306
+ <td>固定式定位</td>
307
+ <td>-</td>
308
+ </tr>
309
+ <tr>
310
+ <td><code>rel</code></td>
311
+ <td>相对定位</td>
312
+ <td>-</td>
313
+ </tr>
314
+ <tr>
315
+ <td><code>abs</code></td>
316
+ <td>绝对定位</td>
317
+ <td>-</td>
318
+ </tr>
319
+ <tr>
320
+ <td><code>z*</code></td>
321
+ <td>z 轴层级</td>
322
+ <td>值域范围：-1 - 10</td>
323
+ </tr>
324
+ <tr>
325
+ <td><code>no-scroll | over-hide</code></td>
326
+ <td>内容溢出隐藏</td>
327
+ <td>-</td>
328
+ </tr>
329
+ <tr>
330
+ <td><code>over-show</code></td>
331
+ <td>内容溢出显示</td>
332
+ <td>-</td>
333
+ </tr>
334
+ <tr>
335
+ <td><code>over-scroll</code></td>
336
+ <td>内容溢出滚动</td>
337
+ <td>-</td>
338
+ </tr>
339
+ </tbody>
340
+ </table>
341
+ <p></p>
342
+ </section>
343
+
344
+ <!--位移及变形微调相关样式-->
345
+ <section>
346
+ <p>位移及变形微调相关样式：</p>
347
+ <p>和全局样式稍有不同，基于百分比值的位移直接使用 "%" 单位而非 "p"。</p>
348
+ <table class="table">
349
+ <thead>
350
+ <tr>
351
+ <th>样式值</th>
352
+ <th>效果</th>
353
+ <th>值备注</th>
354
+ </tr>
355
+ </thead>
356
+ <tbody>
357
+ <tr>
358
+ <td><code>l-*</code></td>
359
+ <td>基于容器左侧水平位移</td>
360
+ <td>任意合法值，缺省单位 rem</td>
361
+ </tr>
362
+ <tr>
363
+ <td><code>r-*</code></td>
364
+ <td>基于容器右侧水平位移</td>
365
+ <td>任意合法值，缺省单位 rem</td>
366
+ </tr>
367
+ <tr>
368
+ <td><code>t-*</code></td>
369
+ <td>基于容器上侧垂直位移</td>
370
+ <td>任意合法值，缺省单位 rem</td>
371
+ </tr>
372
+ <tr>
373
+ <td><code>b-*</code></td>
374
+ <td>基于容器下侧垂直位移</td>
375
+ <td>任意合法值，缺省单位 rem</td>
376
+ </tr>
377
+ <tr>
378
+ <td><code>translateX-*</code></td>
379
+ <td>基于自身水平位移</td>
380
+ <td>任意合法值，缺省单位 %</td>
381
+ </tr>
382
+ <tr>
383
+ <td><code>translateY-*</code></td>
384
+ <td>基于自身垂直位移</td>
385
+ <td>任意合法值，缺省单位 %</td>
386
+ </tr>
387
+ <tr>
388
+ <td><code>scale-*</code></td>
389
+ <td>放缩</td>
390
+ <td>任意合法值</td>
391
+ </tr>
392
+ <tr>
393
+ <td><code>rotate-*</code></td>
394
+ <td>旋转</td>
395
+ <td>任意合法值</td>
396
+ </tr>
397
+ </tbody>
398
+ </table>
399
+ <p>此外可以通过 <code>transform-*</code> 设置任意二维变形效果；以及 <code>origin-*</code> 设置变形中心点。</p>
400
+ <table class="table">
401
+ <thead>
402
+ <tr>
403
+ <th>样式值</th>
404
+ <th>效果</th>
405
+ <th>示例</th>
406
+ </tr>
407
+ </thead>
408
+ <tbody>
409
+ <tr>
410
+ <td><code>transform-*</code></td>
411
+ <td>自由变形元素</td>
412
+ <td><code>transform-scale(1.1)rotate(45deg)</code></td>
413
+ </tr>
414
+ <tr>
415
+ <td><code>origin-*</code></td>
416
+ <td>设置变形中心点</td>
417
+ <td><code>origin-20px|50%</code></td>
418
+ </tr>
419
+ </tbody>
420
+ </table>
421
+ <p></p>
422
+ </section>
423
+
424
+ <!--背景相关样式-->
425
+ <section>
426
+ <p>背景相关样式：</p>
427
+ <p>b-view 组件使用 bg-img 属性引入背景图片。</p>
428
+ <p>相比全局样式，styles 属性支持任意合法值的背景图尺寸及定位设置，且支持 <code>bg-gradient-*</code> 线性渐变背景设置。</p>
429
+ <table class="table">
430
+ <thead>
431
+ <tr>
432
+ <th>样式值</th>
433
+ <th>效果</th>
434
+ <th>值备注</th>
435
+ </tr>
436
+ </thead>
437
+ <tbody>
438
+ <tr>
439
+ <td><code>bg-*</code></td>
440
+ <td>综合背景样式</td>
441
+ <td>-</td>
442
+ </tr>
443
+ <tr>
444
+ <td><code>bg-repeat</code></td>
445
+ <td>背景图水平及垂直平铺</td>
446
+ <td>-</td>
447
+ </tr>
448
+ <tr>
449
+ <td><code>bg-repeat-x</code></td>
450
+ <td>背景图水平平铺</td>
451
+ <td>-</td>
452
+ </tr>
453
+ <tr>
454
+ <td><code>bg-repeat-y</code></td>
455
+ <td>背景图垂直平铺</td>
456
+ <td>-</td>
457
+ </tr>
458
+ <tr>
459
+ <td><code>bg-size-cover</code></td>
460
+ <td>背景图尺寸覆盖容器</td>
461
+ <td>-</td>
462
+ </tr>
463
+ <tr>
464
+ <td><code>bg-size-contain</code></td>
465
+ <td>背景图尺寸适应容器</td>
466
+ <td>-</td>
467
+ </tr>
468
+ <tr>
469
+ <td><code>bg-size-max</code></td>
470
+ <td>背景图尺寸撑满容器</td>
471
+ <td>-</td>
472
+ </tr>
473
+ <tr>
474
+ <td><code>bg-size-max-h</code></td>
475
+ <td>背景图高度尺寸撑满容器</td>
476
+ <td>-</td>
477
+ </tr>
478
+ <tr>
479
+ <td><code>bg-size-max-w</code></td>
480
+ <td>背景图宽度尺寸撑满容器</td>
481
+ <td>-</td>
482
+ </tr>
483
+ <tr>
484
+ <td><code>bg-size-*</code></td>
485
+ <td>背景图尺寸设置</td>
486
+ <td>任意合法值</td>
487
+ </tr>
488
+ <tr>
489
+ <td><code>bg-pos-*</code></td>
490
+ <td>背景图九宫格定位</td>
491
+ <td>值域范围：1 - 9</td>
492
+ </tr>
493
+ <tr>
494
+ <td><code>bg-pos-*</code></td>
495
+ <td>背景图定位</td>
496
+ <td>任意合法值</td>
497
+ </tr>
498
+ <tr>
499
+ <td><code>bg-gradient-*</code></td>
500
+ <td>线性渐变背景</td>
501
+ <td>任意合法值</td>
502
+ </tr>
503
+ </tbody>
504
+ </table>
505
+ <p></p>
506
+ </section>
507
+
508
+ <!--圆角相关样式-->
509
+ <section>
510
+ <p>圆角相关样式：</p>
511
+ <table class="table">
512
+ <thead>
513
+ <tr>
514
+ <th>样式值</th>
515
+ <th>效果</th>
516
+ </tr>
517
+ </thead>
518
+ <tbody>
519
+ <tr>
520
+ <td>
521
+ <code>round</code>
522
+ </td>
523
+ <td>50% 圆角，可用于制作正圆形或椭圆形</td>
524
+ </tr>
525
+ <tr>
526
+ <td>
527
+ <code>round-lg</code>
528
+ </td>
529
+ <td>24px 大圆角</td>
530
+ </tr>
531
+ <tr>
532
+ <td>
533
+ <code>round-md</code>
534
+ </td>
535
+ <td>10px 中等圆角</td>
536
+ </tr>
537
+ <tr>
538
+ <td>
539
+ <code>round-sm</code>
540
+ </td>
541
+ <td>4px 小型圆角</td>
542
+ </tr>
543
+ <tr>
544
+ <td>
545
+ <code>round-t</code>
546
+ </td>
547
+ <td>上侧圆角</td>
548
+ </tr>
549
+ <tr>
550
+ <td>
551
+ <code>round-b</code>
552
+ </td>
553
+ <td>下侧圆角</td>
554
+ </tr>
555
+ <tr>
556
+ <td>
557
+ <code>round-l</code>
558
+ </td>
559
+ <td>左侧圆角</td>
560
+ </tr>
561
+ <tr>
562
+ <td>
563
+ <code>round-r</code>
564
+ </td>
565
+ <td>右侧圆角</td>
566
+ </tr>
567
+ </tbody>
568
+ </table>
569
+ <p></p>
570
+ </section>
571
+
572
+ <!--描边及阴影相关样式-->
573
+ <section>
574
+ <p>描边及阴影相关样式：</p>
575
+ <table class="table">
576
+ <thead>
577
+ <tr>
578
+ <th>样式值</th>
579
+ <th>效果</th>
580
+ <th>值备注</th>
581
+ </tr>
582
+ </thead>
583
+ <tbody>
584
+ <tr>
585
+ <td>
586
+ <code>line</code>
587
+ </td>
588
+ <td>设置四周实线描边</td>
589
+ <td>-</td>
590
+ </tr>
591
+ <tr>
592
+ <td>
593
+ <code>line-l</code>
594
+ </td>
595
+ <td>设置左侧实线描边</td>
596
+ <td>-</td>
597
+ </tr>
598
+ <tr>
599
+ <td>
600
+ <code>line-r</code>
601
+ </td>
602
+ <td>设置右侧实线描边</td>
603
+ <td>-</td>
604
+ </tr>
605
+ <tr>
606
+ <td>
607
+ <code>line-t</code>
608
+ </td>
609
+ <td>设置上侧实线描边</td>
610
+ <td>-</td>
611
+ </tr>
612
+ <tr>
613
+ <td>
614
+ <code>line-b</code>
615
+ </td>
616
+ <td>设置下侧实线描边</td>
617
+ <td>-</td>
618
+ </tr>
619
+ <tr>
620
+ <td>
621
+ <code>dashed</code>
622
+ </td>
623
+ <td>设置四周虚线描边</td>
624
+ <td>-</td>
625
+ </tr>
626
+ <tr>
627
+ <td>
628
+ <code>dashed-l</code>
629
+ </td>
630
+ <td>设置左侧虚线描边</td>
631
+ <td>-</td>
632
+ </tr>
633
+ <tr>
634
+ <td>
635
+ <code>dashed-r</code>
636
+ </td>
637
+ <td>设置右侧虚线描边</td>
638
+ <td>-</td>
639
+ </tr>
640
+ <tr>
641
+ <td>
642
+ <code>dashed-t</code>
643
+ </td>
644
+ <td>设置上侧虚线描边</td>
645
+ <td>-</td>
646
+ </tr>
647
+ <tr>
648
+ <td>
649
+ <code>dashed-b</code>
650
+ </td>
651
+ <td>设置下侧虚线描边</td>
652
+ <td>-</td>
653
+ </tr>
654
+ <tr>
655
+ <td>
656
+ <code>line-outside</code>
657
+ </td>
658
+ <td>设置外侧描边范围</td>
659
+ <td>-</td>
660
+ </tr>
661
+ <tr>
662
+ <td>
663
+ <code>thick-*</code>
664
+ </td>
665
+ <td>设置描边粗细</td>
666
+ <td>任意合法值，缺省单位 px</td>
667
+ </tr>
668
+ <tr>
669
+ <td>
670
+ <code>text-line</code>
671
+ </td>
672
+ <td>文字描边</td>
673
+ <td>-</td>
674
+ </tr>
675
+ <tr>
676
+ <td>
677
+ <code>shadow</code>
678
+ </td>
679
+ <td>普通尺寸阴影</td>
680
+ <td>-</td>
681
+ </tr>
682
+ <tr>
683
+ <td>
684
+ <code>shadow-no</code>
685
+ </td>
686
+ <td>无阴影</td>
687
+ <td>-</td>
688
+ </tr>
689
+ <tr>
690
+ <td>
691
+ <code>shadow-sm</code>
692
+ </td>
693
+ <td>小尺寸阴影</td>
694
+ <td>-</td>
695
+ </tr>
696
+ <tr>
697
+ <td>
698
+ <code>shadow-lg</code>
699
+ </td>
700
+ <td>大尺寸阴影</td>
701
+ <td>-</td>
702
+ </tr>
703
+ <tr>
704
+ <td>
705
+ <code>shadow-relief</code>
706
+ </td>
707
+ <td>浮雕阴影效果</td>
708
+ <td>-</td>
709
+ </tr>
710
+ </tbody>
711
+ </table>
712
+ <p></p>
713
+ </section>
714
+
715
+ <!--滤镜相关样式-->
716
+ <section>
717
+ <p>滤镜相关样式：</p>
718
+ <table class="table">
719
+ <thead>
720
+ <tr>
721
+ <th>样式类</th>
722
+ <th>效果</th>
723
+ <th>值备注</th>
724
+ </tr>
725
+ </thead>
726
+ <tbody>
727
+ <tr>
728
+ <td>
729
+ <code>.blur-no</code>
730
+ </td>
731
+ <td>无模糊效果</td>
732
+ <td>-</td>
733
+ </tr>
734
+ <tr>
735
+ <td>
736
+ <code>.blur-sm</code>
737
+ </td>
738
+ <td>轻度模糊效果</td>
739
+ <td>-</td>
740
+ </tr>
741
+ <tr>
742
+ <td>
743
+ <code>.blur-md</code>
744
+ </td>
745
+ <td>中度模糊效果</td>
746
+ <td>-</td>
747
+ </tr>
748
+ <tr>
749
+ <td>
750
+ <code>.blur-lg</code>
751
+ </td>
752
+ <td>重度模糊效果</td>
753
+ <td>-</td>
754
+ </tr>
755
+ <tr>
756
+ <td>
757
+ <code>.dark-no</code>
758
+ </td>
759
+ <td>原始明度效果</td>
760
+ <td>-</td>
761
+ </tr>
762
+ <tr>
763
+ <td>
764
+ <code>.dark-sm</code>
765
+ </td>
766
+ <td>轻度低明度效果</td>
767
+ <td>-</td>
768
+ </tr>
769
+ <tr>
770
+ <td>
771
+ <code>.dark-md</code>
772
+ </td>
773
+ <td>中度低明度效果</td>
774
+ <td>-</td>
775
+ </tr>
776
+ <tr>
777
+ <td>
778
+ <code>.dark-lg</code>
779
+ </td>
780
+ <td>重度低明度效果</td>
781
+ <td>-</td>
782
+ </tr>
783
+ <tr>
784
+ <td>
785
+ <code>.gray-no</code>
786
+ </td>
787
+ <td>原始纯度效果</td>
788
+ <td>-</td>
789
+ </tr>
790
+ <tr>
791
+ <td>
792
+ <code>.gray-sm</code>
793
+ </td>
794
+ <td>轻度低纯度效果</td>
795
+ <td>-</td>
796
+ </tr>
797
+ <tr>
798
+ <td>
799
+ <code>.gray-md</code>
800
+ </td>
801
+ <td>中度低纯度效果</td>
802
+ <td>-</td>
803
+ </tr>
804
+ <tr>
805
+ <td>
806
+ <code>.gray-lg</code>
807
+ </td>
808
+ <td>重度低纯度效果</td>
809
+ <td>-</td>
810
+ </tr>
811
+ </tbody>
812
+ </table>
813
+ <p></p>
814
+ </section>
815
+
816
+ <!--过渡动画相关样式-->
817
+ <section>
818
+ <p>过渡动画相关样式：</p>
819
+ <table class="table">
820
+ <thead>
821
+ <tr>
822
+ <th>样式值</th>
823
+ <th>效果</th>
824
+ <th>值备注</th>
825
+ </tr>
826
+ </thead>
827
+ <tbody>
828
+ <tr>
829
+ <td>
830
+ <code>trans</code>
831
+ </td>
832
+ <td>中速过度动画（.7s）</td>
833
+ <td>-</td>
834
+ </tr>
835
+ <tr>
836
+ <td>
837
+ <code>trans-fast</code>
838
+ </td>
839
+ <td>快速过度动画（.4s）</td>
840
+ <td>-</td>
841
+ </tr>
842
+ <tr>
843
+ <td>
844
+ <code>trans-slow</code>
845
+ </td>
846
+ <td>慢速过度动画（1.4s）</td>
847
+ <td>-</td>
848
+ </tr>
849
+ <tr>
850
+ <td>
851
+ <code>trans-no</code>
852
+ </td>
853
+ <td>无过度动画</td>
854
+ <td>-</td>
855
+ </tr>
856
+ <tr>
857
+ <td>
858
+ <code>trans-delay-*</code>
859
+ </td>
860
+ <td>动画延迟执行时间</td>
861
+ <td>任意合法值，缺省单位 s</td>
862
+ </tr>
863
+ </tbody>
864
+ </table>
865
+ <p></p>
866
+ </section>
867
+
868
+ <!--特殊样式控制-->
869
+ <section>
870
+ <p>特殊样式控制：</p>
871
+ <table class="table">
872
+ <thead>
873
+ <tr>
874
+ <th>样式值</th>
875
+ <th>效果</th>
876
+ <th>值备注</th>
877
+ </tr>
878
+ </thead>
879
+ <tbody>
880
+ <tr>
881
+ <td><code>bg-none</code></td>
882
+ <td>背景点透效果</td>
883
+ <td>-</td>
884
+ </tr>
885
+ <tr>
886
+ <td><code>bg-use</code></td>
887
+ <td>背景常规效果（非点透）</td>
888
+ <td>-</td>
889
+ </tr>
890
+ <tr>
891
+ <td><code>touch-none</code></td>
892
+ <td>元素触控禁止</td>
893
+ <td>-</td>
894
+ </tr>
895
+ <tr>
896
+ <td><code>select-none</code></td>
897
+ <td>元素长按选中禁止</td>
898
+ <td>-</td>
899
+ </tr>
900
+ </tbody>
901
+ </table>
902
+ </section>
903
+
904
+ </article>
905
+ </template>
906
+
907
+ <script>
908
+ import HeaderInfo from "@/components/header-info"
909
+ // import BStyle from "@/components/BTXUI/core/styles/b-style"
910
+
911
+ export default {
912
+ name: "b_style_demo",
913
+ components: {
914
+ HeaderInfo
915
+ },
916
+ data() {
917
+ return {
918
+
919
+ //初始化入参
920
+ header_info: {
921
+ // name: BStyle.name,
922
+ // ...BStyle.introduce,
923
+ }
924
+
925
+ }
926
+ }
927
+ }
928
+ </script>