389 lines
10 KiB
SCSS
389 lines
10 KiB
SCSS
.bg {
|
||
background: #E73232;
|
||
}
|
||
.bg_linear {
|
||
background-image: linear-gradient(#FF5D5C,#fa3327);
|
||
}
|
||
|
||
.col {
|
||
color: #E73232;
|
||
}
|
||
|
||
/* 颜色 */
|
||
.col_E81B27 { color: #E81B27; }
|
||
.col_E60012 { color: #E60012; }
|
||
.col_FE1515 { color: #FE1515; }
|
||
.col_25BFA7 { color: #25BFA7; }
|
||
.col_FF590F { color: #FF590F; }
|
||
.col_B3B3B3 { color: #B3B3B3; }
|
||
.col_2EA5E2 { color: #2EA5E2; }
|
||
.col_01B6B8 { color: #01B6B8; }
|
||
.col_FF3F45 { color: #FF3F45; }
|
||
.col_03C6BF { color: #03C6BF; }
|
||
.col_E42419 { color: #E42419; }
|
||
.col_FF0101 { color: #FF0101; }
|
||
.col_FF0000 { color: #FF0000; }
|
||
.col_FF5E00 { color: #FF5E00; }
|
||
.col_3DBF7F { color: #3DBF7F; }
|
||
.col_ABABB3 { color: #ABABB3;}
|
||
.col_0ECE93 { color: #0ECE93; }
|
||
.col_EB1513 { color: #EB1513; }
|
||
.col_c5c6Cc {color: #C5C6CA;}
|
||
.col_a6a5a5 {color: #A6A5A5;}
|
||
.col_EA3F49 { color: #EA3F49; }
|
||
.col_108EE9 { color: #108EE9; }
|
||
.col_FE9600 { color: #FE9600; }
|
||
.col_63A35C { color: #63A35C; }
|
||
.col_04A4FC { color: #04A4FC; }
|
||
.col_FFC9EE { color: #FFC9EE; }
|
||
.col_FF3EC9 { color: #FF3EC9; }
|
||
.col_FA5211 { color: #FA5211; }
|
||
.col_02C7D2 { color: #02C7D2; }
|
||
.col_828281 { color: #828281;}
|
||
.col_ecebf0 { color: #ecebf0;}
|
||
.col_fec85e { color: #FEC85E;}
|
||
.col_ff7f69 { color: #FF7F69;}
|
||
.col_e9caa9 { color: #E9CAA9;}
|
||
.col_b7bed8 { color: #B7BED8;}
|
||
.col_fd4449 {color: #FD4449;}
|
||
.col_2cc778 {color: #2cc778;}
|
||
.col_214f37 {color: #214f37;}
|
||
.col_b1b1b1 {color: #b1b1b1}
|
||
.col_c0c5cc {color: #c0c5cc;}
|
||
.col_bcbcbc {color: #bcbcbc;}
|
||
.col_070707 {color: #070707;}
|
||
.col_707070 {color: #707070;}
|
||
.col_b5b5b5 {color: #b5b5b5;}
|
||
.col_b9b9b9 {color: #b9b9b9;}
|
||
.col_a5a4a4 {color: #A5A4A4;}
|
||
.col_d2d2d2 {color: #d2d2d2;}
|
||
.col_534435 {color: #534435}
|
||
.col_1d2e89 {color: #1D2E89;}
|
||
.col_3d444d {color: #3d444d;}
|
||
.col_d12324 {color: #d12324;}
|
||
.col_002fa7 {color: #002fa7;}
|
||
.col_868686 {color: #868686;}
|
||
.col_808080 {color: #808080;}
|
||
.col_e81700 {color: #e81700;}
|
||
.col_fd5f07 {color: #FD5F07;}
|
||
.col_e51f38 {color: #E51F38;}
|
||
.col_e7cb90 {color: #e7cb90;}
|
||
.bge51f38 {background: #E51F38;}
|
||
.bgfd5f07 {background: #FD5F07;}
|
||
.bgf28f9c {background: #f28f9c;}
|
||
.bg1d2e89 {background: #1d2e89;}
|
||
.bgf2f2f2 {background: #f2f2f2;}
|
||
.bg002fa7 {background: #002fa7;}
|
||
.bgf5f5f5 {background: #f5f5f5;}
|
||
.bgf6f6f6 { background: #f6f6f6;}
|
||
.bgd4f4e4 {background: #d4f4e4;}
|
||
.bg9fe6c2 {background: #9fe6c2;}
|
||
.bgf5f7ff {background: #f5f7ff;}
|
||
.bgf45349 {background: #f45349;}
|
||
.bgea2466 {background: #ea2466;}
|
||
.bge7f9f0 {background-color: #e7f9f0;}
|
||
.bg2cc778 {background-color: #2cc778;}
|
||
.bgf83d47 {background-color: #f83d47;}
|
||
.bgfbfabc {background-color: #fbfafc;}
|
||
.bgFD4449 {background-color: #FD4449;}
|
||
.bgEB1513 {background-color: #EB1513;}
|
||
.bgFE9600 {background-color: #FE9600;}
|
||
.bg63A35C {background-color: #63A35C;}
|
||
.bg108EE9 {background-color: #108EE9;}
|
||
.bgFF0000 {background-color: #FF0000;}
|
||
.bg3DBF7F { background-color: #3DBF7F; }
|
||
.bgFFC9EE { background-color: #FFC9EE; }
|
||
.bg04CAFC { background-color: #04CAFC; }
|
||
.bgFF60E8 { background-color: #FF60E8; }
|
||
.bgFF3EC9 { background-color: #FF3EC9; }
|
||
.bg04A4FC { background-color: #04A4FC; }
|
||
.bgFF9000 { background-color: #FF9000; }
|
||
.bg02C7D2 { background-color: #02C7D2; }
|
||
.bgf7f6fa { background-color: #F7F6FA; }
|
||
.bg35d2db { background-color: #35D2DB; }
|
||
.bgb7bed8 { background-color: #B7BED8;}
|
||
.bge6e6e6 { background-color: #e6e6e6;}
|
||
.bg534e64 { background-color: #534E64;}
|
||
.bgf7f6fa { background-color: #f7f6fa;}
|
||
.bge9caa9 { background-color: #E9CAA9;}
|
||
.bgf7f7f7 { background: #F7F7F7;}
|
||
.bgf8f8f8 { background-color: #f8f8f8;}
|
||
view,
|
||
scroll-view,
|
||
swiper,
|
||
button,
|
||
input,
|
||
textarea,
|
||
label,
|
||
navigator,
|
||
image {
|
||
box-sizing: border-box;
|
||
z-index: 1;
|
||
}
|
||
//设置padding和border 不会改变盒子原有的大小//设置padding和border 不会改变盒子原有的大小
|
||
.f0 {
|
||
flex-shrink: 0;
|
||
}
|
||
// // 定义flex等分
|
||
@for $i from 0 through 12 {
|
||
.f-#{$i} {
|
||
flex: $i;
|
||
}
|
||
|
||
}
|
||
/*
|
||
编译后的css代码
|
||
.f-1{
|
||
flex: 1;
|
||
}
|
||
.f-2{
|
||
flex: 2;
|
||
}
|
||
.f-3{
|
||
flex: 3;
|
||
}
|
||
.f-4{
|
||
flex: 4;
|
||
}
|
||
.f-5{
|
||
flex: 5;
|
||
}
|
||
.f-6{
|
||
flex: 6;
|
||
}
|
||
.f-7{
|
||
flex: 7;
|
||
}
|
||
.f-8{
|
||
flex: 8;
|
||
}
|
||
.f-9{
|
||
flex: 9;
|
||
}
|
||
.f-10{
|
||
flex: 10;
|
||
}
|
||
.f-11{
|
||
flex: 11;
|
||
}
|
||
.f-12{
|
||
flex: 12;
|
||
}
|
||
*/
|
||
//定义zindex层级
|
||
@for $i from 0 through 1000 {
|
||
.zi-#{$i} {
|
||
z-index: $i;
|
||
}
|
||
|
||
}
|
||
// 定义字体(rpx)单位，10~100rpx fs-10 ~ fs-100
|
||
@for $i from 10 through 100 {
|
||
.fs-#{$i} {
|
||
font-size: $i + rpx;
|
||
}
|
||
}
|
||
// 定义内外边距，历遍0-500
|
||
@for $i from 0 through 500 {
|
||
//m-all-30
|
||
.m-all-#{$i} {
|
||
margin: $i + rpx;
|
||
}
|
||
//p-all-30
|
||
.p-all-#{$i} {
|
||
padding: $i + rpx;
|
||
}
|
||
@each $short, $long in l left, t top, r right, b bottom {
|
||
// 缩写版，结果如： ml-1 mr-10 mb-100 mt-135
|
||
// 定义外边距
|
||
.m#{$short}-#{$i} {
|
||
margin-#{$long}: $i + rpx;
|
||
}
|
||
// 定义内边距，结果如：pl-30 pr-30 pb-30 pt-30
|
||
.p#{$short}-#{$i} {
|
||
padding-#{$long}: $i + rpx;
|
||
}
|
||
}
|
||
}
|
||
//全局宽高
|
||
.h100vh {//100 vh
|
||
height: 100vh;
|
||
max-height: 100vh;
|
||
min-height: 100vh;
|
||
}
|
||
.h100 {//100%
|
||
height: 100%;
|
||
max-height: 100%;
|
||
min-height: 100%;
|
||
}
|
||
|
||
// 嵌入字体
|
||
|
||
// @font-face {
|
||
// font-family: test;
|
||
// font-weight: normal;
|
||
// font-style: normal;
|
||
// src: url("~@/SourceHanSansK-Normal/SourceHanSansK-Normal.ttf") format("truetype");
|
||
// }
|
||
//字体
|
||
.fn-kt {//楷体
|
||
font-family: KaiTi;
|
||
}
|
||
.fn-st {//
|
||
font-family: serif;
|
||
}
|
||
.fn-ft {
|
||
font-family: fantasy;
|
||
}
|
||
@for $i from 0 through 750 {
|
||
// w-0 ~ w-750
|
||
.w-#{$i} {
|
||
width: $i + rpx;
|
||
max-width: $i + rpx;
|
||
min-width: $i + rpx;
|
||
}
|
||
// h-0 ~ h-750
|
||
.h-#{$i} {
|
||
height: $i + rpx;
|
||
max-height: $i + rpx;
|
||
min-height: $i + rpx;
|
||
}
|
||
// lh-0 ~ lh-750
|
||
.lh-#{$i} {
|
||
line-height: $i + rpx;
|
||
}
|
||
}
|
||
|
||
//全局圆角 行高 br-0 ~ br-100
|
||
@for $i from 0 through 100 {
|
||
// w-0 ~ w-750
|
||
.br-#{$i} {
|
||
border-radius: $i + rpx;
|
||
}
|
||
// h-0 ~ h-750
|
||
}
|
||
/* 对齐方式 */
|
||
.tct{text-align: center;}
|
||
.trt{text-align: right;}
|
||
.tlt{text-align: left;}
|
||
.w100{width: 100%;}
|
||
.bor {
|
||
border-bottom: 2rpx solid #f1f1f1;
|
||
}
|
||
.box{box-sizing: border-box;}
|
||
.con{box-sizing: content-box;}
|
||
.relative{position: relative;}
|
||
.absolute{position: absolute;}
|
||
.fixed{position: fixed;}
|
||
.d-none{display: none;}
|
||
.d-block{display: inline-block;}
|
||
.blb_f1{border-bottom: 3rpx solid #F1F1F1;}
|
||
.blb_ff{border-bottom: 3rpx solid #FFFFFF;}
|
||
.bltb_e1dede{border-bottom: 3rpx solid #e1dede; border-top: 3rpx solid #e1dede;}
|
||
/* 粗体 */
|
||
.fw-b {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fw-l {
|
||
font-weight: lighter;
|
||
}
|
||
|
||
.fw-n {
|
||
font-weight: normal;
|
||
}
|
||
.fw-600 {
|
||
font-weight: 600;
|
||
}
|
||
.fw-700 {
|
||
font-weight: 700;
|
||
}
|
||
.fw-800 {
|
||
font-weight: 800;
|
||
}
|
||
|
||
//字间距
|
||
@for $i from 0 through 20 {
|
||
// w-0 ~ w-750
|
||
.ls-#{$i} {
|
||
letter-spacing: $i + rpx;
|
||
}
|
||
}
|
||
/*苹果底部选项栏适配*/
|
||
.nav_bottom {
|
||
box-sizing: content-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
|
||
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
|
||
}
|
||
|
||
/* 特殊处理 */
|
||
.tline {
|
||
text-decoration: line-through;
|
||
/* 加删除线 */
|
||
}
|
||
/* 多少行（3~15） */
|
||
.one_overflow{
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
} /* 一行隐藏 */
|
||
.two_overflow{
|
||
overflow:hidden;
|
||
display:-webkit-box;
|
||
-webkit-box-orient:vertical;
|
||
-webkit-line-clamp:2;
|
||
} /* 二行隐藏 */
|
||
.three_overflow{
|
||
overflow:hidden;
|
||
display:-webkit-box;
|
||
-webkit-box-orient:vertical;
|
||
-webkit-line-clamp:3;
|
||
} /* 三行隐藏 */
|
||
/*========== flex布局相关 ==========*/
|
||
/* http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */
|
||
.rows {display: flex;display: -webkit-flex;flex-direction: row;} /* 盒子内容横向布局 */
|
||
.rowsa {display: flex;display: -webkit-flex;flex-direction: row;justify-content: space-around;} /* 盒子内容居中间间隙布局 */
|
||
.rowsb {display: flex;display: -webkit-flex;flex-direction: row;justify-content: space-between;} /* 盒子内容两端间隙布局 */
|
||
.rowsc {display: flex;display: -webkit-flex;flex-direction: row;justify-content: center;} /* 盒子内容居中布局 */
|
||
.rowse {display: flex;display: -webkit-flex;flex-direction: row;justify-content: flex-end;} /* 盒子内容结尾布局 */
|
||
.rowsm {align-items: center;}
|
||
.rowsw {flex-wrap: wrap;}
|
||
.rowsl {display: flex;display: -webkit-flex;flex-direction: column;} /* 盒子内容竖向中间间隙布局 */
|
||
.rowsal {display: flex;display: -webkit-flex;justify-content: space-around;flex-direction: column;} /* 盒子内容竖向中间间隙布局 */
|
||
.rowsbl {display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: column;} /* 盒子内容竖向两端间隙布局 */
|
||
.rowscl {display: flex;display: -webkit-flex;justify-content: center;flex-direction: column;} /* 盒子内容竖向中间居中布局 */
|
||
.rowsce {display: flex;display: -webkit-flex;flex-direction: column;justify-content: flex-end;} /* 盒子内容竖向结尾布局 */
|
||
.notYet {text-align: center;font-size: 30rpx;color: #999999;padding: 30rpx 0rpx;} /* 页面无数据 */
|
||
.arrow{width: 7px;height: 7px;border-top: 1px solid #333333;border-right: 1px solid #333333;transform: rotate(45deg);}/* 右箭头 */
|
||
.shadow_total{box-shadow: 0px 0px 5rpx 6rpx rgba(136,136,136,0.1);}
|
||
.shadow{box-shadow: 0px 0px 12rpx 12rpx rgba(136,136,136,0.1);}
|
||
.shadow_bottom{box-shadow: 2px 2px 6rpx 2rpx rgba(136,136,136,0.24);}
|
||
image{height: auto;}
|
||
// /deep/::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||
// display: none;
|
||
// width: 0;
|
||
// height: 0;
|
||
// color: transparent;
|
||
// background: transparent;
|
||
// }
|
||
|
||
/* 根据设计图的主题色自行扩展颜色包*/
|
||
.col000{color: #000000;}
|
||
.col111{color: #111111;}
|
||
.col222{color: #222222;}
|
||
.col333{color: #333333;}
|
||
.col444{color: #444444;}
|
||
.col555{color: #555555;}
|
||
.col666{color: #666666;}
|
||
.col777{color: #777777;}
|
||
.col888{color: #888888;}
|
||
.col999{color: #999999;}
|
||
.colfff{color: #FFFFFF;}
|
||
.bgf1{background-color: #F1F1F1;}
|
||
.bgf5{background-color: #F5F5F5;}
|
||
.bgf9{background-color: #F9F9F9;}
|
||
.bg99{background-color: #999999;}
|
||
|
||
.bgff{background-color: #FFFFFF;}
|
||
.bgee{background-color: #eeeeee;}
|