page { height: 100%; } .container { background: #f9f9f9; height: 100%; width: 100%; display: flex; flex-direction: column; } .search-a { background-color: #fff; } .search{ position: relative; box-shadow: 0 2px 2px #fff; z-index: 99; height: 80rpx; border: 1px solid rgba(0,0,0,0.1); margin: 0 30rpx 20rpx ; border-radius: 40rpx; } .search view{ background: none; width: 80%; border: none; padding-left: 20rpx; font-size: 24rpx; color: #fff; line-height: 24rpx; vertical-align: middle; } .search image{ width: 28rpx; height: 28rpx; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 28rpx; } /* .search { width: 100%; padding: 16rpx 46rpx 36rpx; background: #fff; position: relative } .search .input { display: block; height: 80rpx; background: #fff; border-radius: 4rpx; color: rgba(0,0,0,0.3); overflow: hidden; border:1px solid rgba(0,0,0,0.1); position: relative; } .search .icon { background: url(https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/wxmall/images/icon-normal_search2.png) center no-repeat; background-size: 100%; width: 28rpx; height: 28rpx; position: absolute; left: 30rpx; top: 50%; transform: translateY(-50%); } .search .txt { top: 50%; transform: translateY(-50%); color: #959595; padding-left: 10rpx; font-size: 28rpx; position: absolute; left: 70rpx; } */ .catalog { flex: 1; width: 100%; background: #fff; display: flex; border-top: 1px solid #fafafa; background: #F2F2F2; overflow: hidden; } .catalog .nav { width: 220rpx; height: 100%; margin-right: 20rpx; background-color: #fff; } .catalog .nav .item { text-align: center; line-height: 100rpx; height: 100rpx; color: #131D34; font-size: 30rpx; } .catalog .nav .item.active { font-size: 36rpx; background: #F2F2F2; position: relative; } .catalog .nav .item.active::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8rpx; background: #0075DC; } .catalog .cate { flex: 1; height: 100%; padding-right: 20rpx; background: #F2F2F2; } .catalog .zw { height: 10%; } .banner { display: block; height: 222rpx; width: 100%; position: relative; } .banner .image { position: absolute; top: 0; left: 0; height: 230rpx; width: 100%; } .banner .txt { position: absolute; top: 30rpx; text-align: center; color: #fff; font-size: 28rpx; left: 0; height: 192rpx; line-height: 192rpx; width: 100%; } .catalog .hd { width: 100%; height: 100rpx; padding: 42rpx 0 22rpx; position: relative; } .catalog .hd .txt { font-size: 26rpx; color: rgba(19, 29, 52, 1); padding: 0 16rpx; width: auto; position: relative; z-index: 2; } .catalog .bd { height: auto; width: 100%; overflow: hidden; padding: 30rpx; border-radius: 12px; background-color: #fff; } .catalog .bd .item { display: block; float: left; width: calc(33% - 32rpx); margin-top: 26rpx; overflow: hidden; box-sizing: border-box; } .catalog .bd .item:nth-child(1), .catalog .bd .item:nth-child(2), .catalog .bd .item:nth-child(3) { margin-bottom: 0; } .catalog .bd .item:nth-child(3n-1) { margin-left: 48rpx; margin-right: 48rpx; } .catalog .bd .item.last { margin-right: 0; } .catalog .bd .item .icon { width: 100%; width: 100%; padding-bottom: 100%; background: no-repeat center center; background-size: cover; border-radius: 50%; } .catalog .bd .item .txt { display: block; text-align: center; font-size: 26rpx; color: rgba(19, 29, 52, 1); height: 36rpx; width: 100%; margin-top: 14rpx; } .no-data { text-align: center; } .header .search{ position: relative; box-shadow: 0 2px 2px #fff; z-index: 99; background-color: #fff; height: 80rpx; border: 1px solid rgba(0,0,0,0.1); } .search view{ background: none; width: 80%; border: none; padding-left: 20rpx; font-size: 24rpx; color: #fff; line-height: 24rpx; vertical-align: middle; } .search input{ color:rgba(0,0,0,0.3); height: 100%; padding: 0 28rpx 0 70rpx; border-radius: 8rpx; position: relative; z-index: 999; font-size: 14px; } .search image{ width: 28rpx; height: 28rpx; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 28rpx; }