1.轮播选项卡优化

src/components/common/tabs-view/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="tabs-container flex-row gap-10 jc-sb align-c">
+    <div class="flex-row gap-10 jc-sb align-c">
         <div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`">
             <template v-for="(item, index) in form.tabs_list" :key="index">
-                <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == activeIndex ? ' active' : '')">
+                <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')">
                     <template v-if="!isEmpty(item.img)">
                         <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                     </template>
@@ -16,7 +16,7 @@
                 </div>
             </template>
         </div>
-        <icon v-if="isTabs" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :class="tabs_theme_index == '3' ? 'pb-12' : 'pb-6'"></icon>
+        <icon v-if="isTabs" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :class="tabs_theme_index == '3' ? 'pb-14' : (tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? '' : 'pb-5'"></icon>
     </div>
 </template>
 
@@ -64,6 +64,9 @@ const tabs_theme = computed(() => {
 const tabs_bottom_line_theme = computed(() => {
     return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '';
 });
+const tabs_theme_1_style = computed(() => {
+    return new_style.value.tabs_one_theme == '1';
+});
 
 // 选中的背景渐变色样式
 const tabs_check = computed(() => {
@@ -100,13 +103,13 @@ const icon_tabs_check = () => {
 };
 </script>
 <style lang="scss" scoped>
-.tabs-container {
+.tabs {
-    .tabs {
     max-width: 39rem;
-        min-height: 3rem;
     .item {
-            padding: 0 0 0.8rem 0;
+        padding: 0 0 0.5rem 0;
+        // margin: 0 1rem;
         position: relative;
+        transition: all 0.3s ease-in-out;
         &:first-of-type {
             margin-left: 0;
         }
@@ -131,7 +134,7 @@ const icon_tabs_check = () => {
             position: absolute;
             left: 0;
             right: 0;
-                bottom: 0.4rem;
+            bottom: 0;
             display: none;
         }
         .icon {
@@ -141,6 +144,7 @@ const icon_tabs_check = () => {
             bottom: 0;
             text-align: center;
             font-size: 2rem;
+            line-height: 1rem !important;
             display: none;
         }
         .img {
@@ -158,7 +162,7 @@ const icon_tabs_check = () => {
             }
             .tabs-bottom-line-theme {
                 opacity: 0.6;
-                    bottom: 1.2rem;
+                bottom: 0.8rem;
                 z-index: 0;
                 height: 0.6rem;
                 border-radius: 0;
@@ -190,7 +194,7 @@ const icon_tabs_check = () => {
             }
         }
         &.tabs-style-4 {
-                padding-bottom: 1.2rem;
+            padding-bottom: 1.4rem;
             &.active {
                 .title {
                     color: #ff2222;
@@ -220,6 +224,8 @@ const icon_tabs_check = () => {
             }
         }
     }
-    }
+}
+.pb-0 {
+    padding-bottom: 0 !important;
 }
 </style>

src/components/model-tabs-carousel/index.vue

@@ -2,9 +2,11 @@
     <div :style="style_container">
         <div class="flex-col oh" :style="style_img_container">
             <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
+            <div class="pt-10">
                 <model-carousel :value="value" :is-common="false"></model-carousel>
             </div>
         </div>
+    </div>
 </template>
 <script setup lang="ts">
 import { common_styles_computer, common_img_computer } from '@/utils';

src/config/const/tabs-carousel.ts

@@ -138,7 +138,7 @@ const defaultTabs: defaultTabs = {
         more_icon_color: '#000',
         more_icon_size: 14,
         // 选项卡与轮播之间的间距
-        data_spacing: 10,
+        data_spacing: 0,
         // 图片圆角
         radius: 0,
         radius_top_left: 0,