.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%; } } .main_content { display: flex; height: calc( 100% - 120rpx ); .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_scroll{ width: 540rpx; padding-left: 40rpx; } .query_wrap { display: flex; flex-wrap: nowrap; .item { flex-shrink: 0; margin-right: 48rpx; 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; width: 590rpx; overflow: hidden; .list { width: 100%; display: flex; flex-wrap: wrap; padding: 30rpx 40rpx; max-height: 480rpx; 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 { position: absolute; background-color: #fff; z-index: 99; display: flex; width: 590rpx; 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% - 100rpx ); width: 590rpx; box-sizing: border-box; padding: 12rpx 40rpx; .empty{ width: 590rpx; height: 92rpx; } .item { float: left; width: 242rpx; flex-shrink: 0; margin-bottom: 32rpx; &:nth-of-type(2n){ margin-right: 26rpx; } .img_wrap { width: 242rpx; border-radius: 8rpx; overflow: hidden; position: relative; .img { width: 242rpx; height: 136rpx; } .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: 26rpx; 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; }