449 lines
8.9 KiB
Plaintext
449 lines
8.9 KiB
Plaintext
|
|
.brand-detail-container.data-v-8c1f83f2 {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f6f8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 顶部回退沉浸式导航栏 */
|
|
.custom-header.data-v-8c1f83f2 {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
background: transparent;
|
|
}
|
|
.status-bar.data-v-8c1f83f2 {
|
|
width: 100%;
|
|
}
|
|
.header-scrolled.data-v-8c1f83f2 {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
-webkit-backdrop-filter: blur(20rpx);
|
|
backdrop-filter: blur(20rpx);
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
.nav-bar.data-v-8c1f83f2 {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
}
|
|
.nav-left.data-v-8c1f83f2 {
|
|
width: 80rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.back-icon.data-v-8c1f83f2 {
|
|
font-size: 38rpx;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.4);
|
|
}
|
|
.header-scrolled .back-icon.data-v-8c1f83f2 {
|
|
color: #333333;
|
|
text-shadow: none;
|
|
}
|
|
.nav-title.data-v-8c1f83f2 {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.header-scrolled .nav-title.data-v-8c1f83f2 {
|
|
opacity: 1;
|
|
}
|
|
.nav-right.data-v-8c1f83f2 {
|
|
width: 80rpx;
|
|
}
|
|
|
|
/* 滚动主体区 */
|
|
.main-scroll-view.data-v-8c1f83f2 {
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 品牌英雄大幕传记层 */
|
|
.hero-biography-section.data-v-8c1f83f2 {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 480rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.biography-bg.data-v-8c1f83f2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.biography-overlay.data-v-8c1f83f2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(138,43,226,0.35) 50%, rgba(20,20,20,0.85) 100%);
|
|
}
|
|
.biography-core.data-v-8c1f83f2 {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.logo-wrapper.data-v-8c1f83f2 {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
padding: 12rpx;
|
|
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.25);
|
|
border: 4rpx solid rgba(255,255,255,0.8);
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.brand-logo-img.data-v-8c1f83f2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
.brand-title-box.data-v-8c1f83f2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.b-name.data-v-8c1f83f2 {
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
letter-spacing: 2rpx;
|
|
text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.4);
|
|
}
|
|
.capsules-row.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.b-fans-capsule.data-v-8c1f83f2 {
|
|
background: linear-gradient(to right, rgba(255,65,108,0.85), rgba(255,75,43,0.85));
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
-webkit-backdrop-filter: blur(8rpx);
|
|
backdrop-filter: blur(8rpx);
|
|
}
|
|
.b-sale-capsule.data-v-8c1f83f2 {
|
|
background: linear-gradient(to right, rgba(255,140,0,0.85), rgba(255,69,0,0.85));
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
-webkit-backdrop-filter: blur(8rpx);
|
|
backdrop-filter: blur(8rpx);
|
|
}
|
|
.heart-icon.data-v-8c1f83f2, .fire-icon.data-v-8c1f83f2 {
|
|
color: #ffffff;
|
|
font-size: 22rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.b-fans-capsule text.data-v-8c1f83f2, .b-sale-capsule text.data-v-8c1f83f2 {
|
|
color: #ffffff;
|
|
font-size: 22rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 拟态玻璃精编卖点与下沉简介卡片层 */
|
|
.card-intro-section.data-v-8c1f83f2 {
|
|
margin-top: 16rpx;
|
|
border-top: 1rpx dashed rgba(0,0,0,0.06);
|
|
padding-top: 16rpx;
|
|
width: 100%;
|
|
}
|
|
.c-intro-txt.data-v-8c1f83f2 {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 1.6;
|
|
text-align: justify;
|
|
}
|
|
.inline-toggle-btn.data-v-8c1f83f2 {
|
|
color: #ff416c;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
padding-left: 6rpx;
|
|
display: inline;
|
|
}
|
|
|
|
/* 拟态玻璃精编卖点卡片层 */
|
|
.compile-card-wrapper.data-v-8c1f83f2 {
|
|
padding: 0 30rpx;
|
|
margin-top: -24rpx;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
.glass-compile-card.data-v-8c1f83f2 {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 24rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
|
|
border: 1rpx solid rgba(255,255,255,0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.card-tag-title.data-v-8c1f83f2 {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #8a2be2;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.compile-line-item.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.line-dot.data-v-8c1f83f2 {
|
|
color: #ff416c;
|
|
font-size: 24rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
.line-text.data-v-8c1f83f2 {
|
|
font-size: 26rpx;
|
|
color: #444444;
|
|
line-height: 1.45;
|
|
font-weight: 500;
|
|
}
|
|
.recommend-tags-scroll.data-v-8c1f83f2 {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
.tags-scroll-inner.data-v-8c1f83f2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4rpx 0;
|
|
}
|
|
.r-tag.data-v-8c1f83f2 {
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
background-color: #f4f5f9;
|
|
padding: 10rpx 24rpx;
|
|
border-radius: 26rpx;
|
|
margin-right: 16rpx;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 纯白装配大底盘与过滤排序引擎 */
|
|
.items-container-box.data-v-8c1f83f2 {
|
|
background: #ffffff;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
margin: 0 24rpx;
|
|
padding-bottom: 40rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
.filter-bar.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
border-bottom: 1rpx solid #f6f6f6;
|
|
background: #ffffff;
|
|
}
|
|
.filter-item.data-v-8c1f83f2 {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.filter-item.active.data-v-8c1f83f2 {
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
.filter-divider.data-v-8c1f83f2 {
|
|
width: 2rpx;
|
|
height: 24rpx;
|
|
background-color: #eeeeee;
|
|
}
|
|
.price-arrows.data-v-8c1f83f2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 8rpx;
|
|
line-height: 1;
|
|
}
|
|
.price-arrows text.data-v-8c1f83f2 {
|
|
font-size: 16rpx;
|
|
color: #cccccc;
|
|
}
|
|
.price-arrows text.hl.data-v-8c1f83f2 {
|
|
color: #ff416c;
|
|
}
|
|
|
|
/* 单列横排货盘流 */
|
|
.goods-list-single.data-v-8c1f83f2 {
|
|
background: #ffffff;
|
|
}
|
|
.single-goods-item.data-v-8c1f83f2 {
|
|
display: flex;
|
|
padding: 24rpx;
|
|
border-bottom: 1rpx solid #f9f9f9;
|
|
}
|
|
.g-img-left.data-v-8c1f83f2 {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.goods-pic.data-v-8c1f83f2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.g-info-right.data-v-8c1f83f2 {
|
|
flex: 1;
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 4rpx 0;
|
|
overflow: hidden;
|
|
}
|
|
.g-title-row.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
line-height: 1.4;
|
|
}
|
|
.platform-icon.data-v-8c1f83f2 {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-right: 8rpx;
|
|
margin-top: 4rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.title-text.data-v-8c1f83f2 {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.g-labels-row.data-v-8c1f83f2 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 10rpx;
|
|
}
|
|
.g-label-tag.data-v-8c1f83f2 {
|
|
font-size: 20rpx;
|
|
color: #ff416c;
|
|
background: #fff5f7;
|
|
border: 1rpx solid #ffd6de;
|
|
padding: 2rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
margin-right: 12rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
.g-price-row.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-top: auto;
|
|
padding-top: 12rpx;
|
|
}
|
|
.price-left.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
.p-tip.data-v-8c1f83f2 {
|
|
font-size: 22rpx;
|
|
color: #ff416c;
|
|
margin-right: 4rpx;
|
|
}
|
|
.p-symbol.data-v-8c1f83f2 {
|
|
font-size: 24rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
.p-integer.data-v-8c1f83f2 {
|
|
font-size: 38rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 连体实心红胶囊 */
|
|
.coupon-solid-box.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #ff416c;
|
|
border-radius: 6rpx;
|
|
overflow: hidden;
|
|
height: 32rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
.c-left.data-v-8c1f83f2 {
|
|
font-size: 18rpx;
|
|
color: #ffffff;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0 8rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
}
|
|
.c-right.data-v-8c1f83f2 {
|
|
font-size: 18rpx;
|
|
color: #ffffff;
|
|
padding: 0 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
.g-bottom-row.data-v-8c1f83f2 {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
margin-top: 10rpx;
|
|
}
|
|
.divider.data-v-8c1f83f2 {
|
|
margin: 0 12rpx;
|
|
color: #e0e0e0;
|
|
}
|
|
.shop.data-v-8c1f83f2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
.pure-loading-footer.data-v-8c1f83f2 {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
padding: 40rpx 0 20rpx;
|
|
}
|
|
|