|
@@ -1,63 +1,29 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<view class="tabs-container">
|
|
|
- <!-- First row of tabs -->
|
|
|
<view class="tabs-row no-gap">
|
|
|
- <up-tabs :list="getFirstRowTabs()" @change="handlTabs" :activeStyle="{
|
|
|
- color: 'rgba(221, 94, 69, 1)',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- fontSize: '24rpx'
|
|
|
- }"
|
|
|
- :inactiveStyle="{
|
|
|
- fontSize: '24rpx'
|
|
|
- }"
|
|
|
- lineColor="rgba(221, 94, 69, 1)" :current="tabKey" keyName="businessName">
|
|
|
- </up-tabs>
|
|
|
+ <view v-for="(item, index) in list" :key="item.id"
|
|
|
+ :class="tabKey === index ? 'tab-item tab-active' : 'tab-item'" @click="handlTabs(item, index)">
|
|
|
+ {{ item.businessName }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- Second row of tabs -->
|
|
|
<view class="tabs-row no-gap">
|
|
|
- <up-tabs :list="getSecondRowTabs()" @change="handlSecondRowTabs" :activeStyle="{
|
|
|
- color: 'rgba(221, 94, 69, 1)',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- fontSize: '24rpx'
|
|
|
- }"
|
|
|
- :inactiveStyle="{
|
|
|
- fontSize: '24rpx'
|
|
|
- }"
|
|
|
- lineColor="rgba(221, 94, 69, 1)" :current="secondRowTabKey" keyName="businessName">
|
|
|
- </up-tabs>
|
|
|
+ <view v-for="(item, index) in childrenList" :key="item.id"
|
|
|
+ :class="childrenKey === index ? 'tab-item tab-active' : 'tab-item'"
|
|
|
+ @click="childernChange(item, index)">
|
|
|
+ {{ item.businessName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabs-row no-gap">
|
|
|
+ <view v-for="(item, index) in childrenList" :key="item.id"
|
|
|
+ :class="children2Key === index ? 'tab-item tab-active' : 'tab-item'"
|
|
|
+ @click="childern2Change(item, index)">
|
|
|
+ {{ item.businessName }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="tabs-scroll">
|
|
|
- <up-tabs :list="childrenList" @change="childernChange" :activeStyle="{
|
|
|
- color: 'rgba(221, 94, 69, 1)',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- fontSize: '22rpx'
|
|
|
- }"
|
|
|
- :inactiveStyle="{
|
|
|
- fontSize: '22rpx'
|
|
|
- }"
|
|
|
- lineColor="rgba(221, 94, 69, 1)" :current="childrenKey" keyName="businessName">
|
|
|
- </up-tabs>
|
|
|
- </view>
|
|
|
- <view class="tabs-scroll-box">
|
|
|
- <up-tabs :list="children2List" @change="childern2Change" :activeStyle="{
|
|
|
- color: 'rgba(221, 94, 69, 1)',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- fontSize: '20rpx'
|
|
|
- }"
|
|
|
- :inactiveStyle="{
|
|
|
- fontSize: '20rpx'
|
|
|
- }"
|
|
|
- lineColor="rgba(221, 94, 69, 1)" :current="children2Key" keyName="businessName">
|
|
|
- </up-tabs>
|
|
|
- </view>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -177,6 +143,38 @@ onLoad((options) => {
|
|
|
.tabs-row {
|
|
|
width: 100%;
|
|
|
margin-bottom: 6rpx;
|
|
|
+
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr); // 4列布局
|
|
|
+ gap: 20rpx; // 网格间距
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #818181;
|
|
|
+
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-active {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #1A1A1A;
|
|
|
+ border-bottom: 4px solid #D94342;
|
|
|
}
|
|
|
|
|
|
/* 添加无间隔样式 */
|