.product-release { margin-top: 18px; background-color: rgb(255, 255, 255); padding: 0px 19px 0px 19px; box-sizing: border-box; /* background: skyblue; */ } .product-release-table { width: 100%; margin-top: 15px; } .product-release-table-head { display: flex; } .product-release-table-img { /* width: 74px; height: 74px; background: #F5F5F5; margin-left: 20px; */ } .product-release-table table tbody td { border: 1px solid #E6E6E6; } .product-release-table-img-td {} .nodata { /* background-color: red; */ display: flex; align-items: center; justify-content: center; } .product-release-table-name-td { max-width: 130px; font-size: 16px; color: #1B8BD2; text-align: center; } /* .product-release-table-name { font-size: 16px; color: #1B8BD2; text-align: center ; background-color: red; } */ .product-release-table-btn { cursor: pointer; } .product-btn { margin-left: 20px; } .product-release-pagination { height: 50px; display: flex; justify-content: end; align-items: center; /* position: fixed; bottom: 30px; right: 30px; width:calc(100vw - 280px); */ background: rgb(255, 255, 255); /* background: pink; */ z-index: 2; } thead { position: sticky; top: 0; background: #F7F7F7; z-index: 1; } .showGoodsBox { width: calc(100% - 2px); height: 100%; /* background-color: pink; */ /* 使用 grid 布局 */ display: grid; /* 自动填充列,每列最小宽度 183px,最大宽度 1fr */ grid-template-columns: repeat(auto-fill, minmax(183px, 1fr)); /* 行间距 10px */ row-gap: 10px; /* 列间距 10px */ column-gap: 10px; /* cursor: pointer; */ } .goodSBox { width: 100%; height: 340px; /* background-color: skyblue; */ margin: 0; cursor: pointer; border: 1px solid transparent; /* 初始设置透明边框,避免元素位置跳动 */ transition: border-color 0.3s ease; /* 添加过渡效果,让边框显示更平滑 */ } .goodSBox:hover { border-color: #d38225; /* 鼠标悬停时显示黑色边框,可根据需求修改颜色 */ } .goodsImg { width: 100%; height: 183px; object-fit: cover; background: pink; } .goodsBot { padding: 10px 5px 0 5px; box-sizing: border-box; height: 157px; /* background-color: rgb(167, 167, 167); */ } .goodsPrice { color: #E30000; font-size: 24px; font-weight: 700; } .goodsNameBox { display: flex; align-items: center; width: 100%; /* background-color: #1B8BD2; */ margin-top: 10px; } .tipsPrice { width: 38px; height: 23px; background: #FF9600; border-radius: 5px; color: white; font-size: 12px; text-align: center; line-height: 23px; margin-right: 6px; } .goodsName { width: calc(100% - 29px); /* background-color: #1bd258; */ font-weight: bold; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* cursor: pointer; */ } .goodsTime { font-size: 14px; color: #707070; margin-top: 10px; } .goodsBtnBox { display: flex; margin-top: 10px; } .goodsBtn { padding: 5px 10px; border: 1px solid #DCDCDC; font-size: 16px; color: #959595; margin-left: 10px; } .goodsBtnBox .goodsBtn:first-child { margin-left: 0; /* 让第一个按钮的左边距为 0 */ }