.topimg { display: block; width: 100%; } page { background: #EADFD4; } .search-box { position: absolute; left: 30rpx; right: 30rpx; height: 60rpx; background: #FFFFFF; border-radius: 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding-left: 18rpx; padding-right: 5rpx; color: #999; font-size: 26rpx; margin-top: 20rpx; } .search-box input { flex: 1; background: none; display: block; margin: 0 15rpx; } .search-btn { width: 110rpx; line-height: 50rpx; text-align: center; color: #fff; background: #815D3A; border-radius: 25rpx; } .types { display: flex; margin: 0 30rpx; justify-content: space-between; height: 80rpx; margin-top: 30rpx; } .type { display: flex; align-items: center; justify-content: center; height: 80rpx; width: 330rpx; position: relative; } .type .bgimg { position: absolute; display: block; left: 0; width: 330rpx; height: 80rpx; top: 0; z-index: -1; } .types .iconimg { display: block; width: 40rpx; margin-right: 18rpx; height: 40rpx; } .type.active { background: none; color: #fff; } .list { padding: 0 30rpx; } .item { padding: 22rpx; padding-bottom: 34rpx; background: white; border-radius: 20rpx; margin-top: 20rpx; } .title { width: 100%; font-size: 32rpx; color: #000; display: flex; align-items: flex-start; } .subtitle { font-size: 26rpx; color: #333; margin: 33rpx 0; } .list .item:last-child { border-bottom: none; } .title image { display: block; width: 60rpx; margin-left: 10rpx; flex-shrink: 0; } .strategy-bottom { display: flex; align-items: center; font-size: 22rpx; color: #999; } .strategy-bottom image { display: block; flex-shrink: 0; width: 34rpx; height: 34rpx; border-radius: 50%; margin-right: 10rpx; } .strategy-bottom .author-name { color: #999; flex: 1; } .strategy-bottom text { flex-shrink: 0; } .strategy-bottom .iconfont { margin-left: 40rpx; flex-shrink: 0; font-size: 32rpx; margin-right: 8rpx; } .btn { color: #815D3A; font-size: 22rpx; }