@import "./index.skeleton.wxss"; page { background: #F7F7F7; } .navigationBar { /* background: #FFFFFF; */ } .commonHead.isTop{ background: #FFFFFF; } .commonHead { width: 100%; height: 128rpx; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: fixed; top: 0; left: 0; bottom: 0; z-index: 999; transition: all .15s; } .commonContent{ width: 100%; position: relative; } .commonHeadWrap { position: absolute; overflow: hidden; left: 0; bottom: 9px; width: 100%; padding-left: 0; display: flex; align-items: center; } .headIconBox { height: 100%; margin-right: 8px; padding-left: 16px; } .headIconBox .icon { width: 24px; height: 24px; } .commonHeadTextBox { /* width: 450rpx; */ width: 100%; height: 100%; line-height: 44px; text-align: center; font-size: 15px; overflow: hidden; justify-content: flex-end; } .headTitle { width: 360rpx; margin: 0 auto; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #161719; } .pageContainer { position: relative; } .indexTopContent { position: relative; } .pageTopBack { height: 108rpx; } .pageBack { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 332rpx; } .swiperBox { height: 260rpx; overflow: hidden; position: relative; padding: 0 32rpx; margin-bottom: 24rpx; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiperBox.sel { margin-bottom: 0; } .pageContent { padding-top: 24rpx; } .pageContent.noBanner{ /* padding-top: 0; */ } /* .pageContent{ padding-top: 320rpx; } .pageContent.noBanner{ padding-top: 388rpx; } */ .swiperBox swiper { height: 260rpx; overflow: hidden; border-radius: 16rpx; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiperBox swiper.sel { pointer-events: none; } .swiperBox.twoSwiper { height: 906rpx !important; margin-bottom: 8rpx; margin-top: 24rpx; } .twoSwiperImage { height: 906rpx; overflow: hidden; border-radius: 16rpx; } .swiperBox.twoSwiper swiper { height: 906rpx !important; } .swiperBox .swiperImg { width: 100%; border-radius: 16rpx; height: 100%; } .wx-swiper-dots.wx-swiper-dots-horizontal { display: flex; position: absolute; z-index: 10; bottom: 16rpx; justify-content: center; left: 60rpx; } .pageOneSwiper .wx-swiper-dots.wx-swiper-dots-horizontal { bottom: 92rpx !important; left: 50%; transform: translateX(-50%); } .wx-swiper-dots .wx-swiper-dot { width: 8rpx; height: 8rpx; background: rgba(255, 255, 255, 0.7); margin: 0 6rpx !important; border-radius: 50%; } .wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active { width: 24rpx; height: 8rpx; background: #FFFFFF; border-radius: 4rpx; opacity: 1; } .tabList { white-space: nowrap; overflow: scroll; display: flex; /* margin-top: 8rpx; */ -webkit-overflow-scrolling: touch; } ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } .tabBox { height: 92rpx; } .tabItem { height: 100%; padding: 0 16rpx; display: inline-block; position: relative; overflow: hidden; } .tabItem:first-child { padding-left: 32rpx; } .tabItem:last-child { padding-right: 32rpx; } .tabBox.noBanner { background: white; height: 114rpx; margin-bottom: 16rpx; } .tabBox.noBanner .tabItem { background: white; } .tabText { height: 100%; font-size: 32rpx; color: #5f6268; /* transition: all .2s; */ padding-top: 12rpx; } .tabText.sel { font-size: 36rpx; font-weight: bold; color: #DF3120; } .tabItem .tag { position: absolute; width: 60rpx; height: 8rpx; left: 50%; margin-left: -30rpx; /* top: 98rpx; */ bottom: 0; background: #DF3120; border-radius: 4rpx; } .noBanner .tabItem .tag { top: 88rpx !important; bottom: auto !important; } .noBanner .tabText { padding-top: 0; } .tabItem.a .tag { margin-left: -22rpx; } .goodsList { flex-wrap: wrap; padding: 0 24rpx 16rpx 24rpx; } .goodsItem { width: 50%; margin-bottom: 16rpx; } .goodsContent { margin: 0 8rpx; height: 550rpx; background: #ffffff; border-radius: 16rpx; overflow: hidden; display: flex; flex-direction: column; } .goodsImgBox { width: 100%; height: 336rpx; } .goodsImgBox image { width: 100%; height: 100%; } .goodsInfoBox { padding: 16rpx; display: flex; position: relative; flex: 1; flex-direction: column; justify-content: space-between; } .goodsInfoBox .title { font-size: 28rpx; color: #161719; } .goodsNameText{ display: inline; } .goodsInfoBox .title .icon{ vertical-align: middle; width: 88rpx; height: 36rpx; margin-right: 8rpx; position: relative; top: -2rpx; } .goodsInfoBox .title .goodsMyZy{ width: 116rpx; } .goodsInfoBox .sales { font-size: 24rpx; color: #909297; padding-top: 4rpx; } .sales .number{ margin-left: -4rpx; } .botBox { /* padding-top: 16rpx; */ padding-bottom: 12rpx; } .priceBox { color: #e73e2d; font-size: 24rpx; align-items: baseline; } .priceBox .pra { font-weight: bold; font-size: 36rpx; margin-left: 6rpx; } .linkprice{ font-size: 20rpx; color: #909297; margin-right: 2rpx; padding-top: 12rpx; margin-left: 8rpx; align-items: baseline; } .linkprice .lPr{ text-decoration: line-through; font-size: 22rpx; } .addCartBox{ font-size: 0; position: absolute; z-index: 10; right: 0; bottom: 0; padding: 0 16rpx 24rpx 16rpx; } .addCartBox image { width: 56rpx; height: 56rpx; } .commonHead.isTop .searchCon{ background: #F7F7F7 !important; width: 235px !important; margin-left: 16px !important; } .searchCon.noLeft{ width: 235px; margin-left: 16px; } .searchCon { background: #ffffff; border-radius: 20px; padding: 0 8px; width: 205px; height: 32px; } .searchCon .icon{ width: 24px; height: 24px; } .searchCon .searchText { font-size: 14px; color: #909297; margin-left: 4px; text-align: center; } .videoContent{ padding: 0 32rpx; } .videoBox{ width: 100%; height: 380rpx; border-radius: 16rpx; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); position: relative; margin-bottom: 32rpx; } .videoBox video{ width: 100%; height: 100%; border-radius: 16rpx; } .videoImageBox{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 16rpx; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); background: #FFFFFF; } .videoIcon{ position: absolute; z-index: 99; width: 96rpx; height: 96rpx; margin-left: -48rpx; margin-top: -48rpx; top: 50%; left: 50%; } .videoCover{ width: 100%; height: 100%; } .videoMantle{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); } .pageTopCom{ position: relative; font-size: 0; } .pageRow1{ z-index: 2; } .pageItem{ position: relative; font-size: 0; overflow: hidden; } .pageIOne{ height: 968rpx; width: 100%; } .clickList{ position: absolute; z-index: 10; left: 20rpx; right: 0; bottom: 120rpx; } .clickItem{ width: 285rpx; height: 168rpx; background: transparent; } .pageITwo{ width: 100%; height: 406rpx; } .rightBack{ width: 110rpx; height: 1760rpx; position: absolute; right: 0; z-index: 10; top: 0; } .rightBack.two{ height: 1342rpx; } .imageTy{ width: 100%; top: -68rpx; right: 0; left: 0; height: 147rpx; z-index: 1; position: absolute; } .pageIThree{ width: 100%; height: 942rpx; } .rowTitleBox{ position: relative; height: 164rpx; overflow: hidden; } .rowTitleBox.mt{ margin-top: 80rpx; } .titleBack{ position: absolute; z-index: -1; right: 0; left: 0; height: 100%; width: 100%; top: 0; bottom: 0; } .titleValue{ font-size: 32rpx; font-weight: bold; color: #6C4208; max-width: 400rpx; padding-top: 2rpx; } .gInfoBox .gTitle{ font-size: 32rpx; font-weight: bold; color: #6C4208; } .gInfoBox .gTool{ font-size: 32rpx; color: #6C4208; margin-top: 4rpx; } .gInfoBox .gLink{ width: 276rpx; height: 2rpx; background: rgba(108, 66, 8, 0.20000000298023224); margin-top: 20rpx; } .gInfoBox .gPrice{ margin-top: 36rpx; font-size: 24rpx; color: #E73E2D; } .gInfoBox .gPrice .pSel{ font-size: 44rpx; font-weight: bold; } .gInfoBox .gImgBot{ padding-top: 22rpx; } .gInfoBox .gImgBot image{ width: 192rpx; height: 68rpx; } .pageGoodsBB{ height: 130rpx; width: 100%; margin-top: 40rpx; } .pageBotBack{ background: #F7F7F7; } /* 轮播图1 */ .swiperContainer{ width: 100%; height: 800rpx; position: relative; } .oneSwiperImage { width: 100%; height: 800rpx; overflow: hidden; } .swiperImage{ width: 100%; height: 100%; } .noOneData{ width: 100%; height: 800rpx; position: relative; } .pageMainItemBox{ padding: 0 32rpx; } /* 轮播图2 */ .swiperContainer.two{ height: 250rpx; overflow: hidden; border-radius: 8rpx; margin-bottom: 32rpx; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiperContainer.two .oneSwiperImage{ height: 250rpx; border-radius: 8rpx; overflow: hidden; } .swiperContainer.two .swiperImage{ height: 100%; } .imageBannerRight{ position: absolute; z-index: 10; right: 0; top: 0; height: 911rpx; width: 38rpx; } .benefitBox{ margin-top: -68rpx; position: relative; z-index: 10; } .benefitItem{ width: 356rpx; height: 236rpx; position: relative; } .benefitItem .back{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; } .pageKkBox{ margin-bottom: 24rpx; } .pageKkBox image{ width: 638rpx; height: 30rpx; } .exploreList{ display: flex; flex-wrap: wrap; padding: 0 20rpx 8rpx 20rpx; } .exploreItem{ width: 50%; margin-bottom: 24rpx; height: 296rpx; } .exploreCon{ margin: 0 12rpx; border-radius: 8rpx; overflow: hidden; height: 100%; } .exploreCon image{ width: 100%; height: 100%; } .pageShare{ z-index: 60; position: fixed; right: 0rpx; bottom: 46rpx; padding: 0 !important; width: 120rpx !important; height: 120rpx !important; margin: 0 !important; background: transparent !important; font-size: 0 !important; } .pageShare .shareIcon{ width: 120rpx; height: 120rpx; } .pageModelTitle{ margin-bottom: 24rpx; } .pageModelTitle .name{ margin: 0 24rpx; font-size: 36rpx; font-weight: bold; color: #DF3120; } .pageModelTitle .icon{ height: 4rpx; width: 246rpx; } .pageModelTitle .icon.right{ transform: rotate(180deg); } .popupModal{ font-size: 0; width: 100%; height: 640rpx; position: relative; } .popupImage{ width: 100%; height: 100%; border-radius: 16rpx; } .closeIcon{ position: absolute; z-index: 10; bottom: -108rpx; padding: 20rpx; left: 50%; transform: translateX(-50%); } .closeIcon .icon{ width: 48rpx; height: 48rpx; } .menmberContent{ width: 686rpx; height: 132rpx; border-radius: 16rpx; margin: 0 auto 32rpx auto; } .menmberContent .icon{ height: 100%; width: 100%; } .activityContainer{ font-size: 0; } .activityBack{ width: 100%; } .activityMain{ position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 10; border: 1px scroll gold; } .activityViewItem{ border: 1px solid red; position: absolute; } .swiperContent{ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiperNewBox{ width: 100%; height: 100%; } .swiperItem{ width: 100%; height: 100%; } .swiperImage{ width: 100%; height: 100%; } .activityContainer .wx-swiper-dots.wx-swiper-dots-horizontal { left: 50% !important; transform: translateX(-50%) !important; } .robBox{ position: absolute; z-index: 10; right: 0; bottom: 0; padding-left: 12rpx; padding-top: 12rpx; padding-bottom: 14rpx; padding-right: 14rpx; } .robBox .icon{ width: 72rpx; height: 72rpx; }