1 /*
  2  * @Author: WJ_LONG 
  3  * @Date: 2018-09-15 17:25:37 
  4  * @Last Modified by: WJ_LONG
  5  * @Last Modified time: 2018-09-15 17:30:53
  6  * @animation-display-address：https://daneden.github.io/animate.css/ || http://ianlunn.github.io/Hover/
  7  * @Use 小程序
  8  * @更新：
  9       表格：2018-09-05
 10       图文：2018-09-15
 11  */
 12 
 13 @charset "utf-8";
 14 /*
 15 
 16 这里可以用import导入各种库....
 17 
 18 例如：import "./animate.min.css";
 19 
 20 */
 21 
 22 input, textarea {
 23   width: ;
 24 }
 25 
 26 /* 文字 */
 27 
 28 .t-white {
 29   color: #fff;
 30 }
 31 
 32 .t-black {
 33   color: #000;
 34 }
 35 
 36 .t-blue {
 37   color: #0E639C;
 38 }
 39 
 40 .t-red {
 41   color: #DD4F43;
 42 }
 43 
 44 .t-green {
 45   color: #1AA15F;
 46 }
 47 
 48 .t-yellow {
 49   color: #FFCD42;
 50 }
 51 
 52 .t-orange {
 53   color: #f18518;
 54 }
 55 
 56 .t-bold {
 57   font-weight: bold;
 58 }
 59 
 60 .t-left {
 61   text-align: left;
 62 }
 63 
 64 .t-center {
 65   text-align: center;
 66 }
 67 
 68 .t-right {
 69   text-align: right;
 70 }
 71 
 72 /* 文字换行与不换行 */
 73 
 74 .n-word {
 75   word-break: break-all;
 76 }
 77 
 78 .no-word {
 79   word-break: nowrap;
 80 }
 81 
 82 /* 背景 */
 83 
 84 .bg-blue {
 85   background-color: #038dd8;
 86 }
 87 
 88 .bg-green {
 89   background-color: #009b4d;
 90 }
 91 
 92 .bg-yellow {
 93   background-color: #fdd100;
 94 }
 95 
 96 .bg-orange {
 97   background-color: #f18518;
 98 }
 99 
