@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page, .center { height: auto; min-height: 100%; background-color: #ffffff; } .input-box { padding: 25rpx; background-color: #0fc8e4; height: 44px; } .input-box .iconsearch { font-size: 50rpx; } .input-box .input-content { border-radius: 99rpx; flex-grow: 1; padding: 5rpx 30rpx; background: #ffffff; } .input-box .input-content .input { flex-grow: 1; } .input-box .input-content .input input { font-size: 28rpx; } .input-box .input-button { padding-left: 20rpx; font-size: 28rpx; height: 100%; } .top { width: 1000rpx; height: 240rpx; background: linear-gradient(180deg, #08c4e6, #50ead2); overflow: hidden; text-align: center; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; margin-left: -125rpx; } .carousel { width: 700rpx; height: 300rpx; border-radius: 14rpx; margin: 0 auto; margin-top: calc(-260rpx + 25px); } .carousel .bor { border-radius: 14rpx; } .carousel .bor .carousel-item image { width: 100%; height: 100%; border-radius: 14rpx; } .swiper-dot { position: relative; z-index: 10; margin-top: -40rpx; display: flex; justify-content: center; } .swiper-dot .swiper-dots-item { width: 14rpx; height: 14rpx; background: #aaaaaa; border-radius: 50%; margin: 0 16rpx; } .swiper-dot .action { background-color: #ffffff; } .cate-section { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding: 40rpx 22rpx; /* 原图标颜色太深,不想改图了,所以加了透明度 */ } .cate-section .cate-item { display: flex; flex-direction: column; align-items: center; font-size: 28rpx; color: #303133; } .cate-section .cate-font { margin-top: -26rpx; } .cate-section image { width: 150rpx; height: 150rpx; margin-bottom: 14rpx; border-radius: 50%; } .xian { width: 750rpx; height: 20rpx; background: #f5f5f5; } .main { margin-top: 40rpx; padding: 0 40rpx; } .main .main-top { align-items: center; } .main .main-top .main-left { display: flex; justify-content: flex-start; align-items: center; } .main .main-top .main-left .shu { width: 8rpx; height: 38rpx; background: #05ab81; border-radius: 4rpx; } .main .main-top .main-left .main-title { margin-left: 10rpx; font-size: 36rpx; font-family: PingFang SC; font-weight: bold; color: #202739; } .main .main-top .main-left .main-tip { font-size: 22rpx; font-family: PingFang SC; font-weight: bold; color: #95a0b1; margin-left: 14rpx; } .guess-item { display: flex; width: 710rpx; height: 290rpx; background: #ffffff; box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); border-radius: 10rpx; padding: 15rpx; padding-bottom: 150rpx; margin: 20rpx auto 0; position: relative; } .guess-item image { width: 260rpx; height: 260rpx; border-radius: 10rpx; } .guess-item .guess-box { padding: 12rpx 0 0 24rpx; width: 436rpx; } .guess-item .guess-box .title { font-size: 30rpx; padding-left: 4rpx; font-family: PingFang SC; font-weight: 500; color: #333333; width: 368rpx; line-height: 36rpx; } .guess-item .guess-box .title .tuanF { display: inline-block; margin-right: 4rpx; position: relative; top: -6rpx; } .guess-item .guess-box .title .tuanF .tuan { display: flex; align-items: center; padding: 10rpx; height: 36rpx; background: #ffebe9; border-radius: 18rpx; } .guess-item .guess-box .title .tuanF .tuan .tuan-image { width: 18rpx; height: 18rpx; } .guess-item .guess-box .title .tuanF .tuan .tuan-font { display: inline; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; color: #ff1135; margin-left: 2rpx; } .guess-item .guess-box .ping-box { margin-top: 15rpx; justify-content: flex-start; } .guess-item .guess-box .ping-box .ping { margin-left: 10rpx; height: 39rpx; background: #fdf7eb; border-radius: 5rpx; font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: #ff911f; display: flex; align-items: center; padding: 0 10rpx; } .guess-item .guess-box .price-box { margin-top: 80rpx; justify-content: flex-start; } .guess-item .guess-box .price-box .yuanprice { font-size: 26rpx; font-family: PingFang SC; font-weight: 500; text-decoration: line-through; color: #999999; padding-right: 6rpx; } .guess-item .guess-box .price-box image { width: 14rpx; height: 16rpx; } .guess-item .guess-box .price-box .jiang { padding-left: 2rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: bold; color: #b59467; } .guess-item .guess-box .price { font-size: 36rpx; font-family: PingFang SC; font-weight: bold; color: #ff1135; } .guess-item .guess-box .btn { width: 137rpx; height: 56rpx; background: #16cc9f; border-radius: 28rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #ffffff; line-height: 56rpx; text-align: center; position: absolute; bottom: 25rpx; right: 25rpx; } .popup { width: 640rpx; background-color: #ffffff; border-radius: 15rpx; text-align: center; } .popup .popup-dox { position: relative; top: -60rpx; } .popup .popup-dox .popup-logo { width: 460rpx; height: 132rpx; } .popup .popup-dox .pop-title { font-size: 40rpx; font-weight: bold; color: #333333; padding: 25rpx 0rpx; margin-bottom: 50rpx; } .popup .popup-dox .popup-text { width: 400rpx; height: 400rpx; margin-bottom: 50rpx; } .popup .popup-dox .btn { width: 300rpx; height: 50rpx; line-height: 50rpx; background: #96e4f2; margin: 0 auto; color: #ffffff; border-radius: 25rpx; } .popup .popup-dox .pop-tip { font-size: 30rpx; font-weight: 500; color: #333333; justify-content: center; margin-top: 20rpx; } .popup .popup-dox .pop-tip .weixin { width: 48rpx; height: 40rpx; margin-right: 14rpx; } .popup .popup-dox .pop-tip .weixin image { width: 48rpx; height: 40rpx; } .close_icon { width: 60rpx; height: 60rpx; margin: 88rpx auto 0; } .close_icon image { width: 100%; height: 100%; }