/*Body*/ body{ font-family: DINPro,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif; line-height: 1.5; color: #666; } img, picture { display: block; max-width: 100%; height: auto; } .rc-main { padding-left:1.25rem; padding-right:1.25rem; box-sizing:border-box; margin-left:auto; margin-right:auto; } .ts-remove { text-decoration: line-through; } .ts-product-list{ text-align: center; display: flex; flex-wrap: wrap; justify-content: space-evenly; &:after{ content:""; width:154px; } li{ border: 1px solid #D7D7D7; display: inline-flex; border-radius: 4px; flex-direction: column; max-width:10rem; .rc-column { text-align:center; padding:0 1rem; box-sizing: border-box; span{ height:2.75rem; font-size: 1rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; white-space: normal; color:#E2001A; } i{ font-style: normal; font-size: 1.125rem; margin-top: .5rem; display: block; } } } img{ width:10rem; height:10rem; object-fit: contain; display: flex; margin: 0 auto; height: auto; } .active{ color: #E2001A; cursor: pointer; } .unactive{ color:#999999; cursor: pointer; } } .rc-container { height: 100%; max-width: 1400px; background-color: #fff; margin: auto; } .ts-standard-btn{ font-style: normal; width: 8.125rem; height: 2.5rem; border: 2px solid #E2001A; border-radius: 1.875rem; display: block; line-height: 2.25rem; font-size: .875rem; color: #fff; cursor: pointer; text-align: center; background: #E2001A; &.center{ margin-left:auto; margin-right:auto; } &.ts-standard-btn--two{ background-color: transparent; color: #e2001a; border-color: #e2001a; } &.ts-standard-btn--max-width{ width:100%; } } .rc-mubu{ height: 100%; background: #333333; opacity: 0.6; position: absolute; bottom: 0; width: 100%; z-index: 8; } .ts-scrollable-container{ display: flex; h2{ margin:0; display: flex; align-items: center; } .ts-scrollable{ overflow-y:hidden; overflow-x:auto; white-space: nowrap; display: flex; align-items: center; flex-wrap: nowrap; text-align: center; width: 86%; &::-webkit-scrollbar{ display:none; } li{ border-radius: 100px; } } .active{ color: #E2001A; cursor: pointer; border: 2px solid #E2001A; } .unactive{ color:#999999; cursor: pointer; border: 2px solid #d7d7d7; } } .online{ width:100%; background:#d7d7d7; margin-top:1.5rem; height:.06rem; &.bold{ height:.32rem; background:#f6f6f6; } } /*Body end*/ /* 头部 */ .rc-fixright{ width: 3.75rem; height: auto; position: fixed; right: 0; top: 30%; background: #FFFFFF; box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); border-radius: .25rem; z-index:3; ul{ width: 60px; height: 181px; box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); background-color: white; display: flex; flex-direction: column; li{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 1.125rem; } li:last-child{ margin-bottom: 0.2rem; } } img{ width: 1.25rem; height: auto; display: block; } span{ font-size: 0.12rem; } .tuntop{ width: 100%; height:4.125rem; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; } } .ts-max-width--460{ max-width: 460px; margin-left: auto!important; margin-right: auto!important; } .ts-standard-input{ background: #F6F6F6; width: 100%; height: 3rem; border-radius: 4px; padding:.875rem 0 .875rem 1rem; &::-webkit-input-placeholder { text-align: left; } &.ts-standard-input--two{ } } .ts-right-arr { font-style: normal; line-height: 22px; color: #E2001A; font-weight:bold; &.ts-right-arr--two:after{ content: " "; width: .5rem; height: 1rem; background: url(../image/rc-left.png) no-repeat left top; background-size: contain; display: block; position:absolute; right:0; top:.25rem; } } /* 手机端 */ @media screen and (max-width: 768px) { html { //font-size:100px; } .rc-md-up { display: none!important; } .rc-main{ width:100%; } .rc-top{ margin-top: 74px; } .rc-list__header { background: none; padding: .5rem 0; border-bottom: none; } .ts-right-arr { border-bottom:1px solid #E1001A; padding-bottom:2px; } .rc-home-header{ width: 100%; .rc-main { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; height: 70px; background-color: #fff; .rc-center{ display: none; } } .c-left img{ width: 19px; height: 14px; display: block; } .c-right img{ width: 97px; height: 35px; display: block; } .rc-search img{ width: 19px; height: 19px; display: block; } &.fixed{ position:fixed; top: 0; left: 0; z-index:3; } } .ts-scrollable-container{ margin-bottom:1.25rem; &:last-child{ margin-bottom:0; } h2{ font-size: 16px; margin-right:.1rem; } .ts-scrollable{ li{ width: 4.125rem; height: 1.625rem; margin-left: .5rem; font-size:.75rem; line-height: 1.375rem; } } } } /* pc端 */ @media screen and (min-width: 769px) { /deep/.van-tabs__wrap { max-width: 768px; margin: 0 auto; } html { font-size:16px; } .rc-top{ margin-top: 124px; } .ts-product-list{ text-align: left; display:block; li{ max-width:20rem; margin-right:.9rem; margin-left:.9rem; .rc-column{ span{ font-size:1.875rem; height: 5.2rem; } } } img{ width:20rem; } } .ts-right-arr { cursor: pointer; border-bottom : unset; padding-right:1rem; position:relative; &:after{ content: " "; width: .5rem; height: 1rem; background: url(../image/arr-right-red.png) no-repeat left top; background-size: contain; display: block; position:absolute; right:0; top:.25rem; } } .rc-main { width:100%; max-width:1400px; } .rc-list--inline:not([role=tablist]):not([role=menubar]) { -ms-flex-wrap: wrap; flex-wrap: wrap; } .layout-container, .rc-layout-container { margin-left: -1rem; margin-right: -1rem; } .rc-fixright{ width:5.5rem; display: flex; flex-direction: column; align-items: center; ul{ width:100%; height: 100%; li{ margin-top: .5rem; height:4.125rem; img{ width:22px; height:auto; } } } } .rc-home-header{ height:120px ; .rc-main { width: 100%; margin: 0 auto; // position: fixed; top: 0; background: white; display: flex; justify-content: space-between; align-items: center; flex-direction: column; height: 120px; ul { display: flex; align-items: center; margin-bottom: 20px; li { margin-right: 25px; color: #666666; cursor: pointer; font-size: 16px; } } } .c-left{ display: none; } .rc-search{ display: none; } .c-left img { width: 19px; height: 14px; display: block; } .c-right img{ width: 120px; height: 45px; display: block; } } .ts-scrollable-container { margin-top:1.25rem; &:last-child{ margin-bottom:0; } h2{ font-size:20px; } .ts-scrollable { li { margin-left: 40px; width: 8.125rem; height: 2.5rem; line-height: 40px; font-size: .875rem; } } } } @media (max-width: 960px) { .rc-lg-up { display: none!important; } } @media (min-width: 1024px) { .rc-xl-down { display: none!important; } }