/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/@tarojs/webpack5-runner/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/index/index.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; .index-page { padding: 0 24rpx 24rpx; } /* 顶部标题栏 */ .header-bar { padding: 20rpx 0 16rpx; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-title { font-size: 48rpx; font-weight: 800; color: var(--text-primary); letter-spacing: 4rpx; } /* 搜索框卡片 */ .search-card { padding: 20rpx 24rpx; } .search-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #f8f9fa; border: 1rpx dashed rgba(0, 0, 0, 0.06); border-radius: 40rpx; padding: 16rpx 24rpx; } .search-icon { font-size: 28rpx; margin-right: 16rpx; } .search-icon-img { width: 28rpx; height: 28rpx; margin-right: 16rpx; } .search-input { -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 28rpx; color: var(--text-primary); background: transparent; border: none; outline: none; } .search-input::-webkit-input-placeholder { color: var(--text-secondary); font-size: 26rpx; } .search-input::-moz-placeholder { color: var(--text-secondary); font-size: 26rpx; } .search-input:-ms-input-placeholder { color: var(--text-secondary); font-size: 26rpx; } .search-input::-ms-input-placeholder { color: var(--text-secondary); font-size: 26rpx; } .search-input::placeholder { color: var(--text-secondary); font-size: 26rpx; } .search-result-hint { margin-top: 16rpx; padding-top: 16rpx; border-top: 2rpx dashed var(--line-star); } .hint-text { font-size: 24rpx; color: var(--text-secondary); } /* 成品展示轮播 */ .showcase-section { margin-top: 20rpx; } .showcase-swiper { height: 520rpx; } .showcase-swiper-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 10rpx; -webkit-box-sizing: border-box; box-sizing: border-box; } .showcase-swiper-card { width: 100%; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-radius: 24rpx; overflow: hidden; -webkit-box-shadow: var(--shadow-card); box-shadow: var(--shadow-card); -webkit-box-sizing: border-box; box-sizing: border-box; } .showcase-image-wrapper { width: 100%; height: 320rpx; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; position: relative; } .showcase-real-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .showcase-text-area { -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: var(--bg-card); padding: 16rpx 20rpx; position: relative; } .showcase-info .showcase-title { font-size: 32rpx; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 8rpx; } .showcase-info .showcase-desc { font-size: 24rpx; color: var(--text-secondary); display: block; } .showcase-tag { position: absolute; top: 16rpx; right: 16rpx; background: rgba(255, 154, 158, 0.9); color: #ffffff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 20rpx; font-weight: 600; z-index: 2; } /* 热门品类 */ .category-section { margin-top: 20rpx; } .category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; } .category-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 0 0 24rpx; overflow: hidden; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .category-item:active { -webkit-transform: scale(0.96); -ms-transform: scale(0.96); transform: scale(0.96); } /* 品类顶部实物照片 */ .category-img-wrapper { width: 100%; height: 180rpx; overflow: hidden; border-radius: 16rpx; margin-bottom: 16rpx; position: relative; } .category-img-real { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .category-name { font-size: 28rpx; font-weight: 700; color: var(--text-primary); margin-bottom: 8rpx; } .category-desc { font-size: 22rpx; color: var(--text-secondary); } .category-price { font-size: 30rpx; font-weight: 700; color: var(--accent-pink); margin-top: 8rpx; } /* 空状态 */ .empty-category { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 60rpx 40rpx; text-align: center; } .empty-icon-img { width: 48rpx; height: 48rpx; margin-bottom: 16rpx; } .empty-text { font-size: 30rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 8rpx; } .empty-sub { font-size: 24rpx; color: var(--text-secondary); } /* 底部安全区 */ .safe-bottom-placeholder { height: 160rpx; }