<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "./common/style/icons.css";
	@import "./uni.scss";

	page {
		background: linear-gradient(to bottom, $bg-top-color, $bg-bottom-color);
		min-height: 100vh;
		background-attachment: fixed;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	/* 自定义导航栏容器 */
	.custom-navbar {
		display: flex;
		align-items: center;
		background-color: transparent;
	}

	/* 标题 */
	.navbar-title {
		font-size: 22px;
		font-weight: bold;
	}

	/***End***/


	//自定义checkbox样式
	/* #ifdef MP-BAIDU */
	// 自定义checkbox radio样式
	swan-checkbox .swan-checkbox-input {
		border-radius: 50% !important;
		width: 32rpx !important;
		background-color: transparent !important;
		height: 32rpx !important;
		border: 2rpx solid $primary-color !important;
		font-size: 28rpx !important;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1)
	}

	swan-checkbox[checked=true] .swan-checkbox-input {
		border: none !important;
		background: transparent !important;
		border: 2rpx solid $primary-color !important
	}

	swan-checkbox[checked] .swan-checkbox-input:after {
		display: block !important;
		width: 20rpx !important;
		height: 20rpx !important;
		color: #fff !important;
		border-radius: 50% !important;
		background: $primary-color !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1)
	}


	/* 自定义radio样式 */
	radio .swan-radio-input {
		border-radius: 50% !important;
		width: 32rpx !important;
		height: 32rpx !important;
		border: 1rpx solid $primary-color !important;
		font-size: 28rpx !important;
		background-color: transparent !important;
	}

	radio .swan-radio-input.swan-radio-input-checked .swan-radio-input-border {
		background: transparent !important;
		border: 1rpx solid $primary-color !important;
	}

	radio .swan-radio-input.swan-radio-input-checked .swan-radio-input-button {
		background: $primary-color !important;
		width: 15rpx !important;
		height: 15rpx !important;
	}

	/* #endif */


	/* #ifdef H5 */
	::v-deep .uni-checkbox-input svg {
		background-color: $primary-color !important;
		border-color: $primary-color !important;
		background-clip: content-box !important;
		padding: 6rpx !important;
		box-sizing: border-box;
		border-radius: 50%;
		font-size: 24rpx !important;
		width: 24rpx;
		height: 24rpx;
	}

	::v-deep .uni-checkbox-input svg path {
		fill: $primary-color !important;
		width: 24rpx !important;
		height: 24rpx !important;
		font-size: 24rpx !important;
	}

	::v-deep .uni-checkbox-input {
		font-size: 24rpx !important;
		width: 24rpx !important;
		height: 24rpx !important;
		border-radius: 50% !important;
		background-color: transparent !important;
		border-color: $primary-color !important;
	}

	::v-deep .uni-checkbox-wrapper {
		font-size: 24rpx !important;
		font-weight: normal;
		color: $text-color;
	}

	// 自定义radio样式
	::v-deep .uni-radio-input svg {
		background-color: $primary-color !important;
		border-color: $primary-color !important;
		background-clip: content-box !important;
		padding: 6rpx !important;
		box-sizing: border-box;
		border-radius: 50%;
		font-size: 24rpx !important;
		width: 24rpx;
		height: 24rpx;
	}

	::v-deep .uni-radio-input svg path {
		fill: $primary-color !important;
		width: 24rpx !important;
		height: 24rpx !important;
		font-size: 24rpx !important;
	}

	::v-deep .uni-radio-input {
		font-size: 24rpx !important;
		width: 24rpx !important;
		height: 24rpx !important;
		border-radius: 50% !important;
		background-color: white !important;
		border-color: $primary-color !important;
	}

	::v-deep .uni-radio-wrapper {
		font-size: 24rpx !important;
		font-weight: normal;
		color: $text-color;
	}

	/* #endif */


	.mt-10 {
		margin-top: 10rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.mr-10 {
		margin-right: 10rpx;
	}

	.ml-5 {
		margin-left: 5rpx;
	}

	.star::after {
		content: "*";
		color: $red-color;
		margin-left: 6rpx;
	}

	.gray-star::after {
		content: '*';
		color: $text-gray-hint-color;
		margin-left: 6rpx;
	}

	.bottom-footer {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		padding-bottom: 40rpx;
		align-items: center;
		width: 100%;
	}

	.bottom-fixed-footer {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background-color: $white-color;
		display: flex;
		flex-direction: column;
		padding: $page-padding $page-padding 50rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.bottom-btn-green {
		background-color: $btn-green-color;
		color: white;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 5px;
		text-align: center;
	}

	.bottom-btn-green:active {
		background-color: $btn-green-color-active;
	}

	.bottom-btn-primary {
		background-color: $primary-color;
		color: white;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5px;
		text-align: center;
	}

	.bottom-btn-primary:active {
		background-color: $primary-color-active;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.mt-40 {
		margin-top: 40rpx;
	}

	.mt-160 {
		margin-top: 160rpx !important;
	}

	.mt-60 {
		margin-top: 60rpx;
	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.mr-40 {
		margin-right: 40rpx;
	}

	.ml-40 {
		margin-left: 40rpx;
	}

	.mb-40 {
		margin-bottom: 40rpx;
	}

	.mg {
		margin: 10rpx;
	}

	.pd {
		padding: 10rpx;
	}

	.mg-20 {
		margin: 20rpx;
	}

	.mg-40 {
		margin: 40rpx;
	}

	.pd-20 {
		padding: 20rpx;
	}

	.pd-40 {
		padding: 40rpx;
	}

	.border-left {
		border-top-left-radius: 5rpx;
		border-bottom-left-radius: 5rpx;
	}

	.border-right {
		border-top-right-radius: 5rpx;
		border-bottom-right-radius: 5rpx;
	}

	.divider-v {
		width: 95%;
		height: 1rpx;
		background-color: $divider-color;
		align-self: center;
	}

	.divider-h {
		width: 1px;
		height: 10px;
		background-color: $divider-color;
		padding: 0px 1px;
		margin-left: 10px;
		align-self: center;
	}

	.divider-h-white {
		width: 1rpx;
		height: 20rpx;
		background-color: $primary-color-active;
		padding: 0rpx 1rpx;
		align-self: center;
		margin-left: 20rpx;
	}

	.divider-v-100 {
		height: 1rpx;
		background-color: $divider-color;
		width: 100%;
	}

	.single-line {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.single-line-front {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		direction: rtl;
		text-align: left;
	}

	.multiple-3-ellipsis {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.multiple-2-ellipsis {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.size-16 {
		height: 16rpx;
		height: 16rpx;
	}

	.size-32 {
		width: 32rpx;
		height: 32rpx;
	}

	.size-48 {
		width: 48rpx;
		height: 48rpx;
	}

	.size-48-128 {
		width: 128rpx;
		height: 48rpx;
	}

	.size-64 {
		width: 64rpx;
		height: 64rpx;
	}

	.size-128 {
		width: 128rpx;
		height: 128rpx;
	}

	.icon-arrow-solid::after {
		content: '';
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODA2NDUxMTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDQ5IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMDA0Ljk5MTg5NCAyNDIuOTkzNDRjLTEyLjY1ODA2MS0xMi42Njg1NjgtMjcuNjYyODAyLTE4Ljk5NzU5OS00NS4wMDAyMTItMTguOTk3NTk5SDY0LjAwNDgxNmMtMTcuMzQ0NDE1IDAtMzIuMzM4NjQ5IDYuMzI5MDMtNDUuMDA3MjE3IDE4Ljk5NzU5OUM2LjMyOTAzIDI1NS42NzYwMTggMCAyNzAuNjcwMjUxIDAgMjg4LjAwNDE1OWMwIDE3LjMzMDQwNSA2LjMyOTAzIDMyLjMyNDYzOSAxOC45OTc1OTkgNDQuOTk2NzFsNDQ3Ljk5NTE4NCA0NDcuOTk1MTg0YzEyLjY4MjU3OCAxMi42Njg1NjggMjcuNjc2ODEyIDE5LjAxMTYwOSA0NS4wMDcyMTcgMTkuMDExNjA5czMyLjMzODY0OS02LjM0MzA0IDQ0Ljk5NjcxLTE5LjAxMTYwOUwxMDA0Ljk5MTg5NCAzMzIuOTk3MzY2YzEyLjY1NDU1OC0xMi42Njg1NjggMTkuMDA4MTA2LTI3LjY2MjgwMiAxOS4wMDgxMDYtNDQuOTk2NzA5IDAtMTcuMzMwNDA1LTYuMzUzNTQ4LTMyLjMyNDYzOS0xOS4wMDgxMDYtNDUuMDA3MjE3eiIgcC1pZD0iMTQwNTAiIGZpbGw9IiNkYmRiZGIiPjwvcGF0aD48L3N2Zz4=');
		display: block;
		background-size: cover;
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}



	.no-more {
		display: flex;
		align-items: center;
		width: 80%;
		margin: 40rpx 0rpx 0rpx 0rpx;
		align-self: center;
	}

	.no-more::before,
	.no-more::after {
		content: "";
		flex: 1;
		height: 1px;
		background-color: var(--divider-color);
	}

	.no-more-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: var(--divider-color);
		margin: 0 20rpx;
	}

	.uni-popup-message__box {
		text-align: center;
	}

	.uni-popup {
		z-index: 9999;
	}

	.bottom-dialog-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 30rpx;
	}

	.dialog-title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.dialog-title-txt {
		align-self: center;
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.has-icon {
		margin-left: -48rpx;
	}

	.condition-box {
		position: fixed;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		/* #ifdef MP-BAIDU */
		top: 0;
		/* #endif */
		left: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		z-index: 99;
	}

	.condition-input-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 30rpx 0rpx 30rpx;
	}

	.condition-input-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: white;
		padding: 10rpx;
		border-radius: 10rpx;
		flex: 1;
	}

	.condition-option-btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 15rpx;
		padding: 10rpx 15rpx;
		font-size: 20rpx;
		background-color: $divider-color;
	}

	.condition-option-btn:active {
		background-color: $gray-bg-color;
	}

	.condition-input-text {
		font-size: 28rpx;
		flex: 1;
		text-align: center;
		margin-right: 10rpx;
	}

	.condition-content {
		margin-top: 5rpx;
		max-height: 0vh;
		background-color: $bg-gray-shade-color;
		overflow: hidden;
		transition: max-height 0.5s ease;
	}

	.condition-content.visible {
		max-height: 100vh;
	}

	.condition-mask {
		background-color: $bg-gray-shade-color;
		height: 100vh;
	}
</style>