@charset "utf-8"; /********************************************** * range-slider **********************************************/ .range-slider-wrap .sliders { width: 100%; margin: 10px 0 ; } .range-slider-wrap .price { color: red; font-size: 14px; font-weight: bold; } .range-slider-wrap .price i { font-style: normal; font-family: Arial; } .range-slider-wrap .price span { font-size: 18px; } .range-slider-wrap input{ max-width: 66px; width: 40%; } .noUi-horizontal { height: 11px } .noUi-connect{ /*top:-1px;*/ } .noUi-handle { width: 18px; height: 18px; border-radius: 10px; top: -5px; left:-7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #AAA; background-color: #e7e7e7; background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); color: #999; cursor: pointer; } #modal-filter-btn{ display:none; } #products em{ font-weight:bold; color: #EE7700; } @media (max-width: 768px) { .modal .range-slider-wrap .sliders { width: 97%; } .modal .noUi-handle { width: 22px; height: 22px; border-radius: 15px; top: -7px; left:-7px; } .sidebar-filter { display: none !important; } #modal-cate-btn, #modal-filter-btn { display: inline-block !important; } } /********************************************** * siader filter-list ********************************************* .filter-list label{ color: #7a7a7a; font-size: 0.91em; font-weight: bold; line-height: 2em; clear: both; word-spacing: 1px; } .filter-list input[type="checkbox"], .filter-list input[type="radio"]{ vertical-align:middle; margin: 0px; padding:0px; } */ .text-danger{ color:#d9534f; } .filter-list label{ font-weight: 700; } .filter-list label.no-data{ font-weight: 100; } /********************************************** * my-tabs1 **********************************************/ .my-tabs1{ display: block; border-bottom: 2px solid #29A; } .my-tabs1 > li > a{ display: block; width: 135px; height: 36px; line-height: 14px; font-size: 16px; float: left; margin-top: 2px; border: 1px solid #ccc; border-bottom: none; margin-right: -1px; text-align: center; background-color: #f1f2F1; font-family: Microsoft YaHei; color: #333; border-radius:0; } .my-tabs1 > li > a:hover{ border: 1px solid #ccc; border-bottom: none; } .my-tabs1 >li.active>a, .my-tabs1>li.active>a:focus, .my-tabs1>li.active>a:hover{ background-color: #29A; color: #FFF; border: 0 none; height: 39px; margin-top: 0px; margin-right: 0; font-weight:700; border-bottom: none; } .my-tabs1 .dropdown-menu{ min-width: 129px; } @media (max-width: 480px) { .my-tabs1{ display:none; } .my-tabs1 > li > a{ width: 29.5vw; } } /********************************************** * search bar **********************************************/ /* #search_concept{ display: none; visibility: hidden; } */ #filter-data{ display: none; } #filter-data .SubTitle { display: inline-block; font-weight: bold; margin: 0px; vertical-align: top; min-width: 100px; text-align: right; margin-top: 3px; } #filter-data .item { display: inline-block; margin: 0; width: 83%; /*padding-right: 8%;*/ } #filter-data .item > li { /*border: 1px dotted #666;*/ border: 1px #ddd solid; clear: both; color: #00bcbe; display: inline-block; margin: 0 0 0.25em; /*vertical-align: top;*/ padding: 3px; margin-right: 5px; border-radius: 4px; } #filter-data .item > li span { display: inline-block; /*vertical-align: middle;*/ padding: 0 3px; } #filter-data .item > li > a { /*color: #005599; */ color: #666; font-size: 13px; text-decoration: none; } #filter-data .item > li:hover { /*border: 1px solid #ccc;*/ background:#eee; } #filter-data .item > li i { color: #999; font-weight: bold; margin: 0 3px; font-size:115%; display:inline-table; } #modal-cate .btn{ padding-bottom: 3px !important; margin-right:1px !important; /*Standard */ max-width: calc(100% - 55vw) !important; /*Firefox*/ max-width: -moz-calc(100% - 55vw) !important; /*chrome safari*/ max-width:-webkit-calc(100% - 55vw) !important; } #modal-cate .cate_text{ display: inline-block; height:18px; min-width: 18px; /*Standard */ max-width: calc(100% - 8vw) !important; /*Firefox*/ max-width: -moz-calc(100% - 8vw) !important; /*chrome safari*/ max-width: -webkit-calc(100% - 8vw) !important; } @media(max-width: 480px) { #filter-data { display: none !important; } } /* @media (max-width: 768px) { #search_concept{ display: block; visibility: visible; } } */ /********************************************** * filter-box **********************************************/ /* #filter-bar .btn-group{ margin-right: 5px; } */ /* #filter-bar .btn-default{ padding: 5px 12px; font-size:13px; } */ @media (max-width: 480px) { .product-list{ margin-top:10px; } #breadcrumb{ display: none; } .order-list .price-text { display: none; } .order-list .btn { float: left; } #search-result .btn { font-size: 13px; padding: 5px 8px; } } /********************************************** * modal-attr-data-1 **********************************************/ #modal-attr-1 li { display: inline-block; width: 49%; } @media (max-width: 480px) { #modal-attr-1 li { width: 100%; } } /********************************************** * no_data **********************************************/ .no_data{ line-height: 30px; } /********************************************** * product-data **********************************************/ .product-item { /*border-bottom: 1px dashed #dddddd; */ padding: 10px; background-color: #fff; margin: 10px 0; overflow: hidden; position: relative; } .product-item .product-left { width: 100%; padding: 0px; text-align: center; vertical-align: middle; margin: 0 auto; height: 180px; /* height: 25vw;*/ } .product-item .product-left .imgWr { border: 1px solid #dcdcdc; box-shadow: 1px 2px 2px 0px #efefef; position: relative; overflow: hidden; display: block; width: 100%; height: 100%; padding: 1px; } .product-item .product-left img { padding: 1px; bottom: 0; left: 0; margin: auto; max-height: 100%; max-width: auto; position: absolute; right: 0; top: 0; /* width: auto; position: relative; width: auto; height: 100%; max-width: initial; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); */ } .product-item .product-body h3.product-name { font-family: Arial,sans-serif; font-size: 15px; font-weight: bold; margin-top:0px; margin-bottom: 1px; line-height:18px; word-break: break-all; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; } .product-item .product-body h3.product-name a { color: #01778f; text-decoration: none; } .product-item .product-body .product-desc li{ word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; width: 100%; line-height: 20px; } /* .product-right */ .product-item .product-right { float: left; word-break: break-all; } .product-item .product-right .product-web { color: #008800; font-size: 1em; font-weight: bold; vertical-align: middle; } .product-item .product-price { color: #ff0000; font-family: "Century Gothic"; /*font-size: 15px;*/ font-size: 0.85em; font-style: normal; font-weight: bold; display: block; } .product-item .product-price span { /*font-size: 24px;*/ font-size: 2em; } /* 480 以下*/ @media (max-width: 480px) { .product-item .product-body h3.product-name { font-size: 1.45rem; } .product-item .product-body .product-desc { font-size: 1.28rem; } .product-item .product-price span { font-size: 1.8rem; } } /********************************************** * mode-list **********************************************/ /*.product-left */ .mode-list .product-item .product-left{ width: 13vw; height: 13vw; max-width: 185px; max-height: 185px; } /* .product-body */ .mode-list .product-item .product-body, .mode-list .product-item .product-right { overflow: hidden; padding-left: 10px; padding-right: 0px; /*Standard */ width: calc(100% - 13vw) !important; /*Firefox*/ width: -moz-calc(100% - 13vw) !important; /*chrome safari*/ width: -webkit-calc(100% - 13vw) !important; } /* * .mode-list media */ /* 768 以下 */ @media (max-width: 768px) { .mode-list .product-item .product-left{ width: 30vw; height: 30vw; } .mode-list .product-item .product-body, .mode-list .product-item .product-right { /*Standard */ width: calc(100% - 30vw) !important; /*Firefox*/ width: -moz-calc(100% - 30vw) !important; /*chrome safari*/ width: -webkit-calc(100% - 30vw) !important; } } /********************************************** * mode-grid **********************************************/ .mode-grid .product-item { float: left; margin-top:10px; border-bottom: 0; margin-bottom: 2%; margin-right: 2%; } /* .product-body */ .mode-grid .product-item .product-body { max-height: 100px; overflow: hidden; width:100%; display:block; margin: 5px 0 0 0; padding:0px; } .mode-grid .product-item .product-body h3.product-name { height: 2.5em; } .mode-grid .product-item .product-body .product-desc { display: none; } /* .product-right */ .mode-grid .product-item .product-right { margin:0; padding:0; width: 100% !important; display: block; } /* * .mode-grid media */ /* 768 以上 */ @media (min-width: 768px) { .mode-grid .product-item { width: 23.5%; } .mode-grid .product-item:nth-child(2n), .mode-grid .product-item:nth-child(3n) { margin-right: 2%; } .mode-grid .product-item:nth-child(4n) { margin-right: 0%; } .mode-grid .product-item .product-left { height: 14.5vw; } } /* 768 以下 */ @media (max-width: 768px) { .mode-grid .product-item { width: 32%; } .mode-grid .product-item:nth-child(2n) { margin-right: 2%; } .mode-grid .product-item:nth-child(3n) { margin-right: 0%; } .mode-grid .product-item .product-left { height: 27vw; } } /* 525 以下*/ @media (max-width: 525px) { .mode-grid .product-item { width: 49%; } .mode-grid .product-item:nth-child(3n) { margin-right: 2%; } .mode-grid .product-item:nth-child(2n), .mode-grid .product-item:nth-child(4n) { margin-right: 0; } .mode-grid .product-item .product-left { height: 35vw; } }