.pop_coupon{ max-width: 440px; width: 100%; .el-dialog{ width: 100%; margin: 0 auto; } .rs-dis{ max-height: 290px; overflow-y: auto; } } .ts-tag-list { display: inline-flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 20px; em { font-style: normal; display: flex; align-items: center; justify-content: center; padding:.43rem 1rem; font-size: 16px; margin-left: 4px; margin-right: 12px; border-radius: 3px; margin-bottom:1rem; } .disabled { background:#808285; color:#F6F6F6; cursor: not-allowed;; } } .ts-product-detail{ i { font-style: normal; } .ts-realprice{ font-size: 18px; font-weight: 500; color: #E1001A; } .ts-ecprice{ color:#999; font-weight: 400; } .ts-row-title { font-size: 14px; font-style: normal; color: #333333; display:inline-block; } .ts-record { font-size: 12px; margin-left: 16px; font-style: normal; color: #333333; display:inline-block; } .ts-row-title + i { color: #666666; display:inline-flex; max-width:16.5rem; } .ts-product-header h2{ color: #e1001a; } .certification li{ display:flex; flex-direction: row; } .rc-productdetai { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; i { font-style: normal; color: #333333; } span { color: #666666; } } .rc-produnnum { display: flex; align-items: center; margin-top: 16px; span { font-size: 14px; color: #333333; } img { width: 29px; height: 29px; } strong { font-style: normal; list-style: none; width: 30px; height: 30px; border: 1px solid #d7d7d7; opacity: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin: 0 5px 0 5px; color: #666666; } } } .rc-footimage{ img{ margin-left:auto; margin-right:auto; max-width:100%; } } .tns-item { video { max-width:31.25rem; min-width:28.25rem; max-height:31.25rem; min-height:28.25rem; width:36vw; height:36vw; } } // 手机端 @media screen and (max-width:768px) { .uservideo{ width: 100%; height: 100%; video{ width: 100%; height: 100%; } } .ts-ecprice{ font-size:.625rem; } .rc-productdetai{ font-size:.875rem } .rc-button{ width: 100%; display: flex; align-items: center; position: fixed; justify-content: center; height: 5rem; bottom: 0; left:0; background-color: white; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); z-index:2; span{ width: 9.68rem; height: 3rem; background: #E2001A; border-radius: 30px; font-size: .875rem; color:#FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink:0; } span:last-child{ margin-left: 1.56rem; } } .rc-headera{ display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; h3{ color:#333333; font-size: 26px; } .rc-title{ img{ width: 96px; height: 96px; } } .userer{ span{ width: 130px; height: 40px; border: 2px solid #E2001A; border-radius: 30px; display: block; color: #E2001A; line-height: 40px; margin-top: 42px; font-size: 14px; } i{ font-size: 18px; font-style: normal; display: block; margin-top: 32px; color: #E1001A; } } } .rc-discount { position: relative; width: 100%; img { display: block; width: 100%; height: 100%; } .rc-contair { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .rc-left { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e1001a; width: 34%; float: left; height: 100%; i { font-style: normal; font-size: 12px; } span { font-size: 26px; } strong { font-style: normal; font-size: 12px; display: block; margin-top: 8px; } } .rc-right { display: flex; flex-direction: column; padding: 5px 10px; justify-content: center; height: 100%; i { font-style: normal; font-size: 16px; color: #e1001a; } .rc-main { color: #999999; font-size: 12px; } span { display: block; margin-top: 2px; } em { font-style: normal; } } .rc-footer { display: flex; justify-content: flex-end; margin-right: 10px; span { width: 72px; height: 25px; background: #e2001a; text-align: center; line-height: 25px; font-size: 12px; color: #ffffff; margin-bottom: 8px; border-radius: 100px; margin-right: 8px; cursor: pointer; } } } .active{ border: 2px solid #E2001A; color:#666666; cursor: pointer; font-size: 16px; } .unactive{ border: 2px solid #808285; color:#666666; cursor: pointer; font-size: 16px; } .ts-product-header { width: 100%; .rc-title { h2 { font-size: 1.375rem; margin:1.5rem 0; } } .productdetails { margin-top: 19px; } .rc-productdeta { margin-top: 20px; .rc-prodtop { // display: flex; align-items: flex-start; span { font-size: 14px; color: #333333; } em { padding: 5px; } } } .certification { .rc-button{ width: 100%; padding-top: 33px; display: flex; align-items: center; span{ width: 10rem; height: 3rem; background: #E2001A; border-radius: 30px; font-size: 1rem; color:#FFFFFF; display: block; display: flex; align-items: center; justify-content: center; } span:last-child{ margin-left: 2.5rem; } } margin-top: 1rem; ul { display: flex; flex-direction: column; line-height: 30px; li { width: 100%; text-align: left; span { font-size: .875rem; color: #333333; } } } } } } // /* 最小768px最大1920 *pc端/ @media screen and (min-width: 768px) { .ts-product-detail{ padding: 0 0.2rem; box-sizing: border-box; margin: 0 auto; width: 100%; max-width: 1400px; border-bottom-width: 4px; .rc-main{ padding:0; } .ts-row-title{ font-size: 16px; width:82px; } .ts-row-title + i { font-size: 16px; max-width:596px; } .ts-row-record{ color: #999; margin-left: 12px; font-size: 12px; } } .rc-button{ width: 100%; padding-top: 33px; display: flex; align-items: center; span{ width: 160px; height: 48px; background: #E2001A; border-radius: 30px; font-size: 16px; color:#FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; } span:last-child{ margin-left: 40px; } } .rc-headera{ display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; h3{ color:#333333; font-size: 26px; } .rc-title{ img{ width: 96px; height: 96px; } } .userer{ span{ width: 130px; height: 40px; border: 2px solid #E2001A; border-radius: 30px; display: block; color: #E2001A; line-height: 40px; margin-top: 42px; font-size: 14px; } i{ font-size: 18px; font-style: normal; display: block; margin-top: 32px; color: #E1001A; } } } .rc-discount { position: relative; img { display: block; width: 100%; height: 100%; } .rc-contair { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .rc-left { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e1001a; width: 34%; float: left; height: 100%; i { font-style: normal; font-size: 18px; font-weight: bold; } span { font-size: 45px; } strong { font-style: normal; font-size: 12px; display: block; margin-top: 8px; } } .rc-right { display: flex; flex-direction: column; padding: 5px 10px; justify-content: center; height: 100%; i { font-style: normal; font-size: 16px; color: #e1001a; } .rc-main { color: #999999; font-size: 12px; } span { display: block; margin-top: 2px; } em { font-style: normal; } } .rc-footer { display: flex; justify-content: flex-end; margin-right: 10px; span { width: 72px; height: 25px; background: #e2001a; text-align: center; line-height: 25px; font-size: 12px; color: #ffffff; margin-bottom: 8px; border-radius: 100px; margin-right: 8px; cursor: pointer; } } } .rc-usermain{ display: flex; align-items: center; } .active{ border: 2px solid #E2001A; color:#666666; cursor: pointer; font-size: 16px; } .unactive{ border: 2px solid #808285; color:#666666; cursor: pointer; font-size: 16px; } .ts-product-header { width: 100%; font-size: 16px; .rc-title { h2 { font-size: 30px; margin-bottom:42px; } } .ts-realprice{ font-size: 20px; } .ts-ecprice{ } .rc-productdeta { margin-top: 16px; .rc-prodtop { // display: flex; align-items: flex-start; span { font-size: 18px; color: #333333; } } } .rc-produnnum { span { font-size: 18px; } } .certification { .rc-button{ width: 100%; padding-top: 32px; display: flex; align-items: center; span{ width: 160px; height: 48px; background: #E2001A; border-radius: 30px; font-size: 16px; color:#FFFFFF; display: block; display: flex; align-items: center; justify-content: center; } span:last-child{ margin-left: 40px; } } margin-top: 16px; ul { line-height:40px; } } } } .rc-carousel__gallery-thumbnail{ display: inline; .rc-img--square{ border: 1px solid #ddd; border-radius: 3px; } &.rc-carousel__gallery-thumbnail--active{ .rc-img--square{ border: 1px solid #E2001A; } } }