修改tabs样式

src/components/ut-tabs/ut-tabs.vue

@@ -1,52 +1,79 @@
 <template>
     <template v-if="mode == 'scroll-x'">
-        <scroll-view scroll-x class="ut-tabs-scroll" show-scrollbar="false" :scroll-into-view-offset="SCROLL_OFFSET"
-            :scroll-into-view="scrollIntoView" ref="scrollViewRef" scroll-with-animation>
-            <view class="ut-tabs-row">
-                <view v-for="(tab, idx) in tabs" :key="tab.value" :id="'tab-' + idx" class="ut-tab-item p-rtv"
-                    :class="{ active: idx === activeIndex }" @click="selectTab(idx)" ref="tabRefs">
-                    <view class="tab-label" :style="{
-                        fontSize: fontSize,
-                        color: idx === activeIndex ? themeColor : '#999',
-                        fontWeight: idx === activeIndex ? 'bold' : '500'
-                    }">
+        <scroll-view scroll-x class="ut-tabs-scroll" show-scrollbar="false" :scroll-into-view-offset="SCROLL_OFFSET" :scroll-into-view="scrollIntoView" ref="scrollViewRef" scroll-with-animation>
+            <view class="ut-tabs-row gap-30">
+                <view v-for="(tab, idx) in tabs" :key="tab.value" :id="'tab-' + idx" class="ut-tab-item p-rtv" :class="{ active: idx === activeIndex }" @click="selectTab(idx)" ref="tabRefs">
+                    <view
+                        class="tab-label"
+                        :style="{
+                            fontSize: fontSize,
+                            color: idx === activeIndex ? themeColor : '#999',
+                            fontWeight: idx === activeIndex ? 'bold' : '500',
+                        }"
+                    >
+                        <span>{{ tab.label }}</span>
+                        <view v-if="tab.badge && (tab.num as number) > 0" class="tab-badge">{{ tab.num }}</view>
+                    </view>
+                    <view
+                        v-if="idx === activeIndex"
+                        class="tab-underline"
+                        :style="{
+                            background: themeColor,
+                            height: lineHeight,
+                        }"
+                    ></view>
+                </view>
+            </view>
+        </scroll-view>
+    </template>
+    <template v-if="mode == 'scroll-x-card'">
+        <scroll-view scroll-x class="ut-tabs-scroll" show-scrollbar="false" :scroll-into-view-offset="SCROLL_OFFSET" :scroll-into-view="scrollIntoView" ref="scrollViewCardRef" scroll-with-animation>
+            <view class="ut-tabs-row gap-30">
+                <view v-for="(tab, idx) in tabs" :key="tab.value" :id="'tab-' + idx" class="ut-tab-item-card gap-30 p-rtv" :class="{ active: idx === activeIndex }" @click="selectTab(idx)" ref="tabCardRefs">
+                    <view
+                        class="tab-label-card d-flex j-c a-c pd2-0-24 min-w-150"
+                        :style="{
+                            fontSize: fontSize,
+                            color: idx === activeIndex ? '#fff' : '#333',
+                            background: idx === activeIndex ? themeColor : '#fff',
+                        }"
+                    >
                         <span>{{ tab.label }}</span>
-                        <view v-if="tab.badge && tab.num as number > 0" class="tab-badge">{{ tab.num }}</view>
                     </view>
-                    <view v-if="idx === activeIndex" class="tab-underline" :style="{
-                        background: themeColor,
-                        height: lineHeight
-                    }"></view>
                 </view>
             </view>
         </scroll-view>
     </template>
     <template v-if="mode == 'btw'">
-        <view class="ut-tabs-row" :style="{ justifyContent: 'space-between' }">
-            <view v-for="(tab, idx) in tabs" :key="tab.value" class="ut-tab-item p-rtv"
-                :class="{ active: idx === activeIndex }" @click="selectTab(idx)" ref="tabRefs">
-                <view class="tab-label" :style="{
-                    fontSize: fontSize,
-                    color: idx === activeIndex ? themeColor : '#999',
-                    fontWeight: idx === activeIndex ? 'bold' : '500'
-                }">
+        <view class="ut-tabs-row gap-30" :style="{ justifyContent: 'space-between' }">
+            <view v-for="(tab, idx) in tabs" :key="tab.value" class="ut-tab-item p-rtv" :class="{ active: idx === activeIndex }" @click="selectTab(idx)" ref="tabRefs">
+                <view
+                    class="tab-label"
+                    :style="{
+                        fontSize: fontSize,
+                        color: idx === activeIndex ? themeColor : '#999',
+                        fontWeight: idx === activeIndex ? 'bold' : '500',
+                    }"
+                >
                     <span>{{ tab.label }}</span>
