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: %;
}