.bread-nav { padding: 0 24rem; margin: 5rem auto 4rem auto; display: flex; align-items: center; font-size: 1.3rem; } .bread-nav a { font-size: 1.3rem; margin-right: 0.8rem; margin-left: 0.8rem; } .bread-nav a:first-of-type { margin-left: 0; } .bread-nav span { font-size: 1.3rem; margin-left: 0.8rem; } .goods-list-wrapper { padding: 0 24rem; } .filter-criteria-wrapper { width: 100%; background: #fff; padding: 0 2.4rem; max-height: 29.5rem; overflow: hidden; border-radius: 0.4rem; } .filter-criteria-wrapper > div { display: flex; padding: 2rem 0; border-bottom: 1px #EEEEEE solid; align-items: center; } .filter-criteria-wrapper > div span { width: 15.5rem; font-size: 1.4rem; color: #999999; } .filter-criteria-wrapper > div ul { display: flex; margin-left: 3rem; } .filter-criteria-wrapper > div ul li { margin-right: 5rem; font-size: 1.4rem; cursor: pointer; } .filter-criteria-wrapper > div ul li:hover { color: #FF7200; } .more-filter-btn { width: 14rem; margin: auto; background: #0147a6; height: 3rem; line-height: 3rem; text-align: center; border-radius: 0 0 0.4rem 0.4rem; cursor: pointer; display: none; } .more-filter-btn span { color: #fff; } .filter-choose-wrapper { padding: 0 24rem; margin: 0.5rem auto 1.5rem auto; display: none; } .filter-choose-wrapper > div { display: flex; align-items: center; } .filter-choose-wrapper > div div { background: #fff; border: 1px #0147a6 dashed; height: 2.4rem; line-height: 2.4rem; padding: 0 0.8rem; margin: 0 1.4rem 0 0; display: flex; align-items: center; border-radius: 0.4rem; } .filter-choose-wrapper p { font-size: 1.3rem; } .filter-choose-wrapper span { max-width: 13.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; font-size: 1.4rem; } .filter-choose-wrapper i { cursor: pointer; font-size: 1.2rem; margin-left: 0.58rem; color: #0147a6; } .filter-choose-wrapper button { width: 6.5rem; height: 2.4rem; background-color: #0147a6; border: #0147a6 1px solid; border-radius: 0.4rem; color: #fff; font-size: 1.3rem; outline: none; display: none; cursor: pointer; } .products-list-wrapper { padding: 0 24rem; margin: 4rem auto 0 auto; } .products-list-wrapper h5 { height: 4.2rem; line-height: 4.2rem; background: #EEEEEE; padding-left: 1.2rem; font-size: 1.4rem; border-radius: 0.4rem 0.4rem 0 0; } table { width: 100%; border-collapse: collapse; } table tr { width: 100%; height: 4.2rem; font-size: 1.3rem; text-align: left; border-bottom: 1px #f5f5f5 solid; background: #fff; } table tr:first-of-type { background: #F5F5F5; } table th { padding-left: 2rem; } table th:first-of-type { width: 15rem; } table th:nth-child(2) { width: 34rem; } table td { padding: 2rem 0 2rem 2rem; } table td .img-wrapper { display: flex; padding: 1rem; width: 10rem; height: 10rem; border: 1px solid #eee; border-radius: 0.4rem; background: #ffffff; flex-wrap: nowrap; justify-content: center; flex-direction: column; } table td img { width: 100%; aspect-ratio: 1/1; } table td a { font-size: 1.4rem; } table tr:hover { background: #f3f7ff; } table tr:first-of-type:hover { background: #F5F5F5; } table tr:hover a { color: #0147a6; } table td p { font-size: 1.2rem; line-height: 2.4rem; width: 46%; display: inline-block; margin-right: 2%; vertical-align: top; } .paging-wrapper { text-align: center; display: flex; justify-content: center; padding: 0 12rem 8rem 12rem; align-items: center; margin-top: 5rem; } .paging-wrapper i { font-weight: 600; color: #0147a6; font-size: 1.4rem; margin: 0 1rem; } .paging-wrapper ul { text-align: center; display: flex; } .paging-wrapper li { cursor: pointer; font-size: 1.4rem; margin: 0 1rem; font-weight: 600; color: #0147a6; } .page-active { color: #FF7200 !important; } /* 兼容不同分辨率样式 */ @media screen and (max-width: 1919px) and (min-width: 1680px) { .bread-nav, .goods-list-wrapper, .products-list-wrapper { padding: 0 18rem; } } @media screen and (max-width: 1679px) and (min-width: 1600px) { .bread-nav, .goods-list-wrapper, .products-list-wrapper { padding: 0 18rem; } } @media screen and (max-width: 1599px) and (min-width: 1440px) { .bread-nav, .goods-list-wrapper, .products-list-wrapper { padding: 0 14rem; } table td .img-wrapper { width: 9rem; height: 9rem; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .bread-nav, .goods-list-wrapper, .products-list-wrapper { padding: 0 8rem; } table td .img-wrapper { width: 8rem; height: 8rem; } }