page { background: #F9F9F9; /* background: #fff; */ height: 100%; } .project-scroll-x::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { display: none; /* Chrome Safari */ } .content { padding: 0 28rpx 56rpx; } .top .name { font-size: 36rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #FA7D22; margin: 22rpx 0 26rpx; } .top .store { font-size: 32rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; } .top .address { margin: 10rpx 0; } .top .address image { width: 28rpx; height: 28rpx; border-radius: 50%; background-color: #ccc; margin-right: 10rpx; } .border-radius { background: #FFFFFF; box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.04); border-radius: 24rpx; margin: 20rpx 0; padding: 0 20rpx; } .border-radius .title { font-size: 32rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; padding: 20rpx 0; } .border-radius .line { height: 2rpx; background: #F9F9F9; box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.04); border-radius: 24rpx; width: 100%; } .scroll-x { /* padding: 30rpx 0; */ border-top: 2rpx solid #f9f9f9; border-bottom: 2rpx solid #f9f9f9; } .scroll-x .item { flex-shrink: 0; /* margin-right: 16rpx; */ padding: 30rpx 20rpx; padding-top: 0; position: relative; } .scroll-x .item.active::before { content: ''; position: absolute; bottom: 0; left: 36rpx; background-color: red; width: 40rpx; height: 8rpx; background: linear-gradient(144deg, #FA7D22 0%, #FA4622 100%); border-radius: 24rpx; /* border-bottom: 4rpx solid #FA7D22; */ } .scroll-x .item.active text { font-family: PingFangSC-Medium, PingFang SC; color: #FA7D22; } .scroll-x .item text { font-size: 28rpx; color: #999; } .time-box { padding: 30rpx 0; border-bottom: 2rpx solid #f9f9f9; } .time-box .tabs-title { /* padding: 28rpx 0; */ padding-bottom: 28rpx; } .time-box .tabs-title text { color: #666; position: relative; width: 50%; } .time-box .tabs-title text.active { font-family: PingFangSC-Semibold, PingFang SC; color: #333333; } .time-box .tabs-title text:last-child { text-align: right; } .time-box .tabs-title text:first-child::before { /* content: ""; position: absolute; right: -30%; top: 0; height: 44rpx; width: 2px; background-color: #333333; */ } /* .time-box swiper { min-height: 150px; } */ .time-box .tabs-content { /* display: flex; flex-wrap: wrap; */ display: grid; grid-gap: 30rpx 30rpx; grid-template-columns: repeat(4, 1fr); /* grid-template-rows: repeat(3, 2fr); grid-template-columns: repeat(2, 1fr); */ height: 100%; overflow-y: scroll; } .time-box .tabs-content .item { width: 136rpx; height: 60rpx; border-radius: 16rpx; background: #F9F9F9; color: #333333; font-size: 32rpx; box-sizing: border-box; } .time-box .tabs-content .item.active { font-family: PingFangSC-Medium, PingFang SC; background: #FFF0E6; border-radius: 16rpx; border: 2rpx solid #FA7D22; font-weight: 500; color: #FA7D22; } .time-box .tabs-content .item.no-change { cursor: not-allowed; pointer-events: none; background-color: #F9F9F9; color: #D3D3D3; } .custom-time { height: 120rpx; } .custom-time .input { width: 132rpx; height: 60rpx; box-sizing: border-box; background: #F9F9F9; /* background: #FFFBFC; */ border-radius: 8rpx; /* border: 2rpx solid #FFD3CE; */ font-family: PingFangSC-Medium, PingFang SC; margin-left: 20rpx; } .custom-time .input.active { font-family: PingFangSC-Medium, PingFang SC; background: #FFF0E6; border-radius: 16rpx; border: 2rpx solid #FA7D22; font-weight: 500; color: #FA7D22; } .custom-time image { width: 36rpx; height: 34rpx; /* background-color: red; */ margin-right: 8rpx; } .current-project image { width: 160rpx; height: 160rpx; /* background-color: red; */ margin-right: 20rpx; border-radius: 20rpx; } .project-scroll-x { padding-bottom: 30rpx; } .project-scroll-x .item { flex-shrink: 0; /* margin-right: 28rpx; */ width: 200rpx; } .project-scroll-x .item .project-box { width: 176rpx; height: 200rpx; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.13); overflow: hidden; position: relative; box-sizing: border-box; } .project-scroll-x .item.no-change { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .project-scroll-x .item.active .project-box { border: 2rpx solid #FA7D22; } .project-scroll-x .item .project-img { height: 174rpx; width: 100%; /* background-color: #ccc; */ } .project-scroll-x .item.active .active-img { display: block; } .project-scroll-x .project-box .active-img { width: 40rpx; height: 40rpx; position: absolute; right: 0; top: 0; display: none; } .project-scroll-x .project-box text { width: 100%; background: #FA7D22; font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; color: #FFFFFF; text-align: center; } .project-scroll-x .item.active .name { font-family: PingFangSC-Medium, PingFang SC; } .project-scroll-x .item .name { font-size: 28rpx; margin-top: 12rpx; width: 100%; text-align: center; } .flex-column .label { height: 50rpx; font-size: 36rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; line-height: 50rpx; } .flex-column .label-tips { font-size: 24rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #FF3007; line-height: 34rpx; margin-top: 20rpx; } .item-active .item-active-price { height: 100rpx; justify-content: flex-end; } .item-active-content { padding: 30rpx 0; border-bottom: 2rpx solid #F9F9F9; } .item-active-content .change-img { width: 48rpx; height: 48rpx; } .item-active-content .active-project-img { width: 160rpx; height: 160rpx; margin: 0 16rpx; border-radius: 20rpx; background-color: #efefef; } .item-active-content .right text { font-size: 26rpx; color: #999999; } .item-active-content .project-title { height: 40rpx; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; line-height: 40rpx; } .item-active-content .tags { height: 36rpx; line-height: 36rpx; flex-wrap: wrap; } .item-active-content .tags .tags-item { height: 28rpx; line-height: 28rpx; padding: 4rpx; background: #F7F7F7; border-radius: 8rpx; font-size: 24rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #979797; display: inline; margin-right: 12rpx; } .item-active-content .price2 { font-size: 36rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; text-align: right; color: #FA4622 !important; line-height: 50rpx; } .btm { height: 170rpx; position: fixed; width: 100%; left: 0; bottom: 0; /* bottom: 56rpx; */ background: #fff; /* padding: 0 28rpx; */ } .btm-btn { width: 100%; height: 84rpx; font-size: 36rpx; color: #FFFFFF; margin: 0 40rpx; background: #FA7D22; border-radius: 42rpx; /* margin-top: 64rpx; */ }