/** * PC端 */ #container{min-height: 500px;} li{list-style:none;} .baseTopNav{ display: none; } .section_container .inner{ width: 1200px; height: auto; margin: 0 auto; position: relative; } .section-content{ width: 100%; height: 540px; background-color: #FFFFFF; border-radius: 8px; margin-top: 20px; box-sizing: border-box; padding: 10px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 99; } .section-content-image{ width: 140px; height: 540px; border-radius: 25px 0 0 25px; background-color: #ffc600; position: absolute; left: -130px; top: 0; z-index: 1; overflow: hidden; transition: all 0.2s; } .section-image-view{ width: 1080px; height: 540px; border-radius: 25px 8px 8px 25px; overflow: hidden; transition: all 0.2s; display: block; } .section-image-view img{ width: 1080px; height: 540px; display: block; transition: all 0.2s; } .section-content-image:hover{ overflow: visible; z-index: 999; } .section-content-naves{ width: 188px; height: 100%; background-color: #f7f8fc; color: red; border-radius: 8px; overflow: hidden; box-sizing: border-box; padding: 10px 0 0 0; } .category-menu-tabs { width: 100%; height: 24px; display: flex; justify-content: space-between; align-items: center; } .category-menu-tabs .menu-tabs-item{ width: 50%; height: 24px; line-height: 24px; text-align: center; font-size: 14px; color: #999999; border-radius: 4px; background-color: #F1F1F1; margin: 0 12px; cursor: pointer; } .category-menu-tabs .menu-tabs-item.active{ background-color: #D9D9D9; color: #333333; } .section-content-naves:hover{ overflow: visible; } .category-menu { position: relative; display: flex; width: 100%; min-height: 478px; border-radius: 8px; background-color: #f7f8fc; } .left-category { width: 100%; padding: 10px 0 0 0; } .left-category .category-item { width: 100%; box-sizing: border-box; padding:9px 12px; font-size: 14px; color: #666; cursor: pointer; transition: all 0.2s; display: flex; justify-content: flex-start; } .left-category .category-item a{ display: flex; } .left-category .category-item img{ width: 24px; height: 24px; display: block; margin-right: 8px; } .left-category .category-item span{ line-height: 24px; font-size: 14px; color: #333333; transition: all 0.2s; } .left-category .category-item:hover, .left-category .category-item.active { background: #D9D9D9; color: #FF5B00; } .left-category .category-item span:hover{ color: #FF5B00; text-decoration: underline; } .right-panel { position: absolute; left: 182px; top: -34px; min-width: 516px; min-height: 520px; padding: 20px; border-radius: 8px; box-sizing: border-box; background: #fff; border: 1px solid #FF5B00; z-index: 1000; } .right-panel .panel-content { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; /* 关键属性 */ gap: 20px; /* 元素间距 */ } .right-panel .sub-category { height: 48px; display: flex; margin: 0 8px; } .right-panel .sub-title { margin: 0 12px 0 0; font-size: 14px; color: #333; font-weight: bold; } .right-panel .sub-items { display: flex; justify-content: flex-start; } .right-panel .sub-item { font-size: 14px; color: #333333; margin: 0 5px; display: flex; justify-content: flex-start; transition: all 0.2s; } .right-panel .sub-item img{ width: 24px; height: 24px; display: block; margin-right: 5px; } .right-panel .sub-item span{ line-height: 24px; font-size: 14px; color: #333333; transition: all 0.2s; } .right-panel .sub-item:hover span { color: #FF5B00; text-decoration: underline; } .right-panel .fade-enter-active, .right-panel .fade-leave-active { transition: opacity 0.3s; } .right-panel .fade-enter-from, .right-panel .fade-leave-to { opacity: 0; } .section-content-mains{ width: 982px; height: 100%; } .section-content-mains-top{ width: 100%; height: 40px; margin-bottom: 10px; border-radius: 6px; background-color: #f7f8fc; } .section-content-mains-top .mains-nav{ display: block; padding: 0 28px; text-align: center; line-height: 40px; font-size: 17px; font-weight: bold; float: left; } .section-content-mains-bottom{ width: 100%; height: 469px; display: flex; justify-content: space-between; align-items: center; } .section-content-mains-bottom .section-content-advert{ width: 472px; height: 469px; display: flex; flex-direction: column; align-items: center; } .section-content-mains-bottom .section-content-advert .section-content-advert-top{ width: 100%; height: 343px; display: flex; justify-content: space-between; align-items: center; } .section-content-mains-bottom .section-content-banner{ width: 500px; height: 469px; border-radius: 8px; overflow: hidden; } /* 轮播 */ #swiper-container{width:100%;height:469px;min-width:500px;overflow:hidden;position:relative;float: left;} #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0} #swiper-container .tempWrap{margin:0 auto;} #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;background-color: #f7f8fc;} #swiper-container .swiper-wrapper img{width:auto;height:469px;max-width:none;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)} #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px} #swiper-container .swiper-button-prev{left:5px;right:auto} #swiper-container .swiper-button-next{left:auto;right:5px} #swiper-container .swiper-button-prev:after{content:"\276C"} #swiper-container .swiper-button-next:after{content:"\276D"} #swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)} #swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0} #swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer} #swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px} #swiper-container .swiper-pagination span.on:before{width:28px;background:#fff} .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} .section-content-advert .section-content-oper{ width: 231px; height: 343px; box-sizing: border-box; background-color: #f7f8fc; padding: 10px; border-radius: 8px; } .section-content-advert .section-content-oper .my-swipe .van-swipe-item { height: auto; } .section-content-advert .section-content-oper .carousel-list { padding:0; } .section-content-advert .section-content-oper .list { width: 33.33%; height: auto; margin: 10px 0; float: left; cursor: pointer; } .section-content-advert .section-content-oper .list .list-content { height: auto; } .section-content-advert .section-content-oper .list .list-content .list-icon { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; overflow: hidden; } .section-content-advert .section-content-oper .list .list-content .list-title { display: flex; justify-content: center; align-items: center; font-size: 12px; } .section-content-advert .section-content-oper .list:hover .list-title{ color: #FF5B00; } .section-content-advert .section-content-oper .el-carousel__arrow--left{ left: -8px !important; width: 24px !important; height: 24px !important; } .section-content-advert .section-content-oper .el-carousel__arrow--right{ right: -8px !important; width: 24px !important; height: 24px !important; } /*广告*/ .section-content-mains-bottom .section-content-advert .section-content-adv{ width: 100%; height: 117px; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .section-content-mains-bottom .section-content-advert .section-content-adv-item{ width: 236px; height: 117px; background-color: #FF5B00; margin-right: 8px; border-radius: 8px; overflow: hidden; } .section-content-mains-bottom .section-content-advert .section-content-adv-item img, .section-content-mains-bottom .section-content-advert .section-content-adv-item a{ display: block; width: 100%; height: 100%; } .section-content-mains-bottom .section-content-advert .section-content-adv-item:last-child{ margin-right: 0; } .section-content-mains-bottom .section-content-usermain{ width: 231px; height: 100%; border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .section-content-mains-bottom .section-content-usermain .section-content-userbox{ width: 100%; height: 343px; box-sizing: border-box; padding: 10px; background-color: #f7f8fc; border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .section-content-userbox .section-content-usertop{ width: 100%; height: auto; margin-top: 10px; } .section-content-userbox .section-content-usertop .user-column-a{ height: 60px; box-sizing: border-box; padding: 5px 0; display: flex; justify-content: flex-start; align-items: center; } .section-content-usertop .user-column-a .user-column-logo{ width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } .section-content-usertop .user-column-a .user-column-logo img{ width: 50px; height: 50px; display: block; border-radius: 50%; } .section-content-usertop .user-column-a .user-column-text{ width: 140px; display: flex; flex-direction: column; justify-items: left; margin-left: 10px; } .section-content-usertop .user-column-a .user-column-text h1{ font-size: 17px; font-weight: 600; line-height: 26px; text-align: left; color: #333333; width: 100%; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .section-content-usertop .user-column-a .user-column-text p{ font-size: 14px; line-height: 22px; text-align: left; color: #666666; } .section-content-usertop .user-column-b{ display: flex; flex-direction: column; justify-items: center; align-items: center; } .section-content-usertop .user-column-b h1{ font-size: 14px; line-height: 26px; text-align: left; color: #666666; font-weight: normal; } .section-content-usertop .user-column-b p{ font-size: 14px; line-height: 26px; text-align: left; color: #999999; } .section-content-usertop .user-column-b a{ width: 100%; height: 34px; line-height: 34px; text-align: center; background-color: #FF5B00; color: #FFFFFF; font-size: 16px; display: block; margin: 8px 0; border-radius: 4px; } .section-content-usertop .user-column-c{ width: 100%; height: 48px; display: flex; justify-content: space-between; align-items: center; } .section-content-usertop .user-column-c .column-c-item{ display: flex; flex-direction: column; align-items: center; } .section-content-usertop .user-column-c .column-c-item h1{ font-size: 16px; color: #666666; line-height: 18px; } .section-content-usertop .user-column-c .column-c-item p{ font-size: 14px; color: #666666; line-height: 18px; } .section-content-usertop .user-column-d{ width: 100%; height: 56px; } .section-content-usertop .user-column-d a{ height: 56px; box-sizing: border-box; padding: 7px 0; display: flex; justify-content: flex-start; align-items: center; } .section-content-usertop .user-column-d .column-d-image{ width: 42px; height: 42px; border-radius: 2px; overflow: hidden; background-color: #dbdbdb; } .section-content-usertop .user-column-d .column-d-image img{ width: 42px; height: 42px; display: block; border-radius: 2px; } .section-content-usertop .user-column-d .column-d-text{ width: 140px; display: flex; flex-direction: column; justify-items: left; margin-left: 10px; } .section-content-usertop .user-column-d .column-d-text h1{ width: 100%; font-size: 12px; font-weight: normal; line-height: 18px; text-align: left; color: #999999; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .section-content-usertop .user-column-d .column-d-text p{ font-size: 12px; line-height: 22px; text-align: left; color: #333333; } .section-content-userbox .section-content-userbottom{ width: 100%; height: 50px; display: flex; flex-direction: column; align-items: center; } .section-content-userbottom .userbottom-column-a{ width: 100%; height: 50px; display: flex; justify-content: flex-start; align-items: center; margin: 8px 0 10px 0; } .section-content-userbottom .userbottom-column-a .column-item{ display: flex; flex-direction: column; align-items: center; margin: 0 8px; } .section-content-userbottom .userbottom-column-a .column-item img{ width: 27px; height: 27px; } .section-content-userbottom .userbottom-column-a .column-item p{ font-size: 14px; line-height: 22px; text-align: left; color: #666666; } .section-content-userbottom .userbottom-column-b{ width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; } .section-content-userbottom .userbottom-column-b .column-item{ width: 99px; height: 80px; box-sizing: border-box; padding: 8px; border-radius: 4px; display: flex; flex-direction: column; justify-content: left; } .section-content-userbottom .userbottom-column-b .column-item h1{ font-size: 12px; color: #664100; line-height: 18px; } .section-content-userbottom .userbottom-column-b .column-item p{ font-size: 12px; color: #664100; line-height: 18px; } .section-content-userbottom .userbottom-column-b .column-item span{ display: inline-block; width: 69px; height: 20px; line-height: 20px; border-radius: 10px; text-align: center; font-size: 12px; background-color: #664100; color: #FFFFFF; margin-top: 7px; font-weight: 600; } .section-content-userbottom .userbottom-column-b .column-item.plus{ background-color: #ffe69a; } .section-content-userbottom .userbottom-column-b .column-item.coupon{ background-color: #ff9c54; } /* 内容区 */ .main-content { margin-top: 10px; } .section_page.hot{ width:100%; height:396px; background: url("/img/hot/icon-hot-bg.png"); background-size: cover; border-radius:8px; } .section_page.hot .section_page_main.type_08{ height: 315px; padding: 0 0 12px 0; } .section_page.hot #recommendBox{ height: 320px; } .swiper-container-floor.hotList{ padding: 12px; } .section_page.hot #recommendBox .swiper-pagination{ bottom: 1px; } #recommendBox .swiper-pagination.hot span:before{ background: #9fe4e0; } #recommendBox .swiper-pagination.hot span.swiper-pagination-bullet-active:before{ background: #ffffff; } .section_page.hot .page_main_image{ width: 186px; height: 186px; } .section_page.hot .section_page_title{ width:100%; height:54px; box-sizing:border-box; padding:10px 16px 0 16px; position: relative; display: flex; justify-content: flex-start; } .section_page.hot .section_page_title h1{ font-size:24px; line-height:44px; text-align:left; color:#333333; } .section_page.hot .section_page_title span{ font-size:14px; line-height:44px; text-align:left; color:#666666; margin-left:10px; } .section_page.hot .section_page_btn{ display: block; width: 74px; height: 26px; background: url("/img/hot/icon-hot-btn.png"); background-size: cover; position: absolute; right: 20px; top: 12px; } .section_page .page_main_item.hot{ width:164px; height:300px; float:left; margin-right:10px; margin-bottom:16px; background-color:#FFFFFF; transition:all 0.4s; display:block; position: relative; border-radius: 8px; } /*楼层*/ .section-page-content{ width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .section-page-item{ width: 592px; height: 484px; margin: 0 15px 15px 0; background-color: #FFFFFF; border-radius: 8px; overflow: hidden; box-sizing: border-box; border: 1px solid #FFFFFF; } .section-page-item:hover{ border-color: #FF5B00; } .section-page-item:nth-child(2n){ margin-right: 0; margin-bottom: 0; } .section-page-item:nth-child(3){ margin-bottom: 0; } .section-page-item:nth-child(4){ margin-bottom: 0; } .section-page-item .section-page-top{ width: 100%; height: 180px; display: flex; justify-content: flex-start; align-items: center; } .section-page-item .section-page-top .section-page-title{ width: 64px; height: 100%; padding: 16px; font-weight: bold; font-size: 14px; color: #FFFFFF; box-sizing: border-box; } /*.section-page-item:nth-child(1) .section-page-title{*/ /* background-color: #1b64de;*/ /*}*/ /*.section-page-item:nth-child(2) .section-page-title{*/ /* background-color: #1bc0de;*/ /*}*/ /*.section-page-item:nth-child(3) .section-page-title{*/ /* background-color: #de1b64;*/ /*}*/ /*.section-page-item:nth-child(4) .section-page-title{*/ /* background-color: #fe7e00;*/ /*}*/ .section-page-item .section-page-top .section-page-banner{ width: 528px; height: 100%; } .el-carousel .section-page-item .section-page-banner .page-banner-item img, .section-page-item .section-page-banner .page-banner-item{ width: 527px; height: 180px; display: block; } .section-page-item .section-page-bottom { width: 100%; height: 307px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding:0 10px 10px 10px; } .section-page-item .section-page-bottom .page-bottom-tabs{ width: 100%; height: 46px; display: flex; justify-content: space-between; align-items: center; } .page-bottom-tabs .page-bottom-tabs-left{ display: flex; justify-content: space-between; align-items: center; } .page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item{ display: flex; height: 46px; font-size: 14px; line-height: 46px; margin: 0 10px; } .page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item:hover{ text-decoration: underline; } .page-bottom-tabs .page-bottom-tabs-right{ height: 46px; font-size: 14px; line-height: 46px; } .section-page-item .section-page-bottom .page-bottom-main{ width: 100%; height: 254px; } .section-page-item .section-page-bottom .bottom-main-item{ width: 133px; height: 247px; float: left; margin-right: 10px; transition: all 0.4s; display: block; position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #F1F1F1; } .section-page-item .section-page-bottom .bottom-main-item:hover{ transform:translateY(-5px); box-shadow:0 8px 8px rgba(102,102,102,0.05),0 10px 10px rgba(102,102,102,0.05),0 12px 12px rgba(102,102,102,0.05); } .section-page-item .section-page-bottom .bottom-main-item:last-child{ margin-right: 0; } .section-page-item .bottom-main-item .page_main_image{ width: 133px; height: 133px; display: block; float: left; border-radius: 8px 8px 0 0; } .section-page-item .bottom-main-item .page_main_type{ width: 34px; height: 34px; text-align: justify; box-sizing: border-box; padding: 5px; border-radius: 0 0 8px 8px; background-color: #33CCBF; font-size: 12px; color: #FFFFFF; line-height: 13px; position: absolute; top: 0; right: 10px; } .section-page-item .bottom-main-item .page_main_tag{ width:100%; height:24px; float:left; margin-top:16px; padding:0 8px } .section-page-item .bottom-main-item .page_main_text{ width: 100%; height: 42px; float: left; box-sizing: border-box; margin-top: 5px; padding: 0 8px; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 22px; font-size: 14px; } .section-page-item .bottom-main-item .page_main_price{ width: 100%; height: 54px; float: left; box-sizing: border-box; padding: 0 8px; } .section-page-item .bottom-main-item .page_main_price .main_price_text{ width:100%; height:54px; float:left; box-sizing:border-box; } .section-page-item .bottom-main-item .page_main_price .price_text_tag{ width:100%; height:22px; box-sizing:border-box; float:left; margin: 5px 0; } .section-page-item .page_main_price .main_price_show{color:#f94b4b;font-size: 15px;} .section-page-item .bottom-main-item .page_main_price .price_text_tag .couponTag{ float:left; margin-right: 2px; } .section-page-item .bottom-main-item .page_main_price .price_text_tag .listTag{ margin:0;float:left; } /*标签缩小*/ .bottom-main-item .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)} .bottom-main-item .page_main_price .price_text_tag .svip-tag, .bottom-main-item .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)} /*会员标签*/ .bottom-main-item .page_main_price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0} .bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;border-radius: 0 11px;padding: 0 2px;} .bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px} .bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px} .bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333} .section-page-item .bottom-main-item .page_main_price .main_price_none{ width:100%; height:24px; box-sizing:border-box; float:left; margin-top:2px; } .section-page-item .bottom-main-item .page_main_price .main_price_none.sec{ margin-top:25px; } .section-page-item .bottom-main-item .page_main_price .main_price_none .listTag{ margin:0 } .section-page-item .bottom-main-item .page_main_price .price_grade, .section-page-item .bottom-main-item .page_main_price .price_grade_shop{ float:left; margin:0; height:22px; line-height:22px; color:#4A4F58; font-style:normal; font-size:14px; } .section-page-item .bottom-main-item .page_main_price .price_grade_club{ float:left; margin:0; height:22px; line-height:22px; font-style:normal; font-size:14px; color: #f94b4b; } .section-page-item .bottom-main-item .page_main_price .price_grade{ float: unset; } .section-page-item .bottom-main-item .page_main_price .price_grade span, .section-page-item .bottom-main-item .page_main_price .price_grade_shop span, .section-page-item .bottom-main-item .page_main_price .price_grade_club span{display:inline-block;float:left} .section-page-item .bottom-main-item .page_main_price .icon:before{width:67px;height:22px} .section-page-item .bottom-main-item .page_main_price .price_grade_1:before{background-position:0 -708px} .section-page-item .bottom-main-item .page_main_price .price_grade_2:before{background-position:0 -736px} .section-page-item .bottom-main-item .page_main_price .price_grade_3:before{background-position:0 -764px} .section-page-item .bottom-main-item .page_main_price .price_grade_4:before{background-position:0 -791px} .section-page-item .bottom-main-item .page_main_price .price_grade_5:before{background-position:0 -818px} /*优质供应商*/ .section-shop-content{ width: 100%; height: 358px; box-sizing: border-box; padding:0 12px; background-color: #FFFFFF; border-radius: 8px; } .section-shop-content .section-shop-title{ width:100%; height:56px; box-sizing:border-box; position: relative; display: flex; justify-content: flex-start; } .section-shop-content .section-shop-title h1{ font-size:24px; line-height:56px; text-align:left; color:#333333; } .section-shop-content .section-shop-title span{ font-size:14px; line-height:56px; text-align:left; color:#999999; margin-left:10px; font-weight: normal; } .section-shop-content .section-shop-main{ width: 100%; height: 300px; box-sizing: border-box; padding: 10px 0; } .section-shop-content .section-shop-main .supplier-list{ padding: 0; width: 100%; height: 100%; display: flex; } .section-shop-content .section-shop-main .supplier-list-item{ display: flex; width: 284px; height: 280px; flex-direction: column; align-items: center; border-radius: 8px; margin: 0 15px 0 0; box-sizing: border-box; padding: 20px 0; background-color: #FFFFFF; border:2px solid #e1e1e1; transition: all 0.2s; } .section-shop-content .section-shop-main .supplier-list-item:hover{ border-color: #FF5B00; } .section-shop-content .section-shop-main .supplier-list-item:last-child{ margin-right: 0; } .section-shop-content .section-shop-main .supplier-list-top{ width: 100%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0 10px; } .section-shop-content .section-shop-main .supplier-top-logo{ display: flex; align-items: center; justify-content: center; width: 146px; height: 64px; margin-right: 10px; border-radius: 8px; overflow: hidden; } .section-shop-content .section-shop-main .supplier-top-logo img{ width: 146px; height: 64px; display: block; } .section-shop-content .section-shop-main .supplier-top-name{ font-size:17px; line-height:42px; color:#333333; align-items: center; font-weight: bold; } .section-shop-content .section-shop-main .supplier-list-mid{ width: 100%; height: 88px; display: flex; justify-content: space-between; align-items: center; margin: 0 0 15px 0; box-sizing: border-box; padding: 0 10px; } .section-shop-content .section-shop-main .list-mid-item{ width: 80px; height: 80px; background-color: #e1e1e1; border-radius: 4px; margin-right: 5px; box-sizing: border-box; border: 1px solid #FFFFFF; } .section-shop-content .section-shop-main .list-mid-item:hover{ border-color: #e2e4e6; } .section-shop-content .section-shop-main .list-mid-item a, .section-shop-content .section-shop-main .list-mid-item img{ width: 78px; height: 78px; border-radius: 8px; display: block; } .section-shop-content .section-shop-main .list-mid-item:last-child{ margin-right: 0; } .section-shop-content .section-shop-main .supplier-list-bot{ width: 100%; height: 32px; display: flex; justify-content: center; align-items: center; margin-top: 10px; } .section-shop-content .section-shop-main .supplier-list-bot a{ display: flex; flex-direction: row; align-items: center; height: 32px; padding: 0 16px; border: 1px solid #e2e4e6; text-align: center; line-height: 32px; box-sizing: border-box; border-radius: 6px; color: #11192d; transition: all 0.2s; } .section-shop-content .section-shop-main .supplier-list-bot a .icon.shop{ vertical-align: middle; display: inline-block; width: 20px; height: 20px; line-height: 25px; } .section-shop-content .section-shop-main .supplier-list-bot a .icon.shop:before{ width: 20px; height: 20px; background-position: -182px -746px; } /*为你推荐*/ .section-floor-content{ width: 100%; height: auto; box-sizing: border-box; padding:0 12px; background-color: #FFFFFF; border-radius: 8px; } .section-floor-content .section-floor-title{ width:100%; height:56px; box-sizing:border-box; position: relative; display: flex; justify-content: flex-start; } .section-floor-content .section-floor-title h1{ font-size:24px; line-height:56px; text-align:left; color:#333333; } .section-floor-content .section-floor-title span{ font-size:14px; line-height:56px; text-align:left; color:#999999; margin-left:10px; font-weight: normal; } .section-floor-content .section-floor-main{ width:100%; height:auto; box-sizing:border-box; padding: 20px 0; display: flex; flex-wrap: wrap; } .section-floor-content .floor-main-item{ width: 182px; height: 300px; margin:7px; transition: all 0.4s; display: block; position: relative; overflow: hidden; border-radius: 8px; border: 2px solid #F1F1F1; box-sizing: border-box; } .section-floor-content .floor-main-item:hover{ transform:translateY(-5px); border-color: #FF5B00; box-shadow:0 8px 8px rgba(102,102,102,0.05),0 10px 10px rgba(102,102,102,0.05),0 12px 12px rgba(102,102,102,0.05); } .section-floor-content .floor-main-item:nth-child(6n){ margin-right: 0; } .section-floor-content .floor-main-item .page_main_image{ width: 182px; height: 182px; display: block; float: left; border-radius: 8px 8px 0 0; } .section-floor-content .floor-main-item .page_main_type{ width: 34px; height: 34px; text-align: justify; box-sizing: border-box; padding: 5px; border-radius: 0 0 8px 8px; background-color: #33CCBF; font-size: 12px; color: #FFFFFF; line-height: 13px; position: absolute; top: 0; right: 10px; } .section-floor-content .floor-main-item .page_main_tag{ width:100%; height:24px; float:left; margin-top:16px; padding:0 8px } .section-floor-content .floor-main-item .page_main_text{ width: 100%; height: 42px; float: left; box-sizing: border-box; margin-top: 5px; padding: 0 8px; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 22px; font-size: 14px; } .section-floor-content .floor-main-item .page_main_price{ width: 100%; height: 54px; float: left; box-sizing: border-box; padding: 0 8px; } .section-floor-content .floor-main-item .page_main_price .main_price_text{ width:100%; height:54px; float:left; box-sizing:border-box; } .section-floor-content .floor-main-item .page_main_price .price_text_tag{ width:100%; height:22px; box-sizing:border-box; float:left; margin: 5px 0; } .section-floor-content .floor-main-item .page_main_price .main_price_show{color:#f94b4b;font-size: 15px;} .section-floor-content .floor-main-item .page_main_price .price_text_tag .couponTag{ float:left; margin-right: 2px; } .section-floor-content .floor-main-item .page_main_price .price_text_tag .listTag{ margin:0;float:left; } /*标签缩小*/ .section-floor-content .floor-main-item .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)} .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag, .section-floor-content .floor-main-item .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)} /*会员标签*/ .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0} .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;border-radius: 0 11px;padding: 0 2px;} .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px} .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px} .section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333} .section-floor-content .floor-main-item .page_main_price .main_price_none{ width:100%; height:24px; box-sizing:border-box; float:left; margin-top:2px; } .section-floor-content .floor-main-item .page_main_price .main_price_none.sec{ margin-top:25px; } .section-floor-content .floor-main-item .page_main_price .main_price_none .listTag{ margin:0 } .section-floor-content .floor-main-item .page_main_price .price_grade, .section-floor-content .floor-main-item .page_main_price .price_grade_shop{ float:left; margin:0; height:22px; line-height:22px; color:#4A4F58; font-style:normal; font-size:14px; } .section-floor-content .floor-main-item .page_main_price .price_grade_club{ float:left; margin:0; height:22px; line-height:22px; font-style:normal; font-size:14px; color: #f94b4b; } .section-floor-content .floor-main-item .page_main_price .price_grade{ float: unset; } .section-floor-content .floor-main-item .page_main_price .price_grade span, .section-floor-content .floor-main-item .page_main_price .price_grade_shop span, .section-floor-content .floor-main-item .page_main_price .price_grade_club span{display:inline-block;float:left} .section-floor-content .floor-main-item .page_main_price .icon:before{width:67px;height:22px} .section-floor-content .floor-main-item .page_main_price .price_grade_1:before{background-position:0 -708px} .section-floor-content .floor-main-item .page_main_price .price_grade_2:before{background-position:0 -736px} .section-floor-content .floor-main-item .page_main_price .price_grade_3:before{background-position:0 -764px} .section-floor-content .floor-main-item .page_main_price .price_grade_4:before{background-position:0 -791px} .section-floor-content .floor-main-item .page_main_price .price_grade_5:before{background-position:0 -818px}