.container { background-color: #f9f9f9; } .white_container { background: #FFFFFF; padding: 0 20rpx; } page { background-color: #FFFFFF; } .grid_Pic { width: 54rpx; height: 46rpx; margin-bottom: 20rpx; } .searchBox { display: flex; align-items: center; background-color: #FFFFFF; justify-content: space-between; } .searchBox_add { display: flex; align-items: center; font-weight: 400; font-size: 26rpx; color: #000000; } .searchBox_add image { width: 33rpx; height: 33rpx; margin-right: 10rpx; } .swiper { width: 710rpx; height: 300rpx; margin: 0 auto; margin-top: 30rpx; position: relative; } .margin_top20 { margin-top: 20rpx; } .cirList { position: absolute; left: 50%; bottom: 22rpx; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: flex; align-items: center; } .cir { width: 6rpx; height: 6rpx; border-radius: 50%; background-color: #fff; margin-right: 6rpx; } .active { width: 12rpx; height: 6rpx; border-radius: 100rpx; } .tabList { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 50rpx; margin-top: 40rpx; } .tabItem { width: 33.33%; display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size: 26rpx; color: #222222; margin-bottom: 46rpx; height: 100rpx; justify-content: space-between; } .tabImg { width: 54rpx; max-height: 54rpx; height: 54rpx; } .tabImg image { width: 100%; height: 100%; } .Tit { display: flex; align-items: center; padding-top: 30rpx; margin-bottom: 35rpx; font-weight: normal; font-size: 36rpx; color: #222222; } .local { max-width: 414rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .Tit_desc { padding: 0 12rpx; height: 36rpx; background: linear-gradient( 90deg, #FFA100 0%, #FF6A00 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; font-weight: normal; font-size: 26rpx; color: #FFFFFF; } .serverList { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .serverItem { border-radius: 30rpx; width: 208rpx; height: 114rpx; box-sizing: border-box; padding-top: 11rpx; padding-left: 13rpx; font-weight: 600; font-size: 26rpx; color: #222222; position: relative; margin-bottom: 12rpx; } .serverList_left { display: block; width: 260rpx; height: 369rpx; margin-right: 17rpx; } .serverList_right { flex: 1; display: flex; flex-wrap: wrap; } .serverItem1 { background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%); margin-right: 12rpx; } .serverItem2 { background: #FFF4E5; } .serverItem3 { background: #F1FFEC; margin-right: 12rpx; } .serverItem4 { background: #F0FDFF; } .serverItem5 { background: #EFF7FF; margin-right: 12rpx; } .serverItem6 { background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%); } .serverItem1 image { position: absolute; right: 12rpx; top: 14rpx; width: 103rpx; height: 100rpx; } .serverItem2 image { position: absolute; right: 6rpx; top: 8rpx; width: 108rpx; height: 108rpx; } .serverItem3 image { width: 116rpx; height: 83rpx; position: absolute; right: 0rpx; top: 30rpx; } .serverItem4 image { width: 130rpx; height: 86rpx; position: absolute; top: 30rpx; right: 11rpx; } .serverItem5 image { width: 162rpx; height: 93rpx; position: absolute; right: 0rpx; top: 23rpx; } .serverItem6 image { width: 72rpx; height: 72rpx; position: absolute; top: 30rpx; right: 20rpx; } .merchant { height: 90rpx; line-height: 90rpx; text-align: center; width: 710rpx; border-radius: 100rpx 100rpx 100rpx 100rpx; background: linear-gradient( 91deg, #FF7658 0%, #FF370B 100%); font-weight: normal; font-size: 36rpx; color: #FFFFFF; margin-top: 28rpx; } .padding_bottom32 { padding-bottom: 32rpx; } .main { display: flex; flex-wrap: wrap; } .list_pic { width: 345rpx; height: 345rpx; margin-right: 20rpx; margin-bottom: 20rpx; } .list_pic:nth-child(2n) { margin-right: 0; } .more { font-weight: normal; font-size: 26rpx; color: #999999; margin: 65rpx auto; text-align: center; }