| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- page{
- color: #333;
- font-size: 28rpx;
- background:rgba(245,247,250,1);
- height: 100%;
- width: 100%;
- }
- view,text{
- line-height:40rpx;
- }
- .blue{
- color: #26A2FF;
- }
- .red{
- color: #F56C6C;
- }
- .yellow{
- color: #E6A23C;
- }
- .green{
- color: #67C23A;
- }
- .fontColorZ{
- color: #303133;
- }
- .fontColorF{
- color: #909399;
- }
- .fontColorT{
- color: #C0C4CC;
- }
- .margin-bottom{
- margin-bottom: 28rpx;
- }
- .margin-top{
- margin-top: 28rpx;
- }
- .defBtn{
- background: #26A2FF;
- color: #fff;
- }
- /* 盒子模型 */
- .flex-box {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- }
- /*盒子模型,竖向自适应,垂直排列 */
- .flex-box-v {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-flex-flow: column;
- flex-flow: column !important;
- }
- /* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
- .flex-d-center {
- justify-content: space-between;
- -webkit-justify-content: space-between;
- }
- /* 水平等列排版(子元素两边有缝隙自己适应) */
- .flex-dv-center {
- justify-content: space-around;
- -webkit-justify-content: space-around;
- }
- /*通过一起使用 box-align 和 box-pack 属性,对 view 框的子元素进行居中,目前没有浏览器支持box-align 和 box-pack 属性,所以需要加上浏览器内核-webkit,-moz等的简写 */
- .flex-center-center {
- justify-content: center;
- -webkit-justify-content: center;
- -moz-justify-content: center;
- align-items: center;
- -webkit-align-items: center;
- -webkit-box-pack: center;
- -webkit-box-align: center;
- -moz-align-items: center;
- -moz-box-pack: center;
- -moz-box-align: center;
- }
- /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box水平;flex-box-v垂直) */
- .flex-v-zhu,
- .flex-h-zhu {
- justify-content: center;
- -webkit-justify-content: center;
- -webkit-box-pack: center;
- }
- /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box垂直;flex-box-v水平) */
- .flex-v-ce,
- .flex-h-ce {
- align-items: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- }
- /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
- .flex-1 {
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- }
- .flex-2 {
- -webkit-box-flex: 2;
- box-flex: 2;
- -moz-box-flex: 2;
- -webkit-flex: 2;
- -ms-flex: 2;
- flex: 2;
- }
- .flex-3 {
- -webkit-box-flex: 3;
- box-flex: 3;
- -moz-box-flex: 3;
- -webkit-flex: 3;
- -ms-flex: 3;
- flex: 3;
- }
- .flex-4 {
- -webkit-box-flex: 4;
- box-flex: 4;
- -moz-box-flex: 4;
- -webkit-flex: 4;
- -ms-flex: 4;
- flex: 4;
- }
- .flex-5 {
- -webkit-box-flex: 5;
- box-flex: 5;
- -moz-box-flex: 5;
- -webkit-flex: 5;
- -ms-flex: 5;
- flex: 5;
- }
- .flex-direction-row-reverse {
- flex-direction: row-reverse;
- -webkit-flex-direction: row-reverse;
- }
- /*超出部分用....表示的公用样式 */
- .font-flex-word {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- /* 内容超出部分自动换行 */
- .flex-d-wrap {
- flex-wrap: wrap;
- }
- /* 内容超出部分不换行 */
- .flex-no-wrap {
- flex-wrap: nowrap;
- }
- /* 从右边开始排列 */
- .flex-box-end {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- justify-content: flex-end;
- }
|