美博会

src/main/resources/static/css/index/index_new.pc.css

@@ -555,7 +555,7 @@ footer{
         border-radius: 0px 10px 0px 0px;
         margin-top: 2px;
 }
-.Popup{
+            .Popup{
 				position: fixed;
 				background: rgba(34,39,46, 0.3);
 				top: 0;
@@ -568,7 +568,7 @@ footer{
 			.Popup.show{
 				opacity: 1;
 			}
-			.special .Popup .show_popup{
+			 .Popup .show_popup{
 				width: 408px;
 				height: 346px;
 				position: absolute;
@@ -578,10 +578,6 @@ footer{
 				bottom: 0;
 				margin: auto;
 			}
-			/*.bg_img{*/
-			/*	width: 968px;*/
-			/*	height: 510px;*/
-			/*}*/
 			.bg_img img{
 				width: 100%;
 				height: 100%;

src/main/resources/static/css/product/beautytopic.css

@@ -1,326 +1,340 @@
+@media screen and (min-width:768px) {
 .special .banner{width: 100%;height: 510px;}
-			.special .banner img{width: 100%;height: 100%;}
-			.special .content{width: 100%;height: auto;}
-			.special .content .inner{width: 1184px;margin: 0 auto;}
-			.special .content .inner a{cursor: pointer;text-decoration: none;}
-			.special .content .left-box{width: 900px; float: left;}
-			.special .content .right-box{width: 284px; float: right;padding-top: 103px;}
-			.special .content {overflow: hidden;}
-			.special .content .left-box .Beautyfair-page{width: 100%;height: auto;float: left;}
-			.special .content .left-box .Beautyfair-page .page-title{
-					width: 100%;
-				    height: 103px;
-				    box-sizing: border-box;
-				    padding: 31px 0 16px 0
-			}
-			.special .content .left-box .Beautyfair-page .page-title h1{
-				    font-size: 24px;
-				    line-height: 31px;
-				    text-align: left;
-				    color: #4a4f58;
-			}
-			.special .content .left-box .Beautyfair-page .page-title p{
-				    font-size: 14px;
-				    line-height: 19px;
-				    text-align: left;
-				    color: #93979f;
-				    margin-top: 6px;
-					float: left;
-			}
-			.special .content .left-box .Beautyfair-page .page-title p.more{
-				float: right;
-				padding-right: 20px;
-				cursor: pointer;
-			}
-			.special .content .left-box .Beautyfair-page .list a{
-				width: 434px;
-				height: 220px;
-				display: block;
-				float: left;
-				margin-right: 16px;
-				margin-bottom: 16px;
-				background-color: #FFFFFF;
-				transition: all 0.4s;
-			}
-			.special .content .left-box .Beautyfair-page .list{
-				transition: all 0.6s;
-			}
-			.special .content .left-box .Beautyfair-page .list.Floorplan{height: 612px;}
-			.special .content .left-box .Beautyfair-page .list.max{
-				height: auto;
-			}
-			.special .content .left-box .Beautyfair-page .list a:hover{
-				    transform: translateY(-5px);
-				    box-shadow: 0 8px 8px rgb(102 102 102 / 5%), 0 10px 10px rgb(102 102 102 / 5%), 0 12px 12px rgb(102 102 102 / 5%)
-			}
-			.special .content .left-box .Beautyfair-page .list.exhibitor a{
-				width: 134px;
-				height: 134px;
-			}
-			.special .content .left-box .Beautyfair-page .list.live a{
-				width: 164px;
-				height: 212px;
-			}
-			.special .content .left-box .Beautyfair-page .list.Floorplan a{
-				width: 434px;
-				height: 290px;
-			}
-			.special .content .left-box .Beautyfair-page .list.supplier a{
-				width: 164px;
-				height: 268px;
-			}
-			.special .content .left-box .Beautyfair-page .list a img{
-				width: 100%;
-				height: 100%;
-			}
-			.special .content .left-box .Beautyfair-page .list.live a img{
-				width: 164px;
-				height: 164px;
-			}
-			.special .content .left-box .Beautyfair-page .list.supplier a img{
-				width: 164px;
-				height: 164px;
-			}
-			.special .content .left-box .Beautyfair-page .list.Floorplan a img{
-				height: 210px;
-			}
-			.special .content .right-box .right-coupon{
-				    width: 100%;
-				    height: auto;
-				    background-color: #FFFFFF;
-				    float: left;
-				    margin-bottom: 16px;
-				    padding: 16px;
-				    box-sizing: border-box;
-				    border-radius: 2px;
-			}
-			.special .content .right-box .right-coupon .right_item_title{
-				    width: 100%;
-				    height: 22px;
-				    line-height: 22px;
-				    margin-bottom: 8px;
-					font-size: 16px;
-					font-weight: bold;
-					color: #4a4f58;
-			}
-			.special .content .right-box .right-coupon .right_item_img{
-				width: 100%;
-				height: 100%;
-			}
-			.special .content .left-box .Beautyfair-page .list a .page_main_text{
-				    height: 42px;
-				    padding: 0 8px;
-				    font-size: 14px;
-				    color: #4a4f58;
-					line-height: 21px;
-					margin-top: 10px;
-			}
-			.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name{
-				    white-space: normal;
-				    word-break: break-all;
-				    overflow: hidden;
-				    text-overflow: ellipsis;
-				    display: -webkit-box;
-				    -webkit-box-orient: vertical;
-				    -webkit-line-clamp: 2;
-			}
-			.special .content .left-box .Beautyfair-page .list a .page_main_text p{
-				width: 150px;
-				height: 48px;
-				line-height: 48px;
-				white-space:nowrap;
-				overflow:hidden;
-				text-overflow:ellipsis;
-			}
-			.special .content .left-box .Beautyfair-page .list a .Booth_text{
-				height: 80px;
-			}
-			.special .content .left-box .Beautyfair-page .list a .Booth_text p{
-				text-align: center;
-				line-height: 21px;
-			}
-			.special .content .left-box .Beautyfair-page .list a .Booth_text p.name{
-				font-size: 16px;
-				color: #4a4f58;
-				padding: 16px 0 5px 0;
-			}
-			.special .content .left-box .Beautyfair-page .list a .Booth_text p.number{
-				font-size: 14px;
-				color: #93979f;
-			}
-			.section_page_more {
-			    width: 100%;
-			    height: 32px;
-			    margin-top: 16px;
-			    float: left;
-			}
-			.section_page_more .more {
-			    width: 98px;
-			    height: 32px;
-			    line-height: 32px;
-			    font-size: 14px;
-			    margin: 0 auto;
-			    border-radius: 2px;
-			    border: 1px solid #cccccc;
-			    color: #909090;
-			    text-align: left;
-			    transition: all 0.2s;
-			    cursor: pointer;
-			    padding-left: 15px;
-			    box-sizing: border-box;
-			    position: relative;
-			}
-			.section_page_more .more:hover {
-			    color: #E15616;
-			    border-color: #E15616;
-			}
-			.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name .tag{
-				width: 44px;
-				height: 18px;
-				line-height: 18px;
-				font-size: 12px;
-				float: left;
-				margin-right: 5px;
-				text-align: center;
-				color: #FFFFFF;
-				background-image: linear-gradient(270deg,
-						#f9c023 0%,
-						#f83600 100%);
-					border-radius: 0px 10px 0px 0px;
-			}
-			.Beautyfair-page .page_main_price {
-				width: 100%;
-				height: 54px;
-				float: left;
-				box-sizing: border-box;
-				padding: 0 8px;
-			}
-			.Beautyfair-page  .page_main_price .main_price_text {
-				width: 100%;
-				height: 54px;
-				float: left;
-				box-sizing: border-box;
-			}
-			.Beautyfair-page .page_main_price .main_price_unde{
-				width: 100%;
-				height: 31px;
-				line-height: 31px;
-				font-size: 14px;
-				color: #4a4f58;
-				text-align: left;
-				float: left;
-			}
-			.Beautyfair-page .page_main_price .main_price_show{
-				width: 100%;
-				height: 30px;
-				line-height: 30px;
-				font-size: 14px;
-				color: #f94b4b;
-				text-align: left;
-				float: left;
-			}
-			.Beautyfair-page .page_main_price .main_price_show.none{
-				color: #999999;
-				text-decoration: line-through;
-			}
-			.Beautyfair-page .page_main_price .price_text_tag{
-				width: 100%;
-				height: 22px;
-				box-sizing: border-box;
-				float: left;
-				margin-top: 0px;
-			}
-			.Beautyfair-page .page_main_price .price_text_tag .listTag{
-				margin:0;
-				float: left;
-			}
-			.Beautyfair-page .page_main_price .main_price_none{
-				width: 100%;
-				height: 24px;
-				box-sizing: border-box;
-				float: left;
-				margin-top: 2px;
-			}
-			.Beautyfair-page .page_main_price .main_price_none.sec{
-				margin-top: 25px;
-			}
-			.Beautyfair-page .page_main_price .main_price_none .listTag{
-				margin:0;
-			}
-			.Beautyfair-page .page_main_price .price_grade{
-				float: left;
-				margin:0;
-				height: 22px;
-				line-height: 22px;
-				color: #4A4F58;
-				font-style: normal;
-				font-size: 14px;
-			}
-			.Beautyfair-page .page_main_price .price_grade span{
-				display: inline-block;
-				float: left;
-			}
-			.Beautyfair-page .page_main_price .icon:before{
-				width: 67px;
-				height: 22px;
-			}
-			.Beautyfair-page .page_main_price .price_grade_1:before{
-				background-position:0 -714px;
-			}
-			.Beautyfair-page .page_main_price .price_grade_2:before{
-				background-position:0 -744px;
-			}
-			.Beautyfair-page .page_main_price .price_grade_3:before{
-				background-position:0 -774px;
-			}
-			.Beautyfair-page .page_main_price .price_grade_4:before{
-				background-position:0 -804px;
-			}
-			.Beautyfair-page .page_main_price .price_grade_5:before{
-				background-position:0 -834px;
-			}
-			.special .Popup{
-				position: fixed;
-				background: rgba(34,39,46, 0.3);
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				z-index: 99999;
-				opacity: 0;
-			}
-			.Popup.show{
-				opacity: 1;
-			}
-			.special .Popup .show_popup{
-				width: 968px;
-				height: 510px;
-				position: absolute;
-				top: 0;
-				right: 0;
-				left: 0;
-				bottom: 0;
-				margin: auto;
-			}
-			.bg_img{
-				width: 968px;
-				height: 510px;
-			}
-			.bg_img img{
-				width: 100%;
-				height: 100%;
-			}
-			.bg_icon{text-align: right}
-			.bg_icon .icon{
-			    width: 50px;
-				height: 50px;
-				display: inline-block;
-			}
-			.bg_icon .icon:before{
-				width: 50px;
-				height: 50px;
-				background-position: -187px -545px;
-    			cursor: pointer;
-			}
+.special .banner img{width: 100%;height: 100%;}
+.special .content{width: 100%;height: auto;}
+.special .content .inner{width: 1184px;margin: 0 auto;}
+.special .content .inner a{cursor: pointer;text-decoration: none;}
+.special .content .left-box{width: 900px; float: left;}
+.special .content .right-box{width: 284px; float: right;padding-top: 103px;}
+.special .content {overflow: hidden;}
+.special .content .left-box .Beautyfair-page{width: 100%;height: auto;float: left;}
+.special .content .left-box .Beautyfair-page .page-title{width: 100%;height: 103px;box-sizing: border-box;padding: 31px 0 16px 0}
+.special .content .left-box .Beautyfair-page .page-title h1{font-size: 24px;line-height: 31px;text-align: left;color: #4a4f58;}
+.special .content .left-box .Beautyfair-page .page-title p{
+		font-size: 14px;
+		line-height: 19px;
+		text-align: left;
+		color: #93979f;
+		margin-top: 6px;
+		float: left;
+}
+.special .content .left-box .Beautyfair-page .page-title p.more{
+	float: right;
+	padding-right: 20px;
+	cursor: pointer;
+}
+.special .content .left-box .Beautyfair-page .list a{
+	width: 434px;
+	height: 220px;
+	display: block;
+	float: left;
+	margin-right: 16px;
+	margin-bottom: 16px;
+	background-color: #FFFFFF;
+	transition: all 0.4s;
+}
+.special .content .left-box .Beautyfair-page .list{
+	transition: all 0.6s;
+}
+.special .content .left-box .Beautyfair-page .list.Floorplan{height: 612px;overflow: hidden}
+.special .content .left-box .Beautyfair-page .list.max{
+	height: auto;
+}
+.special .content .left-box .Beautyfair-page .list a:hover{
+		transform: translateY(-5px);
+		box-shadow: 0 8px 8px rgb(102 102 102 / 5%), 0 10px 10px rgb(102 102 102 / 5%), 0 12px 12px rgb(102 102 102 / 5%)
+}
+.special .content .left-box .Beautyfair-page .list.exhibitor a{
+	width: 134px;
+	height: 134px;
+}
+.special .content .left-box .Beautyfair-page .list.live a{
+	width: 164px;
+	height: 212px;
+}
+.special .content .left-box .Beautyfair-page .list.Floorplan a{
+	width: 434px;
+	height: 290px;
+}
+.special .content .left-box .Beautyfair-page .list.supplier a{
+	width: 164px;
+	height: 268px;
+}
+.special .content .left-box .Beautyfair-page .list a img{
+	width: 100%;
+	height: 100%;
+}
+.special .content .left-box .Beautyfair-page .list.live a img{
+	width: 164px;
+	height: 164px;
+}
+.special .content .left-box .Beautyfair-page .list.supplier a img{
+	width: 164px;
+	height: 164px;
+}
+.special .content .left-box .Beautyfair-page .list.Floorplan a img{
+	height: 210px;
+}
+.special .content .right-box .right-coupon{
+		width: 100%;
+		height: auto;
+		background-color: #FFFFFF;
+		float: left;
+		margin-bottom: 16px;
+		padding: 16px;
+		box-sizing: border-box;
+		border-radius: 2px;
+}
+.special .content .right-box .right-coupon .right_item_title{
+		width: 100%;
+		height: 22px;
+		line-height: 22px;
+		margin-bottom: 8px;
+		font-size: 16px;
+		font-weight: bold;
+		color: #4a4f58;
+}
+.special .content .right-box .right-coupon .right_item_img{
+	width: 100%;
+	height: 100%;
+}
+.special .content .left-box .Beautyfair-page .list a .page_main_text{
+		height: 42px;
+		padding: 0 8px;
+		font-size: 14px;
+		color: #4a4f58;
+		line-height: 21px;
+		margin-top: 10px;
+}
+.special .content .left-box .Beautyfair-page .list.live a .page_main_text{margin: 0}
+.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name{
+		white-space: normal;
+		word-break: break-all;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+}
+.special .content .left-box .Beautyfair-page .list a .page_main_text p{
+	width: 150px;
+	height: 48px;
+	line-height: 48px;
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow:ellipsis;
+}
+.special .content .left-box .Beautyfair-page .list a .Booth_text{
+	height: 80px;
+}
+.special .content .left-box .Beautyfair-page .list a .Booth_text p{
+	text-align: center;
+	line-height: 21px;
+}
+.special .content .left-box .Beautyfair-page .list a .Booth_text p.name{
+	font-size: 16px;
+	color: #4a4f58;
+	padding: 16px 0 5px 0;
+}
+.special .content .left-box .Beautyfair-page .list a .Booth_text p.number{
+	font-size: 14px;
+	color: #93979f;
+}
+
+.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name .tag{
+	width: 44px;
+	height: 18px;
+	line-height: 18px;
+	font-size: 12px;
+	float: left;
+	margin-right: 5px;
+	text-align: center;
+	color: #FFFFFF;
+	background-image: linear-gradient(270deg,
+			#f9c023 0%,
+			#f83600 100%);
+		border-radius: 0px 10px 0px 0px;
+}
+.Beautyfair-page .page_main_price {
+	width: 100%;
+	height: 54px;
+	float: left;
+	box-sizing: border-box;
+	padding: 0 8px;
+}
+.Beautyfair-page  .page_main_price .main_price_text {
+	width: 100%;
+	height: 54px;
+	float: left;
+	box-sizing: border-box;
+}
+.Beautyfair-page .page_main_price .main_price_unde{
+	width: 100%;
+	height: 31px;
+	line-height: 31px;
+	font-size: 14px;
+	color: #4a4f58;
+	text-align: left;
+	float: left;
+}
+.Beautyfair-page .page_main_price .main_price_show{
+	width: 100%;
+	height: 30px;
+	line-height: 30px;
+	font-size: 14px;
+	color: #f94b4b;
+	text-align: left;
+	float: left;
+}
+.Beautyfair-page .page_main_price .main_price_show.none{
+	color: #999999;
+	text-decoration: line-through;
+}
+.Beautyfair-page .page_main_price .price_text_tag{
+	width: 100%;
+	height: 22px;
+	box-sizing: border-box;
+	float: left;
+	margin-top: 0px;
+}
+.Beautyfair-page .page_main_price .price_text_tag .listTag{
+	margin:0;
+	float: left;
+}
+.Beautyfair-page .page_main_price .main_price_none{
+	width: 100%;
+	height: 24px;
+	box-sizing: border-box;
+	float: left;
+	margin-top: 2px;
+}
+.Beautyfair-page .page_main_price .main_price_none.sec{
+	margin-top: 25px;
+}
+.Beautyfair-page .page_main_price .main_price_none .listTag{
+	margin:0;
+}
+.Beautyfair-page .page_main_price .price_grade{
+	float: left;
+	margin:0;
+	height: 22px;
+	line-height: 22px;
+	color: #4A4F58;
+	font-style: normal;
+	font-size: 14px;
+}
+.Beautyfair-page .page_main_price .price_grade span{
+	display: inline-block;
+	float: left;
+}
+.Beautyfair-page .page_main_price .icon:before{
+	width: 67px;
+	height: 22px;
+}
+.Beautyfair-page .page_main_price .price_grade_1:before{
+	background-position:0 -714px;
+}
+.Beautyfair-page .page_main_price .price_grade_2:before{
+	background-position:0 -744px;
+}
+.Beautyfair-page .page_main_price .price_grade_3:before{
+	background-position:0 -774px;
+}
+.Beautyfair-page .page_main_price .price_grade_4:before{
+	background-position:0 -804px;
+}
+.Beautyfair-page .page_main_price .price_grade_5:before{
+	background-position:0 -834px;
+}
+.special .Popup{
+	position: fixed;
+	background: rgba(34,39,46, 0.3);
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 99999;
+	opacity: 0;
+}
+.Popup.show{
+	opacity: 1;
+}
+.special .Popup .show_popup{
+	width: 968px;
+	height: 510px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	margin: auto;
+}
+.bg_img{
+	width: 968px;
+	height: 510px;
+}
+.bg_img img{
+	width: 100%;
+	height: 100%;
+}
+.bg_icon{text-align: right}
+.bg_icon .icon{
+	width: 50px;
+	height: 50px;
+	display: inline-block;
+}
+.bg_icon .icon:before{
+	width: 50px;
+	height: 50px;
+	background-position: -187px -545px;
+	cursor: pointer;
+}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+.Beautyfair-page .swiper-wrapper{height: inherit ;overflow: hidden}
+}
+@media screen and (max-width:768px) {
+ 	#recommendBox{width: calc(100%);height:120vw;overflow:hidden;position:relative;}
+    #recommendBox .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:2.6vw;left:0}
+    #recommendBox .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
+    #recommendBox .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#E15616;border-radius:.3vw}
+    #recommendBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
+	.special .banner{width: 100%;height: 80vw;}
+	.special .banner img {width: 100%;height: 100%;}
+	.special .content {width: 100%;height: auto;}
+	.special .content .right-box {width: 93.6vw;height: 32vw;padding: 3.2vw;}
+	.special .content .right-box .right-coupon{width: 100%;height: 100%;}
+	.special .content .right-box .right-coupon .right_item_img{width: 100%;height: 100%;}
+	.special .content .left-box{margin-top: 3vw;overflow: hidden}
+	.special .content .left-box .Beautyfair-page .page-title{padding: 4.8vw 0 2.4vw 3.2vw}
+	.special .content .left-box .Beautyfair-page .page-title h1{font-size: 4.8vw;color: #4a4f58;font-weight: bold;line-height: 9.7vw}
+	.special .content .left-box .Beautyfair-page .page-title p{font-size: 3.4vw;color: #93979f;line-height: 4.3vw;}
+	.special .content .left-box .Beautyfair-page .list a{width: 45.6vw;height: 32.4vw;display: block;float: left;margin-right:2.4vw;margin-bottom: 2.4vw;background-color: #FFFFFF;}
+	.special .content .left-box .Beautyfair-page {width: 100%;height: auto;float: left;}
+	.special .content .left-box .Beautyfair-page .list a img {width: 100%;height: 100%;}
+	.special .content .left-box .Beautyfair-page .list{padding-left: 3.2vw;overflow: hidden}
+	.special .content .left-box .Beautyfair-page .list.exhibitor a{width: 21.6vw;height: 21.6vw;}
+	.special .content .left-box .Beautyfair-page .list.exhibitor{height: 47.9vw;}
+	.Beautyfair-page .section_page_more .more{width: 20vw;height: 6.4vw;margin: 5vw auto;border: .27vw solid #cccccc;color: #909090;font-size: 3vw;line-height: 6.4vw;border-radius: .54vw;position: relative;text-indent: 2vw;}
+    .Beautyfair-page .section_page_more .more .icon:before {background-position: -51.5vw 0px;width:5.4vw;height: 6.7vw;right: 0;position: absolute;}
+	.special .content .left-box .Beautyfair-page .list.live a{width: 41vw;height: 51.8vw;display: inline-block;float: none;flex-shrink: 0}
+	.special .content .left-box .Beautyfair-page .list.live a img{width: 41vw;height: 41vw;}
+	.special .content .left-box .Beautyfair-page .list.live,.special .content .left-box .Beautyfair-page .list.supplier{white-space: nowrap;overflow-x: auto;}
+	.special .content .left-box .Beautyfair-page .list a .page_main_text {height: 10.8vw;padding: 0 3vw;font-size: 3.1vw;color: #4a4f58;line-height:5vw;}
+	.special .content .left-box .Beautyfair-page .list a .page_main_text p {width: 33.5vw;height: 10.8vw;line-height: 10.8vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+	.special .content .left-box .Beautyfair-page .list.Floorplan a{height: 52.5vw;}
+	.special .content .left-box .Beautyfair-page .list.Floorplan a img{height: 35.7vw;}
+	.special .content .left-box .Beautyfair-page .list a .Booth_text{height: 16.8vw;padding:0 3.2vw;}
+	.special .content .left-box .Beautyfair-page .list a .Booth_text p.name{font-size: 3.4vw;width:100%;color: #4a4f58;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4.2vw  0 2vw 0;}
+	.special .content .left-box .Beautyfair-page .list a .Booth_text p{text-align: left;line-height: 4.8vw;}
+	.special .content .left-box .Beautyfair-page .page-title p.more {float: right;padding-right: 5.3vw;cursor: pointer;}
+	.special .content .left-box .Beautyfair-page .list.supplier a{width: 41vw;height: 68vw;display: inline-block;float: none;flex-shrink: 0;}
+	.special .content .left-box .Beautyfair-page .list.supplier a img{height: 41vw;}
+	.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name{white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin-top: 2vw;}
+	.special .content .left-box .Beautyfair-page .list a .page_main_text.shop_name .tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size:2.8vw;float: left;margin-right: 1.3vw;text-align: center;color: #FFFFFF;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 2vw 0px 0px;}
+
+}
 
 

src/main/resources/static/js/product/beautytopic.js

@@ -11,6 +11,10 @@ var beautytopic = new Vue({
                      {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
                      {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
                      {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
+                     {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
+                     {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
+                     {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
+                     {image: 'https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg',name:'北京恩盛众成国际贸易有限公司',num:'21f'},
                  ],
              }
          ],
@@ -28,17 +32,54 @@ var beautytopic = new Vue({
         },
         closepopup:function () {
              this.showflag=false;
-        }
+        },
+         SwiperBanner: function(){
+            setTimeout(function(){
+                if (isPC) {
+                   var swiper = new Swiper('.swiper-container', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination span'
+                                }
+                            });
+                } else {
+                     var swiper = new Swiper('.swiper-container', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween:0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+
+                }
+            },300);
+        },
     },
     mounted:function () {
         var _this = this;
+        _this.SwiperBanner();
         if(globalUserData){
             _this.userId = globalUserData.userId;
         }
         ProductApi.GetbeautyProduct({userId:_this.userId},function (res) {
             if (res.code==0){
                 _this.productList = res.data;
-                console.log(_this.productList)
+               setTimeout(function(){
+                // 图片懒加载
+                $("img[data-original]").lazyload();
+            },500);
             }
         })
     }

src/main/resources/templates/index.html

@@ -897,7 +897,7 @@
         <div class="Popup" v-if="showflag" :class="showflag?'show':''">
             <div class="show_popup">
                 <div class="bg_icon" @click="closepopup"><i class="icon"></i></div>
-                <div class="bg_img"><img src="/static/img/Beautyfair/youhui.png"></div>
+                <div class="bg_img"><img src="/img/Beautyfair/youhui.png"></div>
             </div>
         </div>
     </template>

src/main/resources/templates/product/beautytopic.html

@@ -12,9 +12,23 @@
 <template th:replace="components/header"></template>
 <!--美博会专题-->
     <div class="special" id="beautytopic">
+<!--    		<div v-if="listLoading" class="loading">-->
+<!--                <img src="/img/base/loading.gif">-->
+<!--            </div>-->
+<!--            <template v-else>-->
+<!--				-->
+<!--			</template>-->
 			<div class="banner"><img src="https://img-b.caimei365.com/group1/M00/03/0E/Cmgy61_AbE6ASfSAAAXVQSfTjug588.jpg"></div>
 			<div class="content">
 				<div class="inner">
+				<div class="right-box">
+						<div class="right-coupon">
+							<a href="#">
+								<div class="right_item_title" v-if="isPC">优惠券</div>
+								<img src="https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg" class="right_item_img"/>
+							</a>
+						</div>
+					</div>
 					<div class="left-box">
 						<div class="Beautyfair-page">
 							<div class="page-title">
@@ -46,6 +60,9 @@
 								 <a href="#" ><img  src="https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg" /></a>
 								 <a href="#" ><img  src="https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg" /></a>
 							 </div>
+							 <div class="section_page_more" v-if="!isPC">
+                                <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                            </div>
 						</div>
 						<div class="Beautyfair-page">
 							<div class="page-title">
@@ -65,17 +82,17 @@
 								<h1>{{item.shopName}}</h1>
 								<p>这里是展位图描述词</p>
 							</div>
-							 <div class="list Floorplan">
-								 <a href="javascript:0;" v-for="pros in item.prolist" @click="bigImag(pros.image)">
-									 <img  :src="pros.image" />
-									 <div class="Booth_text">
-										 <p class="name">{{pros.name}}</p>
-										 <p class="number">{{pros.num}}</p>
-									 </div>
-								 </a>
-							 </div>
-							 <div class="section_page_more" >
-							 	<div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+							 <div class="list Floorplan swiper-container"  id="recommendBox" >
+							 	<div class="swiper-wrapper clear mfw ">
+									<a href="javascript:0;" class="swiper-slide" v-for="pros in item.prolist" @click="bigImag(pros.image)">
+										 <img  :src="pros.image" />
+										 <div class="Booth_text">
+											 <p class="name">{{pros.name}}</p>
+											 <p class="number">{{pros.num}}</p>
+										 </div>
+									 </a>
+								</div>
+								<div class="swiper-pagination swiper-pagination-floor mfc"><span v-if="isPC" v-for="i in  Math.ceil(item.prolist.length / 4)"></span></div>
 							 </div>
 						</div>
 						<div class="Beautyfair-page" v-for="(item,index) in productList">
@@ -86,7 +103,8 @@
 							</div>
 							 <div class="list supplier">
 								 <a :href="'/product-'+pros.productID+'.html'" v-for="(pros,index) in item.productSet" >
-									 <img  :src="pros.mainImage" />
+								 <img src="/img/base/placeholder.png" :data-original="pros.mainImage">
+<!--									 <img  :src="pros.mainImage" />-->
 									 <div class="page_main_text shop_name">
 										 <span class="tag">美博会</span>
 										 {{pros.name}}
@@ -173,14 +191,7 @@
 						</div>
 
 					</div>
-					<div class="right-box">
-						<div class="right-coupon">
-							<a href="#">
-								<div class="right_item_title">优惠券</div>
-								<img src="https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg" class="right_item_img"/>
-							</a>
-						</div>
-					</div>
+
 				</div>
 			</div>
 		<!-- 大图弹窗	-->