@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ .f-header .tit { font-size: 34rpx; color: #303133; line-height: 1; font-weight: bold; } .f-header .tit-box { flex: 1; display: flex; flex-direction: column; } /*功能栏左侧小图标*/ .f-header .f-left-icon { height: 34rpx; width: 8rpx; background-image: linear-gradient(#5dbc7c, #71d094); margin-right: 10rpx; border-radius: 10rpx; } .Mask { width: 100%; height: 100vh; position: fixed; z-index: 99999; background-color: rgba(0, 0, 0, 0.7); top: 0; } .Mask image { width: 100%; height: 100vh; } .hot-goods { margin: 0 25rpx; padding: 5rpx 25rpx 30rpx 25rpx; background-color: #fff; border-radius: 10rpx; } .hot-goods .hot-headers { margin: 25rpx 0; width: 100%; display: flex; } .hot-goods .hot-headers .img { width: 32rpx; height: 32rpx; margin-right: 10rpx; } .hot-goods .hot-headers .hot-title { font-size: 30rpx; margin-right: 15rpx; } .hot-goods .hot-headers .more { line-height: 1; padding: 5rpx 10rpx 5rpx 15rpx; text-align: center; font-size: 20rpx; border-radius: 15rpx; color: #ffffff; background: linear-gradient(90deg, #fa3426 0%, #f91e53 100%); } .hot-goods .hot-headers .more image { width: 20rpx; height: 20rpx; } .hot-goods .hot-lists { line-height: 1; display: flex; } .hot-goods .hot-lists .hot-produce { width: 100%; height: 260rpx; border-top: 1px solid #f0f0f0; display: flex; padding-top: 28rpx; } .hot-goods .hot-lists .hot-produce .produce-image { width: 200rpx; height: 200rpx; } .hot-goods .hot-lists .hot-produce .produce-image image { width: 200rpx; height: 200rpx; border: 1px solid #f0f0f0; } .hot-goods .hot-lists .hot-produce .produce-content { margin-left: 30rpx; height: 200rpx; position: relative; width: calc(100% - 200rpx - 30rpx); } .hot-goods .hot-lists .hot-produce .produce-content .produce-name { font-size: 28rpx; font-weight: bold; line-height: 35rpx; color: #343434; } .hot-goods .hot-lists .hot-produce .produce-content .produce-info { font-size: 20rpx; margin-top: 25rpx; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price { display: flex; align-items: flex-end; color: #ff383e; font-size: 24rpx; margin-top: 70rpx; font-weight: bold; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price text { font-size: 36rpx; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price .produce-price-1 { font-size: 22rpx; font-weight: 500; text-decoration: line-through; color: #aaaaaa; margin-left: 20rpx; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 { height: 100%; letter-spacing: 3rpx; color: #ff383e; font-size: 24rpx; font-weight: bold; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center { width: 100%; position: absolute; bottom: 0; display: flex; justify-content: space-between; align-items: center; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_word .word-1 { font-size: 22rpx; color: #666666; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_word .word-2 { font-size: 28rpx; color: #ff383e; margin-top: 10rpx; } .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_button { height: 50rpx; width: 150rpx; border-radius: 25rpx; font-size: 26rpx; font-weight: 500; color: #ff383e; border: 1px solid #ff383e; } page { background: #f7f8f7; } .m-t { margin-top: 16rpx; } /* 头部 轮播图 */ .carousel-section { position: relative; padding-top: 10px; overflow: hidden; } .carousel-section .titleNview-placing { height: 25px; padding-top: 44px; box-sizing: content-box; } .carousel-section .titleNview-background { position: absolute; top: 0; left: 0; width: 100%; height: 426rpx; transition: 0.4s; } .carousel-section .carousel { width: 100%; height: 240rpx; } .carousel-section .carousel .carousel-item { width: 100%; height: 100%; padding: 0 28rpx; overflow: hidden; } .carousel-section .carousel image { width: 100%; height: 100%; border-radius: 15rpx; } .swiper-dots { display: flex; position: absolute; left: 60rpx; bottom: 15rpx; width: 72rpx; height: 36rpx; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); background-size: 100% 100%; } .swiper-dots .num { width: 36rpx; height: 36rpx; border-radius: 50px; font-size: 24rpx; color: #fff; text-align: center; line-height: 36rpx; } .swiper-dots .sign { position: absolute; top: 0; left: 50%; line-height: 36rpx; font-size: 12rpx; color: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* 分类 */ .cate-section { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding: 30rpx 22rpx; /* 原图标颜色太深,不想改图了,所以加了透明度 */ } .cate-section .cate-item { display: flex; flex-direction: column; align-items: center; font-size: 26rpx; color: #303133; } .cate-section image { width: 88rpx; height: 88rpx; margin-bottom: 14rpx; border-radius: 50%; opacity: 0.7; } .ad-1 { width: 100%; height: 210rpx; padding: 10rpx 0; background: #fff; } .ad-1 image { width: 100%; height: 100%; } /*公用边框样式*/ .uservip .detail .icon, .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; } .f-header { display: flex; align-items: center; height: 92rpx; padding: 6rpx 30rpx 8rpx; } .f-header image { flex-shrink: 0; width: 80rpx; height: 80rpx; margin-right: 20rpx; } .f-header .iconenter { font-size: 34rpx; color: #909399; } .f-header .iconfont { font-size: 22rpx; } .uservip { border-radius: 15rpx; background-color: white; box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3; height: 300rpx; margin: 0 30rpx; } .uservip image { height: 100%; width: 300rpx; } .uservip .detail { position: relative; padding: 20rpx; height: 100%; } .uservip .detail .price-box { position: absolute; bottom: 20rpx; width: calc(100% - 40rpx); } .uservip .detail .price-box .price { font-size: 34rpx; font-weight: bold; color: #606266; } .uservip .detail .price-box .text { color: #999999; font-size: 24rpx; } .uservip .detail .title { font-size: 32rpx; font-weight: bold; } /* 猜你喜欢 */ .guess-section { display: flex; flex-wrap: wrap; padding: 0 30rpx; } .guess-section .guess-item { 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: 100%; height: 330rpx; border-radius: 3px; overflow: hidden; } .guess-section .image-wrapper image { width: 100%; height: 100%; opacity: 1; } .guess-section .title { font-size: 28rpx; color: #303133; font-weight: bold; line-height: 80rpx; } .guess-section .price { font-size: 32rpx; color: #606266; font-weight: bold; line-height: 1; line-height: 80rpx; } .guess-section .detail { line-height: 1; } .guess-section .tip { color: white; background-color: #fd5b23; line-height: 1.5; font-size: 24rpx; padding-left: 20rpx; } .recommend { width: 95%; height: 155rpx; margin: 0rpx auto; padding-top: 30rpx; font-size: 26rpx; text-align: center; color: #333333; align-items: flex-start; } .recommend .recommend_list { width: 33%; } .recommend .re_title { font-size: 32rpx; font-weight: bold; } .recommend .re_name { color: #999999; padding-top: 10rpx; } .recommend .selected_icon { width: 25rpx; height: 10rpx; margin: 0px auto; display: none; } .recommend .selected_icon image { width: 100%; height: 100%; } .recommend .active { display: block; } .recommend .active_color { color: #dc4d46 !important; } .list-box-h { height: 1550rpx; } .coupon-list { display: inline-block; } .row { border-radius: 15rpx; margin: 25rpx; height: 155rpx; overflow: hidden; background-color: #ffffff; padding-right: 25rpx; } .row .list-interval { border: 1px dashed #ebeef5; height: 100%; } .row .list-interval .top, .row .list-interval .bottom { border-radius: 100rpx; width: 30rpx; height: 30rpx; position: absolute; background-color: #f8f8f8; right: -15rpx; } .row .list-interval .top { top: -18rpx; } .row .list-interval .bottom { bottom: -18rpx; } .row .list-money { height: 100%; min-width: 155rpx; text-align: center; } .row .list-money image { height: 100%; width: 20rpx; } .row .list-money .list-money-text { flex-grow: 1; padding: 0 25rpx; } .row .list-money .list-money-text .tit { text-align: center; padding: 15rpx 0rpx; font-size: 55rpx; color: #dd524d; font-weight: bold; } .row .list-money .list-money-text .tit.noAction { color: #909399; } .row .list-money .list-money-text .price { padding-bottom: 25rpx; color: #909399; } .row .row_list_right { min-width: 200rpx; padding-left: 25rpx; line-height: 1; } .row .row_list_right .right_time { padding: 10rpx 0rpx; color: #909399; font-size: 24rpx; } .row .row_list_right .right_top { margin: 15rpx 0; } .row .row_list_right .right_top .right_name { font-size: 28rpx; color: #bc253a; font-weight: bold; } .row .row_list_right .right_top .right_title { font-size: 28rpx; color: 28rpx; font-weight: bold; } .row .row_list_right .right_top .right_title.noAction { color: #909399; } .row .right_use { margin: 15rpx 0; padding: 10rpx; width: 160rpx; text-align: center; color: #fff; background-color: #bc253a; border-radius: 50rpx; font-size: 24rpx; } .row .right_use.noAction { background-color: #909399; } .row .iconlocation { font-size: 36rpx; color: #909399; } .navbar { display: flex; height: 40px; padding: 0 5px; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); position: relative; z-index: 10; } .navbar .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 15px; color: #303133; position: relative; } .navbar .nav-item.current { color: #000; font-weight: bold; } .navbar .nav-item.current:after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 44px; height: 0; border-bottom: 2px solid #E60012; } .top-swiper { position: relative; } .top-swiper .banner-swiper { width: 750rpx; height: 390rpx; } .top-swiper .banner-swiper .swiper-img { display: block; width: 750rpx; height: 390rpx; } .top-swiper .banner-swiper swiper-item { width: 750rpx; height: 390rpx; } .top-swiper .input-box { position: absolute; top: 0; left: 0; width: 100%; padding: 25rpx; z-index: 999; height: 44px; } .top-swiper .input-box .iconsearch { font-size: 50rpx; } .top-swiper .input-box .input-content { border-radius: 99rpx; flex-grow: 1; padding: 10rpx 30rpx; background-color: rgba(255, 255, 255, 0.7); } .top-swiper .input-box .input-content .input { flex-grow: 1; } .top-swiper .input-box .input-content .input input { font-size: 32rpx; } .top-swiper .input-box .input-button { padding-left: 20rpx; font-size: 32rpx; height: 100%; } .zd-wrap { width: 750rpx; height: 203rpx; background: #FFFFFF; margin: 20rpx auto; padding: 30rpx 28rpx; flex-direction: column; justify-content: space-between; align-items: flex-start; } .zd-wrap .zd-tip { color: #FF0018; } .hot { width: 22rpx; height: 22rpx; margin-right: 10rpx; } .art-time { display: inline-block; font-size: 24rpx; font-weight: 500; color: #7F8699; } .art-time text { margin-right: 10rpx; } .art-list { background-color: #fff; width: 750rpx; font-size: 31rpx; font-weight: 500; color: #323232; } .art-item { width: 691rpx; border-bottom: #E1E1E1 1px solid; margin: auto; } .art-item-zero { height: 153rpx; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 20rpx 0; border-bottom: #E1E1E1 1px solid; } .art-item-one { height: 195rpx; margin: auto; padding: 30rpx 0 20rpx; } .art-item-one .art-left { height: 100%; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-right: 40rpx; } .art-item-one .art-right { width: 227rpx; height: 145rpx; border-radius: 10rpx; flex-shrink: 0; } .art-item-one .art-right image { width: 100%; height: 100%; border-radius: 10rpx; } .art-item-three { height: 345rpx; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 30rpx 0; } .art-item-three .art-img-list { width: 100%; height: 145rpx; } .art-item-three .art-img-list image { width: 220rpx; height: 145rpx; border-radius: 10rpx; margin-right: 15rpx; } .art-item-three .art-img-list image:last-child { margin-right: 0; } .class-box { white-space: nowrap; height: 40px; position: relative; background-color: #fff; } .class-box .item { text-align: center; display: inline-block; color: #606266; height: 100%; background-color: #ffffff; line-height: 1; } .class-box .item .status { font-size: 30rpx; margin: 0 auto; width: 60px; height: 100%; line-height: 40px; } .class-box .item .status.action { color: #000; font-weight: bold; position: relative; } .class-box .item .status.action:after { content: ''; position: absolute; left: 50%; bottom: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 33px; height: 0; border-bottom: 2px solid #E60012; }