/*Body*/ body { font-family: DINPro, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; line-height: 1.5; color: #666; } .el-message-box .el-button--primary{ background-color: #e1001a !important; color:#fff; border:unset; } .rc-menu--xs .rc-screen-reader{ left:28%; } .ts-login--xs .rc-screen-reader{ left:12%; } .fade-enter, .fade-leave-active { opacity: 0; } .ts-no-data { text-align: center; margin: 3rem 0; } .ts-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99; .ts-mask-bg { background-color: #000; opacity: .6; width: 100%; height: 100%; z-index: 0; position: absolute; left: 0; top: 0; } } input[type=checkbox]{ position:relative; cursor: pointer; border:none; border: 1px solid #d7d7d7; border-radius: 3px; width: 1.5rem; height: 1.5rem; &:before { top: 0; left: 0; content: ""; width: 1.5rem; height: 1.5rem; position: absolute; display: inline-block; background-color: #fff; background-image: url("../image/rc-select.png"); background-size: contain; } &:checked:before { background-image: url("../image/rc-unselect.png"); } } label { input[type=checkbox] { top:.375rem; } } .userloding { background: url(../image/onloading.png) center center no-repeat; width: 3.12rem; background-size: contain; height: 3.12rem; animation: rolling 4s infinite; -webkit-animation: rolling 4s infinite; } @keyframe rolling { from { transform: rotateZ(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rolling { from { transform: rotateZ(0deg); } to { transform: rotate(360deg); } } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } //用户光点 .rc-screen-reader { width: 0.81rem; height: 0.81rem; border-radius: 50%; position: absolute; background-color: red; top: 16%; left: 66%; display: block; width: 0.37rem; height: 0.37rem; } 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; } .useruantity{ margin: 1rem 1.25rem; } .ts-remove { text-decoration: line-through; } .ts-product-list { text-align: center; display: flex; flex-wrap: wrap; justify-content: space-evenly; &:after {} 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; min-height:1.6rem; } } } img{ width:10rem; //min-height:19.875rem; 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: fixed; bottom: 0; width: 100%; z-index: 8; } .ts-scrollable-container { display: flex; align-items: center; 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%; li { border-radius: 100px; flex-shrink: 0; } } .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: 40%; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); border-radius: .25rem; z-index:11; ul{ width: 60px; height: 181px; 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; cursor: pointer; } } .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; } label { input[type=checkbox] { top:.25rem; } } .rc-header__nav--primary{ overflow:hidden; } .ts-login--xs .rc-screen-reader{ left:7%; top:22%; } .rc-main { width: 100%; } .rc-top { margin-top: 90px; } .rc-list__header {} .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: 6rem; overflow: hidden; padding: 0 0.62rem; height: 1.625rem; margin-left: .5rem; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; line-height: 1.625rem; } &::-webkit-scrollbar { display: none; } } } } /* 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; display:flex; li{ max-width:20rem; min-width:18.75rem; width:22.8vw; box-sizing: border-box; .rc-column { span { font-size: 1.875rem; height: 5.2rem; } } &:nth-child(4n+1) { margin-left: 0; } &:nth-child(4n) { //margin-right:0; } } img { width: 100%; max-width: 320px; min-width: 160px; } } .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; cursor: pointer; 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; padding-bottom: 1rem; } .ts-scrollable { padding-bottom: 1rem; scrollbar-width: thin; li { margin-left: 30px; width: 8.125rem; height: 2.5rem; //line-height: 40px; font-size: .875rem; padding: .375rem; } &::-webkit-scrollbar { height: 6px; width: 50%; background: transparent; } &::-webkit-scrollbar-thumb { background-color: #d7d7d7; border-radius: 10px; width: 50%; } &::-webkit-scrollbar-track { //background-color:#ddd; background-color: transparent; } &::-webkit-scrollbar-button { background: unset; } /* */ } } } @media (max-width: 960px) { .rc-lg-up { display: none !important; } } @media (min-width: 1024px) { .rc-xl-down { display: none !important; } } @media screen and (min-width: 769px) and (max-width: 1370px) { } .rc_contline { border-bottom: 3px solid #f6f6f6; height: 0px; margin: 0; clear: both; } .page_modules { padding-top: 60px; } .cont_modules { margin: 0 auto; max-width: 1400px; } .inline_right { display: flex; justify-content: space-between; width: 100%; } .inline_mid { display: flex; justify-content: space-around; width: 100%; } .inline_left { display: flex; justify-content: space-evenly; width: 100%; } .li_inline { li { display: inline-block; vertical-align: middle; } } .color_red { color: #E2001A; } .tc { text-align: center; } .tr { text-align: right; } .diallog_width { .el-dialog { width: 90%; max-width: 920px; } } .pop_coupon{ max-width: 440px; width: 100%; margin: 0 auto; .el-dialog{ width: 100%; } } #tns2-iw { height: 90px; } .rc-carousel:not(.rc-carousel--loaded) { visibility: visible !important } @media screen and (max-width: 768px) { .el-message-box { width: 300px; } .el-dialog { width: 90%; } .diallog_width { .el-dialog { width: 100%; } .el-dialog__title { color: #e1001a; font-weight: bold; } } }