|   | 
|   | 
| .search_wrap { | 
|   width: 670rpx; | 
|   height: 72rpx; | 
|   margin: 24rpx auto; | 
|   background: #F7F7F7; | 
|   border-radius: 8rpx; | 
|   padding: 0 40rpx; | 
|   display: flex; | 
|   align-items: center; | 
|   background-color: #F7F7F7; | 
|   | 
|   image { | 
|     width: 28rpx; | 
|     height: 28rpx; | 
|     margin-right: 16rpx; | 
|   } | 
| } | 
|   | 
| .app { | 
|   height: 100%; | 
|   width: 100%; | 
|   overflow-y:hidden; | 
|   .home_content{ | 
|     height: 100%; | 
|   } | 
| } | 
|   | 
| .home_top { | 
|   position: fixed; | 
|   z-index: 9999; | 
|   width: 100%; | 
|   background-color: #fff; | 
| } | 
|   | 
| .main_content { | 
|   display: flex; | 
|   padding-top: 120rpx; | 
|   height: 100%; | 
|   .main_left { | 
|     width: 160rpx; | 
|     height: 100%; | 
|     border-radius: 0rpx 16rpx 16rpx 0rpx; | 
|   | 
|     .item { | 
|       width: 160rpx; | 
|       height: 100rpx; | 
|       background: #F7F7F7; | 
|       font-weight: 400; | 
|       font-size: 26rpx; | 
|       color: #666666; | 
|       display: flex; | 
|       justify-content: center; | 
|       align-items: center; | 
|     } | 
|   | 
|     .active { | 
|       background-color: #fff; | 
|       font-weight: 500; | 
|       font-size: 30rpx; | 
|       color: #111111; | 
|     } | 
|   } | 
|   | 
|   .main_right { | 
|     flex: 1; | 
|     position: relative; | 
|     height: 100%; | 
|     .query_wrap { | 
|       display: flex; | 
|       width: 100%; | 
|       .item { | 
|         width: 50%; | 
|         height: 100rpx; | 
|         display: flex; | 
|         align-items: center; | 
|         justify-content: center; | 
|         color: #666666; | 
|         .name { | 
|           margin-right: 12rpx; | 
|         } | 
|       } | 
|     } | 
|   | 
|     .query_form { | 
|       position: absolute; | 
|       z-index: 999; | 
|       background-color: #fff; | 
|   | 
|       .list { | 
|         width: 100%; | 
|         display: flex; | 
|         flex-wrap: wrap; | 
|         padding: 30rpx 40rpx; | 
|         max-height: 400rpx; | 
|         overflow: auto; | 
|         .item { | 
|           width: 154rpx; | 
|           height: 72rpx; | 
|           text-align: center; | 
|           line-height: 70rpx; | 
|           background: #F7F7F7; | 
|           border-radius: 8rpx; | 
|           font-size: 26rpx; | 
|           color: #333333; | 
|           white-space: nowrap; | 
|           overflow: hidden; | 
|           text-overflow: ellipsis; | 
|           margin-right: 24rpx; | 
|           margin-bottom: 24rpx; | 
|   | 
|           &:nth-of-type(3n) { | 
|             margin-right: 0; | 
|           } | 
|         } | 
|   | 
|         .active { | 
|           color: var(--themeColor); | 
|           background: rgba(176, 135, 113, 0.08); | 
|         } | 
|       } | 
|   | 
|       .btns { | 
|         display: flex; | 
|   | 
|         .btn { | 
|           width: 296rpx; | 
|           height: 88rpx; | 
|           background: #E5E5E5; | 
|           color: #666666; | 
|           display: flex; | 
|           justify-content: center; | 
|           align-items: center; | 
|         } | 
|   | 
|         .sub { | 
|           background: var(--themeColor); | 
|           color: #fff; | 
|         } | 
|       } | 
|     } | 
|     .shade{ | 
|       position: absolute; | 
|       width: 100%; | 
|       height: 100%; | 
|       background-color: rgba(0,0,0,.5); | 
|       z-index: 99; | 
|     } | 
|   | 
|     .status { | 
|       display: flex; | 
|       padding: 0rpx 40rpx; | 
|       align-items: center; | 
|       height: 92rpx; | 
|       .active { | 
|         color: var(--themeColor); | 
|       } | 
|   | 
|       .separate { | 
|         margin: 0 12rpx; | 
|         width: 1rpx; | 
|         height: 28rpx; | 
|         background-color: #333333; | 
|       } | 
|     } | 
|   | 
|     .goods_list { | 
|       height: calc( 100% -  182rpx); | 
|       width: 590rpx; | 
|       display: flex; | 
|       flex-wrap: wrap; | 
|       box-sizing: border-box; | 
|       justify-content: space-between; | 
|       padding: 12rpx 40rpx; | 
|       .item { | 
|         width: 242rpx; | 
|         flex-shrink: 0; | 
|         margin-bottom: 32rpx; | 
|         .img_wrap { | 
|           width: 242rpx; | 
|           border-radius: 8rpx; | 
|           overflow: hidden; | 
|           position: relative; | 
|   | 
|           .img { | 
|             width: 242rpx; | 
|             max-height: 216rpx; | 
|           } | 
|   | 
|           .new { | 
|             width: 72rpx; | 
|             position: absolute; | 
|             left: 0; | 
|             top: 0; | 
|             z-index: 10; | 
|           } | 
|         } | 
|   | 
|         .name { | 
|           margin: 12rpx 0 8rpx; | 
|           display: -webkit-box; //将盒子转换为弹性盒子 | 
|           -webkit-box-orient: vertical; //文本显示方式,默认水平 | 
|           -webkit-line-clamp: 1; //设置显示多少行 | 
|           overflow: hidden; | 
|         } | 
|   | 
|         .info { | 
|           display: flex; | 
|           align-items: center; | 
|           color: #666666; | 
|   | 
|           .icon { | 
|             width: 28rpx; | 
|             height: 28rpx; | 
|             margin-right: 8rpx; | 
|           } | 
|   | 
|           .num { | 
|             margin-right: 28rpx; | 
|           } | 
|   | 
|           .primary { | 
|             color: var(--themeColor); | 
|           } | 
|         } | 
|       } | 
|     } | 
|     .empty_wrap{ | 
|       width: 100%; | 
|       display: flex; | 
|       padding-top: 200rpx; | 
|       justify-content: center; | 
|     } | 
|     .default_empty{ | 
|       width: 300rpx; | 
|       height: 300rpx; | 
|     } | 
|   } | 
| } |