page { background-color: #f6f6fa; padding: 0 !important; } .container { display: grid; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; } .header { z-index: 9; overflow-x: auto; } .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; } .Filter_right { width: 133rpx; height: 110rpx; background: #FFFFFF; border-radius: 0rpx 0rpx 0rpx 0rpx; font-size: 30rpx; color: #FF370B; display: flex; align-items: center; justify-content: center; } .Filter_right image { width: 26rpx; height: 30rpx; 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; } .FilterItem { font-size: 28rpx; 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; } .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; } .filterMore1 { display: flex; align-items: center; overflow: hidden; overflow-x: auto; white-space: nowrap; margin-top: 20rpx; } .filterMoreItem { font-size: 28rpx; color: #222222; display: flex; align-items: center; background-color: #f6f6fa; padding: 0 20rpx; margin-right: 10rpx; margin-right: 20rpx; border-radius: 20rpx; padding: 10rpx 20rpx; } .filterMore2_item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; color: #999; } .filterMore2_item_left {} .active2 { 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; }