base.scss

@charset "utf-8";

* {
	padding: 0;
	margin: 0;
}

/* fieldset组合表单中的相关元素 */
input {
	outline-style: none;
	border: none;
}

/* 去掉 table cell 的边距并让其边重合 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 去掉列表前的标识,li 会继承 */
ol,
ul {
	list-style: none;
}

/* 默认不显示下划线,保持页面简洁 */
ins,
a {
	text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
	color: inherit;
}

/* 按钮边框 */
button{
	border: none;
	/* cursor: default; */
	cursor: pointer;
}

button:disabled {
	opacity: 0.6;
}

::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}


/* 让链接在 hover 状态下显示下划线 */
/* a:hover {
	text-decoration: underline;
} */

/* 去除 ie6 & ie7 焦点点状线 */
/* a:focus,
*:focus {
	outline: none;
} */

/* 去掉图片低测默认的3像素空白缝隙 */
video,
svg,
img {
	border: 0;
	vertical-align: middle;
}

/* 解决高度塌陷问题 */
.BFC::before{
	content: '';
	display: table;
}
.BFC::after {
	content: "";
	display: block;
	clear: both;
}

/* flex弹性布局 */
.df {
  display: flex;
	flex-direction: row;
}

.fw {
  display: flex;
  flex-wrap: wrap;
}

.ffrw {
  display: flex;
  flex-flow: row wrap;
}

.fdr{
	display: flex;
	flex-direction: row;
}


.ac {
  display: flex;
  align-items: center;
	flex-direction: row;
}

.as {
  display: flex;
  align-items: flex-start;
	flex-direction: row;
}

.aend {
  display: flex;
  align-items: flex-end;
	flex-direction: row;
}

.ais{
	display: flex;
	align-items: stretch;
	flex-direction: row;
}
.aib{
	display: flex;
	align-items: baseline;
	flex-direction: row;
}

.jc {
  display: flex;
  justify-content: center;
	flex-direction: row;
}

.jsa {
  display: flex;
  justify-content: space-around;
	flex-direction: row;
}

.jsb {
  display: flex;
  justify-content: space-between;
	flex-direction: row;
}

.jse {
  display: flex;
  justify-content: space-evenly;
}

.jend {
  display: flex;
  justify-content: flex-end;
	flex-direction: row;
}

.jfs {
  display: flex;
  justify-content: flex-start;
	flex-direction: row;
}

.jac {
  display: flex;
  justify-content: center;
  align-items: center;
	flex-direction: row;
}