100 .bg-red {
101   background-color: #d22a31;
102 }
103 
104 /* 图标 > */
105 
106 .icon-direction {
107   width: 1.2em;
108   height: 1.2em;
109   border: 1px solid #000;
110   border-top: none;
111   border-left: none;
112   transform: rotate(-45deg);
113 }
114 
115 /* 遮罩层-垂直居中 */
116 
117 .ab-center {
118   display: flex;
119   justify-content: center;
120   align-items: center;
121   position: absolute;
122   top: 0;
123   bottom: 0;
124   left: 0;
125   right: 0;
126   background-color: rgba(0, 0, 0, .7);
127 }
128 
129 /* 
130   <view class="main-core">
131   <block wx:for="{{10}}" wx:key="id">
132     <navigator class="main-core-item" url="#">
133       <image class="core-item-icon" src="/images/core/bx.png"></image>
134       <text class="core-item-name">图文</text>
135     </navigator>
136   </block>
137 </view>
138 */
139 
140 /* 图文排序 */
141 
142 .main-core {
143   display: flex;
144   flex-flow: row wrap;
145   align-content: flex-start;
146   background: #fff;
147   border-bottom: 1rpx solid #e5e5e5;
148   padding: 15rpx 10rpx 10rpx;
149   margin-bottom: 20rpx;
150   min-height: 350rpx;
151   overflow: hidden;
152 }
153 
154 /* 如果图文排序拥挤,调整百分比即可 => width30% */
155 
156 .main-core navigator {
157   width: 30%;
158 }
159 
160 .main-core-item {
161   display: flex;
162   flex-flow: column wrap;
163   justify-content: center;
164   align-items: center;
165   box-sizing: border-box;
166   width: 20%;
167   height: 170rpx;
168 }
169 
170 .main-core-item.disabled {
171   color: #9c9c9c;
172 }
173 
174 .core-item-icon {
175   display: block;
176   width: 85rpx;
177   height: 85rpx;
178   margin: 15rpx auto;
179 }
180 
181 .core-item-name {
182   display: block;
183   margin: 5rpx;
184 }
185 
186 /* 表格代码 */
187 
188 /* <view class=\'table\'>
189    <view class=\'tr\'>
190        <view class=\'th th1\'>视频</view>
191        <view class=\'th th2\'>游戏</view>
192        <view class=\'th th3\'>电视</view>
193  
194    </view>
195  
196    <view class=\'tr\'>
197        <view class=\'td td1\'>1</view>
198        <view class=\'td td2\'>2</view>
199        <view class=\'td td3\'>3</view>
200    </view>
201  
202  
203  
204    <view class=\'tr\'>
205        <view class=\'td td1\'>1</view>
206        <view class=\'td td2\'>2</view>
207        <view class=\'td td3\'>3</view>
208    </view>
209  
210  
211    <view class=\'tr\'>
212        <view class=\'td td1\'>1</view>
213        <view class=\'td td2\'>2</view>
214        <view class=\'td td3\'>3</view>
215    </view>
216  </view> */
217 
218 .table {
219   width: ;
220 }
221 
222 .tr {
223   width: ;
224   display: flex;
225   justify-content: space-between;
226   border-bottom: 1px solid #dadada;
227 }
228 
229 .tr .th1 {
230   background-color: #008bd5;
231 }
232 
233 .tr .th2 {
234   background-color: #ee8236;
235 }
236 
237 .tr .th3 {
238   background-color: #a40081;
239 }
240 
241 .th, .td {
242   padding: 10px;
243   text-align: center;
244   width: ;
245 }
246 
247 .th {
248   background-color: #000;
249   font-size: 1.2em;
250   color: #fff;
251 }
252 
253 .td {
254   font-size: 0.9em;
255   color: #000;
256 }
257 
258 .td1, .td2, .td3 {
259   word-break: break-all;
260   white-space: normal;
261 }
262 
263 /* 边框 */
264 
265 .border-top {
266   border-top: 1px solid #000;
267 }
268 
269 .border-right {
270   border-right: 1px solid #000;
271 }
272 
273 .border-bottom {
274   border-bottom: 1px solid #000;
275 }
276 
277 .border-left {
278   border-left: 1px solid #000;
279 }
280 
281 .border {
282   border: 1px solid #000;
283 }
284 
285 /* 显示-隐藏 */
286 
287 .none {
288   display: none;
289 }
290 
291 .display {
292   display: block;
293 }
294 
295 .none-force {
296   display: none !important;
297 }
298 
299 /* 阴影(外部、内部阴影) */
300 
301 .b-shadow {
302   box-shadow: #fdd000 0 0 10px;
303 }
304 
305 .t-shadow {
306   text-shadow: #ec350c 0 0 20px;
307 }
308 
309 /* 宽度 */
310 
311 .w-100per {
312   width: ;
313 }
314 
315 .w-50per {
316   width: 50%;
317 }
318 
319 .h-100per {
320   height: ;
321 }
322 
323 .w-100vh {
324   width: 100vh;
325 }
326 
327 .h-100vh {
328   width: 100vh;
329 }
330 
331 /* 用户头像大小 */
332 
333 .u-80 {
334   height: 70px;
335   width: 70px;
336 }
337 
338 .u-50 {
339   height: 50px;
340   width: 50px;
341 }
342 
343 /* 圆角 */
344 
345 .r-50per {
346   border-radius: 50%;
347 }
348 
349 .r-10 {
350   border-radius: 10px;
351 }
352 
353 /* 
354    前三分为：中、开始(默认),结束
355   */
356 
357 .f {
358   display: flex;
359 }
360 
361 .f-center {
362   justify-content: center;
363 }
364 
365 .f-start {
366   justify-content: flex-start;
367 }
368 
369 .f-end {
370   justify-content: flex-end;
371 }
372 
373 .f-s-b {
374   justify-content: space-between;
375 }
376 
377 .f-s-a {
378   justify-content: space-around;
379 }
380 
381 .f-no-wrap {
382   flex-wrap: nowrap;
383 }
384 
385 .f-wrap {
386   flex-wrap: wrap;
387 }
388 
389 /*
390    垂直居中(针对view先的元素 - align)
391  */
392 
393 .f-align-c {
394   align-items: center;
395 }
396 
397 .f-align-s {
398   align-items: flex-start;
399 }
400 
401 .f-align-e {
402   align-items: flex-end;
403 }
404 
405 .f-algin-b {
406   align-items: baseline;
407 }
408 
409 .f-align-stretch {
410   align-items: stretch;
411 }
412 
413 /* line-block 和 inline */
414 
415 .i-line {
416   display: inline;
417 }
418 
419 .i-block {
420   display: inline-block;
421 }
422 
423 .block {
424   display: block;
425 }
426 
427 /* 定位 */
428 
429 .p-r {
430   position: relative;
431 }
432 
433 .p-s {
434   position: absolute;
435 }
436 
437 .p-f {
438   position: fixed;
439 }
440 
441 .over-flow {
442   overflow: hidden;
443 }
444 
445 /* 内边距 */
446 
447 .p-2per {
448   padding: 2%;
449 }
450 
451 .p-l-2per {
452   padding-left: 2%;
453 }
454 
455 .p-r-2per {
456   padding-right: 2%;
457 }
458 
459 .p-t-2per {
460   padding-top: 2%;
461 }
462 
463 .p-b-2per {
464   padding-bottom: 2%;
465 }
466 
467 /* 外边距 */
468 
469 .m-2per {
470   padding: 2%;
471 }
472 
473 .m-tb-2per {
474   margin: 2% 0;
475 }
476 
477 .m-lr-2per {
478   margin: 0 2%;
479 }
480 
481 .m-l-2per {
482   padding-left: 2%;
483 }
484 
485 .m-r-2per {
486   padding-right: 2%;
487 }
488 
489 .m-t-2per {
490   padding-top: 2%;
491 }
492 
493 .p-b-2per {
494   padding-bottom: 2%;
495 }