diff --git a/App.vue b/App.vue
index e9a0066..c0dc4a9 100644
--- a/App.vue
+++ b/App.vue
@@ -17,5 +17,47 @@
 	@import './colorui/main.css';
 	@import './colorui/icon.css';
 	@import "@/colorui/animation.css";
+	@import '@/common/styles/common.css';
 	/*每个页面公共css */
+	
+	// loading加载
+	.loading-more {
+		align-items: center;
+		justify-content: center;
+		padding-top: 10px;
+		padding-bottom: 10px;
+		text-align: center;
+		font-size: 28rpx;
+		color: #999;
+	}
+	.loading-more-text::before {
+		content: '';
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
+		animation: weuiLoading 1s steps(12, end) infinite;
+		background-repeat: no-repeat;
+		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
+		background-size: 100%;
+	}
+	@-webkit-keyframes weuiLoading {
+		0% {
+			transform: rotate3d(0, 0, 1, 0deg);
+		}
+	
+		100% {
+			transform: rotate3d(0, 0, 1, 360deg);
+		}
+	}
+	@keyframes weuiLoading {
+		0% {
+			transform: rotate3d(0, 0, 1, 0deg);
+		}
+	
+		100% {
+			transform: rotate3d(0, 0, 1, 360deg);
+		}
+	}
 </style>