-                    <view v-if="tab.badge && tab.num as number > 0" class="tab-badge">{{ tab.num }}</view>
+                    <view v-if="tab.badge && (tab.num as number) > 0" class="tab-badge">{{ tab.num }}</view>
                 </view>
-                <view v-if="idx === activeIndex" class="tab-underline" :style="{
-                    background: themeColor,
-                    height: lineHeight
-                }"></view>
+                <view
+                    v-if="idx === activeIndex"
+                    class="tab-underline"
+                    :style="{
+                        background: themeColor,
+                        height: lineHeight,
+                    }"
+                ></view>
             </view>
         </view>
     </template>
     <template v-if="mode == 'subsection'">
         <view class="tabs-subsection-wrap d-flex">
             <template v-for="(item, idx) in tabs" :key="idx">
-                <view class="flex1 subsection-item d-flex p-rtv j-c a-c f-s-32 c-999"  @click="selectTab(idx)" :class="{ active: idx === activeIndex }">
-                    <slot :name="item.value" :active="idx === activeIndex">
-                        {{ item.label }}
-                    </slot>
+                <view class="flex1 subsection-item d-flex p-rtv j-c a-c f-s-32 c-999" @click="selectTab(idx)" :class="{ active: idx === activeIndex }">
+                    <slot :name="item.value" :active="idx === activeIndex">{{ item.label }}</slot>
                 </view>
             </template>
         </view>
@@ -54,60 +81,68 @@
 </template>
 
 <script setup lang="ts">
-
 const props = defineProps({
     tabs: {
-        type: Array as () => Array<{ label: string; value: string; badge?: boolean; num?: number }>,
-        default: () => []
+        type: Array as () => Array<{
+            label: string;
+            value: string;
+            badge?: boolean;
+            num?: number;
+        }>,
+        default: () => [],
     },
     modelValue: {
         type: [String, Number],
-        default: ''
+        default: '',
     },
     themeColor: {
         type: String,
-        default: '#37A954'
+        default: '#37A954',
     },
     fontSize: {
         type: String,
-        default: '30rpx'
+        default: '30rpx',
     },
     lineHeight: {
         type: String,
-        default: '6rpx'
+        default: '6rpx',
     },
     mode: {
         type: String,
-        default: 'scroll-x' // btw subsection
-    }
-})
+        default: 'scroll-x', // btw subsection scroll-x-card
+    },
+});
 const SCROLL_OFFSET = ref(-(uni as any).$u?.getPx('200rpx'));
-const emit = defineEmits(['update:modelValue', 'change'])
-
-const activeIndex = ref(0)
-const scrollIntoView = ref('')
-const scrollViewRef = ref(null)
-const tabRefs = ref([])
-
-watch(() => props.modelValue, (val: any) => {
-    const idx = props.tabs.findIndex(tab => tab.value === val)
-    if (idx !== -1) {
-        activeIndex.value = idx
-        scrollToTab(idx)
-    }
-})
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activeIndex = ref(0);
+const scrollIntoView = ref('');
+const scrollViewRef = ref(null);
+const scrollViewCardRef = ref(null);
+const tabRefs = ref([]);
+
+watch(
+    () => props.modelValue,
+    (val: any) => {
+        const idx = props.tabs.findIndex((tab) => tab.value === val);
+        if (idx !== -1) {
+            activeIndex.value = idx;
+            scrollToTab(idx);
+        }
+    },
+);
 
 const selectTab = (idx: number) => {
-    activeIndex.value = idx
-    emit('update:modelValue', props.tabs[idx].value)
-    emit('change', props.tabs[idx])
-    scrollToTab(idx)
-}
+    activeIndex.value = idx;
+    emit('update:modelValue', props.tabs[idx].value);
+    emit('change', props.tabs[idx]);
+    scrollToTab(idx);
+};
 
 // 主动滚动到选中tab
 const scrollToTab = (idx: number) => {
-    scrollIntoView.value = 'tab-' + idx
-}
+    scrollIntoView.value = 'tab-' + idx;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -132,7 +167,6 @@ const scrollToTab = (idx: number) => {
     font-weight: 500;
     color: #666;
     cursor: pointer;
-    padding: 0 24rpx;
 
     .tab-label {
         position: relative;
@@ -160,20 +194,30 @@ const scrollToTab = (idx: number) => {
             box-sizing: border-box;
             z-index: 2;
         }
-
-
     }
 
     .tab-underline {
         position: absolute;
-        left: 24rpx;
-        right: 24rpx;
+        left: 0rpx;
+        right: 0rpx;
         bottom: 0;
         border-radius: 3rpx;
         transition: width 0.2s;
         z-index: 1;
     }
 }
