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/global_style/decoration.vue ADDED
@@ -0,0 +1,546 @@
1
+ <template>
2
+ <article>
3
+ <section>
4
+ <p>BTX·UI 提供了一些装饰类以实现常见的特殊样式处理及细节设置。</p>
5
+ <p></p>
6
+ </section>
7
+
8
+ <!--背景-->
9
+ <section>
10
+ <h5>背景</h5>
11
+ <p>框架封装了 background 基础样式，包括定位、尺寸及重复（框架预置为不重复）。</p>
12
+ <table class="table">
13
+ <thead>
14
+ <tr>
15
+ <th>样式类</th>
16
+ <th>效果</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>
22
+ <code>.bg-fixed</code>
23
+ </td>
24
+ <td>背景图固定式定位（手机端无效）</td>
25
+ </tr>
26
+ <tr>
27
+ <td>
28
+ <code>.bg-repeat</code>
29
+ </td>
30
+ <td>背景图水平及垂直平铺</td>
31
+ </tr>
32
+ <tr>
33
+ <td>
34
+ <code>.bg-repeat-x</code>
35
+ </td>
36
+ <td>背景图水平平铺</td>
37
+ </tr>
38
+ <tr>
39
+ <td>
40
+ <code>.bg-repeat-y</code>
41
+ </td>
42
+ <td>背景图垂直平铺</td>
43
+ </tr>
44
+ <tr>
45
+ <td>
46
+ <code>.bg-size-cover</code>
47
+ </td>
48
+ <td>背景图尺寸覆盖容器</td>
49
+ </tr>
50
+ <tr>
51
+ <td>
52
+ <code>.bg-size-contain</code>
53
+ </td>
54
+ <td>背景图尺寸适应容器</td>
55
+ </tr>
56
+ <tr>
57
+ <td>
58
+ <code>.bg-size-max</code>
59
+ </td>
60
+ <td>背景图尺寸撑满容器</td>
61
+ </tr>
62
+ <tr>
63
+ <td>
64
+ <code>.bg-size-max-h</code>
65
+ </td>
66
+ <td>背景图高度尺寸撑满容器</td>
67
+ </tr>
68
+ <tr>
69
+ <td>
70
+ <code>.bg-size-max-w</code>
71
+ </td>
72
+ <td>背景图宽度尺寸撑满容器</td>
73
+ </tr>
74
+ </tbody>
75
+ </table>
76
+ <p>通过 <code>.bg-pos-*</code> 样式类，值域为：1 — 9。可以对背景图进行九宫格式对齐定位。</p>
77
+ <p>【示例】：</p>
78
+ <div class="grid fsize-d9 pcenter">
79
+ <div class="col-4 pad-d5">
80
+ <div class="bg-pos-1 h-5 round-sm bg-color-lgray mrg-b-d5"
81
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
82
+ <div><code>.bg-pos-1</code></div>
83
+ </div>
84
+ <div class="col-4 pad-d5">
85
+ <div class="bg-pos-2 h-5 round-sm bg-color-lgray mrg-b-d5"
86
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
87
+ <div><code>.bg-pos-2</code></div>
88
+ </div>
89
+ <div class="col-4 pad-d5">
90
+ <div class="bg-pos-3 h-5 round-sm bg-color-lgray mrg-b-d5"
91
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
92
+ <div><code>.bg-pos-3</code></div>
93
+ </div>
94
+ <div class="col-4 pad-d5">
95
+ <div class="bg-pos-4 h-5 round-sm bg-color-lgray mrg-b-d5"
96
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
97
+ <div><code>.bg-pos-4</code></div>
98
+ </div>
99
+ <div class="col-4 pad-d5">
100
+ <div class="bg-pos-5 h-5 round-sm bg-color-lgray mrg-b-d5"
101
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
102
+ <div><code>.bg-pos-5</code></div>
103
+ </div>
104
+ <div class="col-4 pad-d5">
105
+ <div class="bg-pos-6 h-5 round-sm bg-color-lgray mrg-b-d5"
106
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
107
+ <div><code>.bg-pos-6</code></div>
108
+ </div>
109
+ <div class="col-4 pad-d5">
110
+ <div class="bg-pos-7 h-5 round-sm bg-color-lgray mrg-b-d5"
111
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
112
+ <div><code>.bg-pos-7</code></div>
113
+ </div>
114
+ <div class="col-4 pad-d5">
115
+ <div class="bg-pos-8 h-5 round-sm bg-color-lgray mrg-b-d5"
116
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
117
+ <div><code>.bg-pos-8</code></div>
118
+ </div>
119
+ <div class="col-4 pad-d5">
120
+ <div class="bg-pos-9 h-5 round-sm bg-color-lgray mrg-b-d5"
121
+ :style="`background-image: url(${require('@/assets/img/f.png')})`"></div>
122
+ <div><code>.bg-pos-9</code></div>
123
+ </div>
124
+ </div>
125
+ <p></p>
126
+ </section>
127
+
128
+ <!--圆角-->
129
+ <section>
130
+ <h5>圆角</h5>
131
+ <div class="auto-h-scroll">
132
+ <table class="table" response>
133
+ <thead>
134
+ <tr>
135
+ <th>样式类</th>
136
+ <th>效果</th>
137
+ </tr>
138
+ </thead>
139
+ <tbody>
140
+ <tr>
141
+ <td>
142
+ <code>.round</code>
143
+ </td>
144
+ <td>50% 圆角，可用于制作正圆形或椭圆形</td>
145
+ </tr>
146
+ <tr>
147
+ <td>
148
+ <code>.round-lg</code>
149
+ </td>
150
+ <td>24px 大圆角</td>
151
+ </tr>
152
+ <tr>
153
+ <td>
154
+ <code>.round-md</code>
155
+ </td>
156
+ <td>10px 中等圆角</td>
157
+ </tr>
158
+ <tr>
159
+ <td>
160
+ <code>.round-sm</code>
161
+ </td>
162
+ <td>4px 小型圆角</td>
163
+ </tr>
164
+ <tr>
165
+ <td>
166
+ <code>.round-t</code>
167
+ </td>
168
+ <td>上侧圆角</td>
169
+ </tr>
170
+ <tr>
171
+ <td>
172
+ <code>.round-b</code>
173
+ </td>
174
+ <td>下侧圆角</td>
175
+ </tr>
176
+ <tr>
177
+ <td>
178
+ <code>.round-l</code>
179
+ </td>
180
+ <td>左侧圆角</td>
181
+ </tr>
182
+ <tr>
183
+ <td>
184
+ <code>.round-r</code>
185
+ </td>
186
+ <td>右侧圆角</td>
187
+ </tr>
188
+ </tbody>
189
+ </table>
190
+ </div>
191
+ <p>使用圆角样式可用于头像之类的图像制作。</p>
192
+ <p>【示例】：</p>
193
+ <div class="grid pcenter fsize-d8">
194
+ <div class="col-2d4 pad-d5 col-4-s"><img class="w-9 w-7-s" src="@/assets/img/head.jpg"/><br>方形头像</div>
195
+ <div class="col-2d4 pad-d5 col-4-s"><img class="round-sm w-9 w-7-s" src="@/assets/img/head.jpg"/><br>小圆角头像</div>
196
+ <div class="col-2d4 pad-d5 col-4-s"><img class="round-md w-9 w-7-s" src="@/assets/img/head.jpg"/><br>中等圆角头像</div>
197
+ <div class="col-2d4 pad-d5 col-4-s"><img class="round-lg w-9 w-7-s" src="@/assets/img/head.jpg"/><br>大圆角头像</div>
198
+ <div class="col-2d4 pad-d5 col-4-s"><img class="round w-9 w-7-s" src="@/assets/img/head.jpg"/><br>正圆头像</div>
199
+ </div>
200
+ <p></p>
201
+ </section>
202
+
203
+ <!--描边-->
204
+ <section>
205
+ <h5>描边</h5>
206
+ <p>通过 <code>.line-*</code> 可以设置实线描边，或 <code>.dashed-*</code> 设置虚线描边 。线条颜色可基于框架预置色彩进行设置，线条粗细可基于 <code>.thick-*</code> 类进行额外设置，预置值：1、2、4、6、8、10，单位 px。</p>
207
+ <table class="table">
208
+ <thead>
209
+ <tr>
210
+ <th>实线类</th>
211
+ <th>效果</th>
212
+ </tr>
213
+ </thead>
214
+ <tbody>
215
+ <tr>
216
+ <td>
217
+ <code>.line</code>
218
+ </td>
219
+ <td>设置四周实线描边</td>
220
+ </tr>
221
+ <tr>
222
+ <td>
223
+ <code>.line-l</code>
224
+ </td>
225
+ <td>设置左侧实线描边</td>
226
+ </tr>
227
+ <tr>
228
+ <td>
229
+ <code>.line-r</code>
230
+ </td>
231
+ <td>设置右侧实线描边</td>
232
+ </tr>
233
+ <tr>
234
+ <td>
235
+ <code>.line-t</code>
236
+ </td>
237
+ <td>设置上侧实线描边</td>
238
+ </tr>
239
+ <tr>
240
+ <td>
241
+ <code>.line-b</code>
242
+ </td>
243
+ <td>设置下侧实线描边</td>
244
+ </tr>
245
+ <tr>
246
+ <td>
247
+ <code>.dashed</code>
248
+ </td>
249
+ <td>设置四周虚线描边</td>
250
+ </tr>
251
+ <tr>
252
+ <td>
253
+ <code>.dashed-l</code>
254
+ </td>
255
+ <td>设置左侧虚线描边</td>
256
+ </tr>
257
+ <tr>
258
+ <td>
259
+ <code>.dashed-r</code>
260
+ </td>
261
+ <td>设置右侧虚线描边</td>
262
+ </tr>
263
+ <tr>
264
+ <td>
265
+ <code>.dashed-t</code>
266
+ </td>
267
+ <td>设置上侧虚线描边</td>
268
+ </tr>
269
+ <tr>
270
+ <td>
271
+ <code>.dashed-b</code>
272
+ </td>
273
+ <td>设置下侧虚线描边</td>
274
+ </tr>
275
+ </tbody>
276
+ </table>
277
+ <p>设置描边效果（描边色需为半透明色）时，可通过 <code>.line-outside</code> 样式类设置其 "应用范围" 为外侧。</p>
278
+ <p>【示例】：</p>
279
+ <div class="flex">
280
+ <div class="mrg-r-9 mrg-r-5-s">
281
+ <div class="rel">
282
+ <img class="round-md flex w-9" src="@/assets/img/head2.jpg"/>
283
+ <div class="abs max flex-5 t-0">
284
+ <div class=" round w-5 h-5 bg-color-dgray line line-neutral thick-10"></div>
285
+ </div>
286
+ </div>
287
+ <div class="pcenter mrg-t-1">默认效果</div>
288
+ </div>
289
+ <div class="rel">
290
+ <div class="rel">
291
+ <img class="round-md flex w-9" src="@/assets/img/head2.jpg"/>
292
+ <div class="abs max flex-5 t-0">
293
+ <div class="round w-5 h-5 bg-color-dgray line line-neutral thick-10 line-outside"></div>
294
+ </div>
295
+ </div>
296
+ <div class="pcenter mrg-t-1">外侧描边范围</div>
297
+ </div>
298
+ </div>
299
+ <p></p>
300
+ </section>
301
+
302
+ <!--文字描边-->
303
+ <section>
304
+ <h5>文字描边</h5>
305
+ <p>使用 <code>.text-line</code> 样式类可以设置文字的描边效果，描边颜色为中性半透明灰色。</p>
306
+ <div class="flex container-sm">
307
+ <div class="grow-1 h-4 flex-5 bg-color-mgray round-sm text-line fsize-1d2">Hello World
308
+ </div>
309
+ <div class="grow-1 h-4 flex-5 line thick-1 color-lgray round-sm text-line fsize-1d2 mrg-l-2">
310
+ <span class="color-dgray">Hello World</span>
311
+ </div>
312
+ </div>
313
+ <p></p>
314
+ </section>
315
+
316
+ <!--阴影-->
317
+ <section>
318
+ <h5>阴影</h5>
319
+ <p>框架预置了几种常用的盒子阴影样式，阴影的颜色可以通过颜色类进行设置。</p>
320
+ <div class="grid pcenter">
321
+ <div class="col-2d4 pad-d5 col-6-s">
322
+ <div class="line thick-1 color-lgray max-w h-6 round-sm shadow-no color-dgray flex-5">
323
+ <div>
324
+ <div><code>.shadow-no</code></div>
325
+ <div class="fsize-d8 color-dgray">无阴影</div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <div class="col-2d4 pad-d5 col-6-s">
330
+ <div class="line thick-1 color-lgray max-w h-6 round-sm shadow color-dgray flex-5">
331
+ <div>
332
+ <div><code>.shadow</code></div>
333
+ <div class="fsize-d8 color-dgray">普通尺寸阴影</div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ <div class="col-2d4 pad-d5 col-6-s">
338
+ <div class="line thick-1 color-lgray max-w h-6 round-sm shadow-sm color-dgray flex-5">
339
+ <div>
340
+ <div><code>.shadow-sm</code></div>
341
+ <div class="fsize-d8 color-dgray">小尺寸阴影</div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="col-2d4 pad-d5 col-6-s">
346
+ <div class="line thick-1 color-lgray max-w h-6 round-sm shadow-lg color-dgray flex-5">
347
+ <div>
348
+ <div><code>.shadow-lg</code></div>
349
+ <div class="fsize-d8 color-dgray">大尺寸阴影</div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ <div class="col-2d4 pad-d5 col-12-s">
354
+ <div class="line thick-1 color-lgray max-w h-6 round-sm bg-color-mgray flex-5">
355
+ <div class="shadow-relief round-sm bg-color-dgray pad-h-1">
356
+ <div><code>.shadow-relief</code></div>
357
+ <div class="fsize-d8 color-mgray">浮雕阴影效果</div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <p></p>
363
+ </section>
364
+
365
+ <!--分割线-->
366
+ <section>
367
+ <h5>分割线</h5>
368
+ <p>BTX·UI 重置了 <code>&lt;hr&gt;</code> 分割线样式，同时适用于深、浅背景。</p>
369
+ <p>【示例】：</p>
370
+ <div class="flex pcenter container-sm">
371
+ <div class="grow-1 mrg-r-2">
372
+ <div class="bg-color-dgray pad-d5 round-sm">
373
+ <hr/>
374
+ </div>
375
+ <div class="pad-t-d5">深色背景效果</div>
376
+ </div>
377
+ <div class="grow-1">
378
+ <div class="line-lgray line thick-1 pad-d5 round-sm">
379
+ <hr/>
380
+ </div>
381
+ <div class="pad-t-d5">浅色背景效果</div>
382
+ </div>
383
+ </div>
384
+ <p></p>
385
+ </section>
386
+
387
+ <!--三角形-->
388
+ <section>
389
+ <h5>三角形</h5>
390
+ <p>可以使用框架预置的三角形（基于 border 样式实现，默认粗细 4px）。</p>
391
+ <table class="table">
392
+ <thead>
393
+ <tr>
394
+ <th>样式类</th>
395
+ <th>效果</th>
396
+ </tr>
397
+ </thead>
398
+ <tbody>
399
+ <tr>
400
+ <td>
401
+ <code>.triangle-l</code>
402
+ </td>
403
+ <td>左侧三角形</td>
404
+ </tr>
405
+ <tr>
406
+ <td>
407
+ <code>.triangle-r</code>
408
+ </td>
409
+ <td>左侧三角形</td>
410
+ </tr>
411
+ <tr>
412
+ <td>
413
+ <code>.triangle-t</code>
414
+ </td>
415
+ <td>上侧三角形</td>
416
+ </tr>
417
+ <tr>
418
+ <td>
419
+ <code>.triangle-b</code>
420
+ </td>
421
+ <td>下侧三角形</td>
422
+ </tr>
423
+ </tbody>
424
+ </table>
425
+ <p></p>
426
+ </section>
427
+
428
+ <!--滤镜-->
429
+ <section>
430
+ <h5>滤镜</h5>
431
+ <p>可以使用 css3 filter 滤镜效果，包括：blur（模糊）、dark（暗色）、gray（低饱和）。需要注意的是由于都是控制的 filter 样式属性，因此叠加使用会出现覆盖的情况，可以通过嵌套 dom 结构的方式进行样式混合。</p>
432
+ <table class="table">
433
+ <thead>
434
+ <tr>
435
+ <th>样式类</th>
436
+ <th>效果</th>
437
+ </tr>
438
+ </thead>
439
+ <tbody>
440
+ <tr>
441
+ <td>
442
+ <code>.blur-no</code>
443
+ </td>
444
+ <td>无模糊效果</td>
445
+ </tr>
446
+ <tr>
447
+ <td>
448
+ <code>.blur-sm</code>
449
+ </td>
450
+ <td>轻度模糊效果</td>
451
+ </tr>
452
+ <tr>
453
+ <td>
454
+ <code>.blur-md</code>
455
+ </td>
456
+ <td>中度模糊效果</td>
457
+ </tr>
458
+ <tr>
459
+ <td>
460
+ <code>.blur-lg</code>
461
+ </td>
462
+ <td>重度模糊效果</td>
463
+ </tr>
464
+ <tr>
465
+ <td>
466
+ <code>.dark-no</code>
467
+ </td>
468
+ <td>原始明度效果</td>
469
+ </tr>
470
+ <tr>
471
+ <td>
472
+ <code>.dark-sm</code>
473
+ </td>
474
+ <td>轻度低明度效果</td>
475
+ </tr>
476
+ <tr>
477
+ <td>
478
+ <code>.dark-md</code>
479
+ </td>
480
+ <td>中度低明度效果</td>
481
+ </tr>
482
+ <tr>
483
+ <td>
484
+ <code>.dark-lg</code>
485
+ </td>
486
+ <td>重度低明度效果</td>
487
+ </tr>
488
+ <tr>
489
+ <td>
490
+ <code>.gray-no</code>
491
+ </td>
492
+ <td>原始纯度效果</td>
493
+ </tr>
494
+ <tr>
495
+ <td>
496
+ <code>.gray-sm</code>
497
+ </td>
498
+ <td>轻度低纯度效果</td>
499
+ </tr>
500
+ <tr>
501
+ <td>
502
+ <code>.gray-md</code>
503
+ </td>
504
+ <td>中度低纯度效果</td>
505
+ </tr>
506
+ <tr>
507
+ <td>
508
+ <code>.gray-lg</code>
509
+ </td>
510
+ <td>重度低纯度效果</td>
511
+ </tr>
512
+ </tbody>
513
+ </table>
514
+ <div class="fsize-d9">
515
+ <p>【示例】模糊效果：</p>
516
+ <div class="flex-around pcenter">
517
+ <div><img class="round-md w-9 blur-no w-4-s" src="@/assets/img/head.jpg"/><br>无模糊</div>
518
+ <div><img class="round-md w-9 blur-sm w-4-s" src="@/assets/img/head.jpg"/><br>轻度模糊</div>
519
+ <div><img class="round-md w-9 blur-md w-4-s" src="@/assets/img/head.jpg"/><br>中度模糊</div>
520
+ <div><img class="round-md w-9 blur-lg w-4-s" src="@/assets/img/head.jpg"/><br>重度模糊</div>
521
+ </div>
522
+ <p>【示例】明度效果：</p>
523
+ <div class="flex-around pcenter">
524
+ <div><img class="round-md w-9 dark-no w-4-s" src="@/assets/img/head.jpg"/><br>原始明度</div>
525
+ <div><img class="round-md w-9 dark-sm w-4-s" src="@/assets/img/head.jpg"/><br>轻度低明度</div>
526
+ <div><img class="round-md w-9 dark-md w-4-s" src="@/assets/img/head.jpg"/><br>中度低明度</div>
527
+ <div><img class="round-md w-9 dark-lg w-4-s" src="@/assets/img/head.jpg"/><br>重度低明度</div>
528
+ </div>
529
+ <p>【示例】纯度效果：</p>
530
+ <div class="flex-around pcenter">
531
+ <div><img class="round-md w-9 gray-no w-4-s" src="@/assets/img/head.jpg"/><br>原始纯度</div>
532
+ <div><img class="round-md w-9 gray-sm w-4-s" src="@/assets/img/head.jpg"/><br>轻度低纯度</div>
533
+ <div><img class="round-md w-9 gray-md w-4-s" src="@/assets/img/head.jpg"/><br>中度低纯度</div>
534
+ <div><img class="round-md w-9 gray-lg w-4-s" src="@/assets/img/head.jpg"/><br>重度低纯度</div>
535
+ </div>
536
+ </div>
537
+ </section>
538
+
539
+ </article>
540
+ </template>
541
+
542
+ <script>
543
+ export default {
544
+ name: "decoration"
545
+ };
546
+ </script>