:root, page {
    --primary-color: #007aff;
    --primary-color-dark: #398ade;
    --primary-color-disabled: #9acafc;
    --primary-color-light: #ecf5ff;
    --page-bg-color: #f6f6f6;
	--text-color-light6: #666;
	--text-color-light9: #999;
	// 模块背景
	--temp-bg: #f6f6f6; //#F8F9FD
	// 外边距
	--sidebar-m: 20rpx;  // 侧边栏间距
	--top-m: 20rpx; // 上下模块之间到的距离
	--popup-sidebar-m: 30rpx;  // 弹窗的左右间距
	// 内边距
	--pad-sidebar-m: 24rpx;  // 左右间距
	--pad-top-m: 30rpx; // 上下间距
	// 卡片圆角大小
	--rounded-big: 24rpx;
	--rounded-mid: 20rpx;
	--rounded-small: 16rpx;
	// 商品图片圆角大小
	--goods-rounded-big: 20rpx;
	--goods-rounded-mid: 16rpx;
	--goods-rounded-small: 12rpx;
	// 箭头大小
	--arrow-size-big: 26rpx;
	--arrow-size-mid: 24rpx;
}
// 价格字体设置
@font-face {
    font-family: 'myFont';
	src: url('data:font/ttf;charset=utf-8;base64,[encoded data, 35544 characters]') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
.price-font{
    font-family: 'myFont','-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Helvetica', 'Segoe UI', 'Arial', 'Roboto', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei','sans-serif';
} 

// 全局基础样式
uni-page-body {
	line-height: 1.8;
	font-family: PingFang SC;
	font-size: 28rpx;
	color: #333;
}
page {
	font-family: PingFang SC;
}
input, .uni-input {
	font-size: 28rpx;
}
button{ 
	font-size: 28rpx;
	border-radius: 10rpx;
	line-height: 2.8;
}
button:after,uni-button:after {
	border: none !important;
}
button[type='primary'],uni-button[type='primary']{
	background-color: var(--primary-color) !important;
}

// 提交按钮背景颜色
.primary-btn-bg{
	// background: linear-gradient( 94deg, #FB7939 0%, #FE120E 99%), #EF000C;
	background: linear-gradient( 94deg, var(--primary-help-color2) 0%, var(--primary-color) 99%), var(--primary-color);
}

// 侧边栏宽度
.sidebar-margin{
	margin-left: var(--sidebar-m) !important;
	margin-right: var(--sidebar-m) !important;
}
// 上边距高度
.top-mar{
	margin-top: var(--top-m) !important;
}
// 圆角
.rounded-angle{
	border-radius: var(--rounded-big);
}
// 卡片模块
.card-template{
	padding: var(--pad-top-m) var(--pad-sidebar-m);
	border-radius: var(--rounded-big);
	background-color: #fff;
	box-sizing: border-box;
	.title{
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		height: 40rpx;
		line-height: 40rpx;
		margin-bottom: 30rpx;
	}
	.card-template-item{
		display: flex;
		align-items: center;
		min-height: 40rpx;
		margin-bottom: 34rpx;
		&:last-of-type{
			margin-bottom: 0;
		}
	}
}
// 标签
.tag-item{
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	font-size: 20rpx;
	border-radius: 8rpx;
}

// 放到右侧边的tab, 参考页面我的积分，任务奖励详情
.side-tab{
	@apply flex items-center absolute right-0;
	top: 50rpx;
	z-index: 10;
	padding: 0 14rpx;
	height: 48rpx;
	background-color: rgba(51,51,51,.2);
	border-top-left-radius: 35rpx;
	border-bottom-left-radius: 35rpx;
	.icon{
		font-size: 24rpx;
		color: #fff;
		margin-right: 8rpx;
	}
	.desc{
		font-size: 24rpx;
		color: #fff;
	}
	
}

// 空页面
.empty-page{
	padding-top: 120rpx;
	margin: var(--top-m) auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--rounded-big);
	width: 710rpx;
	height: 710rpx;
	background-color: #fff; 
	box-sizing: border-box;
	.img{
		width: 400rpx;
		height: 300rpx;
	}
	.desc{
		font-size: 26rpx;
		color: var(--text-color-light9);
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 260rpx;
		height: 66rpx;
		font-size: 26rpx;
		margin-top: 40rpx;
		color: var(--primary-color);
		border: 2rpx solid var(--primary-color);
		border-radius: 100rpx;
	}
}
// 空页面
.empty-page-popup{
	margin: var(--top-m) auto 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: var(--rounded-big);
	height: 340rpx;
	background-color: #fff; 
	box-sizing: border-box;
	.img{
		width: 320rpx;
		height: 240rpx;
	}
	.desc{
		font-size: 26rpx;
		color: var(--text-color-light9);
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 260rpx;
		height: 66rpx;
		font-size: 26rpx;
		margin-top: 40rpx;
		color: var(--primary-color);
		border: 2rpx solid var(--primary-color);
		border-radius: 100rpx;
	}
}
// 搜索input
.search-input{
	@apply flex-1 flex items-center;
	height: 60rpx;
	background-color: #f6f6f6; //#F8F9FD
	padding-left: 30rpx;
	padding-right: 30rpx;
	border-radius: 100rpx;
	.input{
		@apply flex-1;
		font-size: 24rpx;
		padding-right: 32rpx;
		height: 100%;
	}
	.clear{
		font-size: 24rpx;
		color: #999;
		line-height: 1;
	}
	.btn{
		margin-bottom: -2rpx;
		margin-right: 18rpx;
		font-size: 24rpx;
		color: #333;
	}
}


