    @mixin flexCenter {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	@mixin productWidth {
		width: 10rem;		
		@media (max-width:1300px) {
			width: 15rem;
		}
		@media (max-width:599px) {
			width: 90%;
		}
	}
	.scroll-height{
		height: 100vh;
	}

	.banner {
		width: 100vw;
		height: 5rem;
		background:url('/static/product/goods__banner.webp') center center/cover;
		&__box {
			font-size: 24px;
			line-height: 5rem;
		}
	}
	
    // 横栏
    .menu {
    	height: 0.5rem;
    	@include flexCenter;
    	background-color: #ffffff;
		@media (max-width:1900px) {
			height: 55px;
		}
		@media (max-width:1300px) {
			height: 0.78rem;
			padding: 0 0.6rem;
		}
		&__container{
			display: flex;
			justify-content: space-between;
			@include productWidth;	
			&__left{
				width: 1.6rem;
			}
			
			&__box{	
				display: flex;
				font-family: MiSans-Regular;
                flex-basis: 65%;
				&__list {
					height: auto;
					padding: 0.12rem 0;
                    margin: 0 auto;
					display: flex;
					align-items: center;
					color: #333333; 
				    
					li {
						padding: 0 .3rem;
						height: auto;
						line-height: 0.2rem;
						border-right: 0.01rem solid #e5e5e5;
						text-align: center;
						cursor: pointer;
				    
						&:last-child {
							border-right: none;
						}
					}
				    
					&--Active {
						color: #2164ff;
					}
				}
			}			
			
			&__dropdown{
				min-width: 1.6rem;
				height: inherit;
				position: relative;
				font-size: inherit;
				&__selected{	
					width: inherit;
					cursor: pointer;
					position: relative;
					border-left: 0.015rem solid #e5e5e5;
					border-right: 0.015rem solid #e5e5e5;
					height: 100%;
					color: #333;
					display: flex;
                    line-height: 0.45rem;
					justify-content: space-between;
					align-items: center;
					
					&__text {
						min-width: 1.4rem;
						text-align: center;
						font-size: inherit;
					}
					
					&__arrow {
						width: 0.2rem;
						height: inherit;
						.iconfont{
							font-weight: bold;
							color: #333;
							display: inline-block;
							vertical-align: middle;
							font-size: 10px;
							line-height: inherit;
							transition-property: transform;
							transition-duration: 0.3s;
							transition-timing-function: ease;
							transform-origin: 50% 50%;
						}				
						
						&--down {
							transform: rotate(180deg);
						}	
					}
				}
				&__options{
					position: absolute;
					top: calc(100% + 5px);
					left: 0;
					width: 100%;
					margin-top: 0;
					padding: 0;
					list-style: none;
					background-color: #fff;
					border-radius: 0.05rem;
					box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
					z-index: 800;
					height: auto;
					overflow-y: auto;
					padding-bottom: 0.1rem;
					&__item{
						line-height: 2.7;
						text-align: center;
						cursor: pointer;
						transition: background-color 0.3s;
						&:hover{
							background-color: #f0f0f0; 
						}
					}
				}
			}
		}
        @media (max-width:1750px) {
        	font-size: 0.17rem;
        }
        @media (max-width:1300px) {
        	font-size: 0.22rem;
			&__container{
			    &__left{
			        display: none;
			    }
			    &__box{
			        flex-basis: 70%;
			    }
			    &__dropdown{
			        min-width: 2.2rem;
					&__selected{
						&__text {
							min-width: 2rem;
						 }
					}
			    }
			}
        }
        @media (max-width:900px) {
        	font-size: 0.3rem;
            height: auto;
            min-height: 1rem;
            &__container{                
                &__left{
                    display: none;
                }
                &__box{
                    flex-basis: 70%;
                }
                &__dropdown{
                    min-width: 3rem;
                }
            }
        }	
		@media (max-width:800px) {
			font-size: 0.35rem;
		    height: auto;
		    min-height: 1rem;
		    &__container{                
		        &__left{
		            display: none;
		        }
		        &__box{
		            flex-basis: 70%;
		        }
		        &__dropdown{
		            min-width: 3.8rem;
		        	&__selected{
		        		&__text {
		        			min-width: 3.6rem;
		        		 }
		        	}
		        }
		    }
		}	
        @media (max-width:600px) {
            font-size: 0.56rem;
            height: 2rem;
            padding: 0 0rem;     
            &__container{               
                 display: flex;
                 flex-direction: column;
				 align-items: center;
                 height: 2rem;
                &__box{
                    flex-basis: 100%;					
					margin: 0;
					padding: 0;
					height: inherit;
					&__list{
						padding: 0;
						height: inherit;
						width: 100%;
						li{
							padding: 0 0.5rem;							
							line-height: 2rem;
							font-size: 0.6rem;
							letter-spacing: 0.02rem;
							border-right: 0;
						}
					}
                }
               &__dropdown{
                   margin: 0.8rem auto 0 0;
                   width: 8.3rem;
                   float: right;
                   font-size: 0.56rem;
                   &__selected{                      
                      background-color: #fff;
                      border: 1px solid #e5e5e5;                       
                      padding: 0.5rem;
					  &__text {
					  	min-width: 6rem;						
					  	text-align: center;
						padding-left: 1rem;
					  }
					  &__arrow {
					  	width: 1rem;
					  }
                   }
                   &__options{  
					   font-size: 0.56rem;
                       width: 8.3rem;
					   box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
                       &__item{
                       	  padding: 0.3rem 0.2rem;
                       }
                   }
               }
            }
            
        }
    }
	// 导航
	.mobile-menu{
		@media (max-width:600px) {
			margin-bottom: 3rem;
		}
	}
    // 商品列表	
	.goods {		
		min-height: 6rem;
		margin: 0 auto;
		height: auto;
		@media (max-width:600px) {
			min-height: 13rem;
		}
		// 商品展示2
		&__product {
			margin: 0.3rem auto 1rem;
			width: 10rem;	
			
			&__list {
				display: flex;
				flex-wrap: wrap;
                @media (max-width:499px) {
                    justify-content: space-between;
                    margin-bottom: 3rem;
					min-height: 17rem;
                }
				&__li {
                    flex-basis: 32.5%;
					border-radius: 0.1rem;
					background: #ffffff;
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					height: 5rem;
                    margin-right: 1.2%;
					
					@media (min-width:850px) {
                       &:nth-child(3n){
                       	  margin-right: 0;
                        }
					    &:nth-child(n+4) {
					    	margin-top: 1.2%;
					    }
					}
                    &__top{
                        height: 3.25rem;
						width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
						&__avater-2{
							height: auto;
							width: 80%;
						}
                        //标志位
                        &__avater {
							border-radius: 0.1rem 0.1rem 0 0;
							width: 100%;
                            height:3.25rem;
							object-fit: contain;
                        }
                    }					
					&__content {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-family: MiSans-Medium;
						width: 100%;
						&__box{
							height: 1rem;
							font-size: 0.2rem;							
							color: #333333;
							line-height: 1.6;
							text-align: center;
							display: flex;
						    flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 90%;
							&__title{
								font-family: "Microsoft YaHei";
							}
						}
						
						&__btn {
							width: 1.1rem;
							height: 0.4rem;
							background: #1777ff;
							border-radius: 0.26rem;
							color: #ffffff;
							line-height:0.4rem;
							font-size: 0.16rem;
							cursor: pointer;
							text-align: center;
							font-family: MiSans-Regular;
						}
                        
                        @media (max-width:1300px) {
                            &__box{
								font-size: 0.25rem;
								margin-top: 5%;
							}
                            &__btn{
                                font-size: 0.22rem;
                                margin: 0.3rem 0;
                                width: 1.5rem;
                                height: 0.5rem;
                                line-height:0.5rem ;
                            }
                        }   
                        @media (max-width:1100px) {
							&__box{								
								font-size: 0.3rem;  
								line-height: 1.7;
								margin-top: 0rem;
							}
                            &__btn{
                                font-size: 0.26rem;
                                margin: 0.3rem 0;
                                width: 1.8rem;
                                height: 0.5rem;
                                line-height:0.5rem ;
                            }
                        }  
                         @media (max-width:849px) {
							 &__box{								
								font-size: 0.4rem; 
							 }
                             &__btn{
                                 font-size: 0.36rem;
                                 margin: 0.8rem 0;
                                 width: 2.6rem;
                                 border-radius: 2rem;
                                 height: 0.8rem;
                                 line-height:0.8rem ;
                             }
                        }
                        @media (max-width:600px) {
							 &__box{
								height: 2rem;
							 	font-size: 0.55rem;
								line-height: 1.7;
							 }
                             &__btn{
                                 font-size: 0.45rem;
                                 margin: 0.5rem 0;
                                 width: 3rem;
                                 border-radius: 2rem;
                                 height: 1rem;
                                 line-height:1rem ;
                             }
                        }
						@media (max-width:499px) {
							 &__box{
							 	font-size: 0.66rem;
							 }
						     &__btn{
						         font-size: 0.55rem;
						         margin: 0.5rem 0;
						         width: 4rem;
						         border-radius: 2rem;
						         height: 1.2rem;
						         line-height:1.2rem ;
						     }
						}
					}
				}
				&__li--point{
					cursor: default;
				}
			}
			@media (max-width:1300px) {
				width: 15rem;
				&__list{
					width: inherit;
					&__li{
						height: 7.2rem;				
						&__top{
							height: 4.5rem;
							
						}
						
						@media (max-width:849px) {
						    &__top{
						        height: 6rem;
						    }
                            margin-right: 2.5%;
						    height: 9.5rem;
						    flex-basis: 47%;
						    &:nth-child(n+3) {
						    	margin-top: 2.5%;
						    }
						    &:nth-child(2n){
						    	margin-right: 0;
						    }
						}
					}
				}
				
				@media (max-width:600px) {
					width: 90%;
					&__list{
						width: 100%;
						margin-top: 1.5rem;
						&__li{	
							height: 13rem;  
							flex-basis: 48%;
							 margin-right: 2%;
							&:nth-child(n+3) {
								margin-top: 4%;
						   }								
						   &__top{
						       height: 8rem;
						   }
						}
					}
				}
			}
            &__page-num {
            	width: fit-content;
            	height: auto;
            	margin: 0.4rem auto 0.3rem;
            	display: flex;
            	justify-content: space-between;
            					
            	&__item {
            		width: 0.4rem;
            		height: 0.4rem;
            		font-size: 0.18rem;
            		text-align: center;
            		line-height: 0.4rem;
            		background-color: #ffffff;
            		cursor: pointer;
            		margin: 0 0.1rem;
            		border-radius: 50%;
            		border: 0.01rem solid #d0d0d0;
            		color: #000;
            	}
            					
            	&--active {
            		color: #fff;
            		background-color: #1777ff;
            		font-size: 0.18rem;
            	}
            					
            	&--grey {
            		color: #bfbfbf;
            		cursor: not-allowed;
            		color: #eee;
            		pointer-events: none;
            	}
            					
            	@media (max-width:1024px) {
            		width: fit-content;
            		height: 0.4rem;
            		margin: 0.4rem auto 0.6rem;
            		display: flex;
            		justify-content: space-between;
            					
            		&__item {
            			width: 1rem;
            			height: 1rem;
            			font-size: 0.36rem;
            			text-align: center;
            			line-height: 1rem;
            			background-color: #ffffff;
            			cursor: pointer;
            			margin: 0 0.2rem;
            			border-radius: 50%;
            			color: #000;
            		}
            					
            		&--active {
            			color: #fff;
            			background-color: #1777ff;
            		}
            					
            		&--grey {
            			color: #bfbfbf;
            			border: 1px solid #bfbfbf;
            			cursor: not-allowed;
            			color: #eee;
            			pointer-events: none;
            		}
            					
            		@media (max-width:640px) {
            			height: 1rem;
            			margin: 1rem auto 1rem;
            					
            			&__item {
            				width: 1.2rem;
            				height: 1.2rem;
            				font-size: 0.5rem;
            				text-align: center;
            				line-height: 1.2rem;
            			}
            					
            			&--active {
            				color: #fff;
            				line-height: 1.2rem;
            				background-color: #1777ff;
            				font-size: 0.5rem;
            			}
            		}
            	}	
            }
		}
	}