mall-laonong/commons/base.css

/* flex布局 */
.flex {display: flex;}

/* 盒模型 */
.border-box{box-sizing: border-box;}

/* 背景颜色 */
.background-white{background-color: #ffffff;}
.background-orange{background-color: #febf00;}
.background-grey{background-color: #484848;}

/* 圆角 */
.radius10{border-radius: 10rpx;}
.radius15{border-radius: 15rpx;}
.radius20{border-radius: 20rpx;}
.radius25{border-radius: 25rpx;}
.radius30{border-radius: 30rpx;}
.radius35{border-radius: 35rpx;}
.radius40{border-radius: 40rpx;}
.radius100{border-radius: 100%;}

/* 外边距 */
.mar-sxc10{margin: 10rpx auto;}
.mar-sxc15{margin: 15rpx auto;}
.mar-sxc20{margin: 20rpx auto;}
.mar-sxc25{margin: 25rpx auto;}
.mar-sxc30{margin: 30rpx auto;}
.mar-sx10{margin: 10rpx 0;}
.mar-sx15{margin: 15rpx 0;}
.mar-sx20{margin: 20rpx 0;}
.mar-sx25{margin: 25rpx 0;}
.mar-sx30{margin: 30rpx 0;}
.mar-zy10{margin: 0 10rpx;}
.mar-zy15{margin: 0 15rpx;}
.mar-zy20{margin: 0 20rpx;}
.mar-zy25{margin: 0 25rpx;}
.mar-zy30{margin: 0 30rpx;}
.mar-s10{margin-top: 10rpx;}
.mar-s15{margin-top: 15rpx;}
.mar-s20{margin-top: 20rpx;}
.mar-s25{margin-top: 25rpx;}
.mar-s30{margin-top: 30rpx;}
.mar-s35{margin-top: 35rpx;}
.mar-s40{margin-top: 40rpx;}
.mar-s50{margin-top: 50rpx;}
.mar-s60{margin-top: 60rpx;}
.mar-s70{margin-top: 70rpx;}
.mar-s80{margin-top: 80rpx;}
.mar-x10{margin-bottom: 10rpx;}
.mar-x15{margin-bottom: 15rpx;}
.mar-x20{margin-bottom: 20rpx;}
.mar-x25{margin-bottom: 25rpx;}
.mar-x30{margin-bottom: 30rpx;}
.mar-x35{margin-bottom: 35rpx;}
.mar-x40{margin-bottom: 40rpx;}
.mar-x50{margin-bottom: 50rpx;}
.mar-x60{margin-bottom: 60rpx;}
.mar-x70{margin-bottom: 70rpx;}
.mar-x80{margin-bottom: 80rpx;}

/* 内边距 */
.pad-all10{padding: 10rpx;}
.pad-all15{padding: 15rpx;}
.pad-all20{padding: 20rpx;}
.pad-all25{padding: 25rpx;}
.pad-all30{padding: 30rpx;}
.pad-all35{padding: 35rpx;}
.pad-all40{padding: 40rpx;}

.pad-sx10{padding: 10rpx 0;}
.pad-sx15{padding: 15rpx 0;}
.pad-sx20{padding: 20rpx 0;}
.pad-sx25{padding: 25rpx 0;}
.pad-sx30{padding: 30rpx 0;}
.pad-sx35{padding: 35rpx 0;}
.pad-sx40{padding: 40rpx 0;}

.pad-zy10{padding: 0 10rpx;}
.pad-zy15{padding: 0 15rpx;}
.pad-zy20{padding: 0 20rpx;}
.pad-zy25{padding: 0 25rpx;}
.pad-zy30{padding: 0 30rpx;}
.pad-zy35{padding: 0 35rpx;}
.pad-zy40{padding: 0 40rpx;}

.pad-x130{padding-bottom: 130rpx;}
.pad-x140{padding-bottom: 140rpx;}
.pad-x150{padding-bottom: 150rpx;}
.pad-x160{padding-bottom: 160rpx;}
.pad-x170{padding-bottom: 170rpx;}
.pad-x180{padding-bottom: 180rpx;}
.pad-x190{padding-bottom: 190rpx;}

/* 字体 */
.font18{ font-size: 24rpx;}
.font20{ font-size: 24rpx;}
.font24{ font-size: 24rpx;}
.font26{ font-size: 26rpx;}
.font28{ font-size: 28rpx;}
.font30{ font-size: 30rpx;}
.font32{ font-size: 32rpx;}
.font34{ font-size: 34rpx;}
.font36{ font-size: 36rpx;}
.font38{ font-size: 38rpx;}
.font40{ font-size: 40rpx;}
.font42{ font-size: 42rpx;}
.font44{ font-size: 44rpx;}
.font46{ font-size: 46rpx;}
.font48{ font-size: 48rpx;}
.font60{ font-size: 60rpx;}

.color-ff{ color: #ffffff;}
.color-00{ color: #000000;}
.color-48{ color: #484848;}
.color-66{ color: #666666;}
.color-99{ color: #999999;}
.color-orange{color: #febf00;}
.color-red{ color: #dd062f;}
.color-8c{ color: #8c8c9b;}

/* 文字行数 */
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}

image{
	/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
	border: 0;
	/* 取消图片底侧有空白缝隙的问题 ① */
	vertical-align: middle;
	/* 取消图片底侧有空白缝隙的问题 ② */
	object-fit: cover;
}

/* 去除滚动条 */
scroll-view ::-webkit-scrollbar {
	display: none !important;  
	width: 0 !important;  
	height: 0 !important;  
	-webkit-appearance: none;  
	background: transparent;  
}

/* 圆圈中间一个原点 start */
.mo-item {
	width: 30rpx;
	height: 30rpx;
	border-radius: 100%;
	border: 2rpx solid #000000;
	box-sizing: border-box;
}
.active-item{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2rpx solid #FF0000;
}
.active-item::before{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 20rpx;
	height: 20rpx;
	border-radius: 100%;
	background-color: #FF0000;
}