page { background: #f2f3f7; } /* 搜索框 */ .index .search-box { background: #fc1b35; padding: 20rpx 30rpx; } .index .search-box .search { height: 60rpx; background: #fff; border-radius: 60rpx; display: flex; align-items: center; } .index .search-box .search .icon { width: 24rpx; height: 24rpx; font-size: 0; margin-left: 20rpx; } .index .search-box .search .text { color: #999; margin-left: 10rpx; } /* banner */ .index .banner { position: relative; height: 280rpx; background: #fff; } .index .banner .bg { position: absolute; top: 0; left: 0; width: 100%; height: 190rpx; } .index .banner .img { width: 100%; height: 280rpx; } .index .banner .img .item { padding: 0 30rpx; box-sizing: border-box; font-size: 0; } .index .banner .img .item image { border-radius: 10rpx; } /* 导航 */ .index .nav-box { padding: 34rpx 30rpx 4rpx; background: #fff; display: flex; align-items: center; flex-wrap: wrap; } .index .nav-box .item { width: 25%; text-align: center; margin-bottom: 26rpx; } .index .nav-box .item .icon { margin: auto; width: 60rpx; height: 60rpx; font-size: 0; } .index .nav-box .item .text { margin-top: 14rpx; } /* 长广告 */ .index .long-adv { padding: 0 30rpx; height: 170rpx; background: linear-gradient(to bottom, #fff, #f2f3f7); } .index .long-adv .adv-box { border-radius: 10rpx; width: 100%; height: 170rpx; overflow: hidden; } /* 秒杀专区 */ .index .flash-sale { margin: 24rpx 30rpx 0; border-radius: 10rpx; overflow: hidden; } .index .flash-sale .tit { display: flex; align-items: center; background: #fff; padding: 20rpx; } .index .flash-sale .tit .text { font-size: 28rpx; font-weight: 600; } .index .flash-sale .tit .time { flex: 1; display: flex; align-items: center; margin-left: 16rpx; } .index .flash-sale .tit .time .num { width: 32rpx; height: 32rpx; line-height: 32rpx; font-size: 20rpx; font-weight: 600; font-family: PingFangSC-Medium, tahoma; text-align: center; background: #fc1b35; color: #fff; border-radius: 8rpx; } .index .flash-sale .tit .time .colon { height: 36rpx; line-height: 36rpx; color: #999; margin: 0 6rpx; } .index .flash-sale .tit .more { color: #999; } .index .flash-sale .tit .more.text-arrow::after { border-top: 2rpx solid #999; border-right: 2rpx solid #999; } .index .flash-sale .goods { display: flex; justify-content: space-between; padding: 0 20rpx 20rpx; background: #fff; } .index .flash-sale .goods .item { flex: 1; } .index .flash-sale .goods .item .img { width: 210rpx; height: 210rpx; font-size: 0; margin: auto; border-radius: 10rpx; overflow: hidden; } .index .flash-sale .goods .item .price { margin-top: 10rpx; height: 32rpx; justify-content: center; color: #333; } .index .flash-sale .goods .item .price .big { font-size: 24rpx; } /* 多功能区 */ .index .multi { padding: 0 30rpx; display: flex; flex-wrap: wrap; } .index .multi .item { flex: 1; margin-top: 12rpx; margin-left: 12rpx; padding: 20rpx; background: #fff; box-sizing: border-box; border-radius: 10rpx; } .index .multi .item:first-child { margin-left: 0; } .index .multi .item .tit { padding-bottom: 20rpx; } .index .multi .item .tit .text { font-size: 28rpx; font-weight: 600; } .index .multi .item .tit .des { margin-top: 10rpx; color: #999; line-height: 1; } .index .multi .item .pic { width: 180rpx; height: 180rpx; font-size: 0; margin: auto; border-radius: 10rpx; overflow: hidden; } /* 好物助手 */ .index .card-goods { margin: 12rpx 30rpx 30rpx; padding: 20rpx; background: #fff; border-radius: 10rpx; display: flex; } .index .card-goods .text-box .text { font-size: 32rpx; font-weight: 600; color: #fc1b35; } .index .card-goods .text-box .big { font-size: 28rpx; font-weight: 600; margin-top: 20rpx; } .index .card-goods .text-box .more.text-arrow { color: #999; margin-top: 6rpx; padding-right: 20rpx; } .index .card-goods .text-box .more::before { position: absolute; top: 50%; right: -6rpx; display: block; width: 18rpx; height: 18rpx; border-radius: 50%; content: " "; font-size: 0; border: 2rpx solid #aaa; transform: translateY(-50%); } .index .card-goods .text-box .more.text-arrow::after { width: 6rpx; height: 6rpx; top: 46%; border-top: 2rpx solid #999; border-right: 2rpx solid #999; } .index .card-goods .goods { flex: 1; display: flex; align-items: center; justify-content: flex-end; } .index .card-goods .goods .item { margin-left: 20rpx; width: 140rpx; height: 140rpx; font-size: 0; border-radius: 10rpx; overflow: hidden; } /* 推荐 */ .index .recommend { margin-top: 40rpx; padding: 0 30rpx; } .index .recommend .category { white-space: nowrap; } .index .recommend .category .category-item { display: inline-block; font-size: 26rpx; font-weight: 600; width: 20%; height: 56rpx; line-height: 56rpx; white-space: nowrap; text-align: center; } .index .recommend .category .category-item.active { color: #fff; background: #fc1b35; border-radius: 60rpx; }