.box { width: 710rpx; overflow: hidden; margin: 30rpx auto; font-size: 24rpx; } .searchBox { overflow: hidden; margin-bottom: 30rpx; } .searchs { width: 70%; float: left; height: 60rpx; border: 2rpx solid #ccc; font-size: 24rpx; border-radius: 10rpx; padding-left: 20rpx; } .searchBtn { width: 20%; float: left; height: 60rpx; line-height: 60rpx; text-align: center; margin-left: 5%; font-size: 24rpx; } .status { overflow: hidden; display: flex; flex-direction: row; justify-content: space-around; } .all { background-color: rgba(204, 51, 204); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .save { background-color: rgba(102, 153, 255); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .cancellation { background-color: rgba(0, 153, 51); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .examine { background-color: rgba(255, 204, 0); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .noExamine { background-color: rgba(255, 153, 51); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .reject { background-color: rgba(255, 0, 0); color: #fff; font-size: 28rpx; width: 100rpx; height: 100rpx; border-radius: 50%; text-align: center; line-height: 100rpx; } .reelListBox { margin-top: 30rpx; border: 1rpx #ccc solid; border-radius: 10rpx; overflow: hidden; } .reelImg { height: 200rpx; width: 320rpx; margin: 15rpx; /* background-color: cornflowerblue; */ float: left; } .describe { margin-top: 15rpx; width: 350rpx; float: left; font-size: 28rpx; } .reelNameBox { overflow: hidden; } .reelName { max-width: 260rpx; text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/ white-space: nowrap; /*让文字不换行*/ overflow: hidden; /*超出要隐藏*/ font-size: 32rpx; float: left; } .reelType { width: 40rpx; height: 40rpx; font-size: 28rpx; background-color: red; line-height: 40rpx; text-align: center; color: #fff; float: left; } .denomination { margin: 15rpx 0; } .denomination::before { content: "面额:¥"; font-size: 28rpx; } .selling { margin: 15rpx 0; } .selling::before { content: "售价:¥"; font-size: 28rpx; } .inventoryBox { margin-top: 10rpx ; overflow: hidden; } .allInventory { float: left; } .allInventory::before { content: "总库存:"; font-size: 28rpx; } .residue { float: left; margin-left: 10rpx; } .residue::before { content: "剩余库存:"; font-size: 28rpx; } .addReel{ width: 150rpx; height: 150rpx; border-radius: 50%; color: #fff; background-color: cornflowerblue; text-align: center; line-height: 150rpx; font-size: 32rpx; position: fixed; bottom: 0; left:0; right:0; bottom: 50rpx; margin-left:auto; margin-right:auto; } .noData{ position: fixed; top: 600rpx; left: 290rpx; font-size: 30rpx; color: gray; }