ac8f5b5f64
- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools - Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58 - Add sass 1.58.3 dependency and update vite config for modern scss compiler support - Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route - Add utility functions for URL parameter handling - Add static assets including custom znicons font, component images and icons - Fix scss syntax issues and deprecation warnings
93 lines
1.9 KiB
SCSS
93 lines
1.9 KiB
SCSS
.tab-wrapper {
|
||
background-color: $theme-color-100;
|
||
height: 48px;
|
||
overflow-x: auto;
|
||
/* 支持横向滚动 */
|
||
-webkit-overflow-scrolling: touch;
|
||
/* 平滑滚动（移动端） */
|
||
white-space: nowrap;
|
||
/* 防止换行 */
|
||
justify-content: flex-start;
|
||
/* 覆盖工具类，靠左排列以便滚动 */
|
||
}
|
||
|
||
.tab-item {
|
||
height: 100%;
|
||
flex: 0 0 auto;
|
||
/* 不让子项拉伸，按内容宽度排列 */
|
||
padding: 0 12px;
|
||
/* 增加横向间距，便于触控 */
|
||
min-width: 68px;
|
||
/* 保证可点击区域 */
|
||
}
|
||
|
||
.icon {
|
||
height: 20px;
|
||
width: 20px;
|
||
color: #525866;
|
||
}
|
||
|
||
.icon-active {
|
||
color: #0ccd58;
|
||
}
|
||
|
||
/* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
|
||
.tab-item > .absolute {
|
||
position: static !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-item-active {
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 0;
|
||
right: 4px;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
border-radius: 20px 20px 0 0;
|
||
transform: perspective(40px) rotateX(6deg) translate(0, -1px);
|
||
transform-origin: bottom bottom;
|
||
box-shadow: 0 -0.5px 0 #0ccd58;
|
||
}
|
||
}
|
||
|
||
.tab-text-active {
|
||
color: #0ccd58;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* 已改为每项内部指示器，移除了全局指示器样式 */
|
||
|
||
/* 每项内的指示器（替代全局指示器） */
|
||
.tab-item-inner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 3;
|
||
/* 确保内容（icon/text）位于 .tab-item-active::before 之上 */
|
||
}
|
||
|
||
.tab-item-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%) scaleX(0.9);
|
||
height: 3px;
|
||
width: 24px;
|
||
background-color: #0ccd58;
|
||
border-radius: 3px 3px 0 0;
|
||
opacity: 0;
|
||
transition:
|
||
opacity 0.2s ease,
|
||
transform 0.2s ease;
|
||
z-index: 3;
|
||
}
|
||
|
||
.tab-item-indicator.visible {
|
||
opacity: 1;
|
||
transform: translateX(-50%) scaleX(1);
|
||
}
|