.container { background-color: #f9f9f9; } .hot-word-container { width: 60%; height: 50rpx; overflow: hidden; position: relative; /* flex: 1; */ border-radius: 50rpx; /* margin: 0 20rpx; */ } .hot-word-scroll { transition: transform 0.5s ease; } .hot-word-item { height: 50rpx; line-height: 50rpx; padding: 0 15rpx; color: #666; } .hot-word-item:active { background-color: #f5f5f5; } .searchBox2 { display: flex; align-items: center; } .white_container { background: #FFFFFF; padding: 0 20rpx; } page { background-color: #FFFFFF; } .grid_Pic { width: 61.5rpx; height: 63.14rpx; 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; } .search2 { padding: 10rpx 0; width: 55%; position: relative; left: -190rpx; } .function-nav { display: flex; justify-content: space-around; padding: 20rpx 0; margin: 20rpx -20rpx 0 -20rpx; background-color: #f7f6fb; } .function-item { width: 200rpx; height: 180rpx; display: flex; flex-direction: column; align-items: center; border-radius: 20rpx; background-color: #fff; } .icon-box { width: 120rpx; height: 100rpx; border-radius: 10rpx; margin-top: 15rpx; margin-bottom: 10rpx; display: flex; justify-content: center; align-items: center; } .icon-box image { width: 90rpx; height: 90rpx; } .function-item text { font-size: 28rpx; color: #333; } .searchBox2 { width: 100%; height: 60rpx; background-color: #f6f7fb; border-radius: 100rpx 100rpx 100rpx 100rpx; margin-right: 170rpx; display: flex; box-sizing: border-box; align-items: center; padding: 0 20rpx; font-size: 26rpx; } .searchBox2 image { width: 40rpx; height: 28rpx; margin-right: 16rpx; } .swiper { width: 710rpx; height: 300rpx; margin: 0 auto; margin-top: 10rpx; position: relative; border-radius: 20rpx; overflow: hidden; } .swiper swiper { height: 100%; } .margin_top20 { margin-top: 20rpx; } .cirList { position: absolute; left: 50%; bottom: 22rpx; 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; } .tabList text{ font-size: 30rpx; } .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%; } /* 广告横幅 */ .serverList1 { width: 100%; height: 450rpx; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background-color: #fff; margin-top: 20rpx; padding: 15rpx; } .serverList1_left { display: block; width: 330rpx; height: 450rpx; margin-right: 17rpx; } .serverList1_left image { height: 450rpx; width: 330rpx; object-fit: cover; border-radius: 20rpx; } .serverList1_right { width: 400rpx; height: 450rpx; } .serverItemRight1 { width: 365rpx; height: 220rpx; } .serverItemRight1 image { border-radius: 20rpx; } .serverItemRight2 { width: 365rpx; height: 220rpx; margin-top: 10rpx; } .serverItemRight2 image { border-radius: 20rpx; } .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; margin-left: 15rpx; } .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_left swiper { height: 100%; } .serverList_right { flex: 1; display: flex; flex-wrap: wrap; } .serverList_right1 { width: 48%; } .serverList_right2 { width: 48%; margin-left: 10rpx; } .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: 0rpx; bottom: 0rpx; width: 120rpx; height: 70rpx; } .serverItem2 image { position: absolute; right: 0rpx; bottom: 0rpx; width: 120rpx; height: 70rpx; } .serverItem3 image { position: absolute; right: 0rpx; bottom: 0rpx; width: 120rpx; height: 70rpx; } .serverItem4 image { position: absolute; right: 0rpx; bottom: 0rpx; width: 120rpx; height: 70rpx; } .serverItem5 image { position: absolute; right: 0rpx; bottom: 0rpx; width: 120rpx; height: 70rpx; } .serverItem6 image { position: absolute; right: 0rpx; bottom: 0rpx; height: 70rpx; width: 120rpx; } .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; } /* 分类标签栏样式 */ .category-tabs { background-color: #fff; border-radius: 10rpx; margin-top: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; } .tabs-container { display: flex; padding: 0 20rpx; position: relative; align-items: center; } .tabs-scroll { height: 50rpx; display: flex; overflow-x: auto; padding: 20rpx 0; scrollbar-width: none; -ms-overflow-style: none; } .tabs-scroll::-webkit-scrollbar { display: none; } .tab-item { padding: 0 20rpx; margin-right: 20rpx; font-size: 28rpx; color: #333; background-color: #ededed; height: 50rpx; line-height: 50rpx; white-space: nowrap; border-radius: 10rpx; } .tab-item.activeTab { color: #ff6700; background-color: #fff3e0; } .dropdown-btn { width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; margin-left: 10rpx; } .dropdown-icon { width: 50rpx; height: 50rpx; align-items: center; transition: transform 0.3s ease; } .dropdown-icon.active { transform: rotate(180deg); } /* 下拉分类列表样式 */ .category-dropdown { background-color: #fff; border-radius: 0 0 10rpx 10rpx; box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1); padding: 20rpx; position: relative; z-index: 99; width: 95%; left: 0; /* top: 88rpx; */ } .dropdown-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; padding-bottom: 15rpx; border-bottom: 1rpx solid #eee; } .review-btn { width: 80rpx; height: 50rpx; background-color: #ff6700; color: #fff; font-size: 26rpx; text-align: center; line-height: 50rpx; border-radius: 8rpx; margin-right: 10rpx; align-self: center; } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rpx; } .category-grid-item { padding: 20rpx; text-align: center; font-size: 24rpx; color: #666; background-color: #f5f5f5; border-radius: 8rpx; } .category-grid-item.activeTab { color: #ff6700; background-color: #fff3e0; font-weight: bold; } /* 店铺列表样式 */ .store-list-container { background-color: #fff; border-radius: 10rpx; padding: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); position: relative; } .overlay { position: absolute; top: 90rpx; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 98; } .store-item { display: flex; padding: 20rpx 0; border-bottom: 1rpx solid #f0f0f0; } .store-item:last-child { border-bottom: none; } .store-image { width: 180rpx; height: 180rpx; border-radius: 10rpx; margin-right: 20rpx; overflow: hidden; } .store-image image { width: 100%; height: 100%; object-fit: cover; } .store-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .store-name { font-size: 32rpx; color: #333; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .store-rating { display: flex; align-items: center; margin: 10rpx 0; } .star-icon { width: 24rpx; height: 24rpx; margin-right: 5rpx; } .rating-text { font-size: 26rpx; color: #ffb400; margin-left: 5rpx; } .store-tags { display: flex; flex-wrap: wrap; margin-bottom: 10rpx; } .tag { background-color: #f5f5f5; color: #666; font-size: 24rpx; padding: 5rpx 15rpx; border-radius: 15rpx; margin-right: 10rpx; margin-bottom: 10rpx; } .store-address { font-size: 26rpx; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; } .address-icon { width: 24rpx; height: 24rpx; margin-right: 5rpx; } .store-distance { font-size: 26rpx; color: #999; margin-top: 5rpx; display: flex; align-items: center; } .distance-icon { width: 24rpx; height: 24rpx; margin-right: 5rpx; } .merchantList { padding: 0 20rpx; width: 100%; box-sizing: border-box; } .merchantList2 {} .merchantItem { display: flex; padding-top: 30px; padding-bottom: 30rpx; border-bottom: 1rpx solid #EBEBEB; ; } .merchantItem_left { width: 180rpx; height: 180rpx; border-radius: 20rpx 20rpx 20rpx 20rpx; overflow: hidden; margin-right: 24rpx; } .merchantItem_left image { width: 100%; height: 100%; } .merchantItem_right { flex: 1; } .merchantItem_right_tit { display: flex; align-items: center; justify-content: space-between; } .merchantItem_right_tit_left { font-size: 30rpx; color: #222222; } .merchantItem_right_tit_right { font-size: 24rpx; color: #555555; } .merchantItem_right_con { margin-top: 14rpx; display: flex; align-items: center; justify-content: space-between; } .merchangtItem_tag { font-size: 22rpx; color: #555555; padding: 5rpx 12rpx; white-space: nowrap; background: rgba(255, 81, 42, 0.1); border-radius: 100rpx 100rpx 100rpx 100rpx; display: inline-block; margin-top: 20rpx; margin-right: 10rpx; } .startList { display: flex; align-items: center; } .startList image { width: 22rpx; height: 22rpx; margin-right: 3rpx; } .merchantItem_right_con_right { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; color: #000000; } .merchantItem_right_con_right image { width: 32rpx; height: 28.59rpx; margin-bottom: 6rpx; } .merchantItem_right_add { font-size: 24rpx; color: #999999; margin-top: 14rpx; } /* 加载更多样式 */ .loading { display: inline-block; width: 30rpx; height: 30rpx; border: 3rpx solid #f3f3f3; border-top: 3rpx solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 10rpx; vertical-align: middle; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }