/*Body*/ .rc-main { padding:0 .2rem; box-sizing:border-box; margin:0 auto; } .ts-product-list{ li{ img{ width: 320px; height:auto; object-fit: contain; display: flex; margin: 0 auto; } } .active{ color: #E2001A; cursor: pointer; } .unactive{ color:#999999; cursor: pointer; } } .rc-age{ display: flex; h2{ color:#333333; } ol{ display: flex; align-items: center; flex-wrap: nowrap; text-align: center; width: 86%; } li{ flex-shrink: 0; } } .rc-mubu{ height: 100%; background: #333333; opacity: 0.6; position: absolute; bottom: 0; width: 100%; z-index: 8; } .ts-scrollable{ overflow-y:hidden; overflow-x:auto; white-space: nowrap; &::-webkit-scrollbar{ display:none; } } /*Body end*/ /* 头部 */ .rc-top{ position: relative; } /* 手机端 */ @media screen and (max-width: 768px) { .rc-main{ width:100%; } .rc-top{ margin-top: 74px; } .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; } } .rc-age{ h2{ font-size: 16px; margin-right:.1rem; } ol{ font-size: 12px; } li{ width: .64rem; height: 26px; line-height: 26px; border-radius: 100px; margin-left: 9px; } } .ts-scrollable{ .active{ border: 2px solid #E2001A; } .unactive{ border: 2px solid #d7d7d7; } } .online{ height:.03rem; width:100%; background:#f6f6f6; margin-top:0.23rem; } .rc-fixright{ width: 0.60rem; height: 1.81rem; position: fixed; right: 0; top: 30%; z-index: 9999; 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: 0.18rem; } li:last-child{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0.18rem; margin-bottom: 0.2rem; } } img{ width: 0.19rem; height: 0.19rem; display: block; } img:last-child{ width: 0.22rem; height: 0.22rem; display: block; } span{ font-size: 0.12rem; color: #666666; } .tuntop{ width: 60px; height: 60px; background: #FFFFFF; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); opacity: 1; display: block; color: #666666; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 8px; img{ width: 0.22rem; height: 0.22rem; display: block; } } } } /* pc端 */ @media screen and (min-width: 768px) { .rc-main { width:100%; max-width:1400px; } .online{ height:8px; width:100%; background:#f6f6f6; margin-top:23px; } .rc-home-header{ height:120px ; .rc-main { width: 92%; margin: 0 auto; // position: fixed; top: 0; z-index: 989; 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{ .rc-age{ h2 { font-size: 20px; color: #333333; } li { margin-left: 40px; width: 100px; height: 40px; line-height: 40px; font-size: 18px; } } } } /* 头部 end */