integral-resell/h5/static/style/app.scss

/*b-ui css */
@import "@/uni_modules/b-ui/css/main.bundle.scss";
/*uview-ui css */
@import "uview-ui/index.scss";
@import './mixin/space.scss'; // 补充uview间距类
@import './mixin/u-rest.scss'; // 重置uview样式
// @import './mixin/size.scss'; // 字体大小（需要修改默认字体时使用）

page {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	.page-bg {
		$homeBg: #FCFFF7;
		background: transparent;
		flex: 1;
		&.white-bg {
			background-color: #FFF;
		}
		/* #ifndef H5 */
		&::after {
		  content: '';
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100vw;
			height: 100vh;
		  z-index: -1;
			background-color: #F8F8F8;
			// background-image: #F8F8F8;
			background-size: cover;
			background-repeat: no-repeat;
		}
		&.home-bg {
			&::after { background-color: $homeBg; }
		}
		&.plant-notes-bg {
			&::after { background-image: linear-gradient(180deg, #DAFFD1 0%, #F8F8F8 50%, #F8F8F8 100%); }
		}
		&.garden-space-bg {
			&::after { background-image: linear-gradient(180deg, #E1FDF5 0.04%, #FFF 37.33%); }
		}
		&.white-bg {
			&::after { background-color: #FFF; }
		}
		/* #endif */
	}
}

button {
	margin: 0;
	padding: 0;
	line-height: unset;
	font-size: inherit;
	color: inherit;
	border-radius: 0;
	background: none;
	&::after { display: none !important; }
}

// 解决图片mode="widthFix"加载时被拉伸
image {
  width: 100%;
  height: auto;
}

.min-h-2 {
	min-height: 2.4em;
}
// 价格¥前加
%__priceBefore {
  font-size: $uni-font-size-sm;
	content: "¥";
}
// 价格
.price {
	&::before {
		@extend %__priceBefore;
	}
}
// 划线价
.line-price {
	text-decoration: line-through;
	&::before {
		@extend %__priceBefore;
	}
}
// 更多后加>
%__moreAfter {
  font-size: inherit;
	content: ">";
}
.more {
	&::after {
		@extend %__moreAfter;
	}
}

.pointer-none {
	pointer-events: none;
}

// 底部带圆角背景
.bottom-round {
	border-radius: 50% / 30px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.icon-check-circle-fill {
	font-size: 40rpx;
	color: $uni-theme;
}
.inline-block {
	display: inline-block;
}

// 勾选框
.check-box {
	width: 36rpx;
	height: 36rpx;
	border: 1rpx solid #EAEAEA;
	border-radius: 50%;
	box-sizing: border-box;
	// margin-right: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.active-check {
		transform: scale(1.2);
	}
}
.r-line {
	&::after {
		content: '';
		display: inline-block;
		width: 1rpx;
		height: 1em;
		background: #FFFFFF;
		margin: 0 20rpx;
		transform: translateY(.1em);
	}
}
.theme-btn {
	background: $uni-theme;
	color: #FFFFFF;
}
.head-bg-h {
	height: calc(var(--status-bar-height) + 300rpx);
}
// 首页头部背景（圆弧）
.v-linear-bg {
	background: linear-gradient(180deg, #1A6CFE 0%, #47ABFE 100%);
	// border-radius: 50% / 30px;
	border-radius: 80% / 15px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}
// 卡片盒子
.card-box {
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.06);
	border-radius: 16rpx;
	background: #FFFFFF;
}
.over-hide {
	overflow: hidden;
}
.over-x-auto {
	overflow-x: auto;
}
/* 不显示滚动条 */
.over-x-auto::-webkit-scrollbar {
  display: none;
}
scroll-view ::-webkit-scrollbar {
	display:none;
	width:0;
	height:0;
	color:transparent;
}
.block { display: block; }
.m-auto { margin: 0 auto; }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-30 { width: 30%; }
.line-default { line-height: 1.6; }
.b-text-theme { color: $uni-theme; }
.b-text-theme-d { color: $uni-theme-d; }
.b-line { border-bottom: 1rpx solid #F8F8F8; }
.b-line-d { border-bottom: 1rpx solid #EEEEEE; }
.t-line { border-top: 1rpx solid #F8F8F8; }
.l-line {
	display: flex;
	align-items: center;
	// padding: 20rpx 0 0;
	&::before {
		content: '';
		display: inline-block;
		width: 6rpx;
		height: 1.2em;
		background: $uni-theme;
		margin-right: 20rpx;
	}
}
.tb-line {
	position: relative;
	&::after {
		content: '';
		display: inline-block;
		width: 90rpx;
		height: 5rpx;
		background: linear-gradient(90deg, #47A7F8 0%, #E1F0FE 100%);
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6rpx;
		z-index: -1;
	}
}

.b-after-line { 
	position: relative;
	&::after {
		content: '';
		display: inline-block;
		width: 100%;
		margin: 0 auto -6rpx;
		height: 6rpx;
		background: $uni-theme;
		border-radius: 12rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -10rpx;
	}
}

.absolute-cover {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}