@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ .vheigh { height: 25px; } .container, page { height: auto; min-height: 100%; background: #f6f6f6; } .top-box { display: flex; justify-content: start; padding: 50rpx 50rpx 20rpx; } .top { width: 500rpx; height: 58rpx; background: #ededed; border-radius: 29rpx; display: flex; justify-content: center; align-items: center; } .top .top-icon { width: 32rpx; height: 32rpx; } .top .top-icon image { width: 100%; height: 100%; } .top .top-main { margin-left: 20rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #cbcbcb; } .banner { margin-top: -2rpx; width: 750rpx; height: 916rpx; } .banner .banner-item { width: 750rpx; height: 916rpx; } .banner .banner-item image { width: 100%; height: 100%; } .hot-title { align-items: center; justify-content: center; display: flex; } .hot-title .hot-title-icon { width: 20rpx; height: 12rpx; } .hot-title .hot-title-icon image { width: 100%; height: 100%; } .hot-title .hot-title-font { margin: 0 28rpx; font-size: 32rpx; font-family: PingFang SC; font-weight: bold; color: #000000; } .hot-tip { text-align: center; margin-top: 12rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #000000; } .hot-box { margin-top: 47rpx; } .hot-box .hot-main { padding-top: 5rpx; } .hot-box .hot-main .hot-main-item { margin: 24rpx auto 0; width: 704rpx; background: #ffffff; border-radius: 20rpx; padding-bottom: 26rpx; position: relative; } .hot-box .hot-main .hot-main-item .time { position: absolute; z-index: 2; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); border-radius: 16rpx 24rpx 24rpx 0px; display: flex; align-items: center; } .hot-box .hot-main .hot-main-item .time .sq { height: 74rpx; display: flex; justify-content: center; align-items: center; padding: 12rpx 20rpx; background: #000000; font-size: 24rpx; font-family: PingFang SC; font-weight: bold; color: #ffffff; border-radius: 16rpx 0px 0px 0px; } .hot-box .hot-main .hot-main-item .time .time-main { display: flex; align-items: center; padding: 12rpx 20rpx; font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: #ffffff; } .hot-box .hot-main .hot-main-item .hot-main-image { width: 704rpx; height: 452rpx; background: #ffffff; border-radius: 20rpx 20rpx 0px 0px; } .hot-box .hot-main .hot-main-item .hot-main-image image { width: 100%; height: 100%; border-radius: 20rpx 20rpx 0px 0px; } .hot-box .hot-main .hot-main-item .hot-name { padding: 18rpx 20rpx 0; font-size: 30rpx; font-family: PingFang SC; font-weight: bold; color: #000000; } .hot-box .hot-main .hot-main-item .hot-tipBox { padding: 18rpx 20rpx 0; line-height: 1; } .hot-box .hot-main .hot-main-item .hot-tipBox .hot-tip { width: 85%; font-size: 26rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } .hot-box .hot-main .hot-main-item .hot-tipBox .sale { font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #999999; } .hot-box .hot-main .hot-main-item .hot-price-box { padding: 18rpx 20rpx 0; } .hot-box .hot-main .hot-main-item .hot-price-box .hot-price { padding: 0 12rpx; font-size: 32rpx; font-family: PingFang SC; font-weight: 800; color: #ff4c4c; } .hot-box .hot-main .hot-main-item .hot-price-box .hot-price .yuan-price { display: inline-block; margin-left: 10rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; text-decoration: line-through; color: #969696; } .hot-box .hot-main .hot-main-item .hot-price-box .btn { width: 172rpx; height: 60rpx; background: #000000; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; font-size: 26rpx; font-family: PingFang SC; font-weight: 500; color: #ffffff; } .hot-box .hot-main .hot-main-item .hot-price-box .btn1 { width: 172rpx; height: 60rpx; background: #ffffff; border: 1px solid #000000; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; font-size: 26rpx; font-family: PingFang SC; font-weight: 500; color: #000000; } .guess-section-box { margin-top: 20rpx; width: 750rpx; background: #fff; padding-top: 30rpx; } .guess-section-box .guess-section-title { display: flex; justify-content: center; align-items: center; } .guess-section-box .guess-section-title .guess-section-xian { width: 120rpx; height: 1px; background: #999999; } .guess-section-box .guess-section-title .guess-section-title-font { margin: 0 70rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: #363636; } .guess-section { margin-top: 40rpx; display: flex; flex-wrap: wrap; padding: 0 30rpx; } .guess-section .guess-item { padding-bottom: 35rpx; overflow: hidden; display: flex; flex-direction: column; width: 48%; margin-bottom: 4%; border-radius: 15rpx; background-color: white; box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3; } .guess-section .guess-item:nth-child(2n + 1) { margin-right: 4%; } .guess-section .image-wrapper { width: 330rpx; height: 330rpx; border-radius: 3px; overflow: hidden; } .guess-section .image-wrapper image { width: 100%; height: 100%; opacity: 1; } .guess-section .title { margin-top: 28rpx; font-size: 28rpx; color: #303133; font-weight: bold; } .guess-section .price { margin-top: 34rpx; font-size: 32rpx; font-family: PingFang SC; font-weight: 800; color: #ff4c4c; line-height: 1; } .guess-section .price .font-size-sm { flex-shrink: 0; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #999999; } .guess-section .price .yuan-price { display: inline-block; margin-left: 10rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; text-decoration: line-through; color: #969696; } .guess-section .detail { line-height: 1; } .guess-section .tip { color: white; background-color: #fd5b23; line-height: 1.5; font-size: 24rpx; padding-left: 20rpx; } /*公用边框样式*/ .guess-section .icon { margin-right: 10rpx; display: inline-block; padding: 2rpx 10rpx; border: 1rpx solid #fd5b23; color: #fd5b23; line-height: 1; font-size: 28rpx; border-radius: 10rpx; } .swiper-dot { margin-top: -18rpx; display: flex; justify-content: center; position: relative; z-index: 2; } .swiper-dot .swiper-dots-item { width: 25rpx; height: 8rpx; border-radius: 4rpx 4rpx; background-color: #9fab9e; margin: 0 16rpx; } .swiper-dot .action { background-color: #ffffff; } .gg { margin-top: 10rpx; width: 750rpx; height: 60rpx; background: #ff3342; padding: 15rpx 30rpx; display: flex; align-items: center; } .gg .gg-icon { width: 28rpx; height: 28rpx; } .gg .gg-icon image { width: 100%; height: 100%; } .gg .tongz-left { width: 100%; margin-left: 10rpx; } .gg .tongz-left .tongz-font { font-size: 26rpx; font-family: PingFang SC; font-weight: bold; color: #ffffff; } .navbar-box { width: 750rpx; background: #10101e; padding: 34rpx 24rpx 36rpx; } .navbar-box image { width: 100%; height: 100%; } .navbar-box .navbar-title { width: 100%; height: 70rpx; } .navbar-box button { width: 33%; height: 100%; padding: 52rpx 0 58rpx; background: #ffffff; line-height: 1; } .navbar-box .navbar-main { margin-top: 28rpx; display: flex; justify-content: space-around; align-items: center; padding: 52rpx 0 58rpx; background: #ffffff; line-height: 1; } .navbar-box .navbar-main .navbar-item::after { border: none; background: #ffffff; height: 0; width: 0; } .navbar-box .navbar-main .navbar-item { width: 33%; display: flex; flex-direction: column; align-items: center; } .navbar-box .navbar-main .navbar-item .navbar-icon { width: 40rpx; } .navbar-box .navbar-main .navbar-item .navbar-font-box { display: flex; justify-content: center; align-content: flex-start; margin-top: 24rpx; align-items: center; } .navbar-box .navbar-main .navbar-item .navbar-font-box .navbar-font { font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #000000; margin-right: 12rpx; } .navbar-box .navbar-main .navbar-item .navbar-font-box .navbar-font-icon { width: 8rpx; height: 16rpx; } .navbar-box .navbar-main .navbar-item .navbar-font-box .navbar-font-icon image { width: 100%; height: 100%; } .navbar-box .navbar-main .navbar-item .navbar-tip { margin-top: 26rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; color: #737372; } .navbar-box .navbar-main .xian { width: 2rpx; height: 118rpx; background: linear-gradient(0deg, #f9e6cd 0%, #fdf6eb 50%, #f9e6cd 100%); }