+
+.ut-tab-item-card {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    .tab-label-card {
+        box-sizing: border-box;
+        border-radius: 28rpx;
+        height: 54rpx;
+    }
+}
+
 .tabs-subsection-wrap {
     height: 88rpx;
     border-radius: 10rpx;
@@ -181,7 +225,7 @@ const scrollToTab = (idx: number) => {
     overflow: hidden;
 
     .active.subsection-item {
-        background-color: #37A954;
+        background-color: #37a954;
         color: #fff;
     }
 }

src/plant/base/base-detail/index.vue

@@ -2,7 +2,7 @@
     <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" refresher-only @onRefresh="onRefresh" scroll-with-animation>
         <template #top>
             <ut-navbar title="基地详情" :fixed="false" border></ut-navbar>
-            <view class="bg-fff mb-20">
+            <view class="bg-fff mb-20 pd2-0-24">
                 <view class="pd-5"></view>
                 <ut-tabs v-model="activeTab" :tabs="tabs" mode="btw" @change="changeActiveTab"></ut-tabs>
             </view>

src/plant/base/base-edit/index.vue

@@ -2,7 +2,7 @@
     <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" scroll-with-animation>
         <template #top>
             <ut-navbar :title="(did && !+form?.baseInfo?.tempFlag ? '编辑基地' : '添加基地')" :fixed="false" border></ut-navbar>
-            <view class="bg-fff mb-20">
+            <view class="bg-fff mb-20 pd2-0-24">
                 <view class="pd-5"></view>
                 <ut-tabs v-model="activeTab" :tabs="tabs" mode="btw" @change="changeActiveTab"></ut-tabs>
             </view>

src/plant/contact-unit/unit-list/index.vue

@@ -2,9 +2,9 @@
     <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
         <template #top>
             <ut-navbar title="往来单位管理" :fixed="false" border :breadcrumb="false"></ut-navbar>
-            <view class="d-flex a-c pd-25">
+            <view class="d-flex a-c pd-24">
                 <view class="min-w-220 flex1">
-                    <ut-action-sheet v-model="form.cusType" :tabs="pt_cus_type" mode="custom" @change="onRefresh" title="选择往来单位性质">
+                    <ut-action-sheet v-model="form.cusType" :tabs="[{ label: '全部', value: '' }, ...pt_cus_type]" mode="custom" @change="onRefresh" title="选择往来单位性质">
                         <view class="d-flex search-select-item a-c">
                             <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_cus_type, form.cusType) || '全部' }}</view>
                             <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
@@ -15,11 +15,13 @@
                     <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                 </view>
             </view>
-             <ut-tabs v-model="form.cpyType" :tabs="pt_cpy_type" @change="onRefresh"></ut-tabs>
+            <view class="pd2-0-24">
+                <ut-tabs v-model="form.cpyType" mode="scroll-x-card" fontSize="26rpx" :tabs="pt_cpy_type" @change="onRefresh"></ut-tabs>
+            </view>
         </template>
 
         <template>
-            <view class="pl-25 pr-25">
+            <view class="pd-24">
                 <up-swipe-action>
                     <up-swipe-action-item v-for="item in list" :name="item?.id" :key="item?.id" :disabled="item?.storeCount" :options="optionsAction" @click="clickSwipe" class="mb-20 b-radius">
                         <view @click.stop="clickItem(item)" class="b-radius bg-#fff pd-24 p-rtv base-shadow">