page { padding: 0 !important; } .container2 { display: flex; flex-direction: column; height: 83vh; overflow: hidden; } .main { flex: 1; box-sizing: border-box; overflow: hidden; overflow-y: auto; position: relative; padding-bottom: 160rpx; } .searchBox { display: flex; align-items: center; background-color: #fff; } .Filter { display: flex; align-items: center; background-color: #fff; margin-top: -20rpx; } .Filter_right { width: 133rpx; height: 110rpx; background: #FFFFFF; border-radius: 0rpx 0rpx 0rpx 0rpx; font-size: 26rpx; color: #333; display: flex; align-items: center; justify-content: center; margin-left: 200rpx; } .activeFilter { color: #FF370B; } .Filter_right image { width: 22rpx; height: 24rpx; margin-left: 7rpx; } .iptBox { width: 431rpx; height: 70rpx; background: #F6F7FB; border-radius: 100rpx 100rpx 100rpx 100rpx; margin-left: 40rpx; display: flex; align-items: center; padding-left: 30rpx; box-sizing: border-box; } .iptBox image { width: 30rpx; height: 30rpx; margin-right: 16rpx; } .iptBox .u-input { padding: 0 !important; background-color: transparent !important; } .Filter_left { display: flex; align-items: center; overflow: hidden; overflow-x: auto; white-space: nowrap; } /* 选中状态图片样式 */ .iconStyle { width: 25rpx !important; height: 45rpx !important; } /* 默认状态样式 */ .FilterItem image:not(.iconStyle) { width: 20rpx; height: 20rpx; } .FilterItem:not(.active) { /* 默认字体样式 */ font-size: 26rpx; color: #333; } .FilterItem { font-size: 26rpx; color: #222222; display: flex; align-items: center; padding: 0 20rpx; margin-right: 10rpx; } .FilterItem image { width: 24rpx; height: 15rpx; margin-left: 10rpx; } .MasterList { margin-top: 30rpx; background-color: #fff; padding: 12rpx 20rpx 20rpx 20rpx; } .MasterItem { display: flex; align-items: center; margin-bottom: 20rpx; border-bottom: 1rpx solid #EBEBEB; box-sizing: border-box; padding-bottom: 30rpx; padding-top: 20rpx; } .MasterItem:last-child { border-bottom: none; } .MasterItem_right { flex: 1; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; } .MasterItem_info { box-sizing: border-box; display: flex; align-items: flex-start; } .MasterItem_Info_left { display: flex; flex-direction: column; justify-content: center; width: 130rpx; margin-right: 40rpx; } .MasterItem_Info_left image { width: 130rpx; height: 130rpx; } .state { width: 110rpx; height: 40rpx; border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #FFFFFF; margin: 0 auto; margin-top: -20rpx; z-index: 2; position: relative; } .state1 { background: #AECE2B; } .state2 { background: #CECECE; } .state3 { background: #FF370B; } .MasterItem_Info_right { flex: 1; } .filter-section { padding: 20rpx 30rpx; border-bottom: 1rpx solid #f5f5f5; } .filter-title { font-size: 28rpx; color: #333; margin-bottom: 20rpx; font-weight: bold; } .filter-options { display: flex; flex-wrap: wrap; gap: 15rpx; } .filter-option { border-radius: 10rpx; border: 1rpx solid #cccccc; padding: 12rpx 30rpx; font-size: 24rpx; color: #666; white-space: nowrap; } .filter-option.active { background: #ff370b; color: white; } .price-range { display: flex; align-items: center; gap: 20rpx; margin-top: 10rpx; } .price-input { flex: 1; height: 60rpx; border: 1rpx solid #cccccc; border-radius: 10rpx; padding: 0 20rpx; font-size: 24rpx; } .price-separator { font-size: 28rpx; color: #999; } .filter-buttons { display: flex; justify-content: space-between; padding: 20rpx 30rpx; margin-top: 10rpx; } .reset-button { width: 200rpx; height: 70rpx; border: 1rpx solid #cccccc; border-radius: 50rpx; background: #d9d9d9; color: black; display: flex; align-items: center; justify-content: center; font-size: 28rpx; } .confirm-button { width: 200rpx; height: 70rpx; background: #ff370b; border-radius: 50rpx; color: white; font-size: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; } .MasterItem_Info_right_1 { display: flex; align-items: center; font-size: 36rpx; color: #222222; justify-content: space-between; } .Medal { width: 35rpx; height: 40rpx; margin-left: 6rpx; margin-right: 28rpx; } .star { width: 22rpx; height: 22rpx; margin-right: 6rpx; } .MasterItem_Info_right_1 span { font-size: 26rpx; color: #000000; } .MasterItem_Info_right_2 { font-size: 26rpx; color: #999999; margin-top: 8rpx; } .MasterItem_Info_right_3 { font-size: 26rpx; display: flex; color: #999999; align-items: center; margin-top: 16rpx; } .MasterItem_Info_right_3 span { color: #FF370B; } .MasterItem_Info_right_4 { display: flex; align-items: center; margin-top: 16rpx; } .tagItem { width: 130rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; border-radius: 100rpx 100rpx 100rpx 100rpx; font-size: 22rpx; color: #555555; margin-right: 10rpx; } .tag1 { background: rgba(255, 178, 23, 0.1); } .tag2 { background: rgba(255, 81, 42, 0.1); } .tag3 { background: rgba(175, 175, 175, 0.1); } .MasterItem_Info_right_5 { font-size: 28rpx; color: #999999; display: flex; align-items: center; margin-top: 16rpx; } .MasterItem_Info_right_5 span { color: #FF370B; } .MasterItem_Info_right_6 { display: flex; align-items: center; margin-top: 20rpx; } .MasterItem_Info_right_6 image { width: 110rpx; height: 110rpx; margin-right: 20rpx; border-radius: 20rpx; overflow: hidden; } .Btn { font-size: 36rpx; color: #FFFFFF; width: 600rpx; height: 90rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; bottom: 60rpx; transform: translateX(-50%); z-index: 3; } .local { display: flex; align-items: center; } .local span { font-weight: 700; margin: 0 10rpx; } .filterMore1 { display: flex; align-items: center; overflow: hidden; overflow-x: auto; white-space: nowrap; margin: 40rpx 0 20rpx 0; } .filterMoreItem { font-size: 26rpx; color: #222222; display: flex; align-items: center; padding: 0 20rpx; margin-right: 10rpx; margin-right: 20rpx; border-radius: 10rpx; border: 1rpx solid #cccccc; padding: 10rpx 20rpx; } .filterMoreItem-active { color: #ff702c !important; border: 1rpx solid #ff702c; } .filterMore2_item { display: flex; align-items: center; justify-content: space-between; margin: 0 10rpx 45rpx 10rpx; color: #999; } .filterMore2_item_left {} .active3 { color: #ff702c !important; } .filterMore2_item_left2 { color: #000; } .filterMore3Item { font-size: 26rpx; color: #555555; width: 130rpx; height: 50rpx; background: #F6F7FB; border-radius: 10rpx 10rpx 10rpx 10rpx; display: flex; align-items: center; justify-content: center; margin-right: 40rpx; margin-bottom: 18rpx; } .filterMore3Item:nth-child(4n) { margin-right: 0; } .fullscreen-black-bg { /* position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .4); box-sizing: border-box; z-index: 9; overflow: hidden; */ } .FilterMore3 { width: 100%; background-color: #fff; padding: 20rpx; box-sizing: border-box; display: flex; flex-wrap: wrap; } .FilterMore { width: 100%; background-color: #fff; padding: 20rpx; box-sizing: border-box; } .dialogBox { position: absolute; background-color: rgba(0, 0, 0, .4); z-index: 8; width: 100%; height: 100%; } .master_info_right_left { display: flex; align-items: center; } .master_info_right_right { font-size: 28rpx; color: #FF370B; }