修改以下代码样式要求不出现
滚动条<template>
<
div class="cigarette
-contact">
<!
-- 搜索框
- 增加层级隔离，避免遮挡下方内容
-->
<
div class="search
-box">
<input
v
-model="searchKeyword"
type="text"
placeholder="搜索烟名..."
class="search
-input"
/>
</
div>
<!
-- 主容器
- 增加顶部间距，避开搜索框
-->
<
div class="main
-container">
<!
-- 字母索引侧边栏
- 修复层级
和定位
-->
<
div class="letter
-index">
<
div
v
-for="letter in letterList"
:key="letter"
class="index
-item"
:class="{ active
: currentLetter === letter }"
@click="scrollToLetter(letter)"
>
{{ letter }}
</
div>
</
div>
<!
-- 字母分组列表
- 结构不变
-->
<
div class="contact
-content" ref="contentRef">
<template v
-for="(group, index) in filteredGroups"
:key="group.letter">
<
div class="letter
-group"
:ref="el => el && (groupRefs[index] = el)">
<
div class="letter
-title">{{ group.letter }}</
div>
<
div class="cigarette
-list">
<
div
v
-for="item in group.list"
:key="item.id"
@click="handleItemClick(item)"
>
<
div style="
height: 200px;min
-width
: 150px;"> <img
:src="item.picFront || defaultImg" class="cig
-img"> </
div>
<
div class="cigarette
-item">{{ item.name }}</
div>
</
div>
</
div>
</
div>
</template>
<!
-- 空状态
-->
<
div v
-if="isShow ==false" class="empty
-state">
加载中...
</
div>
<
div v
-if="filteredGroups.length === 0 && isShow ==true" class="empty
-state">
暂无匹配的烟名
</
div>
</
div>
</
div>
</
div>
</template><style scoped>
/* 基础布局
- 关键：给容器增加内边距，避免内容顶到顶部 */
.cigarette
-contact {
width
: 100%;
height: 97vh;
display
: flex;
flex
-direction
: column;
font
-family
: -apple
-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans
-serif;
padding
-top
: 10px; /* 顶部留空，避免内容贴顶 */
box
-sizing
: border
-box; /* 关键：内边距计入总高度 */
}
/* 搜索框样式
- 核心优化：适配深蓝色背景 */
.search
-box {
padding
: 15px 20px;
position
: relative;
z
-index
: 10;
}
.search
-input {
width
: 100%;
max-width
: 600px;
padding
: 14px 20px; /* 适度加高，提升手感 */
/* 关键：半透明深色背景 + 磨砂效果，融合深蓝色 */
background
-color
: rgba(18, 38, 63, 0.7);
backdrop
-filter
: blur(8px); /* 磨砂玻璃，增强融合感 */
-webkit
-backdrop
-filter
: blur(8px); /* 兼容webkit内核 */
/* 浅色系边框，弱化边界 */
border
: 1px solid rgba(100, 150, 200, 0.3);
border
-radius
: 12px; /* 更大圆角，更柔
和 */
font
-size
: 16px;
/* 文字颜色适配深色背景 */
color
: #e6f1ff;
outline
: none;
box
-sizing
: border
-box;
/* 轻微阴影，增加层次感但不突兀 */
box
-shadow
: 0 2px 8px rgba(0, 10, 30, 0.2);
transition
: all 0.3s ease;
}
/* 占位符样式适配 */
.search
-input
::placeholder {
color
: rgba(180, 210, 250, 0.6); /* 浅蓝灰色，不刺眼 */
}
/* 聚焦状态：强化边框，弱化阴影，保持融合感 */
.search
-input
:focus {
border
-color
: rgba(64, 158, 255, 0.6);
box
-shadow
: 0 0 0 3px rgba(64, 158, 255, 0.1);
background
-color
: rgba(18, 38, 63, 0.8); /* 聚焦
时略加深背景，提升可读性 */
}
/* 主容器
- 核心修复：增加顶部间距，避开搜索框；限制高度避免溢出 */
.main
-container {
flex
: 1;
display
: flex;
padding
: 0 20px 20px; /* 仅左右+底部padding，顶部无padding避免重叠 */
margin
-top
: 10px; /* 关键：顶部间距，远离搜索框 */
gap
: 20px;
overflow: hidden;
height: calc(100%
- 80px); /* 关键：计算高度，减去搜索框高度，避免溢出 */
box
-sizing
: border
-box;
}
/* 字母索引
- 修复层级+调整尺寸，避免被遮挡 */
.letter
-index {
display
: grid;
grid
-template
-columns
: repeat(2, 1fr);
grid
-gap
: 6px 10px; /* 缩小间距，避免字母过大 */
width
: 160px; /* 适度加宽，避免挤压 */
border
-radius
: 8px;
padding
: 12px;
box
-shadow
: 0 2px 12px rgba(0, 0, 0, 0.05);
flex
-shrink
: 0;
justify
-items
: center;
align
-content
: flex
-start; /* 关键：字母从顶部开始排列，而非居中 */
background
-color
: rgba(0, 0, 0, 0.1); /* 增加背景，提升可读性 */
z
-index
: 1; /* 确保在内容区上层，但低于搜索框 */
}
/* 字母项
- 适度缩小尺寸，避免超出容器 */
.index
-item {
width
: 40px; /* 原50px → 缩小 */
height: 40px; /* 原50px → 缩小 */
display
: flex;
justify
-content
: center;
align
-items
: center;
font
-size
: 24px; /* 原28px → 缩小，保证清晰又不溢出 */
font
-weight
: bold;
color
: white;
border
-radius
: 8px;
cursor
: pointer;
transition
: all 0.2s ease;
background
-color
: rgba(255, 255, 255, 0.1);
}
.index
-item
:hover {
background
-color
: #e8f4f8;
color
: #409eff;
transform
: scale(1.05);
}
.index
-item.active {
background
-color
: #409eff;
color
: #fff;
font
-weight
: 600;
transform
: scale(1.05);
}
/* 内容区
- 保持原有样式 */
.contact
-content {
flex
: 1;
overflow-y
: auto;
border
-radius
: 8px;
padding
: 20px;
box
-shadow
: 0 2px 12px rgba(0, 0, 0, 0.05);
background
-color
: rgba(0, 0, 0, 0.05); /* 增加背景，区分区域 */
}
/* 字母分组
- 原有样式 */
.letter
-group {
margin
-bottom
: 30px;
}
.letter
-title {
font
-size
: 18px;
font
-weight
: 600;
color
: white;
margin
-bottom
: 15px;
padding
-bottom
: 8px;
border
-bottom
: 1px solid #e9ecef;
}
/* 烟名列表
- 原有样式 */
.cigarette
-list {
display
: flex;
flex
-wrap
: wrap;
gap
: 12px;
}
.cigarette
-item {
margin
-top
: 15px;
padding
: 12px 24px;
border
-radius
: 6px;
font
-size
: 15px;
color
: white;
cursor
: pointer;
transition
: all 0.2s ease;
white
-space
: nowrap;
}
.cigarette
-item
:hover {
border
-color
: #409eff;
transform
: translateY(
-2px);
box
-shadow
: 0 2px 8px rgba(64, 158, 255, 0.1);
}
.cigarette
-item
:active {
transform
: translateY(0);
}
/* 空状态 */
.empty
-state {
display
: flex;
justify
-content
: center;
align
-items
: center;
height: 300px;
color
: #868e96;
font
-size
: 16px;
}
/*
滚动条优化 */
.contact
-content
::-webkit
-scrollbar {
width
: 8px;
}
.contact
-content
::-webkit
-scrollbar
-track {
background
-color
: #f1f3f5;
border
-radius
: 4px;
}
.contact
-content
::-webkit
-scrollbar
-thumb {
background
-color
: #adb5bd;
border
-radius
: 4px;
transition
: background
-color 0.2s ease;
}
.contact
-content
::-webkit
-scrollbar
-thumb
:hover {
background
-color
: #868e96;
}
/* 响应式适配
- 大屏适度调整，避免遮挡 */
@media (min
-width
: 1200px) {
.cigarette
-item {
padding
: 14px 28px;
font
-size
: 16px;
}
.letter
-title {
font
-size
: 20px;
}
.index
-item {
width
: 45px;
height: 45px;
font
-size
: 26px;
}
.letter
-index {
width
: 180px;
grid
-gap
: 8px 12px;
}
}
@media (min
-width
: 1600px) {
.main
-container {
padding
: 0 50px 30px;
margin
-top
: 15px;
}
.cigarette
-list {
gap
: 15px;
}
.letter
-index {
width
: 200px;
}
.index
-item {
width
: 50px;
height: 50px;
font
-size
: 28px;
}
}
/* 图片样式 */
.cig
-img {
max-width
: 100px;
height: auto;
display
: block;
margin
: 0
auto;
}
</style>
本文解决了当内层div设置了max-height和overflow:auto时滚动条出现的问题，通过将line-height设置为normal即可修复。
扫一扫
3660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
