water-mall/commons/style.css

/* 图片处理 */
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;
}

/* 文字行数 */
.clips {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	word-break: break-all;
}

[v-cloak] {
	display: none;
}

/* 页面样式 */
page {
	color: #333333;
}

.main {
	padding-bottom: 120rpx;
	background: #f7f7f7;
}

/* 输入默认提示 */
::-webkit-input-placeholder {
	/* WebKit browsers，webkit内核浏览器 */
	color: #8f989f;
}

:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #8f989f;
}

::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #8f989f;
}

:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	color: #8f989f;
}

img {
	border: 0;
}

ul {
	list-style: none;
}


.fs12 {
	font-size: 24rpx;
}

.fs13 {
	font-size: 26rpx;
}

.fs14 {
	font-size: 28rpx;
}

.fs15 {
	font-size: 30rpx;
}

.fs16 {
	font-size: 32rpx;
}

.fs18 {
	font-size: 36rpx;
}

.fs20 {
	font-size: 40rpx;
}

.fs25 {
	font-size: 50rpx;
}


.w50 {
	width: 100rpx;
}

.w80 {
	width: 160rpx;
}

.w120 {
	width: 240rpx;
}

.w150 {
	width: 300rpx;
}

.w200 {
	width: 400rpx;
}

.w230 {
	width: 460rpx;
}

.w250 {
	width: 500rpx;
}

.w300 {
	width: 600rpx;
}

.mt5 {
	margin-top: 10rpx;
}

.mb5 {
	margin-bottom: 10rpx;
}

.ml5 {
	margin-left: 10rpx;
}

.mr5 {
	margin-left: 10rpx;
}

.mt10 {
	margin-top: 20rpx;
}

.mb10 {
	margin-bottom: 20rpx;
}

.ml10 {
	margin-left: 20rpx;
}

.mr10 {
	margin-right: 20rpx;
}

.mt15 {
	margin-top: 30rpx;
}

.mb15 {
	margin-bottom: 30rpx;
}

.ml15 {
	margin-left: 30rpx;
}

.mr15 {
	margin-right: 30rpx;
}

.mt20 {
	margin-top: 40rpx;
}

.mb20 {
	margin-bottom: 40rpx;
}

.ml20 {
	margin-left: 40rpx;
}

.mr20 {
	margin-right: 40rpx;
}

.mt25 {
	margin-top: 50rpx;
}

.mb25 {
	margin-bottom: 50rpx;
}

.ml25 {
	margin-left: 50rpx;
}

.mr25 {
	margin-right: 50rpx;
}

.mt30 {
	margin-top: 60rpx;
}

.mb30 {
	margin-bottom: 60rpx;
}

.ml30 {
	margin-left: 60rpx;
}

.mr30 {
	margin-right: 60rpx;
}

.mt35 {
	margin-top: 70rpx;
}

.mb35 {
	margin-bottom: 70rpx;
}

.ml35 {
	margin-left: 70rpx;
}

.mr35 {
	margin-right: 70rpx;
}

.mt40 {
	margin-top: 80rpx;
}

.ml40 {
	margin-left: 80rpx;
}

.mr40 {
	margin-right: 80rpx;
}

.mb40 {
	margin-bottom: 80rpx;
}

.mt45 {
	margin-top: 90rpx;
}

.ml45 {
	margin-left: 90rpx;
}

.mr45 {
	margin-right: 90rpx;
}

.mb45 {
	margin-bottom: 90rpx;
}

.mt50 {
	margin-top: 100rpx;
}

.ml50 {
	margin-left: 100rpx;
}

.mr50 {
	margin-right: 100rpx;
}

.mb50 {
	margin-bottom: 100rpx;
}

.pt10 {
	padding-top: 20rpx;
}

.pb10 {
	padding-bottom: 20rpx;
}

.pl10 {
	padding-left: 20rpx;
}

.pr10 {
	padding-right: 20rpx;
}

.pt20 {
	padding-top: 40rpx;
}

.pb20 {
	padding-bottom: 40rpx;
}

.pl20 {
	padding-left: 40rpx;
}

.pr20 {
	padding-right: 40rpx;
}

.pt25 {
	padding-top: 50rpx;
}

.pb25 {
	padding-bottom: 50rpx;
}

.pl25 {
	padding-left: 50rpx;
}

.pr25 {
	padding-right: 50rpx;
}

.pt30 {
	padding-top: 60rpx;
}

.pb30 {
	padding-bottom: 60rpx;
}

.pl30 {
	padding-left: 60rpx;
}

.pr30 {
	padding-right: 60rpx;
}

.pt40 {
	padding-top: 80rpx;
}

.pb40 {
	padding-bottom: 80rpx;
}

.pl40 {
	padding-left: 80rpx;
}

.pr40 {
	padding-right: 80rpx;
}

.pt50 {
	padding-top: 100rpx;
}

.pb50 {
	padding-bottom: 100rpx;
}

.pl50 {
	padding-left: 100rpx;
}

.pr50 {
	padding-right: 100rpx;
}

.clr {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.tc {
	text-align: center;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}


.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.red {
	color: #ce0000;
}

.white {
	color: #FFF !important;
}

.black {
	color: #000 !important;
}

.gray {
	color: #CCC !important;
}

.dark {
	color: #999 !important;
}

.orange {
	color: #F60 !important;
}

.green {
	color: #008000 !important;
}

.blue {
	color: #06F !important;
}

.bf5 {
	background-color: #f5f5f5 !important;
}

.f5 {
	background: #ddd;
}

.bred {
	background: #ce0000;
}

.bwhite {
	background: #FFF;
}

.bblack {
	background: #000;
}

.bgray {
	background: #CCC;
}

.borange {
	background: #F60;
}

.bgreen {
	background: #008000;
}

.bblue {
	background: #06F;
}


.bd-bottom {
	border-bottom: 1px solid #ddd;
}

.flex {
	display: flex;
	align-items: center;
}