<script>
export default {
	globalData: {
		// netName: "/root",
		netName: "http://app.xueningbai.cn/"
	},
	onLaunch: function() {
	},
	onShow: function() {
	  const level = uni.getStorageSync("level")
     !level && uni.setStorageSync("level", "1")
	},
	onHide: function() {

	}
}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	@import "@/static/css/font.css";
	.text-plain {font-size: 26rpx; color: $text-gray;}
	.text-small {font-size: 24rpx; color: $text-gray;}
	.text-big {font-size: 28rpx; color: $text-black;}
	.text-plain-black {font-size: 26rpx; color: $text-black;}
	.text-small-black {font-size: 24rpx; color: $text-black;}
	.text-small-grey {font-size: 24rpx; color: $text-grey;}
	.text-plain-grey {font-size: 26rpx; color: $text-grey;}
	.text-blue {font-size: 1em; color:  #0000FF}
	.font-left-spacing {margin-left: 8rpx;}
	.font-right-spacing {margin-right: 8rpx;}
	.title-text {font-size: 1.1em; color: $text-black;}
	.money {color: $text-red !important; font-weight: 400;}
	.warn {color: $yellow}
	.bold {font-weight: 600;}
	html, body {
	  width: 100%;
    font-family: PingFangSC-Semibold, PingFang SC;
		
	}
	@media screen and (max-width: 319px) {
	  body {font-size: 14px}
	} 
	@media screen and (min-width: 320px) and (max-width: 480px) {
	  body {font-size: 16px !important}
	}
	@media screen and (min-width: 481px) and (max-width: 640px) {
	  body {font-size: 18px}
	}
	@media screen and (min-width: 641px) {
	  body {font-size: 18px}
	}
	ul, ol, li {
	  list-style: none;
	}
	.uni-input {
		height: 100%;
	}
	a, textarea, bottom, input {
	  text-decoration: none;
	  outline: none;
	}
	img {
	  vertical-align: middle;
	  border: 0;
	}
	input {
	  outline: none;
	}
	.panel { // 面板
		width: 96%;
		box-sizing: border-box;
	  @include YflexBox(flex-start);
		background-color: $bg-white;
		border-radius: 18rpx;
		margin: 0 auto;
		.panel-title, .panel-content, .panel-footer {
			width: 100%;
			box-sizing: border-box;
		}
		.panel-title {
			padding: 18rpx 24rpx;
			@include XflexBox(space-between);
			border-bottom: 1px solid rgba($color: $border-color,$alpha: .8);
			.title-text {
				font-size: 28rpx;
				font-weight: 600;
				color: $text-black;
			}
		}
		.panel-content {
			padding: 24rpx 18rpx;
		}
		.panel-footer {
			padding: 18rpx 24rpx;
			border-top: 1px solid rgba($color: $border-color,$alpha: .8);
			@include XflexBox(flex-end);
		}
	}
	.footer-btn {
		width: 50%;
		background-color: $yellow;
		color: $text-black;
		font-size: 28rpx;
	}
	.uni-button:after {
		border: none;
	}
	.uni-checkbox-wrapper .uni-checkbox-input {
		border-radius: 50%;
	} 
	.step {
		width: 100%;
		padding: 24rpx;
		background-color: $bg-white;
	}
	@keyframes banner {
		0% {
			opacity: 0;
			transform: translateX(-200%);
		}
		100% {
			opacity: 1;
			transform: translateX(0%);
		}
	}
	.card {
	 width: 100%;
	 background-color: $bg-white;
	 .card-title {
		 @include XflexBox(space-between);
		 width: 100%;
		 padding: 20rpx 8rpx;
		 .left, .right {
			 @include XflexBox(flex-start);
			.title-text {
				padding-left: 12rpx;
				font-size: 36rpx;
				font-weight: 600;
			}
			.text-plain {
				font-size: 24rpx;
				color: $text-black;
			}
			.link-icon {
				border-radius: 50%;
				padding: 4rpx;
				color: $text-black;
				@include XflexBox(center);	
			}
		 } 
	 }
	 .card-content {
		 width: 100%;
		 box-sizing: border-box;
		 display: flex;
		 flex-wrap: wrap;
		 padding: 0 8rpx;
		 animation: banner 800ms 0s ease-out;
		 .content-item {
			 width: 33.33%;
			 margin-bottom: 18rpx;
			 @include XflexBox(center);
			 padding: 8rpx 12rpx;
			 box-sizing: border-box;
			 position: relative;
			 z-index: 0;
			 .inner {
				 width: 100%;
				 @include YflexBox(space-between);
				 align-items: space-between;
				 .top {
					 width: 100%;
					 position: relative;
					 z-index: 1;
					 .fm-img {
						 width: 100%;
						 height: 298rpx;
						 border-radius: 16rpx;
						 border: 1px solid rgba($color: $text-grey, $alpha: .2);
					 }
					 .status {
						 width: 84rpx;
						 height: 48rpx;
						 border-radius: 4rpx;
						 position: absolute;
						 top: 8rpx;
						 right: 8rpx;
						 background-color: $yellow;
						 @include XflexBox(center);
						 font-size: 20rpx;
						 color: $text-black;
	           font-weight: 400;
					 }
					 .s2 {
						 background-color: #E2C4A5;
					 }
				 }
			   .bottom {
					 width: 100%;
					 .title-box {
						 .title-text {
							 width: 100%;
							 text-overflow: ellipsis;
							 overflow: hidden;
							 white-space: nowrap;
							 margin-top: 18rpx;
							 font-size: 30rpx;
							 color: $text-black;
							 font-weight: 400;
						 }
					 }
					 .classify {
						 width: 100%;
						 margin-top: 16rpx;
						 display: flex;
						 align-items: baseline;
	           .item {
							 font-size: 26rpx;
							 padding-right: 12rpx;
							 color: $text-gray;
						 }  						 
					 }
				 }
			 }
		 }
	 }
	 .card-footer {
		 width: 100%;
		 @include XflexBox(center);
		 padding: 20rpx 0;
		 .btn {
			 width: 90%;
			 padding: 8rpx;
			 border-radius: 20rpx;
			 background-color: $bg-color-hover;
			 font-size: .9em;
			 @include XflexBox(center);
			 color: $text-grey;
		 } 
	  }
	}
  .not-list{
  	width: 286rpx;
  	height: 320rpx;
  	position: absolute;
  	top: 344rpx;
  	left:50%;
  	transform: translateX(-50%);
  	@include YflexBox(center);
  	z-index: 2;
  	.empty {
  		position: relative;
  		width: 240rpx;
  		height: 240rpx;
  		z-index: 4;
  	}
  	.text-small-grey {
  	  margin-top: 24rpx;
  	}
  }
</style>