.product-container{ width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 50px; } .product-intros{ text-align: center; border-bottom: 1px dotted black; margin-bottom: 20px; } .productlist{ width: 25%; padding: 10px; transition: all 0.5s; } /* .productlist:hover{ box-shadow: 0px 2px 6px 0px rgb(4 0 0 / 20%); } */ .productContent{ display: flex; align-items: center; flex-wrap: wrap; position: relative; } .productlistA{ display: flex; width: 100%; justify-content: space-between; flex-flow: column; height: 200px; overflow: hidden; border: 1px solid #ccc; padding: 10px; } .productlistA img{ width: 100%; max-height: 155px; } .productlist-p{ text-align: center; font-size: 12px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .productMiddle-left{ width: 45%; display: flex; justify-content: center; align-items: center; } .productMiddle-left img{ max-width: 100%; max-height: 100%; } .productMiddle-right{ width: 50%; display: flex; flex-flow: column; justify-content: space-around; } .productContents{ position: relative; } .backhui{ position: absolute; bottom: 0; right: 0; cursor: pointer; } .backico{ width: 30px; height: 30px; background: url(../images/back.png) no-repeat; background-size: 100% 100%; } .font-size-24{ font-size: 24px; text-align: center; } .showproduct-head{ width: 100%; } .product-middle{ display: flex; justify-content: space-between; } .productMiddle-right p span:first-child{ font-size: 18px; font-weight: bold; } .pagess{ display: flex; justify-content: center; align-items: center; } .page-sele{ margin-left: 5px; color: #999; } .page-sele select{ padding: 5px; border-color: #dee2e6; margin-left: 5px; color: #999; }