修改

src/assets/styles/common.scss

@@ -129,7 +129,7 @@
 // 底部样式
 .base-bottom-wrap {
     position: relative;
-    box-shadow: 6rpx 0px 27rpx 0px rgba(#2a6d52, 0.3);
+    box-shadow: 6rpx 0px 27rpx 0px rgba(#1D9C3E, 0.3);
     background-color: #fff;
 }
 
@@ -243,7 +243,7 @@
         align-items: center;
         flex: 1;
         height: 100%;
-        color: #2A6D52;
+        color: #1D9C3E;
         background-color: #D4E2DC;
     }
     .btn2 {
@@ -253,7 +253,7 @@
         flex: 1;
         height: 100%;
         color: #FBE6A9;
-        background-color: #2A6D52;
+        background-color: #1D9C3E;
     }
 }
 .w-s-no{
@@ -269,7 +269,7 @@
 
 .btm-wrap-shadow {
     position: relative;
-    box-shadow: 6rpx 0px 27rpx 0px rgba(#2A6D52, 0.3);
+    box-shadow: 6rpx 0px 27rpx 0px rgba(#1D9C3E, 0.3);
 }
 .outview {
     width: 100%;

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

@@ -0,0 +1,167 @@
+<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'
+                    }">
+                        <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'
+                }">
+                    <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>
+    </template>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+    tabs: {
+        type: Array as () => Array<{ label: string; value: string; badge?: boolean; num?: number }>,
+        default: () => []
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    themeColor: {
+        type: String,
+        default: '#37A954'
+    },
+    fontSize: {
+        type: String,
+        default: '30rpx'
+    },
+    lineHeight: {
+        type: String,
+        default: '6rpx'
+    },
+    mode: {
+        type: String,
+        default: 'scroll-x' // btw
+    }
+})
+const SCROLL_OFFSET = ref(-uni.$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) => {
+    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)
+}
+
+// 主动滚动到选中tab
+const scrollToTab = (idx: number) => {
+    scrollIntoView.value = 'tab-' + idx
+}
+</script>
+
+<style lang="scss" scoped>
+.ut-tabs-scroll {
+    width: 100%;
+    white-space: nowrap;
+    background: #fff;
+}
+
+.ut-tabs-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 66rpx;
+}
+
+.ut-tab-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 78rpx;
+    font-weight: 500;
+    color: #666;
+    cursor: pointer;
+    padding: 0 24rpx;
+
+    .tab-label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            display: inline-block;
+        }
+
+        .tab-badge {
+            position: absolute;
+            top: -10rpx;
+            left: 90%;
+            background: #fa3534;
+            color: #fff;
+            font-size: 22rpx;
+            border-radius: 20rpx;
+            padding: 0 12rpx;
+            min-width: 32rpx;
+            text-align: center;
+            line-height: 32rpx;
+            height: 32rpx;
+            box-sizing: border-box;
+            z-index: 2;
+        }
+
+
+    }
+
+    .tab-underline {
+        position: absolute;
+        left: 24rpx;
+        right: 24rpx;
+        bottom: 0;
+        border-radius: 3rpx;
+        transition: width 0.2s;
+        z-index: 1;
+    }
+}
+</style>

src/main.ts

@@ -7,10 +7,43 @@ import { useDict } from '@/utils/dict';
 import uviewPlus from 'uview-plus';
 import { navigateBackOrHome, showToast } from '@/utils/common';
 import routerGuard from '@/uni_modules/hh-router-guard/src/index';
+const uviewProps = {
+    config: {
+        loadFontOnce: true,
+        color: {
+            primary: '#714B22',
+        },
+    },
+    props: {
+        form: {
+            labelStyle: {
+                color: '#666',
+                fontSize: '30rpx',
+            },
+        },
+        input: {
+            color: '#333',
+            fontSize: '30rpx',
+            placeholderStyle: 'color: #ccc; font-weight: 400;',
+        },
+        textarea: {
+            color: '#333',
+            fontSize: '30rpx',
+            placeholderStyle: 'color: #ccc; font-weight: 400;',
+        }
+    },
+};
 export function createApp() {
     const app = createSSRApp(App);
     app.use(Pinia.createPinia());
-    app.use(uviewPlus);
+    app.use(uviewPlus, () => {
+        return {
+            options: {
+                // 这里可以配置uView的全局属性
+                ...uviewProps,
+            },
+        };
+    });
     app.use(routerGuard, {
         // 白名单：无需登录即可访问的页面路径
         whiteList: [

src/pages/plant/index.vue

@@ -57,7 +57,7 @@
                             <ut-action-sheet v-model="form.type" :tabs="[{ label: '全部', value: '' }]" @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">{{ '全部' }}</view>
-                                    <up-icon size="20rpx" color="#2A6D52" name="arrow-down-fill" class="mr-10"></up-icon>
+                                    <up-icon size="20rpx" color="#1D9C3E" name="arrow-down-fill" class="mr-10"></up-icon>
                                 </view>
                             </ut-action-sheet>
                         </view>

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

@@ -1,3 +1,17 @@
 <template>
-    <view>页面内容</view>
-</template>
+    <view class="">
+        <up-navbar title="添加基地" :fixed="false"></up-navbar>
+        <view class="pd-5"></view>
+        <ut-tabs :tabs="tabs" mode="btw"></ut-tabs>
+    </view>
+</template>
+<script setup lang="ts">
+import { useUserStore } from "@/store";
+import { useClientRequest } from "@/utils/request";
+const tabs = reactive([
+    { label: '基本信息', value: 'base' },
+    { label: '地块信息', value: 'plot' },
+    { label: '选址依据及环境信息', value: 'environment' },
+])
+</script>
+<style lang="scss" scoped></style>