@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page, .content { height: 100%; background-color: #f8f8f8; } .vheight { height: 25px; background-color: #FFFFFF; } .input-box { padding: 25rpx; background-color: #ffffff; height: 44px; } .input-box .iconsearch { font-size: 50rpx; } .input-box .input-content { border-radius: 99rpx; flex-grow: 1; padding: 10rpx 30rpx; background-color: rgba(231, 231, 231, 0.7); } .input-box .input-content .input { flex-grow: 1; } .input-box .input-content .input input { font-size: 32rpx; } .input-box .input-button { padding-left: 20rpx; font-size: 32rpx; height: 100%; } .swiper-box { height: calc(100% - 44px); } .swiper-box .search-hot { padding: 25rpx; } .swiper-box .search-hot .title { font-size: 32rpx; color: #909399; } .swiper-box .search-hot .hot-list { display: flex; flex-wrap: wrap; margin-top: 30rpx; } .swiper-box .search-hot .hot-list .list-item { padding: 10rpx 20rpx; border: 1px solid #dcdfe6; color: #303133; font-size: 28rpx; margin-right: 20rpx; margin-bottom: 20rpx; } .guess-section .icon { margin-right: 10rpx; display: inline-block; padding: 2rpx 10rpx; border: 1rpx solid #fd5b23; color: #fd5b23; line-height: 1; font-size: 28rpx; border-radius: 10rpx; } .guess-section { display: flex; flex-wrap: wrap; } .guess-section .guess-item { overflow: hidden; display: flex; flex-direction: column; width: 48%; margin-bottom: 4%; border-radius: 15rpx; background-color: white; box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3; } .guess-section .guess-item:nth-child(2n + 1) { margin-right: 4%; } .guess-section .image-wrapper { width: 100%; height: 330rpx; border-radius: 3px; overflow: hidden; } .guess-section .image-wrapper image { width: 100%; height: 100%; opacity: 1; } .guess-section .title { font-size: 28rpx; color: #303133; font-weight: bold; line-height: 80rpx; } .guess-section .price { font-size: 32rpx; color: #606266; font-weight: bold; line-height: 1; line-height: 80rpx; } .guess-section .detail { line-height: 1; } .guess-section .tip { color: white; background-color: #fd5b23; line-height: 1.5; font-size: 24rpx; padding-left: 20rpx; } .navbar { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 40px; background: #fff; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06); z-index: 10; } .navbar .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 30rpx; color: #303133; position: relative; } .navbar .nav-item.current { color: #ff4e4a; } .navbar .nav-item.current:after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 120rpx; height: 0; border-bottom: 4rpx solid #ff4e4a; } .navbar .p-box { display: flex; flex-direction: column; } .navbar .p-box .iconfont { display: flex; align-items: center; justify-content: center; width: 30rpx; height: 14rpx; line-height: 1; margin-left: 4rpx; font-size: 26rpx; color: #888; } .navbar .p-box .iconfont.active { color: #ff4e4a; } .navbar .p-box .xia { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .navbar .cate-item { display: flex; justify-content: center; align-items: center; height: 100%; width: 80rpx; position: relative; font-size: 44rpx; } .navbar .cate-item:after { content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-left: 1px solid #ddd; width: 0; height: 36rpx; } .cate-list { height: 100%; padding-top: 40px; }