css - 小程序样式

 /*
  * @Author: WJ_LONG
  * @Date: 2018-09-15 17:25:37
  * @Last Modified by: WJ_LONG
  * @Last Modified time: 2018-09-15 17:30:53
  * @animation-display-address：https://daneden.github.io/animate.css/ || http://ianlunn.github.io/Hover/
  * @Use 小程序
  * @更新：
       表格：2018-09-05
       图文：2018-09-15
  */

 @charset "utf-8";
 /*

 这里可以用import导入各种库....

 例如：import "./animate.min.css";

 */

 input, textarea {
   width: %;
 }

 /* 文字 */

 .t-white {
   color: #fff;
 }

 .t-black {
   color: #;
 }

 .t-blue {
   color: #0E639C;
 }

 .t-red {
   color: #DD4F43;
 }

 .t-green {
   color: #1AA15F;
 }

 .t-yellow {
   color: #FFCD42;
 }

 .t-orange {
   color: #f18518;
 }

 .t-bold {
   font-weight: bold;
 }

 .t-left {
   text-align: left;
 }

 .t-center {
   text-align: center;
 }

 .t-right {
   text-align: right;
 }

 /* 文字换行与不换行 */

 .n-word {
   word-break: break-all;
 }

 .no-word {
   word-break: nowrap;
 }

 /* 背景 */

 .bg-blue {
   background-color: #038dd8;
 }

 .bg-green {
   background-color: #009b4d;
 }

 .bg-yellow {
   background-color: #fdd100;
 }

 .bg-orange {
   background-color: #f18518;
 }

 .bg-red {
   background-color: #d22a31;
 }

 /* 图标 > */

 .icon-direction {
   width: .2em;
   height: .2em;
   border: 1px solid #;
   border-top: none;
   border-left: none;
   transform: rotate(-45deg);
 }

 /* 遮罩层-垂直居中 */

 .ab-center {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: ;
   bottom: ;
   left: ;
   right: ;
   background-color: rgba(, , , .);
 }

 /*
   <view class="main-core">
   <block wx:for="{{10}}" wx:key="id">
     <navigator class="main-core-item" url="#">
       <image class="core-item-icon" src="/images/core/bx.png"></image>
       <text class="core-item-name">图文</text>
     </navigator>
   </block>
 </view>
 */

 /* 图文排序 */

 .main-core {
   display: flex;
   flex-flow: row wrap;
   align-content: flex-start;
   background: #fff;
   border-bottom: 1rpx solid #e5e5e5;
   padding: 15rpx 10rpx 10rpx;
   margin-bottom: 20rpx;
   min-height: 350rpx;
   overflow: hidden;
 }

 /* 如果图文排序拥挤,调整百分比即可 => width30% */

 .main-core navigator {
   width: %;
 }

 .main-core-item {
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   width: %;
   height: 170rpx;
 }

 .main-core-item.disabled {
   color: #9c9c9c;
 }

 .core-item-icon {
   display: block;
   width: 85rpx;
   height: 85rpx;
   margin: 15rpx auto;
 }

 .core-item-name {
   display: block;
   margin: 5rpx;
 }

 /* 表格代码 */

 /* <view class='table'>
    <view class='tr'>
        <view class='th th1'>视频</view>
        <view class='th th2'>游戏</view>
        <view class='th th3'>电视</view>

    </view>

    <view class='tr'>
        <view class='td td1'>1</view>
        <view class='td td2'>2</view>
        <view class='td td3'>3</view>
    </view>

    <view class='tr'>
        <view class='td td1'>1</view>
        <view class='td td2'>2</view>
        <view class='td td3'>3</view>
    </view>

    <view class='tr'>
        <view class='td td1'>1</view>
        <view class='td td2'>2</view>
        <view class='td td3'>3</view>
    </view>
  </view> */

 .table {
   width: %;
 }

 .tr {
   width: %;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #dadada;
 }

 .tr .th1 {
   background-color: #008bd5;
 }

 .tr .th2 {
   background-color: #ee8236;
 }

 .tr .th3 {
   background-color: #a40081;
 }

 .th, .td {
   padding: 10px;
   text-align: center;
   width: %;
 }

 .th {
   background-color: #;
   font-size: .2em;
   color: #fff;
 }

 .td {
   font-size: .9em;
   color: #;
 }

 .td1, .td2, .td3 {
   word-break: break-all;
   white-space: normal;
 }

 /* 边框 */

 .border-top {
   border-top: 1px solid #;
 }

 .border-right {
   border-right: 1px solid #;
 }

 .border-bottom {
   border-bottom: 1px solid #;
 }

 .border-left {
   border-left: 1px solid #;
 }

 .border {
   border: 1px solid #;
 }

 /* 显示-隐藏 */

 .none {
   display: none;
 }

 .display {
   display: block;
 }

 .none-force {
   display: none !important;
 }

 /* 阴影(外部、内部阴影) */

 .b-shadow {
   box-shadow: #fdd000   10px;
 }

 .t-shadow {
   text-shadow: #ec350c   20px;
 }

 /* 宽度 */

 .w-100per {
   width: %;
 }

 .w-50per {
   width: %;
 }

 .h-100per {
   height: %;
 }

 .w-100vh {
   width: 100vh;
 }

 .h-100vh {
   width: 100vh;
 }

 /* 用户头像大小 */

 .u- {
   height: 70px;
   width: 70px;
 }

 .u- {
   height: 50px;
   width: 50px;
 }

 /* 圆角 */

 .r-50per {
   border-radius: %;
 }

 .r- {
   border-radius: 10px;
 }

 /*
    前三分为：中、开始(默认),结束
   */

 .f {
   display: flex;
 }

 .f-center {
   justify-content: center;
 }

 .f-start {
   justify-content: flex-start;
 }

 .f-end {
   justify-content: flex-end;
 }

 .f-s-b {
   justify-content: space-between;
 }

 .f-s-a {
   justify-content: space-around;
 }

 .f-no-wrap {
   flex-wrap: nowrap;
 }

 .f-wrap {
   flex-wrap: wrap;
 }

 /*
    垂直居中(针对view先的元素 - align)
  */

 .f-align-c {
   align-items: center;
 }

 .f-align-s {
   align-items: flex-start;
 }

 .f-align-e {
   align-items: flex-end;
 }

 .f-algin-b {
   align-items: baseline;
 }

 .f-align-stretch {
   align-items: stretch;
 }

 /* line-block 和 inline */

 .i-line {
   display: inline;
 }

 .i-block {
   display: inline-block;
 }

 .block {
   display: block;
 }

 /* 定位 */

 .p-r {
   position: relative;
 }

 .p-s {
   position: absolute;
 }

 .p-f {
   position: fixed;
 }

 .over-flow {
   overflow: hidden;
 }

 /* 内边距 */

 .p-2per {
   padding: %;
 }

 .p-l-2per {
   padding-left: %;
 }

 .p-r-2per {
   padding-right: %;
 }

 .p-t-2per {
   padding-top: %;
 }

 .p-b-2per {
   padding-bottom: %;
 }

 /* 外边距 */

 .m-2per {
   padding: %;
 }

 .m-tb-2per {
   margin: % ;
 }

 .m-lr-2per {
   margin:  %;
 }

 .m-l-2per {
   padding-left: %;
 }

 .m-r-2per {
   padding-right: %;
 }

 .m-t-2per {
   padding-top: %;
 }

 .p-b-2per {
   padding-bottom: %;
 }