diff --git a/common/styles/common.css b/common/styles/common.css
new file mode 100644
index 0000000..b97fda2
--- /dev/null
+++ b/common/styles/common.css
@@ -0,0 +1,2366 @@
+/* 公共的 */
+
+/* button */
+button::after {
+	border: 0;
+}
+
+/* radio/checkbox */
+uni-radio .uni-radio-input {
+	width: 30rpx;
+	height: 30rpx;
+}
+
+/* #ifdef H5 */
+radio .uni-radio-input,
+checkbox .uni-checkbox-input {
+	border-radius: 50%;
+	transform: scale(0.8);
+}
+
+radio .uni-radio-input.uni-radio-input-checked,
+checkbox .uni-checkbox-input.uni-checkbox-input-checked {
+	border-radius: 50%;
+	border: 1px solid #FF4B48 !important;
+	background: #FF4B48 !important;
+	color: #FFFFFF !important;
+}
+
+radio .uni-radio-input.uni-radio-input-checked::before,
+checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
+	font-size: 13px;
+}
+
+radio:not([disabled]) .uni-radio-input:hover,
+checkbox:not([disabled]) .uni-checkbox-input:hover {
+	border-color: #d1d1d1 !important;
+}
+
+/* #endif */
+/* #ifdef APP-PLUS || MP */
+radio .wx-radio-input,
+checkbox .wx-checkbox-input {
+	border-radius: 50%;
+	transform: scale(0.8);
+}
+
+radio .wx-radio-input.wx-radio-input-checked,
+checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+	border-radius: 50%;
+	border: 1px solid #FF4B48 !important;
+	background: #FF4B48 !important;
+	color: #FFFFFF !important;
+}
+
+radio .wx-radio-input.wx-radio-input-checked::before,
+checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
+	font-size: 18px;
+}
+
+radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
+	border-color: #d1d1d1 !important;
+}
+
+
+
+/* 常用的 */
+.lf-w-100 {
+	width: 100%;
+}
+
+.lf-h-100 {
+	height: 100%;
+}
+
+.lf-flex {
+	display: flex;
+	align-items: center;
+}
+
+.lf-flex-1 {
+	flex: 1;
+}
+
+.lf-flex-wrap {
+	flex-wrap: wrap;
+}
+
+.lf-row-between {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.lf-row-round {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.lf-row-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.lf-row-left {
+	display: flex;
+	align-items: center;
+	justify-content: left;
+}
+
+.lf-row-right {
+	display: flex;
+	align-items: center;
+	justify-content: right;
+}
+
+.lf-flex-column {
+	display: flex;
+	flex-direction: column;
+}
+
+.lf-flex-wrap {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.lf-line-1{
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.lf-line-2 {
+	display: -webkit-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.lf-line-3 {
+	display: -webkit-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+}
+
+.lf-line-4 {
+	display: -webkit-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: 4;
+	-webkit-box-orient: vertical;
+}
+
+.lf-font-24 {
+	font-size: 24rpx !important;
+}
+
+.lf-font-25 {
+	font-size: 25rpx !important;
+}
+
+.lf-font-26 {
+	font-size: 26rpx !important;
+}
+
+.lf-font-27 {
+	font-size: 27rpx !important;
+}
+
+.lf-font-28 {
+	font-size: 28rpx !important;
+}
+
+.lf-font-29 {
+	font-size: 29rpx !important;
+}
+
+.lf-font-30 {
+	font-size: 30rpx !important;
+}
+
+.lf-font-31 {
+	font-size: 31rpx !important;
+}
+
+.lf-font-32 {
+	font-size: 32rpx !important;
+}
+
+.lf-font-33 {
+	font-size: 33rpx !important;
+}
+
+.lf-font-34 {
+	font-size: 34rpx !important;
+}
+
+.lf-font-35 {
+	font-size: 35rpx !important;
+}
+
+.lf-font-36 {
+	font-size: 36rpx !important;
+}
+
+.lf-font-37 {
+	font-size: 37rpx !important;
+}
+
+.lf-font-38 {
+	font-size: 38rpx !important;
+}
+
+.lf-font-39 {
+	font-size: 39rpx !important;
+}
+
+.lf-font-40 {
+	font-size: 40rpx !important;
+}
+
+.lf-font-41 {
+	font-size: 41rpx !important;
+}
+
+.lf-font-42 {
+	font-size: 42rpx !important;
+}
+
+.lf-font-43 {
+	font-size: 43rpx !important;
+}
+
+.lf-font-44 {
+	font-size: 44rpx !important;
+}
+
+.lf-font-45 {
+	font-size: 45rpx !important;
+}
+
+.lf-font-46 {
+	font-size: 46rpx !important;
+}
+
+.lf-font-47 {
+	font-size: 47rpx !important;
+}
+
+.lf-font-48 {
+	font-size: 48rpx !important;
+}
+
+.lf-font-49 {
+	font-size: 49rpx !important;
+}
+
+.lf-font-50 {
+	font-size: 50rpx !important;
+}
+
+.lf-font-60 {
+	font-size: 60rpx !important;
+}
+
+.lf-font-70 {
+	font-size: 70rpx !important;
+}
+
+.lf-font-80 {
+	font-size: 80rpx !important;
+}
+
+.lf-font-bold {
+	font-weight: bold;
+}
+
+.lf-color-primary {
+	color: #FA4427 !important;
+}
+
+.lf-bg-primary {
+	background: #FA4427 !important;
+}
+
+.lf-color-secondary {
+	color: #FE8800 !important;
+}
+
+.lf-bg-secondary {
+	background: #FE8800 !important;
+}
+
+.lf-color-black {
+	color: #222222 !important;
+}
+
+.lf-bg-black {
+	background: #222222 !important;
+}
+
+.lf-color-white {
+	color: #FFFFFF !important;
+}
+
+.lf-bg-white {
+	background: #FFFFFF !important;
+}
+
+.lf-color-gray {
+	color: #656565 !important;
+}
+
+.lf-bg-gray {
+	background: #656565 !important;
+}
+
+.lf-color-999{
+	color: #999999 !important;
+}
+.lf-color-666{
+	color: #666666 !important;
+}
+.lf-opacity{
+	opacity: .5;
+}
+
+.lf-text-left {
+	text-align: left !important;
+}
+
+.lf-text-center {
+	text-align: center !important;
+}
+
+.lf-text-right {
+	text-align: right !important;
+}
+
+.lf-border {
+	border: 1px solid #EEEEEE;
+}
+
+.lf-border-radius {
+	border-radius: 8rpx;
+}
+
+.lf-border-top {
+	border-top: 1px solid #EEEEEE;
+}
+
+.lf-border-right {
+	border-right: 1px solid #EEEEEE;
+}
+
+.lf-border-bottom {
+	border-bottom: 1px solid #EEEEEE;
+}
+
+.lf-border-left {
+	border-left: 1px solid #EEEEEE;
+}
+
+.lf-m-1 {
+	margin: 1rpx !important;
+}
+
+.lf-p-1 {
+	padding: 1rpx !important;
+}
+
+.lf-m-2 {
+	margin: 2rpx !important;
+}
+
+.lf-p-2 {
+	padding: 2rpx !important;
+}
+
+.lf-m-3 {
+	margin: 3rpx !important;
+}
+
+.lf-p-3 {
+	padding: 3rpx !important;
+}
+
+.lf-m-4 {
+	margin: 4rpx !important;
+}
+
+.lf-p-4 {
+	padding: 4rpx !important;
+}
+
+.lf-m-5 {
+	margin: 5rpx !important;
+}
+
+.lf-p-5 {
+	padding: 5rpx !important;
+}
+
+.lf-m-6 {
+	margin: 6rpx !important;
+}
+
+.lf-p-6 {
+	padding: 6rpx !important;
+}
+
+.lf-m-7 {
+	margin: 7rpx !important;
+}
+
+.lf-p-7 {
+	padding: 7rpx !important;
+}
+
+.lf-m-8 {
+	margin: 8rpx !important;
+}
+
+.lf-p-8 {
+	padding: 8rpx !important;
+}
+
+.lf-m-9 {
+	margin: 9rpx !important;
+}
+
+.lf-p-9 {
+	padding: 9rpx !important;
+}
+
+.lf-m-10 {
+	margin: 10rpx !important;
+}
+
+.lf-p-10 {
+	padding: 10rpx !important;
+}
+
+.lf-m-11 {
+	margin: 11rpx !important;
+}
+
+.lf-p-11 {
+	padding: 11rpx !important;
+}
+
+.lf-m-12 {
+	margin: 12rpx !important;
+}
+
+.lf-p-12 {
+	padding: 12rpx !important;
+}
+
+.lf-m-13 {
+	margin: 13rpx !important;
+}
+
+.lf-p-13 {
+	padding: 13rpx !important;
+}
+
+.lf-m-14 {
+	margin: 14rpx !important;
+}
+
+.lf-p-14 {
+	padding: 14rpx !important;
+}
+
+.lf-m-15 {
+	margin: 15rpx !important;
+}
+
+.lf-p-15 {
+	padding: 15rpx !important;
+}
+
+.lf-m-16 {
+	margin: 16rpx !important;
+}
+
+.lf-p-16 {
+	padding: 16rpx !important;
+}
+
+.lf-m-17 {
+	margin: 17rpx !important;
+}
+
+.lf-p-17 {
+	padding: 17rpx !important;
+}
+
+.lf-m-18 {
+	margin: 18rpx !important;
+}
+
+.lf-p-18 {
+	padding: 18rpx !important;
+}
+
+.lf-m-19 {
+	margin: 19rpx !important;
+}
+
+.lf-p-19 {
+	padding: 19rpx !important;
+}
+
+.lf-m-20 {
+	margin: 20rpx !important;
+}
+
+.lf-p-20 {
+	padding: 20rpx !important;
+}
+
+.lf-m-21 {
+	margin: 21rpx !important;
+}
+
+.lf-p-21 {
+	padding: 21rpx !important;
+}
+
+.lf-m-22 {
+	margin: 22rpx !important;
+}
+
+.lf-p-22 {
+	padding: 22rpx !important;
+}
+
+.lf-m-23 {
+	margin: 23rpx !important;
+}
+
+.lf-p-23 {
+	padding: 23rpx !important;
+}
+
+.lf-m-24 {
+	margin: 24rpx !important;
+}
+
+.lf-p-24 {
+	padding: 24rpx !important;
+}
+
+.lf-m-25 {
+	margin: 25rpx !important;
+}
+
+.lf-p-25 {
+	padding: 25rpx !important;
+}
+
+.lf-m-26 {
+	margin: 26rpx !important;
+}
+
+.lf-p-26 {
+	padding: 26rpx !important;
+}
+
+.lf-m-27 {
+	margin: 27rpx !important;
+}
+
+.lf-p-27 {
+	padding: 27rpx !important;
+}
+
+.lf-m-28 {
+	margin: 28rpx !important;
+}
+
+.lf-p-28 {
+	padding: 28rpx !important;
+}
+
+.lf-m-29 {
+	margin: 29rpx !important;
+}
+
+.lf-p-29 {
+	padding: 29rpx !important;
+}
+
+.lf-m-30 {
+	margin: 30rpx !important;
+}
+
+.lf-p-30 {
+	padding: 30rpx !important;
+}
+
+.lf-m-31 {
+	margin: 31rpx !important;
+}
+
+.lf-p-31 {
+	padding: 31rpx !important;
+}
+
+.lf-m-32 {
+	margin: 32rpx !important;
+}
+
+.lf-p-32 {
+	padding: 32rpx !important;
+}
+
+.lf-m-33 {
+	margin: 33rpx !important;
+}
+
+.lf-p-33 {
+	padding: 33rpx !important;
+}
+
+.lf-m-34 {
+	margin: 34rpx !important;
+}
+
+.lf-p-34 {
+	padding: 34rpx !important;
+}
+
+.lf-m-35 {
+	margin: 35rpx !important;
+}
+
+.lf-p-35 {
+	padding: 35rpx !important;
+}
+
+.lf-m-36 {
+	margin: 36rpx !important;
+}
+
+.lf-p-36 {
+	padding: 36rpx !important;
+}
+
+.lf-m-37 {
+	margin: 37rpx !important;
+}
+
+.lf-p-37 {
+	padding: 37rpx !important;
+}
+
+.lf-m-38 {
+	margin: 38rpx !important;
+}
+
+.lf-p-38 {
+	padding: 38rpx !important;
+}
+
+.lf-m-39 {
+	margin: 39rpx !important;
+}
+
+.lf-p-39 {
+	padding: 39rpx !important;
+}
+
+.lf-m-40 {
+	margin: 40rpx !important;
+}
+
+.lf-p-40 {
+	padding: 40rpx !important;
+}
+
+.lf-m-41 {
+	margin: 41rpx !important;
+}
+
+.lf-p-41 {
+	padding: 41rpx !important;
+}
+
+.lf-m-42 {
+	margin: 42rpx !important;
+}
+
+.lf-p-42 {
+	padding: 42rpx !important;
+}
+
+.lf-m-43 {
+	margin: 43rpx !important;
+}
+
+.lf-p-43 {
+	padding: 43rpx !important;
+}
+
+.lf-m-44 {
+	margin: 44rpx !important;
+}
+
+.lf-p-44 {
+	padding: 44rpx !important;
+}
+
+.lf-m-45 {
+	margin: 45rpx !important;
+}
+
+.lf-p-45 {
+	padding: 45rpx !important;
+}
+
+.lf-m-46 {
+	margin: 46rpx !important;
+}
+
+.lf-p-46 {
+	padding: 46rpx !important;
+}
+
+.lf-m-47 {
+	margin: 47rpx !important;
+}
+
+.lf-p-47 {
+	padding: 47rpx !important;
+}
+
+.lf-m-48 {
+	margin: 48rpx !important;
+}
+
+.lf-p-48 {
+	padding: 48rpx !important;
+}
+
+.lf-m-49 {
+	margin: 49rpx !important;
+}
+
+.lf-p-49 {
+	padding: 49rpx !important;
+}
+
+.lf-m-50 {
+	margin: 50rpx !important;
+}
+
+.lf-p-50 {
+	padding: 50rpx !important;
+}
+
+.lf-m-t-1 {
+	margin-top: 1rpx !important;
+}
+
+.lf-p-t-1 {
+	padding-top: 1rpx !important;
+}
+
+.lf-m-r-1 {
+	margin-right: 1rpx !important;
+}
+
+.lf-p-r-1 {
+	padding-right: 1rpx !important;
+}
+
+.lf-m-b-1 {
+	margin-bottom: 1rpx !important;
+}
+
+.lf-p-b-1 {
+	padding-bottom: 1rpx !important;
+}
+
+.lf-m-l-1 {
+	margin-left: 1rpx !important;
+}
+
+.lf-p-l-1 {
+	padding-left: 1rpx !important;
+}
+
+.lf-m-t-2 {
+	margin-top: 2rpx !important;
+}
+
+.lf-p-t-2 {
+	padding-top: 2rpx !important;
+}
+
+.lf-m-r-2 {
+	margin-right: 2rpx !important;
+}
+
+.lf-p-r-2 {
+	padding-right: 2rpx !important;
+}
+
+.lf-m-b-2 {
+	margin-bottom: 2rpx !important;
+}
+
+.lf-p-b-2 {
+	padding-bottom: 2rpx !important;
+}
+
+.lf-m-l-2 {
+	margin-left: 2rpx !important;
+}
+
+.lf-p-l-2 {
+	padding-left: 2rpx !important;
+}
+
+.lf-m-t-3 {
+	margin-top: 3rpx !important;
+}
+
+.lf-p-t-3 {
+	padding-top: 3rpx !important;
+}
+
+.lf-m-r-3 {
+	margin-right: 3rpx !important;
+}
+
+.lf-p-r-3 {
+	padding-right: 3rpx !important;
+}
+
+.lf-m-b-3 {
+	margin-bottom: 3rpx !important;
+}
+
+.lf-p-b-3 {
+	padding-bottom: 3rpx !important;
+}
+
+.lf-m-l-3 {
+	margin-left: 3rpx !important;
+}
+
+.lf-p-l-3 {
+	padding-left: 3rpx !important;
+}
+
+.lf-m-t-4 {
+	margin-top: 4rpx !important;
+}
+
+.lf-p-t-4 {
+	padding-top: 4rpx !important;
+}
+
+.lf-m-r-4 {
+	margin-right: 4rpx !important;
+}
+
+.lf-p-r-4 {
+	padding-right: 4rpx !important;
+}
+
+.lf-m-b-4 {
+	margin-bottom: 4rpx !important;
+}
+
+.lf-p-b-4 {
+	padding-bottom: 4rpx !important;
+}
+
+.lf-m-l-4 {
+	margin-left: 4rpx !important;
+}
+
+.lf-p-l-4 {
+	padding-left: 4rpx !important;
+}
+
+.lf-m-t-5 {
+	margin-top: 5rpx !important;
+}
+
+.lf-p-t-5 {
+	padding-top: 5rpx !important;
+}
+
+.lf-m-r-5 {
+	margin-right: 5rpx !important;
+}
+
+.lf-p-r-5 {
+	padding-right: 5rpx !important;
+}
+
+.lf-m-b-5 {
+	margin-bottom: 5rpx !important;
+}
+
+.lf-p-b-5 {
+	padding-bottom: 5rpx !important;
+}
+
+.lf-m-l-5 {
+	margin-left: 5rpx !important;
+}
+
+.lf-p-l-5 {
+	padding-left: 5rpx !important;
+}
+
+.lf-m-t-6 {
+	margin-top: 6rpx !important;
+}
+
+.lf-p-t-6 {
+	padding-top: 6rpx !important;
+}
+
+.lf-m-r-6 {
+	margin-right: 6rpx !important;
+}
+
+.lf-p-r-6 {
+	padding-right: 6rpx !important;
+}
+
+.lf-m-b-6 {
+	margin-bottom: 6rpx !important;
+}
+
+.lf-p-b-6 {
+	padding-bottom: 6rpx !important;
+}
+
+.lf-m-l-6 {
+	margin-left: 6rpx !important;
+}
+
+.lf-p-l-6 {
+	padding-left: 6rpx !important;
+}
+
+.lf-m-t-7 {
+	margin-top: 7rpx !important;
+}
+
+.lf-p-t-7 {
+	padding-top: 7rpx !important;
+}
+
+.lf-m-r-7 {
+	margin-right: 7rpx !important;
+}
+
+.lf-p-r-7 {
+	padding-right: 7rpx !important;
+}
+
+.lf-m-b-7 {
+	margin-bottom: 7rpx !important;
+}
+
+.lf-p-b-7 {
+	padding-bottom: 7rpx !important;
+}
+
+.lf-m-l-7 {
+	margin-left: 7rpx !important;
+}
+
+.lf-p-l-7 {
+	padding-left: 7rpx !important;
+}
+
+.lf-m-t-8 {
+	margin-top: 8rpx !important;
+}
+
+.lf-p-t-8 {
+	padding-top: 8rpx !important;
+}
+
+.lf-m-r-8 {
+	margin-right: 8rpx !important;
+}
+
+.lf-p-r-8 {
+	padding-right: 8rpx !important;
+}
+
+.lf-m-b-8 {
+	margin-bottom: 8rpx !important;
+}
+
+.lf-p-b-8 {
+	padding-bottom: 8rpx !important;
+}
+
+.lf-m-l-8 {
+	margin-left: 8rpx !important;
+}
+
+.lf-p-l-8 {
+	padding-left: 8rpx !important;
+}
+
+.lf-m-t-9 {
+	margin-top: 9rpx !important;
+}
+
+.lf-p-t-9 {
+	padding-top: 9rpx !important;
+}
+
+.lf-m-r-9 {
+	margin-right: 9rpx !important;
+}
+
+.lf-p-r-9 {
+	padding-right: 9rpx !important;
+}
+
+.lf-m-b-9 {
+	margin-bottom: 9rpx !important;
+}
+
+.lf-p-b-9 {
+	padding-bottom: 9rpx !important;
+}
+
+.lf-m-l-9 {
+	margin-left: 9rpx !important;
+}
+
+.lf-p-l-9 {
+	padding-left: 9rpx !important;
+}
+
+.lf-m-t-10 {
+	margin-top: 10rpx !important;
+}
+
+.lf-p-t-10 {
+	padding-top: 10rpx !important;
+}
+
+.lf-m-r-10 {
+	margin-right: 10rpx !important;
+}
+
+.lf-p-r-10 {
+	padding-right: 10rpx !important;
+}
+
+.lf-m-b-10 {
+	margin-bottom: 10rpx !important;
+}
+
+.lf-p-b-10 {
+	padding-bottom: 10rpx !important;
+}
+
+.lf-m-l-10 {
+	margin-left: 10rpx !important;
+}
+
+.lf-p-l-10 {
+	padding-left: 10rpx !important;
+}
+
+.lf-m-t-11 {
+	margin-top: 11rpx !important;
+}
+
+.lf-p-t-11 {
+	padding-top: 11rpx !important;
+}
+
+.lf-m-r-11 {
+	margin-right: 11rpx !important;
+}
+
+.lf-p-r-11 {
+	padding-right: 11rpx !important;
+}
+
+.lf-m-b-11 {
+	margin-bottom: 11rpx !important;
+}
+
+.lf-p-b-11 {
+	padding-bottom: 11rpx !important;
+}
+
+.lf-m-l-11 {
+	margin-left: 11rpx !important;
+}
+
+.lf-p-l-11 {
+	padding-left: 11rpx !important;
+}
+
+.lf-m-t-12 {
+	margin-top: 12rpx !important;
+}
+
+.lf-p-t-12 {
+	padding-top: 12rpx !important;
+}
+
+.lf-m-r-12 {
+	margin-right: 12rpx !important;
+}
+
+.lf-p-r-12 {
+	padding-right: 12rpx !important;
+}
+
+.lf-m-b-12 {
+	margin-bottom: 12rpx !important;
+}
+
+.lf-p-b-12 {
+	padding-bottom: 12rpx !important;
+}
+
+.lf-m-l-12 {
+	margin-left: 12rpx !important;
+}
+
+.lf-p-l-12 {
+	padding-left: 12rpx !important;
+}
+
+.lf-m-t-13 {
+	margin-top: 13rpx !important;
+}
+
+.lf-p-t-13 {
+	padding-top: 13rpx !important;
+}
+
+.lf-m-r-13 {
+	margin-right: 13rpx !important;
+}
+
+.lf-p-r-13 {
+	padding-right: 13rpx !important;
+}
+
+.lf-m-b-13 {
+	margin-bottom: 13rpx !important;
+}
+
+.lf-p-b-13 {
+	padding-bottom: 13rpx !important;
+}
+
+.lf-m-l-13 {
+	margin-left: 13rpx !important;
+}
+
+.lf-p-l-13 {
+	padding-left: 13rpx !important;
+}
+
+.lf-m-t-14 {
+	margin-top: 14rpx !important;
+}
+
+.lf-p-t-14 {
+	padding-top: 14rpx !important;
+}
+
+.lf-m-r-14 {
+	margin-right: 14rpx !important;
+}
+
+.lf-p-r-14 {
+	padding-right: 14rpx !important;
+}
+
+.lf-m-b-14 {
+	margin-bottom: 14rpx !important;
+}
+
+.lf-p-b-14 {
+	padding-bottom: 14rpx !important;
+}
+
+.lf-m-l-14 {
+	margin-left: 14rpx !important;
+}
+
+.lf-p-l-14 {
+	padding-left: 14rpx !important;
+}
+
+.lf-m-t-15 {
+	margin-top: 15rpx !important;
+}
+
+.lf-p-t-15 {
+	padding-top: 15rpx !important;
+}
+
+.lf-m-r-15 {
+	margin-right: 15rpx !important;
+}
+
+.lf-p-r-15 {
+	padding-right: 15rpx !important;
+}
+
+.lf-m-b-15 {
+	margin-bottom: 15rpx !important;
+}
+
+.lf-p-b-15 {
+	padding-bottom: 15rpx !important;
+}
+
+.lf-m-l-15 {
+	margin-left: 15rpx !important;
+}
+
+.lf-p-l-15 {
+	padding-left: 15rpx !important;
+}
+
+.lf-m-t-16 {
+	margin-top: 16rpx !important;
+}
+
+.lf-p-t-16 {
+	padding-top: 16rpx !important;
+}
+
+.lf-m-r-16 {
+	margin-right: 16rpx !important;
+}
+
+.lf-p-r-16 {
+	padding-right: 16rpx !important;
+}
+
+.lf-m-b-16 {
+	margin-bottom: 16rpx !important;
+}
+
+.lf-p-b-16 {
+	padding-bottom: 16rpx !important;
+}
+
+.lf-m-l-16 {
+	margin-left: 16rpx !important;
+}
+
+.lf-p-l-16 {
+	padding-left: 16rpx !important;
+}
+
+.lf-m-t-17 {
+	margin-top: 17rpx !important;
+}
+
+.lf-p-t-17 {
+	padding-top: 17rpx !important;
+}
+
+.lf-m-r-17 {
+	margin-right: 17rpx !important;
+}
+
+.lf-p-r-17 {
+	padding-right: 17rpx !important;
+}
+
+.lf-m-b-17 {
+	margin-bottom: 17rpx !important;
+}
+
+.lf-p-b-17 {
+	padding-bottom: 17rpx !important;
+}
+
+.lf-m-l-17 {
+	margin-left: 17rpx !important;
+}
+
+.lf-p-l-17 {
+	padding-left: 17rpx !important;
+}
+
+.lf-m-t-18 {
+	margin-top: 18rpx !important;
+}
+
+.lf-p-t-18 {
+	padding-top: 18rpx !important;
+}
+
+.lf-m-r-18 {
+	margin-right: 18rpx !important;
+}
+
+.lf-p-r-18 {
+	padding-right: 18rpx !important;
+}
+
+.lf-m-b-18 {
+	margin-bottom: 18rpx !important;
+}
+
+.lf-p-b-18 {
+	padding-bottom: 18rpx !important;
+}
+
+.lf-m-l-18 {
+	margin-left: 18rpx !important;
+}
+
+.lf-p-l-18 {
+	padding-left: 18rpx !important;
+}
+
+.lf-m-t-19 {
+	margin-top: 19rpx !important;
+}
+
+.lf-p-t-19 {
+	padding-top: 19rpx !important;
+}
+
+.lf-m-r-19 {
+	margin-right: 19rpx !important;
+}
+
+.lf-p-r-19 {
+	padding-right: 19rpx !important;
+}
+
+.lf-m-b-19 {
+	margin-bottom: 19rpx !important;
+}
+
+.lf-p-b-19 {
+	padding-bottom: 19rpx !important;
+}
+
+.lf-m-l-19 {
+	margin-left: 19rpx !important;
+}
+
+.lf-p-l-19 {
+	padding-left: 19rpx !important;
+}
+
+.lf-m-t-20 {
+	margin-top: 20rpx !important;
+}
+
+.lf-p-t-20 {
+	padding-top: 20rpx !important;
+}
+
+.lf-m-r-20 {
+	margin-right: 20rpx !important;
+}
+
+.lf-p-r-20 {
+	padding-right: 20rpx !important;
+}
+
+.lf-m-b-20 {
+	margin-bottom: 20rpx !important;
+}
+
+.lf-p-b-20 {
+	padding-bottom: 20rpx !important;
+}
+
+.lf-m-l-20 {
+	margin-left: 20rpx !important;
+}
+
+.lf-p-l-20 {
+	padding-left: 20rpx !important;
+}
+
+.lf-m-t-21 {
+	margin-top: 21rpx !important;
+}
+
+.lf-p-t-21 {
+	padding-top: 21rpx !important;
+}
+
+.lf-m-r-21 {
+	margin-right: 21rpx !important;
+}
+
+.lf-p-r-21 {
+	padding-right: 21rpx !important;
+}
+
+.lf-m-b-21 {
+	margin-bottom: 21rpx !important;
+}
+
+.lf-p-b-21 {
+	padding-bottom: 21rpx !important;
+}
+
+.lf-m-l-21 {
+	margin-left: 21rpx !important;
+}
+
+.lf-p-l-21 {
+	padding-left: 21rpx !important;
+}
+
+.lf-m-t-22 {
+	margin-top: 22rpx !important;
+}
+
+.lf-p-t-22 {
+	padding-top: 22rpx !important;
+}
+
+.lf-m-r-22 {
+	margin-right: 22rpx !important;
+}
+
+.lf-p-r-22 {
+	padding-right: 22rpx !important;
+}
+
+.lf-m-b-22 {
+	margin-bottom: 22rpx !important;
+}
+
+.lf-p-b-22 {
+	padding-bottom: 22rpx !important;
+}
+
+.lf-m-l-22 {
+	margin-left: 22rpx !important;
+}
+
+.lf-p-l-22 {
+	padding-left: 22rpx !important;
+}
+
+.lf-m-t-23 {
+	margin-top: 23rpx !important;
+}
+
+.lf-p-t-23 {
+	padding-top: 23rpx !important;
+}
+
+.lf-m-r-23 {
+	margin-right: 23rpx !important;
+}
+
+.lf-p-r-23 {
+	padding-right: 23rpx !important;
+}
+
+.lf-m-b-23 {
+	margin-bottom: 23rpx !important;
+}
+
+.lf-p-b-23 {
+	padding-bottom: 23rpx !important;
+}
+
+.lf-m-l-23 {
+	margin-left: 23rpx !important;
+}
+
+.lf-p-l-23 {
+	padding-left: 23rpx !important;
+}
+
+.lf-m-t-24 {
+	margin-top: 24rpx !important;
+}
+
+.lf-p-t-24 {
+	padding-top: 24rpx !important;
+}
+
+.lf-m-r-24 {
+	margin-right: 24rpx !important;
+}
+
+.lf-p-r-24 {
+	padding-right: 24rpx !important;
+}
+
+.lf-m-b-24 {
+	margin-bottom: 24rpx !important;
+}
+
+.lf-p-b-24 {
+	padding-bottom: 24rpx !important;
+}
+
+.lf-m-l-24 {
+	margin-left: 24rpx !important;
+}
+
+.lf-p-l-24 {
+	padding-left: 24rpx !important;
+}
+
+.lf-m-t-25 {
+	margin-top: 25rpx !important;
+}
+
+.lf-p-t-25 {
+	padding-top: 25rpx !important;
+}
+
+.lf-m-r-25 {
+	margin-right: 25rpx !important;
+}
+
+.lf-p-r-25 {
+	padding-right: 25rpx !important;
+}
+
+.lf-m-b-25 {
+	margin-bottom: 25rpx !important;
+}
+
+.lf-p-b-25 {
+	padding-bottom: 25rpx !important;
+}
+
+.lf-m-l-25 {
+	margin-left: 25rpx !important;
+}
+
+.lf-p-l-25 {
+	padding-left: 25rpx !important;
+}
+
+.lf-m-t-26 {
+	margin-top: 26rpx !important;
+}
+
+.lf-p-t-26 {
+	padding-top: 26rpx !important;
+}
+
+.lf-m-r-26 {
+	margin-right: 26rpx !important;
+}
+
+.lf-p-r-26 {
+	padding-right: 26rpx !important;
+}
+
+.lf-m-b-26 {
+	margin-bottom: 26rpx !important;
+}
+
+.lf-p-b-26 {
+	padding-bottom: 26rpx !important;
+}
+
+.lf-m-l-26 {
+	margin-left: 26rpx !important;
+}
+
+.lf-p-l-26 {
+	padding-left: 26rpx !important;
+}
+
+.lf-m-t-27 {
+	margin-top: 27rpx !important;
+}
+
+.lf-p-t-27 {
+	padding-top: 27rpx !important;
+}
+
+.lf-m-r-27 {
+	margin-right: 27rpx !important;
+}
+
+.lf-p-r-27 {
+	padding-right: 27rpx !important;
+}
+
+.lf-m-b-27 {
+	margin-bottom: 27rpx !important;
+}
+
+.lf-p-b-27 {
+	padding-bottom: 27rpx !important;
+}
+
+.lf-m-l-27 {
+	margin-left: 27rpx !important;
+}
+
+.lf-p-l-27 {
+	padding-left: 27rpx !important;
+}
+
+.lf-m-t-28 {
+	margin-top: 28rpx !important;
+}
+
+.lf-p-t-28 {
+	padding-top: 28rpx !important;
+}
+
+.lf-m-r-28 {
+	margin-right: 28rpx !important;
+}
+
+.lf-p-r-28 {
+	padding-right: 28rpx !important;
+}
+
+.lf-m-b-28 {
+	margin-bottom: 28rpx !important;
+}
+
+.lf-p-b-28 {
+	padding-bottom: 28rpx !important;
+}
+
+.lf-m-l-28 {
+	margin-left: 28rpx !important;
+}
+
+.lf-p-l-28 {
+	padding-left: 28rpx !important;
+}
+
+.lf-m-t-29 {
+	margin-top: 29rpx !important;
+}
+
+.lf-p-t-29 {
+	padding-top: 29rpx !important;
+}
+
+.lf-m-r-29 {
+	margin-right: 29rpx !important;
+}
+
+.lf-p-r-29 {
+	padding-right: 29rpx !important;
+}
+
+.lf-m-b-29 {
+	margin-bottom: 29rpx !important;
+}
+
+.lf-p-b-29 {
+	padding-bottom: 29rpx !important;
+}
+
+.lf-m-l-29 {
+	margin-left: 29rpx !important;
+}
+
+.lf-p-l-29 {
+	padding-left: 29rpx !important;
+}
+
+.lf-m-t-30 {
+	margin-top: 30rpx !important;
+}
+
+.lf-p-t-30 {
+	padding-top: 30rpx !important;
+}
+
+.lf-m-r-30 {
+	margin-right: 30rpx !important;
+}
+
+.lf-p-r-30 {
+	padding-right: 30rpx !important;
+}
+
+.lf-m-b-30 {
+	margin-bottom: 30rpx !important;
+}
+
+.lf-p-b-30 {
+	padding-bottom: 30rpx !important;
+}
+
+.lf-m-l-30 {
+	margin-left: 30rpx !important;
+}
+
+.lf-p-l-30 {
+	padding-left: 30rpx !important;
+}
+
+.lf-m-t-31 {
+	margin-top: 31rpx !important;
+}
+
+.lf-p-t-31 {
+	padding-top: 31rpx !important;
+}
+
+.lf-m-r-31 {
+	margin-right: 31rpx !important;
+}
+
+.lf-p-r-31 {
+	padding-right: 31rpx !important;
+}
+
+.lf-m-b-31 {
+	margin-bottom: 31rpx !important;
+}
+
+.lf-p-b-31 {
+	padding-bottom: 31rpx !important;
+}
+
+.lf-m-l-31 {
+	margin-left: 31rpx !important;
+}
+
+.lf-p-l-31 {
+	padding-left: 31rpx !important;
+}
+
+.lf-m-t-32 {
+	margin-top: 32rpx !important;
+}
+
+.lf-p-t-32 {
+	padding-top: 32rpx !important;
+}
+
+.lf-m-r-32 {
+	margin-right: 32rpx !important;
+}
+
+.lf-p-r-32 {
+	padding-right: 32rpx !important;
+}
+
+.lf-m-b-32 {
+	margin-bottom: 32rpx !important;
+}
+
+.lf-p-b-32 {
+	padding-bottom: 32rpx !important;
+}
+
+.lf-m-l-32 {
+	margin-left: 32rpx !important;
+}
+
+.lf-p-l-32 {
+	padding-left: 32rpx !important;
+}
+
+.lf-m-t-33 {
+	margin-top: 33rpx !important;
+}
+
+.lf-p-t-33 {
+	padding-top: 33rpx !important;
+}
+
+.lf-m-r-33 {
+	margin-right: 33rpx !important;
+}
+
+.lf-p-r-33 {
+	padding-right: 33rpx !important;
+}
+
+.lf-m-b-33 {
+	margin-bottom: 33rpx !important;
+}
+
+.lf-p-b-33 {
+	padding-bottom: 33rpx !important;
+}
+
+.lf-m-l-33 {
+	margin-left: 33rpx !important;
+}
+
+.lf-p-l-33 {
+	padding-left: 33rpx !important;
+}
+
+.lf-m-t-34 {
+	margin-top: 34rpx !important;
+}
+
+.lf-p-t-34 {
+	padding-top: 34rpx !important;
+}
+
+.lf-m-r-34 {
+	margin-right: 34rpx !important;
+}
+
+.lf-p-r-34 {
+	padding-right: 34rpx !important;
+}
+
+.lf-m-b-34 {
+	margin-bottom: 34rpx !important;
+}
+
+.lf-p-b-34 {
+	padding-bottom: 34rpx !important;
+}
+
+.lf-m-l-34 {
+	margin-left: 34rpx !important;
+}
+
+.lf-p-l-34 {
+	padding-left: 34rpx !important;
+}
+
+.lf-m-t-35 {
+	margin-top: 35rpx !important;
+}
+
+.lf-p-t-35 {
+	padding-top: 35rpx !important;
+}
+
+.lf-m-r-35 {
+	margin-right: 35rpx !important;
+}
+
+.lf-p-r-35 {
+	padding-right: 35rpx !important;
+}
+
+.lf-m-b-35 {
+	margin-bottom: 35rpx !important;
+}
+
+.lf-p-b-35 {
+	padding-bottom: 35rpx !important;
+}
+
+.lf-m-l-35 {
+	margin-left: 35rpx !important;
+}
+
+.lf-p-l-35 {
+	padding-left: 35rpx !important;
+}
+
+.lf-m-t-36 {
+	margin-top: 36rpx !important;
+}
+
+.lf-p-t-36 {
+	padding-top: 36rpx !important;
+}
+
+.lf-m-r-36 {
+	margin-right: 36rpx !important;
+}
+
+.lf-p-r-36 {
+	padding-right: 36rpx !important;
+}
+
+.lf-m-b-36 {
+	margin-bottom: 36rpx !important;
+}
+
+.lf-p-b-36 {
+	padding-bottom: 36rpx !important;
+}
+
+.lf-m-l-36 {
+	margin-left: 36rpx !important;
+}
+
+.lf-p-l-36 {
+	padding-left: 36rpx !important;
+}
+
+.lf-m-t-37 {
+	margin-top: 37rpx !important;
+}
+
+.lf-p-t-37 {
+	padding-top: 37rpx !important;
+}
+
+.lf-m-r-37 {
+	margin-right: 37rpx !important;
+}
+
+.lf-p-r-37 {
+	padding-right: 37rpx !important;
+}
+
+.lf-m-b-37 {
+	margin-bottom: 37rpx !important;
+}
+
+.lf-p-b-37 {
+	padding-bottom: 37rpx !important;
+}
+
+.lf-m-l-37 {
+	margin-left: 37rpx !important;
+}
+
+.lf-p-l-37 {
+	padding-left: 37rpx !important;
+}
+
+.lf-m-t-38 {
+	margin-top: 38rpx !important;
+}
+
+.lf-p-t-38 {
+	padding-top: 38rpx !important;
+}
+
+.lf-m-r-38 {
+	margin-right: 38rpx !important;
+}
+
+.lf-p-r-38 {
+	padding-right: 38rpx !important;
+}
+
+.lf-m-b-38 {
+	margin-bottom: 38rpx !important;
+}
+
+.lf-p-b-38 {
+	padding-bottom: 38rpx !important;
+}
+
+.lf-m-l-38 {
+	margin-left: 38rpx !important;
+}
+
+.lf-p-l-38 {
+	padding-left: 38rpx !important;
+}
+
+.lf-m-t-39 {
+	margin-top: 39rpx !important;
+}
+
+.lf-p-t-39 {
+	padding-top: 39rpx !important;
+}
+
+.lf-m-r-39 {
+	margin-right: 39rpx !important;
+}
+
+.lf-p-r-39 {
+	padding-right: 39rpx !important;
+}
+
+.lf-m-b-39 {
+	margin-bottom: 39rpx !important;
+}
+
+.lf-p-b-39 {
+	padding-bottom: 39rpx !important;
+}
+
+.lf-m-l-39 {
+	margin-left: 39rpx !important;
+}
+
+.lf-p-l-39 {
+	padding-left: 39rpx !important;
+}
+
+.lf-m-t-40 {
+	margin-top: 40rpx !important;
+}
+
+.lf-p-t-40 {
+	padding-top: 40rpx !important;
+}
+
+.lf-m-r-40 {
+	margin-right: 40rpx !important;
+}
+
+.lf-p-r-40 {
+	padding-right: 40rpx !important;
+}
+
+.lf-m-b-40 {
+	margin-bottom: 40rpx !important;
+}
+
+.lf-p-b-40 {
+	padding-bottom: 40rpx !important;
+}
+
+.lf-m-l-40 {
+	margin-left: 40rpx !important;
+}
+
+.lf-p-l-40 {
+	padding-left: 40rpx !important;
+}
+
+.lf-m-t-41 {
+	margin-top: 41rpx !important;
+}
+
+.lf-p-t-41 {
+	padding-top: 41rpx !important;
+}
+
+.lf-m-r-41 {
+	margin-right: 41rpx !important;
+}
+
+.lf-p-r-41 {
+	padding-right: 41rpx !important;
+}
+
+.lf-m-b-41 {
+	margin-bottom: 41rpx !important;
+}
+
+.lf-p-b-41 {
+	padding-bottom: 41rpx !important;
+}
+
+.lf-m-l-41 {
+	margin-left: 41rpx !important;
+}
+
+.lf-p-l-41 {
+	padding-left: 41rpx !important;
+}
+
+.lf-m-t-42 {
+	margin-top: 42rpx !important;
+}
+
+.lf-p-t-42 {
+	padding-top: 42rpx !important;
+}
+
+.lf-m-r-42 {
+	margin-right: 42rpx !important;
+}
+
+.lf-p-r-42 {
+	padding-right: 42rpx !important;
+}
+
+.lf-m-b-42 {
+	margin-bottom: 42rpx !important;
+}
+
+.lf-p-b-42 {
+	padding-bottom: 42rpx !important;
+}
+
+.lf-m-l-42 {
+	margin-left: 42rpx !important;
+}
+
+.lf-p-l-42 {
+	padding-left: 42rpx !important;
+}
+
+.lf-m-t-43 {
+	margin-top: 43rpx !important;
+}
+
+.lf-p-t-43 {
+	padding-top: 43rpx !important;
+}
+
+.lf-m-r-43 {
+	margin-right: 43rpx !important;
+}
+
+.lf-p-r-43 {
+	padding-right: 43rpx !important;
+}
+
+.lf-m-b-43 {
+	margin-bottom: 43rpx !important;
+}
+
+.lf-p-b-43 {
+	padding-bottom: 43rpx !important;
+}
+
+.lf-m-l-43 {
+	margin-left: 43rpx !important;
+}
+
+.lf-p-l-43 {
+	padding-left: 43rpx !important;
+}
+
+.lf-m-t-44 {
+	margin-top: 44rpx !important;
+}
+
+.lf-p-t-44 {
+	padding-top: 44rpx !important;
+}
+
+.lf-m-r-44 {
+	margin-right: 44rpx !important;
+}
+
+.lf-p-r-44 {
+	padding-right: 44rpx !important;
+}
+
+.lf-m-b-44 {
+	margin-bottom: 44rpx !important;
+}
+
+.lf-p-b-44 {
+	padding-bottom: 44rpx !important;
+}
+
+.lf-m-l-44 {
+	margin-left: 44rpx !important;
+}
+
+.lf-p-l-44 {
+	padding-left: 44rpx !important;
+}
+
+.lf-m-t-45 {
+	margin-top: 45rpx !important;
+}
+
+.lf-p-t-45 {
+	padding-top: 45rpx !important;
+}
+
+.lf-m-r-45 {
+	margin-right: 45rpx !important;
+}
+
+.lf-p-r-45 {
+	padding-right: 45rpx !important;
+}
+
+.lf-m-b-45 {
+	margin-bottom: 45rpx !important;
+}
+
+.lf-p-b-45 {
+	padding-bottom: 45rpx !important;
+}
+
+.lf-m-l-45 {
+	margin-left: 45rpx !important;
+}
+
+.lf-p-l-45 {
+	padding-left: 45rpx !important;
+}
+
+.lf-m-t-46 {
+	margin-top: 46rpx !important;
+}
+
+.lf-p-t-46 {
+	padding-top: 46rpx !important;
+}
+
+.lf-m-r-46 {
+	margin-right: 46rpx !important;
+}
+
+.lf-p-r-46 {
+	padding-right: 46rpx !important;
+}
+
+.lf-m-b-46 {
+	margin-bottom: 46rpx !important;
+}
+
+.lf-p-b-46 {
+	padding-bottom: 46rpx !important;
+}
+
+.lf-m-l-46 {
+	margin-left: 46rpx !important;
+}
+
+.lf-p-l-46 {
+	padding-left: 46rpx !important;
+}
+
+.lf-m-t-47 {
+	margin-top: 47rpx !important;
+}
+
+.lf-p-t-47 {
+	padding-top: 47rpx !important;
+}
+
+.lf-m-r-47 {
+	margin-right: 47rpx !important;
+}
+
+.lf-p-r-47 {
+	padding-right: 47rpx !important;
+}
+
+.lf-m-b-47 {
+	margin-bottom: 47rpx !important;
+}
+
+.lf-p-b-47 {
+	padding-bottom: 47rpx !important;
+}
+
+.lf-m-l-47 {
+	margin-left: 47rpx !important;
+}
+
+.lf-p-l-47 {
+	padding-left: 47rpx !important;
+}
+
+.lf-m-t-48 {
+	margin-top: 48rpx !important;
+}
+
+.lf-p-t-48 {
+	padding-top: 48rpx !important;
+}
+
+.lf-m-r-48 {
+	margin-right: 48rpx !important;
+}
+
+.lf-p-r-48 {
+	padding-right: 48rpx !important;
+}
+
+.lf-m-b-48 {
+	margin-bottom: 48rpx !important;
+}
+
+.lf-p-b-48 {
+	padding-bottom: 48rpx !important;
+}
+
+.lf-m-l-48 {
+	margin-left: 48rpx !important;
+}
+
+.lf-p-l-48 {
+	padding-left: 48rpx !important;
+}
+
+.lf-m-t-49 {
+	margin-top: 49rpx !important;
+}
+
+.lf-p-t-49 {
+	padding-top: 49rpx !important;
+}
+
+.lf-m-r-49 {
+	margin-right: 49rpx !important;
+}
+
+.lf-p-r-49 {
+	padding-right: 49rpx !important;
+}
+
+.lf-m-b-49 {
+	margin-bottom: 49rpx !important;
+}
+
+.lf-p-b-49 {
+	padding-bottom: 49rpx !important;
+}
+
+.lf-m-l-49 {
+	margin-left: 49rpx !important;
+}
+
+.lf-p-l-49 {
+	padding-left: 49rpx !important;
+}
+
+.lf-m-t-50 {
+	margin-top: 50rpx !important;
+}
+
+.lf-p-t-50 {
+	padding-top: 50rpx !important;
+}
+
+.lf-m-r-50 {
+	margin-right: 50rpx !important;
+}
+
+.lf-p-r-50 {
+	padding-right: 50rpx !important;
+}
+
+.lf-m-b-50 {
+	margin-bottom: 50rpx !important;
+}
+
+.lf-p-b-50 {
+	padding-bottom: 50rpx !important;
+}
+
+.lf-m-l-50 {
+	margin-left: 50rpx !important;
+}
+
+.lf-p-l-50 {
+	padding-left: 50rpx !important;
+}
\ No newline at end of file
diff --git a/main.js b/main.js
index 555bf2d..85d8fff 100644
--- a/main.js
+++ b/main.js
@@ -20,7 +20,11 @@ Vue.component('mescroll-body', MescrollBody)
 
 //骨架屏
 import Skeleton from './components/my-uni-skeleton/index.vue'
-Vue.component('skeleton', Skeleton)
+Vue.component('skeleton', Skeleton);
+
+// 无数据
+import myNocontent from './components/my-nocontent/my-nocontent.vue';
+Vue.component('my-nocontent', myNocontent);
 
 //金融数字
 import aMount from './components/amount/index.vue'
diff --git a/pages.json b/pages.json
index 80293dc..262075f 100644
--- a/pages.json
+++ b/pages.json
@@ -6,7 +6,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页"
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
diff --git a/pages/goodsDetail/goodsDetail.vue b/pages/goodsDetail/goodsDetail.vue
new file mode 100644
index 0000000..10fbaaf
--- /dev/null
+++ b/pages/goodsDetail/goodsDetail.vue
@@ -0,0 +1,25 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index ac3058e..51a442b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,70 +1,33 @@
 <template>
-	<view class="content">
+	<view class="lf-row-center lf-flex-column">
 		<view class="ctab">
-			<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
+			<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
 		</view>
-		<view class="com">
-			<view class="list">
+		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex">
+			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index">
 				<view class="left">
 					<image src="../../static/tu.png" mode=""></image>
 				</view>
 				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
+					<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
+					<view class="lf-row-between tips">
 						<view class="u-line-progress">
 							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
 						</view>
 						<text class="progress">已抢25%</text>
 						<text class="bought">2.4万人已购买</text>
 					</view>
-					<view class="price">
+					<view class="lf-row-between price">
 						<text>￥</text><text>19</text>.<text>90</text>
 						<text>￥39.00</text>
 						<button>立即抢购</button>
 					</view>
 				</view>
 			</view>
-			
-			<view class="list">
-				<view class="left">
-					<image src="../../static/tu.png" mode=""></image>
-				</view>
-				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
-						<view class="u-line-progress">
-							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
-						</view>
-						<text class="progress">已抢25%</text>
-						<text class="bought">2.4万人已购买</text>
-					</view>
-					<view class="price">
-						<text>￥</text><text>19</text>.<text>90</text>
-						<text>￥39.00</text>
-						<button>立即抢购</button>
-					</view>
-				</view>
-			</view>
-			
-			<view class="list">
-				<view class="left">
-					<image src="../../static/tu.png" mode=""></image>
-				</view>
-				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
-						<view class="u-line-progress">
-							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
-						</view>
-						<text class="progress">已抢25%</text>
-						<text class="bought">2.4万人已购买</text>
-					</view>
-					<view class="price">
-						<text>￥</text><text>19</text>.<text>90</text>
-						<text>￥39.00</text>
-						<button>立即抢购</button>
-					</view>
-				</view>
+			<!-- 加载 -->
+			<view class="loading-more">
+				<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
+				<my-nocontent v-else></my-nocontent>
 			</view>
 		</view>
 	</view>
@@ -73,23 +36,43 @@
 <script>
 	export default {
 		data() {
+			let shared = {
+				loadingClass: false,
+				loadingText: '没有更多数据啦~',
+				page: 1,
+				isPage: true
+			}
 			return {
-				list: [{
-					name: '推荐'
+				tab_list: [{
+					name: '推荐',
+					list: [1, 2, 3],
+					...shared
 				}, {
-					name: '每日必抢'
+					name: '每日必抢',
+					list: [],
+					...shared
 				}, {
-					name: '生活用品'
+					name: '生活用品',
+					list: [1],
+					...shared
 				},{
-					name: '家政服务'
+					name: '家政服务',
+					list: [],
+					...shared
 				},{
-					name: '美食部落'
+					name: '美食部落',
+					list: [],
+					...shared
 				},{
-					name: '奶茶夏日'
+					name: '奶茶夏日',
+					list: [],
+					...shared
 				},{
-					name: '奶茶夏日'
+					name: '奶茶夏日',
+					list: [],
+					...shared
 				}],
-				current: 0
+				current: 0, // tab下表
 			}
 		},
 		onLoad() {
@@ -99,49 +82,31 @@
 			change(index) {
 				this.current = index;
 			},
+		},
+		onReachBottom(){
+			console.log("页面触底")
+		},
+		onPullDownRefresh(){
+			console.log("下拉刷新");
+			uni.stopPullDownRefresh()
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 100rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
 	
 	.title {
 		font-size: 28rpx;
 		color: $u-content-color;
 	}
 	
-	.button-demo {
-		margin-top: 80rpx;
-	}
-	
-	.link-demo {
-		margin-top: 80rpx;
-	}
+	// tab
 	.ctab{
 		width: 100%;
 		margin: 20rpx 0  0rpx 0rpx;
 		padding: 0 22rpx;
 	}
+	// 商品列表
 	.com{
 		width: 100%;
 		overflow: hidden;
@@ -151,9 +116,9 @@
 			margin: 20rpx 32rpx;
 			background-color: #FFFFFF;
 			box-shadow:0 0 10px 5px #e5e5e5;
+			align-items: flex-start;
 			.left{
 				overflow: hidden;
-				float: left;
 				image{
 					width: 204rpx;
 					height: 204rpx;
@@ -163,24 +128,18 @@
 			}
 			.right{
 				overflow: hidden;
+				width: 64%;
 				.title{
 					margin: 18rpx 20rpx 0 0;
-					overflow: hidden;
 					color: #222222;
 					font-size: 32rpx;
-					height: 80rpx;
-					overflow: hidden;
-					-webkit-line-clamp: 2;
-					text-overflow: ellipsis;
-					display: -webkit-box;
-					-webkit-box-orient: vertical;
 				}
 				.tips{
 					margin: 16rpx 0;
 					overflow: hidden;
 					.u-line-progress{
 						width: 112rpx;
-						overflow: hidden;float: left;
+						overflow: hidden;
 						margin-right:20rpx ;
 					}
 					.progress{
@@ -190,7 +149,6 @@
 					.bought{
 						color: #777777;
 						font-size: 24rpx;
-						float: right;
 						margin-right: 20rpx;
 					}
 				}
@@ -221,14 +179,13 @@
 						font-weight: 400;
 					}
 					button{
-						width: 176rpx;
+						width: 160rpx;
 						height: 60rpx;
 						background: #FE9903;
 						border-radius: 15px;
 						font-size: 24rpx;
 						color: #FFFFFF;
-						float: right;
-						margin: 10rpx 20rpx 20rpx 20rpx;
+						margin: 0rpx 20rpx 0rpx 20rpx;
 						border: none;
 					}
 				}