// 适用于左边tab切换，右边是日期；参考页面如：我的佣金、销售奖励
.tab-style-1{
	@apply box-border flex items-center justify-between;
	padding: 0 30rpx 20rpx;
	.tab-left{
		@apply flex whitespace-nowrap;
		.tab-left-item{
			@apply font-400;
			margin-left: 0;
			margin-right: 40rpx;
			color: #333;
			line-height: 40rpx;
			font-size: 28rpx;
			&.class-select{
				position: relative;
				font-weight: 500;
				color: var(--primary-color);
				&::before {
					content: "";
					position: absolute;
					bottom: -14rpx;
					height: 6rpx;
					border-radius: 100rpx;
					background-color: var(--primary-color);
					width: 40rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.tab-right{
		@apply flex items-baseline;
		height: 34rpx;
		line-height: 1;
		.tab-right-date{
			font-size: 28rpx !important;
			color: #333;
			margin-right: 10rpx;
		}
		.tab-right-icon{
			font-size: 28rpx !important;
		}
	}
}
//普通tab切换样式
.tab-style-2{
	@apply box-border bg-white;
	padding: 0 30rpx;
	.tab-content{
		@apply flex whitespace-nowrap justify-between;
		height: 88rpx;
		.tab-items{
			line-height: 88rpx;
			font-weight: 400;
			font-size: 28rpx;
			&.class-select{
				position: relative;
				font-weight: 500;
				color: var(--primary-color);
				&::before{
					content: "";
					position: absolute;
					bottom: 10rpx;
					width: 40rpx;
					height:6rpx;
					border-radius: 4rpx;
					background-color: var(--primary-color);
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}
//两个tab选项卡样式
.tab-style-3{
	@apply flex whitespace-nowrap justify-around box-border bg-white;
	height: 88rpx;
	
	.tab-items{
		@apply flex-1;
		line-height: 88rpx;
		font-weight: 400;
		font-size: 28rpx;
		text-align: center;
		margin:0 var(--sidebar-m);
		&.class-select{
			position: relative;
			font-weight: 500;
			color: var(--primary-color);
			&::before{
				content: "";
				position: absolute;
				bottom: 10rpx;
				width: 40rpx;
				height:6rpx;
				border-radius: 4rpx;
				background-color: var(--primary-color);
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	
}
// 弹窗
.popup-common{
	.title{
		font-weight: 500;
		text-align: center;
		font-size: 32rpx;
		padding-top: 36rpx;
		line-height: 1;
		padding-bottom: 56rpx;
	}
	.btn-wrap{
		padding: 20rpx 20rpx 30rpx;
		.btn{
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
}

// 公共表单
.common-form{
	.common-form-item{
		display: flex;
		align-items: center;
		height: 90rpx;
		margin-top: 16rpx;
		&:first-of-type{
			margin-top: 0;
		}
		.label{
			width: 200rpx;
			font-size: 28rpx;
		}
		.val{
			flex: 1;
			font-size: 28rpx;
		}
		.switch{
			.uni-switch-input{
				width: 84rpx;
				height: 42rpx;
				&::after{
					width: 42rpx;
					height: 42rpx;
					top: -2rpx;
				}
				&::before{
					width: 84rpx;
					height: 42rpx;
					top: -2rpx;
					background-color: var(--temp-bg);
					border-color: var(--temp-bg);
				}
			}
			.uni-switch-input-checked{
				background-color: var(--primary-color);
				border-color: var(--primary-color);
			}
		}
	}
}

/*********** 底部按钮 - start ，适用于按钮定位到底部||同屏按钮||苹果兼容，实例：添加地址，编辑会员账号 **************/
.common-tab-bar-placeholder {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 110rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 110rpx);
}

.common-tab-bar {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
/*********** 底部按钮 - end ，适用于按钮定位到底部||同屏按钮||苹果兼容，实例：添加地址，编辑会员账号 **************/


// tab
.u-tabbar .u-border-top{
	border-color: #f6f6f6 !important;
}

.flex-center{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-between-center{
	display: flex;
	align-items: center;
	justify-content: space-between;;
}

/* 单行超出隐藏 */
.using-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: break-spaces;
}

/* 多行超出隐藏 */
.multi-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mb-ios{
  margin-bottom:constant(safe-area-inset-bottom);
  margin-bottom:env(safe-area-inset-bottom);
}

.pb-ios{
  padding-bottom:constant(safe-area-inset-bottom);
  padding-bottom:env(safe-area-inset-bottom);
}

// 防止穿透
.u-popup .u-transition {
	touch-action: none;
}

// 去掉uveiew 点击时变灰【针对于微信小程序处理，官方提供的方法，在小程序中不起作用】
.u-button.u-button--active:before{
	opacity: 0 !important;
}

/****************** 弹窗-start *********************/
// 弹窗圆角[从下往上弹窗]
.u-popup[type="bottom"] .u-popup__content, .u-popup .u-slide-up-enter-to .u-popup__content{
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
	overflow: hidden;
}
// 防止覆盖住图片放大
.u-popup :deep(.u-transition){
	z-index: 999 !important;
}
/****************** 弹窗-end *********************/

/****************** u-cell-start *********************/
.u-cell-group .u-cell__body__content{
	line-height: 1;
}
.u-cell-group .u-cell__right-icon-wrap .uicon-arrow-right{
	font-size: 28rpx !important;
	color: #999;
}
/****************** u-cell-end *********************/

/******************** u-toolbar__wrapper__confirm start **********************/
.u-toolbar__wrapper__confirm{
	color: var(--primary-color) !important;
}
/******************** u-toolbar__wrapper__confirm end **********************/
/******************** 物流 state **********************/
.u-steps-item__line.u-steps-item__line--column{
	height:100% !important;
}
/******************** 物流 state **********************/

/******************** mescroll state **********************/
.mescroll-upwarp{
	opacity: 0;
}
/******************** mescroll end **********************/

/******************** u-switch state **********************/
// 解决u-switch在小程序上点击会出现高亮的情况
/* #ifdef MP */
.u-switch{
	cursor: inherit !important;
}
/* #endif */
/******************** u-switch end **********************/

/******************** 表单组件兼容性 start **********************/
/* #ifdef MP */
.form-item-frame .u-checkbox .u-checkbox__icon-wrap{
	width: 30rpx !important;
	height: 30rpx !important;
}
.form-item-frame .u-radio-group .u-radio__icon-wrap{
	width: 30rpx !important;
	height: 30rpx !important;
}
.form-item-frame .u-picker .u-toolbar__wrapper__cancel, .form-item-frame .u-picker .u-toolbar__wrapper__confirm{
	font-size: 28rpx !important;
}
/* #endif */

.form-item-frame .calendar-wrap .u-calendar ::v-deep .u-calendar-header__title, .form-item-frame .calendar-wrap .u-calendar ::v-deep .u-calendar-header__subtitle,  .form-item-frame .calendar-wrap .u-calendar ::v-deep .u-calendar-month__title{
	display: block;
}
.form-item-frame .calendar-wrap .u-calendar .u-calendar-header__title, .u-calendar-header__subtitle, .u-calendar-month__title{
	display: block;
}
/******************** 表单组件兼容性 end **********************/


.information-filling .u-form .u-form-item__body__left__content__label{
	font-size: 28rpx !important;
}
.information-filling .u-line{
	border-color: #dddddd !important;
}
.order-grey-hollow-btn{
	border: 2rpx solid #ccc;
	height: 56rpx;
	font-size: 24rpx;
	background-color: #fff;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 0 24rpx;
	min-width: 144rpx;
	color: #333;
}