.jsbw {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.fdc {
  display: flex;
  flex-direction: column;
}

.flex-auto{
	/* flex: 1 1 auto; */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}
.flex-none{
	/* flex: 0 0 auto; */
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
}

/* 背景图片铺满 */
.bg-img{
	background: no-repeat scroll center center / cover content-box content-box;
}

.row{
	white-space: nowrap;
}
/* 不换行显示省略号 */
.row1{
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

/* 显示两行省略 */
.row2{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	word-break:break-all;
	overflow:hidden;
	text-overflow: ellipsis;
}

/*文字排版*/
.fs-10{font-size: 12px; transform: scale(0.8);line-height: 0.8;transform-origin: left;}
.fs-11{font-size: 12px; transform: scale(0.88);line-height: 0.88;transform-origin: left;}
.fs-12{font-size: 12px; }
.fs-13{font-size: 13px; }
.fs-14{font-size: 14px; }
.fs-15{font-size: 15px; }
.fs-16{font-size: 16px; }
.fs-17{font-size: 17px; }
.fs-18{font-size: 18px; }
.fs-20{font-size: 20px; }
.fs-24{font-size: 24px; }
.fs-26{font-size: 26px; }
.fs-28{font-size: 28px; }
.fs-30{font-size: 30px; }
.fs-32{font-size: 32px; }
.fs-36{font-size: 36px; }
.fs-40{font-size: 40px; }


.fw-1{font-weight: 100;}
.fw-2{font-weight: 200;}
.fw-3{font-weight: 300;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-6{font-weight: 600;}
.fw-7{font-weight: 700;}
.fw-8{font-weight: 800;}
.fw-bold{font-weight: bold;}
/* 缩进两个字宽 */
.ti_2{text-indent: 2em}


/* 定位 */
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}

.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

/* 浮动 */
.float_left{float: left;display: inline}
.float_right{float: right;display: inline}
.clear_b{clear: both;}
.clear_l{clear: left;}
.clear_r{clear: right;}

.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* .clearfix{display: inline-block;}*html
.clearfix{height: 1%}
.Clearfix{display: block;} */
.vm{vertical-align: middle;}

/* .pos-abs-right{position: absolute; right: 0} */
.zoom{zoom:1;}
.opacity_0{opacity: 0}
.opacity_3{opacity: 0.3}
.opacity_5{opacity: 0.5}
.opacity_6{opacity: 0.6}
.opacity_8{opacity: 0.8}
.opacity_10{opacity: 1}

.lh-10{line-height: 1}
.lh-12{line-height: 1.2}
.lh-14{line-height: 1.4}
.lh-15{line-height: 1.5}
.lh-16{line-height: 1.6}
.lh-18{line-height: 1.8}
.lh-20{line-height: 2}

/* 圆角 */
.radius_4{border-radius: 4px;}
.radius_6{border-radius: 6px;}
.radius_8{border-radius: 8px;}
.radius_12{border-radius: 12px;}
.radius_max{border-radius: 100px;}

	
/*长度高度*/

/* .w_20{width: 20%}
	 .w_25{width: 25%}
	 .w_33{width: 33.333%}
	 .w_50{width: 50%}
 */
.size-10,.w-10{width: 10px}
.size-12,.w-12{width: 12px}
.size-16,.w-16{width: 16px}
.size-20,.w-20{width: 20px}
.size-24,.w-24{width: 24px}
.size-28,.w-28{width: 28px}
.size-32,.w-32{width: 32px}
.size-36,.w-36{width: 36px}
.size-40,.w-40{width: 40px}
.size-42,.w-42{width: 42px}
.size-44,.w-44{width: 44px}
.size-48,.w-48{width: 48px}
.size-64,.w-64{width: 64px}
.size-72,.w-72{width: 72px}
.size-88,.w-88{width: 88px}
.size-100,.w-100{width: 100px}
.size-110,.w-110{width: 110px}
.size-120,.w-120{width: 120px}
.size-200,.w-200{width: 200px}
.size-max,.w-max{width: 100%}

.size-10,.h-10{height: 10px}
.size-12,.h-12{height: 12px}
.size-16,.h-16{height: 16px}
.size-20,.h-20{height: 20px}
.size-24,.h-24{height: 24px}
.size-28,.h-28{height: 28px}
.size-32,.h-32{height: 32px}
.size-36,.h-36{height: 36px}
.size-40,.h-40{height: 40px}
.size-42,.h-42{height: 42px}
.size-44,.h-44{height: 44px}
.size-48,.h-48{height: 48px}
.size-64,.h-64{height: 64px}
.size-72,.h-72{height: 72px}
.size-88,.h-88{height: 88px}
.size-100,.h-100{height: 100px}
.size-110,.h-110{height: 110px}
.size-120,.h-120{height: 120px}
.size-200,.h-200{height: 200px}
.size-max,.h-max{height: 100%}



/* 边距 */
.m-auto{margin: auto;}

.ml-4, .mx-4, .m-4  { margin-left: 4px}
.ml-6, .mx-6, .m-6  { margin-left: 6px}
.ml-8, .mx-8, .m-8  { margin-left: 8px}
.ml-10,.mx-10,.m-10 { margin-left: 10px}
.ml-12,.mx-12,.m-12 { margin-left: 12px}
.ml-16,.mx-16,.m-16 { margin-left: 16px}
.ml-18,.mx-18,.m-18 { margin-left: 18px}
.ml-20,.mx-20,.m-20 { margin-left: 20px}
.ml-24,.mx-24,.m-24 { margin-left: 24px}
.ml-28,.mx-28,.m-28 { margin-left: 28px}
.ml-30,.mx-30,.m-30 { margin-left: 30px}
.ml-32,.mx-32,.m-32 { margin-left: 32px}

.mr-4, .mx-4, .m-4  { margin-right: 4px}
.mr-6, .mx-6, .m-6  { margin-right: 6px}
.mr-8, .mx-8, .m-8  { margin-right: 8px}
.mr-10,.mx-10,.m-10 { margin-right: 10px}
.mr-12,.mx-12,.m-12 { margin-right: 12px}
.mr-16,.mx-16,.m-16 { margin-right: 16px}
.mr-18,.mx-18,.m-18 { margin-right: 18px}
.mr-20,.mx-20,.m-20 { margin-right: 20px}
.mr-24,.mx-24,.m-24 { margin-right: 24px}
.mr-28,.mx-28,.m-28 { margin-right: 28px}
.mr-30,.mx-30,.m-30 { margin-right: 30px}
.mr-32,.mx-32,.m-32 { margin-right: 32px}

.mt-4, .my-4, .m-4  { margin-top: 4px}
.mt-6, .my-6, .m-6  { margin-top: 6px}
.mt-8, .my-8, .m-8  { margin-top: 8px}
.mt-10,.my-10,.m-10 { margin-top: 10px}
.mt-12,.my-12,.m-12 { margin-top: 12px}
.mt-16,.my-16,.m-16 { margin-top: 16px}
.mt-18,.my-18,.m-18 { margin-top: 18px}
.mt-20,.my-20,.m-20 { margin-top: 20px}
.mt-24,.my-24,.m-24 { margin-top: 24px}
.mt-28,.my-28,.m-28 { margin-top: 28px}
.mt-30,.my-30,.m-30 { margin-top: 30px}
.mt-32,.my-32,.m-32 { margin-top: 32px}

.mb-4, .my-4, .m-4  { margin-bottom: 4px}
.mb-6, .my-6, .m-6  { margin-bottom: 6px}
.mb-8, .my-8, .m-8  { margin-bottom: 8px}
.mb-10,.my-10,.m-10 { margin-bottom: 10px}
.mb-12,.my-12,.m-12 { margin-bottom: 12px}
.mb-16,.my-16,.m-16 { margin-bottom: 16px}
.mb-18,.my-18,.m-18 { margin-bottom: 18px}
.mb-20,.my-20,.m-20 { margin-bottom: 20px}
.mb-24,.my-24,.m-24 { margin-bottom: 24px}
.mb-28,.my-28,.m-28 { margin-bottom: 28px}
.mb-30,.my-30,.m-30 { margin-bottom: 30px}
.mb-32,.my-32,.m-32 { margin-bottom: 32px}


.pl-4, .px-4, .p-4  { padding-left: 4px}
.pl-6, .px-6, .p-6  { padding-left: 6px}
.pl-8, .px-8, .p-8  { padding-left: 8px}
.pl-10,.px-10,.p-10 { padding-left: 10px}
.pl-12,.px-12,.p-12 { padding-left: 12px}
.pl-16,.px-16,.p-16 { padding-left: 16px}
.pl-18,.px-18,.p-18 { padding-left: 18px}
.pl-20,.px-20,.p-20 { padding-left: 20px}
.pl-24,.px-24,.p-24 { padding-left: 24px}
.pl-28,.px-28,.p-28 { padding-left: 28px}
.pl-30,.px-30,.p-30 { padding-left: 30px}
.pl-32,.px-32,.p-32 { padding-left: 32px}
.pl-36,.px-36,.p-36 { padding-left: 36px}

.pr-4, .px-4, .p-4  { padding-right: 4px}
.pr-6, .px-6, .p-6  { padding-right: 6px}
.pr-8, .px-8, .p-8  { padding-right: 8px}
.pr-10,.px-10,.p-10 { padding-right: 10px}
.pr-12,.px-12,.p-12 { padding-right: 12px}
.pr-16,.px-16,.p-16 { padding-right: 16px}
.pr-18,.px-18,.p-18 { padding-right: 18px}
.pr-20,.px-20,.p-20 { padding-right: 20px}
.pr-24,.px-24,.p-24 { padding-right: 24px}
.pr-28,.px-28,.p-28 { padding-right: 28px}
.pr-30,.px-30,.p-30 { padding-right: 30px}
.pr-32,.px-32,.p-32 { padding-right: 32px}
.pr-36,.px-36,.p-36 { padding-right: 36px}

.pt-4, .py-4, .p-4  { padding-top: 4px}
.pt-6, .py-6, .p-6  { padding-top: 6px}
.pt-8, .py-8, .p-8  { padding-top: 8px}
.pt-10,.py-10,.p-10 { padding-top: 10px}
.pt-12,.py-12,.p-12 { padding-top: 12px}
.pt-16,.py-16,.p-16 { padding-top: 16px}
.pt-18,.py-18,.p-18 { padding-top: 18px}
.pt-20,.py-20,.p-20 { padding-top: 20px}
.pt-24,.py-24,.p-24 { padding-top: 24px}
.pt-28,.py-28,.p-28 { padding-top: 28px}
.pt-30,.py-30,.p-30 { padding-top: 30px}
.pt-32,.py-32,.p-32 { padding-top: 32px}
.pt-36,.py-36,.p-36 { padding-top: 36px}

.pb-4, .py-4, .p-4  { padding-bottom: 4px}
.pb-6, .py-6, .p-6  { padding-bottom: 6px}
.pb-8, .py-8, .p-8  { padding-bottom: 8px}
.pb-10,.py-10,.p-10 { padding-bottom: 10px}
.pb-12,.py-12,.p-12 { padding-bottom: 12px}
.pb-16,.py-16,.p-16 { padding-bottom: 16px}
.pb-18,.py-18,.p-18 { padding-bottom: 18px}
.pb-20,.py-20,.p-20 { padding-bottom: 20px}
.pb-24,.py-24,.p-24 { padding-bottom: 24px}
.pb-28,.py-28,.p-28 { padding-bottom: 28px}
.pb-30,.py-30,.p-30 { padding-bottom: 30px}
.pb-32,.py-32,.p-32 { padding-bottom: 32px}
.pb-36,.py-36,.p-36 { padding-bottom: 36px}

/* 颜色 */
.ys-333{
	color: #333;
}
/* 背景色 */
.bg-fff{
	background-color: #ffffff;
}
.bg-ff6e26{
	background-color: #ff6e26;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值