/**index.wxss**/ page { overflow-x: hidden; overflow-y: scroll; display: flex; flex-direction: column; } .header { height: 330rpx; position: relative; } .header .header-bg { z-index: 1; position: absolute; top: 0; left: 0; width: 100vw; height: 295rpx; background: #dfefec; } .header .logo { width: 150rpx; height: 150rpx; z-index: 99; } .header .logo.logo-at-left { position: absolute; top: 96rpx; left: 36rpx; } .header .logo-image { width: 100%; height: 100%; } .header .search-icon { position: absolute; z-index: 99; top: 260rpx; left: 30rpx; height: 65rpx; width: 530rpx; } .header .cart-icon { position: absolute; z-index: 99; top: 260rpx; right: 30rpx; height: 65rpx; width: 146rpx; } .banner { display: flex; justify-content: center; align-items: center; padding: 24rpx 0 10rpx; } .banner .banner-item { border: 1px solid #dfefec; width: 690rpx; height: 310rpx; display: block; border-radius: 25rpx; } .hot-bar { padding: 14rpx 30rpx 10rpx; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .hot-bar .hot-image { width: 220rpx; height: 300rpx; } .brand-bar { padding: 14rpx 30rpx 10rpx; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .brand-bar .brand-item { width: 120rpx; height: 120rpx; margin-bottom: 20rpx; } .brand-bar .brand-item .brand-image { width: 100%; height: 100%; } .slider { display: flex; justify-content: center; align-items: center; padding: 24rpx 0 10rpx; } .slider .slider-item { border: 1px solid #dfefec; width: 690rpx; height: 220rpx; display: block; border-radius: 25rpx; } .category { height: 300rpx; margin: 14rpx 30rpx 10rpx 30rpx; border: 1px solid #dfefec; border-radius: 25rpx; padding: 20rpx; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .category .category-item { width: 144rpx; height: 144rpx; margin-bottom: 20rpx; } .category .category-item .category-image { width: 100%; height: 100%; } .goods { min-height: 800rpx; }