修改app部分样式异常

This commit is contained in:
Zy
2026-05-22 14:39:25 +08:00
parent f3f499dd4b
commit d0e1f8ea02
15 changed files with 245 additions and 147 deletions

View File

@@ -1,16 +1,24 @@
<template>
<view class="tabs_box">
<view class="tabs-wrapper">
<view
v-for="(item, index) in tabs"
:key="index"
@tap="handleTabs(item)"
class="tabs_items"
:class="{
active: item.value === currentActiveValue,
line: showBottomLine && item.value === currentActiveValue
class="tabs_box"
:style="{
height: props.height + 'rpx',
lineHeight: props.height + 'rpx'
}"
>
{{ item.label }}
<view
v-for="(item, index) in tabs"
:key="index"
@tap="handleTabs(item)"
class="tabs_items"
:class="{
active: item.value === currentActiveValue,
line: showBottomLine && item.value === currentActiveValue
}"
>
{{ item.label }}
</view>
</view>
</view>
</template>
@@ -27,6 +35,7 @@ interface TabItem {
// Props 类型定义
interface Props {
tabslist?: any[]
height?: number
showBottomLine?: boolean
// 配置:传入字段名
options?: {
@@ -39,6 +48,7 @@ interface Props {
// 定义 Props
const props = withDefaults(defineProps<Props>(), {
tabslist: () => [],
height: 60,
showBottomLine: true,
options: () => ({ label: 'name', value: 'value' }),
activeValue: null
@@ -75,9 +85,12 @@ const handleTabs = (item: TabItem) => {
</script>
<style lang="scss" scoped>
.tabs-wrapper {
flex-shrink: 0; /* 关键:不让被压缩 */
}
.tabs_box {
height: 60rpx;
line-height: 60rpx;
height: 80rpx;
line-height: 80rpx;
width: 100%;
display: flex;
align-items: center;