/* pages/pbService/library/index.wxss */ .top-menus { position: fixed; left: 0; right: 0; padding: 20rpx 30rpx; background: white; height: 140rpx; } page { background: #EDEDED; } .search-top { display: flex; justify-content: space-between; align-items: center; height: 60rpx; background: #EDEDED; border-radius: 30rpx; width: 690rpx; font-size: 26rpx; font-weight: 500; margin-bottom: 30rpx; } .search-top .iconfont{ padding: 0 20rpx; color: #999999; font-size: 30rpx; flex-shrink: 0; } .search-top input { display: block; flex: 1; } .search-btn { width: 110rpx; flex-shrink: 0; text-align: center; line-height: 40rpx; border-left: 1rpx solid #ccc; color: #0B898E; } .menus { display: flex; align-items: center; justify-content: center; font-size: 26rpx; font-weight: bold; } .menus .menu { position: relative; } .menus .menu.active { color: #0B898E; } .menus .menu.active::after { content: "1"; font-size: 0; position: absolute; display: block; width: 30rpx; height: 4rpx; background: #0B898E; border-radius: 2rpx; top: 100%; left: 50%; margin-left: -15rpx; margin-top: 6rpx; } .menus .menu:nth-child(1){ margin-right: 240rpx; } .list { display: flex; align-items: center; flex-wrap: wrap; margin: 20rpx 10rpx; } .item { margin-left: 20rpx; margin-bottom: 20rpx; width: 216rpx; height: 340rpx; background: #FFFFFF; border-radius: 20rpx; text-align: center; } .item image { width: 159rpx; height: 188rpx; margin: 15rpx auto; display: block; } .item .info { text-align: left; border-top: 1rpx solid #d8d8d8; padding: 20rpx; } .item .info .title { font-size: 26rpx; color: #333; } .item .info .subtitle { font-size: 26rpx; color: #999; } .right-icons { position: fixed; right: 30rpx; bottom: 40rpx; color: #fff; font-size: 26rpx; } .right-icons .right-icon { display: flex; align-items: center; justify-content: center; width: 60rpx; height: 100rpx; padding: 0 20rpx; border-radius: 50%; text-align: center; background: #0B898E; }