.container { height: 100vh; display: flex; flex-direction: column; } page { padding: 0; } .header { height: 360rpx; width: 750rpx; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bg.png) no-repeat; background-size: 100% 100%; } .searchBox { display: flex; align-items: center; z-index: 2; } .searchBox_left { box-sizing: border-box; padding-left: 20rpx; } .searchBox_ipt { width: 431rpx; height: 70rpx; background: #FFFFFF; border-radius: 100rpx 100rpx 100rpx 100rpx; margin-left: 40rpx; box-sizing: border-box; padding-left: 30rpx; display: flex; align-items: center; } .searchBox_ipt image { width: 30rpx; height: 30rpx; margin-right: 16rpx; } .slide { display: flex; align-items: center; flex-wrap: nowrap; box-sizing: border-box; padding-left: 18rpx; margin-top: 10rpx; } .open { font-size: 30rpx; color: #FF370B; display: flex; align-items: center; justify-content: center; width: 73rpx; height: 194rpx; /* 文字竖着 */ writing-mode: vertical-rl; } .open image { width: 30rpx; height: 25.8rpx; margin-top: 4rpx; } .slide_con { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; overflow-x: auto; flex: 1; } .slide_conBox { margin-right: 40rpx; } .slide_item {} .slide_item image { width: 100rpx; height: 100rpx; margin-bottom: 18rpx; } .slide_item text { font-size: 28rpx; color: #222222; white-space: nowrap; } .Con { flex: 1; display: flex; overflow: hidden; } .Con_left { background-color: #F6F7FB; height: 100%; overflow: hidden; overflow-y: auto; flex: 0 0 200rpx; } .CateItem { font-size: 30rpx; color: #000000; display: flex; align-items: center; justify-content: center; padding: 35rpx 0; } .CateItem .hot { width: 25.82rpx; height: 30rpx; margin-right: 4rpx; } .CateItem .bao { width: 28rpx; height: 28rpx; margin-right: 4rpx; } .Con_right { flex: 1; position: relative; box-sizing: border-box; /* padding: 10rpx 20rpx; */ box-sizing: border-box; overflow: hidden; position: relative; overflow-y: auto; } .CateInfo_tit { padding: 20rpx 0; padding-left: 15rpx; font-size: 28rpx; color: #222222; border-bottom: 1rpx solid #EBEBEB; position: relative; width: 100%; } .CateInfo_tit::after { content: ''; position: absolute; left: 0rpx; top: 50%; transform: translateY(-50%); width: 5rpx; height: 28rpx; background: #FF370B; border-radius: 0rpx 3rpx 3rpx 0rpx; } .CateInfo_Item { /* display: flex; */ margin-top: 26rpx; } .CateInfo_Item_Box { display: flex; } .CateInfo_Item_left { width: 140rpx; min-width: 140rpx; height: 140rpx; border-radius: 20rpx 20rpx 20rpx 20rpx; overflow: hidden; margin-right: 3rpx; margin-right: 20rpx; } .CateInfo_Item_left image { width: 100%; height: 100%; } .CateInfo_Item_right { flex: 1; border-bottom: 1rpx solid #EBEBEB; padding-bottom: 30rpx; } .CateInfo_Item_right_Tit { font-size: 30rpx; color: #000000; font-weight: bold; } .CateInfo_Item_right_subtit { font-size: 26rpx; color: #999999; margin-top: 10rpx; } .CateInfo_Item_Money { display: flex; align-items: center; justify-content: space-between; margin-top: 27rpx; } .CateInfo_Item_Money_left { font-size: 34rpx; color: #FF370B; } .CateInfo_Item_Money_left span { font-size: 28rpx; } .CateInfo_Item_Money_right .input { padding: 0; } .minus { width: 22px; height: 22px; border-width: 1px; border-color: #E6E6E6; border-style: solid; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; display: flex; justify-content: center; align-items: center; } .input { padding: 0 10px; } .plus { width: 22px; height: 22px; background-color: #FF0000; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .gg { width: 142rpx; height: 40rpx; background: #FFEBEB; border-radius: 20rpx 20rpx 20rpx 20rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #FF370B; margin-top: 12rpx; margin-left: 6rpx; } .CateList_Box { display: flex; overflow: hidden; position: relative; z-index: 9; padding: 20rpx 10rpx; } .CateList { display: flex; overflow: hidden; overflow-x: auto; flex: 1; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; } .CateList_Item { min-width: 110rpx; width: 100rpx; height: 40rpx; background: #F6F7FB; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 26rpx; color: #222222; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; white-space: nowrap; /* margin-bottom: 30rpx; */ } .CateList::-webkit-scrollbar { display: none; } .CateList_Item_active { background: #FF370B; color: #FFFFFF; } .more { display: flex; align-items: center; justify-content: center; margin-left: 10rpx; } .CateInfo { margin: 0 10rpx; padding: 10rpx 10rpx; } .CateListShowBox {} .containerShow { background: rgba(34, 34, 34, 0.4); position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; } .headerShow { height: auto; } .header2 .slide_con { flex-wrap: wrap; } .header2 { height: auto; padding-bottom: 30rpx; position: absolute; left: 0; top: 0; z-index: 11; } .header2 .slide .slide_con .slide_conBox:nth-child(5n) { margin-right: 0; } .hides { display: flex; align-items: center; font-size: 28rpx; color: #999999; margin-top: 50rpx; justify-content: center; } .op0 { opacity: 0; } .boxshadow { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 10; } .activeCateList { display: flex; align-items: center; flex-wrap: wrap; background: #FFFFFF; padding: 20rpx 12rpx; padding-right: 0; position: absolute; z-index: 9; } .activeCateList .CateList_Item { margin-bottom: 16rpx; margin-right: 28rpx; } .activeCateList .CateList_Item:nth-child(4n) { margin-right: 0; } .boxshadow2 { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 8; } .bgf { background-color: #fff; } .btn { width: 510rpx; height: 80rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #FFFFFF; font-family: 700; margin-top: 40rpx; } .btn .cir { width: 40rpx; height: 40rpx; border: 1rpx solid #FFFFFF; border-radius: 50%; margin-left: 20rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .GGList { width: 482rpx; background: rgba(255, 239, 239, 0.5); border-radius: 20rpx 20rpx 20rpx 20rpx; padding: 25rpx 16rpx; box-sizing: border-box; margin-left: 26rpx; } .noneBor { border-bottom: none; } .GGItem { display: flex; align-items: center; } .GGItem_Image { width: 120rpx; height: 100rpx; border-radius: 20rpx 20rpx 20rpx 20rpx; margin-right: 20rpx; } .GGItem_Con_Tit { font-size: 28rpx; color: #000000; } .GGItem_Con { flex: 1; } .GGItem_Con_Msg_left { display: flex; font-size: 30rpx; color: #FF370B; } .GGItem_Con_Msg_left span { font-size: 24rpx; } .GGItem_Con_Msg { display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; } .GGItem_Con_Msg_right .input { padding: 0; } .shadow { background: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; } .shadowBox1{ height: 250rpx; width: 100%; background-color: #fff; } .shop_car{ width: 140rpx; height: 140rpx; position: fixed; right: 33rpx; bottom: 380rpx; z-index: 10; } .shop_car image{ width: 100%; height: 100%; } .u-badge { position: absolute; right: 0; top: -10rpx; }