/* packageA/member/supplier/component/classify/classify.wxss */ .box { display: flex; /* align-items: center; */ justify-content: space-between; } .leftBox { width: 167rpx; background-color: #f2f2f2; padding-right: 20rpx; box-sizing: border-box; height: 72.5vh; } .leftList { text-align: left; /* margin-bottom: 70rpx; */ margin: 35rpx 0; box-sizing: border-box; color: #666666; font-size: 28rpx; padding-left: 23rpx; } /* .leftList:first-child { padding-top: 0; padding-bottom: 0; } */ .leftList:last-child { padding-bottom: 90rpx; } .rightBox { flex: 1; margin-left: 27rpx; margin-top: 30rpx; margin-right: 29rpx; overflow: hidden; } .rightBox .twoClass { display: flex; align-items: center; /* flex-wrap: wrap; */ } .rightBox .twoClass .twoClass_li { flex-shrink: 0; padding: 10rpx 26rpx; text-align: center; border-radius: 12rpx; font-size: 24rpx; border: solid 2rpx #ebebeb; } .rightBox .twoClass .twoClass_li:nth-child(1n) { margin-right: 22rpx; margin-bottom: 20rpx; } .tapClassRd { color: #f15353; border: solid 2rpx #f15353 !important; } .firtClassRd { font-size: 30rpx; color: #f15353; position: relative; } .line { position: absolute; left: 0; top: 0; width: 6rpx; height: 100%; background-color: #f15353; } .threeClass { font-size: 30rpx; color: #212121; font-weight: bold; margin-top: 19rpx; margin-bottom: 20rpx; } .rightBox .ul { display: flex; flex-wrap: wrap; } .rightBox .ul .li:nth-child(3n) { margin-right: 0; } .rightBox .ul .li { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 20rpx; padding-bottom: 20rpx; } .rightBox .ul .li .liImg { width: 162rpx; height: 163rpx; background-color: #ebebeb; margin-bottom: 20rpx; } .rightBox .ul .li .liImg image { width: 100%; height: 100%; } .rightBox .ul .li .txt { font-size: 26rpx; color: #333333; }