fix: 横屏页面 tab样式修改

components/NormalTabs/NormalTabs.vue

@@ -17,7 +17,7 @@
 			:indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'"
 			:indicator-active-color="elementInfo.option.tabs.backgroundColor">
 			<swiper-item :class="[styleType === 'vertical' ? 'tab-vertical' : 'tab-group']" v-for="(item, index) in tabsGroup" :key="index">
-				<view class="tab-item" :class="[tabsValue == tab.value ? 'active' : '']" v-for="tab in item"
+				<view class="tab-item" :class="{'active': tabsValue == tab.value}" v-for="tab in item"
 					:key="tab.value" @click="handleChangeTabValue(tab.value)">
 					{{ tab.name }}
 				</view>
@@ -226,7 +226,7 @@
 		display: flex !important;
 		flex-direction: column;
 		align-items: center;
-		justify-content: center;
+		justify-content: space-evenly;
 	}
 
 	.tab-item {

pages/fullscreen/fullscreen.vue

 <template>
 	<view class="wrapper" :class="{'tabs-layout': showTabs}">
 		<!-- 普通选项卡 -->
-		<NormalTabs v-if="showTabs" :elementInfo="tabsElement" styleType="vertical" style="width: 15%;"></NormalTabs>
-		<view :style="{height: `${theStyle.height}px`, width: `${theStyle.width}px`}">
+		<NormalTabs
+			v-if="showTabs"
+			:elementInfo="tabsElement"
+			styleType="vertical"
+			style="width: 80px;"
+			:style="{paddingLeft: `${theStyle.left}px`}"
+		></NormalTabs>
+		<view :style="{height: `${theStyle.height}px`, width: `${theStyle.width - theStyle.left}px`}">
 			<!-- 普通柱状图 -->
 			<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
 			<!-- 普通折线图 -->
@@ -34,7 +40,8 @@
 				const reduceBottom = screenHeight - safeArea.bottom
 				return {
 					height: windowHeight - reduceBottom,
-					width: this.showTabs ? windowWidth * 0.85 : windowWidth
+					width: this.showTabs ? windowWidth - 80 : windowWidth,
+					left: safeArea.left
 				}
 			},
 		},