@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page { background: #ffff; min-height: 100%; height: auto; } .top-search { height: 80rpx; padding: 0 20rpx; background-color: #fff; } .top-search .top-logo { width: 50rpx; margin-right: 10rpx; } .top-search .top-logo image { width: 48rpx; } .top-search .search-box { justify-content: center; width: 698rpx; height: 60rpx; background: #EEEEEE; border-radius: 30rpx; } .top-search .search-box .search { width: 34rpx; height: 34rpx; } .top-search .search-box .search-font { margin-left: 14rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #CBCBCB; } .top-swiper { width: 750rpx; height: 360rpx; } .top-swiper image { width: 750rpx; height: 360rpx; } .swiper-btm { height: 60rpx; width: 750rpx; background-color: #fff; margin-bottom: 20rpx; font-size: 21rpx; font-weight: 500; color: #333333; } .swiper-btm .btm-item { flex-grow: 1; justify-content: center; } .swiper-btm .btm-item image { width: 25rpx; height: 25rpx; margin-right: 14rpx; } .jg { height: 20rpx; background: #F8F8F8; } .cate-section { justify-content: space-around; background-color: #fff; padding: 0rpx 0 30rpx; } .cate-section .cate-item { flex-grow: 0; width: 20%; flex-direction: column; text-align: center; align-items: center; justify-content: center; } .cate-section .cate-item .img-wrapper { width: 90rpx; height: 90rpx; border-radius: 20rpx; position: relative; } .cate-section .cate-item .img-wrapper image { width: 90rpx; height: 90rpx; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cate-section .cate-item .item-title { margin-top: 15rpx; font-size: 26rpx; font-weight: 500; color: #666666; } .product-box { margin-top: 20rpx; background: #ffffff; padding: 26rpx 0 20rpx; } .product-box .product-tit { justify-content: center; } .product-box .product-tit .hx { width: 120rpx; height: 1rpx; background: #4A2723; } .product-box .product-tit .tit { margin: 0 70rpx; font-size: 30rpx; font-weight: 500; color: #4A2723; } .hotgoods { margin-top: 38rpx; width: 100%; display: flex; flex-wrap: wrap; padding: 0 20rpx 30rpx; justify-content: space-between; } .hotgoods .hotgoods-item { width: 345rpx; background-color: #ffffff; border-radius: 12rpx; box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.2); margin-bottom: 15rpx; } .hotgoods .hotgoods-item .image-wrapper { width: 345rpx; height: 345rpx; border-radius: 3px; overflow: hidden; position: relative; } .hotgoods .hotgoods-item .image-wrapper .image-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 1; border-radius: 12rpx 12rpx 0 0; z-index: 2; } .hotgoods .hotgoods-item .image-wrapper .image { width: 100%; height: 100%; opacity: 1; border-radius: 12rpx 12rpx 0 0; } .hotgoods .hotgoods-item .title { margin-top: 24rpx; padding: 0 20rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #333333; } .hotgoods .hotgoods-item .hot-price { display: flex; justify-content: flex-start; align-items: center; } .hotgoods .hotgoods-item .hot-price .hotPrice-box { padding: 2rpx 6rpx; background: linear-gradient(90deg, #c79a4c, #f9df7f); border-radius: 5rpx; text-align: center; line-height: 28rpx; font-size: 20rpx; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } .hotgoods .hotgoods-item .hot-price .price { margin-left: 10rpx; font-size: 40rpx; color: #ff0000; font-weight: 500; } .hotgoods .hotgoods-item .hot-price .price .jf { font-size: 20rpx; } .hotgoods .hotgoods-item .hot-price .yuanPrice { margin-left: 10rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; text-decoration: line-through; color: #999999; } .hotgoods .hotgoods-item .hot-price .cart-icon image { width: 44rpx; height: 44rpx; } .popup-box { width: 522rpx; height: 605rpx; background-color: #ffffff; border-radius: 20rpx; position: relative; } .popup-box .product-tit { justify-content: center; } .popup-box .product-tit .hx { width: 120rpx; height: 1rpx; background: #989898; } .popup-box .product-tit .tit { margin: 0 70rpx; font-size: 30rpx; font-weight: 500; color: #363636; } .popup-box .img { position: relative; top: -56rpx; left: 0; width: 522rpx; height: 132rpx; display: flex; justify-content: center; } .popup-box .img image { border-radius: 20rpx 20rpx 0 0; width: 450rpx; height: 132rpx; } .popup-box .mian { margin-top: -44rpx; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; border-radius: 0 0 20rpx 20rpx; text-align: center; } .popup-box .mian .delivery { font-size: 40rpx; color: #333333; display: flex; align-items: center; flex-direction: column; } .popup-box .mian .delivery image { margin-top: 48rpx; width: 172rpx; height: 160rpx; } .popup-box .mian .nocancel { font-size: 32rpx; color: #333333; margin-top: 14rpx; } .popup-box .mian .comfirm-box { margin-top: 52rpx; display: flex; } .popup-box .mian .comfirm-box .cancel { display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; border: 1px solid #dcc786; border-radius: 38rpx; font-size: 32rpx; color: #605128; } .popup-box .mian .comfirm-box .comfirm { margin-left: 32rpx; display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%); border-radius: 38px; font-size: 32rpx; color: #605128; } .good-list { width: 750rpx; background: #fff; padding: 30rpx 0; } .good-list .good { width: 690rpx; height: 276rpx; background: #FFFFFF; box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); border-radius: 10rpx; margin: auto; padding: 20rpx 15rpx; margin-bottom: 20rpx; } .good-list .good:last-of-type { margin-bottom: 0rpx; } .good-list .good .good-img { flex-shrink: 0; width: 236rpx; height: 236rpx; border-radius: 10rpx; margin-right: 22rpx; } .good-list .good .good-img image { width: 236rpx; height: 236rpx; border-radius: 10rpx; } .good-list .good .good-info { flex-grow: 1; height: 100%; flex-direction: column; justify-content: space-between; align-items: flex-start; } .good-list .good .good-info .good-name { font-size: 32rpx; font-weight: bold; padding-top: 10rpx; color: #333333; } .good-list .good .good-info .good-price { width: 100%; } .good-list .good .good-info .good-price image { width: 14rpx; margin: 0 6rpx 0 10rpx; } .good-list .good .good-info .good-price .old-price .old-left { font-size: 26rpx; font-weight: 500; text-decoration: line-through; color: #999999; } .good-list .good .good-info .good-price .old-price .old-right { font-size: 24rpx; font-weight: bold; color: #B59467; } .good-list .good .good-info .good-price .new-price { width: 100%; font-size: 36rpx; font-weight: bold; color: #FF4C4C; justify-content: space-between; } .good-list .good .good-info .good-price .new-price .good-tip { width: 137rpx; height: 52rpx; background: #ff4a48; border-radius: 26rpx; position: relative; font-size: 26rpx; font-weight: 500; color: #FFFFFF; line-height: 52rpx; text-align: center; }