fix: 农场列表组件

src/components/gardenList.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="garden-list-page">
+        <div
+            v-for="item in gardenList"
+            :key="item.id"
+            class="garden-card"
+            :class="{ 'is-current': item.isCurrent }"
+        >
+            <div class="garden-card-header">
+                <div class="garden-main">
+                    <div class="garden-top-row">
+                        <span class="garden-name van-ellipsis">{{ item.name }}</span>
+                        <div class="warning-tag">
+                            <span>{{ item.warningText }}</span>
+                            <el-icon size="10"><ArrowRightBold /></el-icon>
+                        </div>
+                    </div>
+                    <div class="garden-address van-ellipsis">{{ item.address }}</div>
+                </div>
+                <div
+                    v-if="item.isCurrent"
+                    class="action-btn action-btn-current"
+                    type="button"
+                >
+                    当前农场
+                </div>
+                <div
+                    v-else
+                    class="action-btn action-btn-default"
+                    type="button"
+                >
+                    设为默认农场
+                </div>
+            </div>
+
+            <div class="card-divider"></div>
+
+            <div class="stat-list">
+                <div
+                    v-for="stat in item.stats"
+                    :key="stat.label"
+                    class="stat-item"
+                    :class="[`is-${stat.type}`]"
+                >
+                    <div class="stat-title">{{ stat.title }}</div>
+                    <div class="stat-label">{{ stat.label }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 新增农场 -->
+    <div class="garden-btn fixed-btn">
+        <span class="add-garden-btn-text">新增农场</span>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const gardenList = ref([
+    {
+        id: 1,
+        name: "从化荔博园合作社",
+        warningText: "干旱预警",
+        address: "广东省广州市从化区某某街道",
+        isCurrent: true,
+        stats: [
+            { title: "农事11", label: "某某风险", type: "danger" },
+            { title: "农事22", label: "标准农事", type: "danger" },
+            { title: "农事22", label: "标准防治", type: "safe" }
+        ]
+    },
+    {
+        id: 2,
+        name: "从化荔博园合作社",
+        warningText: "干旱预警",
+        address: "广东省广州市从化区某某街道",
+        isCurrent: false,
+        stats: [
+            { title: "农事11", label: "某某风险", type: "danger" },
+            { title: "农事22", label: "标准农事", type: "danger" },
+            { title: "农事22", label: "标准防治", type: "safe" }
+        ]
+    },
+    {
+        id: 3,
+        name: "从化荔博园合作社",
+        warningText: "干旱预警",
+        address: "广东省广州市从化区某某街道",
+        isCurrent: false,
+        stats: [
+            { title: "农事11", label: "某某风险", type: "danger" },
+            { title: "农事22", label: "标准农事", type: "danger" },
+            { title: "农事22", label: "标准防治", type: "safe" }
+        ]
+    }
+]);
+
+// 农场列表
+
+</script>
+
+<style lang="scss" scoped>
+.garden-list-page {
+    height: 100vh;
+    overflow: auto;
+    padding: 115px 10px 50px 10px;
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #2199F8 9.42%, #F5F5F5 31%, #F5F5F5 72.99%, #F5F5F5 100%);
+}
+
+.garden-card {
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    background: #fff;
+    box-sizing: border-box;
+}
+
+.garden-card.is-current {
+    border-color: #2199f8;
+    .garden-name {
+        color: #2199f8;
+    }
+}
+
+.garden-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+}
+
+.garden-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.garden-top-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.garden-name {
+    max-width: 220px;
+    font-size: 14px;
+    color: #1D2129;
+}
+
+.warning-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 4px;
+    background: rgba(255, 149, 61, 0.2);
+    font-size: 12px;
+    color: #FF953D;
+    white-space: nowrap;
+}
+
+.garden-address {
+    margin-top: 2px;
+    font-size: 12px;
+    color: rgba(32, 32, 32, 0.4);
+}
+
+.action-btn {
+    flex-shrink: 0;
+    height: 22px;
+    border: none;
+    font-size: 12px;
+    line-height: 22px;
+}
+
+.action-btn-current {
+    color: #ffffff;
+    padding: 0 8px;
+    border-radius: 2px;
+    background: #2199f8;
+}
+
+.action-btn-default {
+    color: #2199f8;
+}
+
+.card-divider {
+    height: 1px;
+    margin: 10px 0 20px;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.stat-list {
+    display: flex;
+    gap: 12px;
+}
+
+.stat-item {
+    flex: 1;
+    height: 50px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    color: #ffffff;
+}
+
+.stat-item.is-danger {
+    background: #fb6669;
+}
+
+.stat-item.is-safe {
+    background: #4cbc32;
+}
+
+.stat-title {
+    font-size: 16px;
+    line-height: 22px;
+}
+
+.stat-label {
+    font-size: 10px;
+    line-height: 14px;
+}
+
+.fixed-btn {
+    position: fixed;
+    bottom: 80px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px 32px;
+    box-sizing: border-box;
+    background: #fff;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 20px;
+    background: linear-gradient(180deg, #8ACBFF 0%, #2199F8 100%);
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    margin: 0 auto;
+    width: fit-content;
+}
+</style>

src/components/weatherInfo copy.vue

@@ -0,0 +1,548 @@
+<template>
+    <div class="weather-info is-garden" :class="{ expanded: isExpanded}">
+        <div class="header flex-center">
+            <div class="header-left">
+                <div class="address-select flex-center" v-if="hasFarm">
+                    <el-dropdown class="select-garden" trigger="click" popper-class="select-garden-popper">
+                        <div class="el-dropdown-link flex-center">
+                            <span class="ellipsis-l1">{{ farmName }}</span>
+                            <div class="default-text" v-show="isDefaultFarm">默认</div>
+                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </div>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item
+                                    @click="handleCommand(item)"
+                                    v-for="item in farmList"
+                                    :key="item.id"
+                                    :class="{ 'selected-active-garden': farmId === item.id }"
+                                >
+                                    <span>{{ item.name }}</span>
+                                    <span v-if="item.defaultOption" class="dropdown-default-text">默认</span>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <div class="btn-wrap">
+                        <div class="add-garden" @click="handleFarmInfo">农场信息</div>
+                        <div class="add-garden gray-btn" @click="handleAddFarm">
+                            <el-icon><Plus /></el-icon>
+                            <span>新建农场</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="address-select flex-center farm-name" v-else>
+                    示范农场
+                </div>
+                <div class="temperature flex-center">
+                    <div class="temperature-number">{{ currentWeather.temp || '--' }}</div>
+                    <div class="temperature-text">
+                        <span>{{ locationName || '--' }}</span>
+                        <div class="temperature-text-time">
+                            <span>{{ currentWeather.text }}-</span>
+                            <span>{{ currentDateText }}</span>
+                            <span v-show="!isExpanded" class="temperature-text-more" @click="toggleExpand">
+                                展开更多天气
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="weather-icon" v-if="currentWeather.iconDay">
+                <i :class="'qi-'+currentWeather.iconDay + '-fill'"></i>
+            </div>
+            <!-- <div class="weather-icon" v-else>
+                <img :src="`https://birdseye-img.sysuimars.com/weather/${currentWeather.iconDay}.svg`" alt="" />
+            </div> -->
+        </div>
+        <div class="weather-chart-container">
+            <div class="weather-chart-title">
+                <span>未来七天天气</span>
+                <div class="weather-chart-title-more" @click="toggleExpand">收起</div>
+            </div>
+            <weather-chart class="weather-chart" :weather-data="weatherData"></weather-chart>
+        </div>
+        <!-- 农场信息 -->
+        <farm-info-popup
+            ref="myFarmInfoRef"
+            :showEditBtn="false"
+            :showBtn="true"
+            :farmId="farmId"
+            @success="onFarmBasicInfoSaved"
+        ></farm-info-popup>
+    </div>
+
+</template>
+
+<script setup>
+import { ref, onActivated, computed, watch, onMounted } from "vue";
+import weatherChart from "./weatherChart.vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import farmInfoPopup from "@/views/old_mini/home/components/farmInfoPopup.vue";
+import { convertPointToArray } from "@/utils/index";
+const store = useStore();
+
+const props = defineProps({
+    gardenId: {
+        type: [Number, String],
+        default: null
+    },
+    from: {
+        type: String,
+        default: null
+    }
+});
+
+// 定义emit事件
+const emit = defineEmits(['weatherExpanded','changeGarden']);
+const router = useRouter();
+const handleCommand = ({id, name}) => {
+    farmName.value = name;
+    farmId.value = id;
+    // 更新默认农场标识
+    const selectedFarm = farmList.value.find(farm => farm.id === id);
+    isDefaultFarm.value = selectedFarm ? selectedFarm.defaultOption || false : false;
+    // 保存用户选择的农场到 localStorage
+    localStorage.setItem('selectedFarmId', id);
+    localStorage.setItem('selectedFarmName', name);
+    localStorage.setItem('selectedFarmPoint', selectedFarm.wkt);
+    getLocationName();
+    getWeatherData();
+    emit('changeGarden',{id, name});
+};
+
+const isExpanded = ref(false);
+const toggleExpand = () => {
+    isExpanded.value = !isExpanded.value;
+    emit('weatherExpanded',isExpanded.value);
+};
+
+const farmId = ref(null);
+const farmName = ref("");
+const farmList = ref([]);
+const hasFarm = ref(true)
+const isDefaultFarm = ref(false); // 添加默认农场标识
+
+// 根据传入的gardenId设置农场（先刷新列表再设置）
+async function setFarmByGardenId(gardenIdValue) {
+    if (!gardenIdValue) {
+        return false;
+    }
+
+    // 先刷新农场列表，确保数据是最新的
+    return new Promise((resolve) => {
+        VE_API.farm.listByUserId().then(({data}) => {
+            // const fullData = data.filter(item => item.userType === 2);
+            const fullData = data;
+            farmList.value = fullData || [];
+            if (fullData && fullData.length > 0) {
+                hasFarm.value = true;
+                const targetFarm = fullData.find(farm => farm.id == gardenIdValue);
+                if (targetFarm) {
+                    farmName.value = targetFarm.name;
+                    farmId.value = Number(gardenIdValue);
+                    isDefaultFarm.value = targetFarm.defaultOption || false;
+                    // 保存到 localStorage
+                    localStorage.setItem('selectedFarmId', farmId.value);
+                    localStorage.setItem('selectedFarmName', farmName.value);
+                    localStorage.setItem('selectedFarmPoint', targetFarm.wkt);
+
+                    getLocationName();
+                    getWeatherData();
+                    emit('changeGarden', { id: farmId.value, name: farmName.value });
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            } else {
+                farmList.value = [];
+                hasFarm.value = false;
+                getLocationName();
+                getWeatherData();
+                resolve(false);
+            }
+        }).catch(() => {
+            resolve(false);
+        });
+    });
+}
+
+// 获取农场列表
+function getFarmList() {
+    // 如果传入了 gardenId，优先使用 setFarmByGardenId（它会刷新列表并设置）
+    if (props.gardenId) {
+        setFarmByGardenId(props.gardenId).then((setSuccess) => {
+            // 如果设置失败，使用已获取的列表数据执行默认逻辑（避免重复请求）
+            if (!setSuccess && farmList.value && farmList.value.length > 0) {
+                selectFarmFromList(farmList.value);
+            } else if (!setSuccess) {
+                // 如果列表为空，再次获取列表
+                getFarmListWithoutGardenId();
+            }
+        });
+        return;
+    }
+
+    // 如果没有传入 gardenId，执行正常逻辑
+    getFarmListWithoutGardenId();
+}
+
+// 从列表中选择农场（使用已有列表数据）
+function selectFarmFromList(data) {
+    // 使用 localStorage 中保存的农场选择
+    const savedFarmId = localStorage.getItem('selectedFarmId');
+    const savedFarmName = localStorage.getItem('selectedFarmName');
+    if (savedFarmId && savedFarmName) {
+        // 检查保存的农场是否还在当前列表中（名称以接口列表为准，避免改名后仍显示 localStorage 旧值）
+        const savedFarm = data.find(farm => farm.id == savedFarmId);
+        if (savedFarm) {
+            farmName.value = savedFarm.name;
+            farmId.value = Number(savedFarmId);
+            isDefaultFarm.value = savedFarm.defaultOption || false;
+            localStorage.setItem('selectedFarmPoint', savedFarm.wkt);
+            localStorage.setItem('selectedFarmName', savedFarm.name);
+        } else {
+            // 如果保存的农场不在列表中，按优先级选择
+            selectDefaultFarm(data);
+        }
+    } else {
+        // 如果没有保存的选择，按优先级选择
+        selectDefaultFarm(data);
+    }
+    getLocationName();
+    getWeatherData();
+    emit('changeGarden',{id: farmId.value, name: farmName.value});
+}
+
+// 获取农场列表（不处理传入的gardenId）
+function getFarmListWithoutGardenId() {
+    VE_API.farm.listByUserId().then(({data}) => {
+        // const fullData = data.filter(item => item.userType === 2);
+        const fullData = data;
+        farmList.value = fullData || [];
+        if (fullData && fullData.length > 0) {
+            hasFarm.value = true;
+            selectFarmFromList(fullData);
+        } else {
+            farmList.value = [];
+            hasFarm.value = false;
+            getLocationName();
+            getWeatherData();
+        }
+    })
+}
+
+// 监听父组件传入的gardenId变化
+watch(() => props.gardenId, (newGardenId) => {
+    if (newGardenId) {
+        // 直接调用 setFarmByGardenId，它会刷新列表并设置
+        setFarmByGardenId(newGardenId);
+    }
+}, { immediate: false });
+
+// 选择默认农场的逻辑
+function selectDefaultFarm(data) {
+    // 首先查找 defaultOption 为 true 的农场
+    const defaultFarm = data.find(farm => farm.defaultOption === true);
+
+    if (defaultFarm) {
+        // 如果有默认农场，选择它
+        farmName.value = defaultFarm.name;
+        farmId.value = defaultFarm.id;
+        isDefaultFarm.value = true;
+        localStorage.setItem('selectedFarmPoint', defaultFarm.wkt);
+    } else {
+        // 如果没有默认农场，选择第一个
+        farmName.value = data[0].name;
+        farmId.value = data[0].id;
+        isDefaultFarm.value = data[0].defaultOption || false;
+        localStorage.setItem('selectedFarmPoint', data[0].wkt);
+    }
+
+    // 保存到 localStorage
+    localStorage.setItem('selectedFarmId', farmId.value);
+    localStorage.setItem('selectedFarmName', farmName.value);
+    localStorage.setItem('selectedFarmPoint', data[0].wkt);
+    getLocationName();
+    getWeatherData();
+}
+
+onActivated(() => {
+    getFarmList();
+});
+
+// 暴露刷新方法供父组件调用
+defineExpose({
+    refreshFarmList: getFarmList,
+    toggleExpand
+});
+
+const locationName = ref("");
+const weatherData = ref(null);
+const currentWeather = ref({ temp: "--", text: "--", iconDay: "" });
+const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
+function getLocationName() {
+    const locationPoint = localStorage.getItem('selectedFarmPoint') || store.state.home.miniUserLocationPoint;
+    const farmLocation = convertPointToArray(locationPoint);
+    let formattedLocation = `${farmLocation[1]},${farmLocation[0]}`;
+    const params = {
+            key: MAP_KEY,
+            location: formattedLocation,
+        };
+        VE_API.old_mini_map.location(params).then(({ result }) => {
+            // locationVal.value = result.formatted_addresses.recommend;
+            locationName.value = result?.address_component
+                ? result.address_component.city + result.address_component.district
+                : result?.address + "";
+        });
+}
+
+const myFarmInfoRef = ref(null);
+
+/** 弹窗内修改农场名称等成功后，同步头部展示与下拉列表、本地缓存 */
+function onFarmBasicInfoSaved(payload) {
+    if (!payload?.id || payload.name == null) {
+        return;
+    }
+    const savedId = Number(payload.id);
+    const idx = farmList.value.findIndex((f) => f.id == savedId);
+    if (idx !== -1) {
+        farmList.value[idx] = { ...farmList.value[idx], name: payload.name };
+    }
+    if (farmId.value == savedId) {
+        farmName.value = payload.name;
+        localStorage.setItem('selectedFarmName', payload.name);
+        emit('changeGarden', { id: farmId.value, name: farmName.value });
+    }
+}
+
+const handleFarmInfo = () => {
+    // myFarmInfoRef.value.handleShow();
+    router.push(`/farm_info?subjectId=${farmId.value}`);
+}
+const handleAddFarm = () => {
+    router.push(`/create_farm?from=${props.from}&isReload=true`);
+}
+
+// 获取天气数据
+function getWeatherData() {
+    const point = localStorage.getItem('selectedFarmPoint') || store.state.home.miniUserLocationPoint;
+    if (!point) {
+        return;
+    }
+    VE_API.old_mini_map.get7d({ point }).then(({ data }) => {
+        if (data && data.daily && data.daily.length > 0) {
+            weatherData.value = data;
+            // 设置当前天气（第一天的数据）
+            const today = data.daily[0];
+            currentWeather.value = {
+                temp: today.tempMax || today.tempMin || 26,
+                text: today.textDay || "晴天",
+                iconDay: today.iconDay
+            };
+        }
+    }).catch(() => {
+        // 获取天气数据失败，使用默认值
+    });
+}
+
+// 获取当前日期和星期
+const currentDateText = computed(() => {
+    const now = new Date();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    return `${month}/${day}`;
+});
+</script>
+
+<style lang="scss" scoped>
+.weather-info {
+    width: 100%;
+    // height: 58px;
+    height: 70px;
+    border-radius: 14px;
+    background-color: #ffffff;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    transition: height 0.3s ease-in-out;
+    overflow: hidden;
+
+    &.is-garden {
+        height: 85px;
+        box-shadow: 0px 1px 5.5px 0px #00000005;
+        border-radius: 8px;
+        padding: 10px 12px;
+    }
+
+    &.expanded {
+        height: 312px;
+        background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
+    }
+
+    &.bg-white{
+        border-radius: 14px;
+        background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
+    }
+
+    .flex-center {
+        display: flex;
+        align-items: center;
+    }
+    .header {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        .header-left {
+            .address-select {
+                .select-garden {
+                    width: fit-content;
+                    max-width: 170px;
+                    margin-right: 8px;
+                    margin-bottom: 10px;
+                    .el-dropdown-link {
+                        font-size: 15px;
+                        font-weight: 500;
+                        color: #000000;
+                        span {
+                            width: fit-content;
+                            max-width: 95%;
+                            margin-right: 4px;
+                        }
+
+                        .default-text {
+                            font-size: 12px;
+                            color: #fff;
+                            padding: 2px 4px;
+                            width: 44px;
+                            text-align: center;
+                            box-sizing: border-box;
+                            font-weight: 400;
+                            background-color: #2199f8;
+                            border-radius: 25px;
+                        }
+                    }
+                }
+                .btn-wrap{
+                    position: absolute;
+                    right: 10px;
+                    top: 8px;
+                    display: flex;
+                    gap: 8px;
+                }
+                .add-garden {
+                    font-size: 12px;
+                    color: #2199f8;
+                    padding: 3px 10px;
+                    border: 1px solid rgba(33, 153, 248, 0.5);
+                    border-radius: 25px;
+                    display: flex;
+                    align-items: center;
+                }
+                .gray-btn {
+                    color: #919191;
+                    border: 1px solid rgba(145, 145, 145, 0.5);
+                }
+            }
+            .farm-name {
+                font-size: 16px;
+                color: #1D2129;
+            }
+            .temperature {
+                .temperature-number {
+                    font-size: 40px;
+                    position: relative;
+                    margin-right: 14px;
+                    &::after {
+                        content: "°";
+                        font-size: 18px;
+                        position: absolute;
+                        right: -6px;
+                        top: 2px;
+                    }
+                }
+                .temperature-text {
+                    font-weight: 500;
+                    .temperature-text-time {
+                        font-size: 12px;
+                        font-weight: 400;
+                    }
+                    .temperature-text-more {
+                        font-size: 12px;
+                        color: #2199f8;
+                        margin-left: 10px;
+                        font-weight: 500;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .header-right {
+            width: 84px;
+            height: 73px;
+        }
+        .weather-icon {
+            i {
+                font-size: 40px;
+                color: #a7cffb;
+            }
+        }
+    }
+    .weather-chart-container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        margin-top: 8px;
+        .weather-chart-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            font-weight: 500;
+            .weather-chart-title-more {
+                color: #828282;
+                cursor: pointer;
+                padding: 3px 10px;
+                border-radius: 25px;
+                font-weight: 400;
+                border: 1px solid rgba(130, 130, 130, 0.5);
+            }
+        }
+        .weather-chart {
+            margin-top: 5px;
+            width: 100%;
+            height: 180px;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.select-garden-popper {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    &.el-dropdown__popper {
+        .el-dropdown__list {
+            max-width: 250px;
+        }
+        .el-dropdown-menu__item{
+            background-color: transparent !important;
+            color: #606266 !important;
+        }
+        .selected-active-garden {
+            color: #2199f8 !important;
+            background-color: rgba(33, 153, 248, 0.1) !important;
+            font-weight: 500;
+        }
+    }
+    .dropdown-default-text {
+        font-size: 11px;
+        color: #2199f8;
+        margin-left: 8px;
+        padding: 0 5px;
+        background-color: rgba(33, 153, 248, 0.1);
+        border-radius: 10px;
+        font-weight: 400;
+    }
+}
+</style>

src/components/weatherInfo.vue

@@ -1,33 +1,27 @@
 <template>
-    <div class="weather-info is-garden" :class="{ expanded: isExpanded}">
+    <div class="weather-info is-garden"
+        :class="{ expanded: isExpanded, 'no-farm': !hasFarm, 'farm-list': activeGarden === 'list' }">
         <div class="header flex-center">
             <div class="header-left">
                 <div class="address-select flex-center" v-if="hasFarm">
-                    <el-dropdown class="select-garden" trigger="click" popper-class="select-garden-popper">
-                        <div class="el-dropdown-link flex-center">
-                            <span class="ellipsis-l1">{{ farmName }}</span>
-                            <div class="default-text" v-show="isDefaultFarm">默认</div>
-                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                    <div class="garden-tabs">
+                        <div class="garden-item left-item" @click="handleGardenClick('current')"
+                            :class="{ 'active': activeGarden === 'current' }">
+                            <img class="current-icon"
+                                :src="activeGarden === 'current' ? require('@/assets/img/common/farm-active.png') : require('@/assets/img/common/farm.png')"
+                                alt="">
+                            <span class="current-name van-ellipsis">{{ farmName }}</span>
                         </div>
-                        <template #dropdown>
-                            <el-dropdown-menu>
-                                <el-dropdown-item
-                                    @click="handleCommand(item)"
-                                    v-for="item in farmList"
-                                    :key="item.id"
-                                    :class="{ 'selected-active-garden': farmId === item.id }"
-                                >
-                                    <span>{{ item.name }}</span>
-                                    <span v-if="item.defaultOption" class="dropdown-default-text">默认</span>
-                                </el-dropdown-item>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
-                    <div class="btn-wrap">
-                        <div class="add-garden" @click="handleFarmInfo">农场信息</div>
-                        <div class="add-garden gray-btn" @click="handleAddFarm">
-                            <el-icon><Plus /></el-icon>
-                            <span>新建农场</span>
+                        <img class="title-block" v-show="activeGarden === 'current'"
+                            src="@/assets/img/common/title-block.png" alt="">
+                        <img class="title-block" v-show="activeGarden !== 'current'"
+                            src="@/assets/img/common/title-block-active.png" alt="">
+                        <div class="garden-item right-item" @click="handleGardenClick('list')"
+                            :class="{ 'active': activeGarden === 'list' }">
+                            <img class="current-icon"
+                                :src="activeGarden === 'list' ? require('@/assets/img/common/menu-active.png') : require('@/assets/img/common/menu.png')"
+                                alt="">
+                            <span class="current-name">农场列表</span>
                         </div>
                     </div>
                 </div>
@@ -35,42 +29,70 @@
                 <div class="address-select flex-center farm-name" v-else>
                     示范农场
                 </div>
-                <div class="temperature flex-center">
-                    <div class="temperature-number">{{ currentWeather.temp || '--' }}</div>
-                    <div class="temperature-text">
-                        <span>{{ locationName || '--' }}</span>
-                        <div class="temperature-text-time">
-                            <span>{{ currentWeather.text }}-</span>
-                            <span>{{ currentDateText }}</span>
-                            <span v-show="!isExpanded" class="temperature-text-more" @click="toggleExpand">
-                                展开更多天气
-                            </span>
+                <div class="farm-l" v-show="activeGarden === 'current'">
+                    <div class="temperature flex-center">
+
+                        <div class="weather-icon" v-if="currentWeather.iconDay">
+                            <i :class="'qi-' + currentWeather.iconDay + '-fill'"></i>
+                        </div>
+                        <div class="temperature-number">{{ currentWeather.temp || '--' }}</div>
+                        <div class="temperature-text">
+                            <span>{{ currentWeather.text }}</span>
+                            <div class="temperature-text-time">
+                                <span>{{ currentDateText }}</span>
+                                <span class="temperature-text-date">{{ currentWeekText }}</span>
+                                <span v-show="!isExpanded" class="temperature-text-more" @click="toggleExpand">
+                                    展开更多
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="button-wrap" v-if="hasFarm">
+                        <div class="button-item">
+                            <img class="button-pre" src="@/assets/img/common/info.png" alt="">
+                            农场信息
+                        </div>
+                        <div class="button-item">
+                            <img class="button-pre" src="@/assets/img/common/report.png" alt="">
+                            历史风险报告
+                        </div>
+                        <div class="button-item">
+                            <img class="button-pre" src="@/assets/img/common/idea.png" alt="">
+                            土壤改良方案
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="weather-icon" v-if="currentWeather.iconDay">
-                <i :class="'qi-'+currentWeather.iconDay + '-fill'"></i>
-            </div>
             <!-- <div class="weather-icon" v-else>
                 <img :src="`https://birdseye-img.sysuimars.com/weather/${currentWeather.iconDay}.svg`" alt="" />
             </div> -->
         </div>
-        <div class="weather-chart-container">
+        <div class="weather-chart-container" v-show="activeGarden === 'current'">
             <div class="weather-chart-title">
                 <span>未来七天天气</span>
                 <div class="weather-chart-title-more" @click="toggleExpand">收起</div>
             </div>
             <weather-chart class="weather-chart" :weather-data="weatherData"></weather-chart>
         </div>
+        <!-- 农场筛选 -->
+        <div class="farm-filter" v-show="activeGarden === 'list'">
+            <div class="filter-l">
+                <el-input v-model="searchFarm" style="width: 96px" placeholder="搜索农场" :prefix-icon="Search" />
+            </div>
+            <div class="filter-r">
+                <el-select v-model="regionVal" placeholder="选择地区" style="width: 92px">
+                    <el-option v-for="item in regionOptions" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+                <el-select v-model="typeVal" placeholder="选择品类" style="width: 92px">
+                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+        </div>
         <!-- 农场信息 -->
-        <farm-info-popup
-            ref="myFarmInfoRef"
-            :showEditBtn="false"
-            :showBtn="true"
-            :farmId="farmId"
-            @success="onFarmBasicInfoSaved"
-        ></farm-info-popup>
+        <farm-info-popup ref="myFarmInfoRef" :showEditBtn="false" :showBtn="true" :farmId="farmId"
+            @success="onFarmBasicInfoSaved"></farm-info-popup>
     </div>
 
 </template>
@@ -80,6 +102,7 @@ import { ref, onActivated, computed, watch, onMounted } from "vue";
 import weatherChart from "./weatherChart.vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { Search } from '@element-plus/icons-vue'
 import farmInfoPopup from "@/views/old_mini/home/components/farmInfoPopup.vue";
 import { convertPointToArray } from "@/utils/index";
 const store = useStore();
@@ -96,9 +119,9 @@ const props = defineProps({
 });
 
 // 定义emit事件
-const emit = defineEmits(['weatherExpanded','changeGarden']);
+const emit = defineEmits(['weatherExpanded', 'changeGarden', 'changeGardenTab']);
 const router = useRouter();
-const handleCommand = ({id, name}) => {
+const handleCommand = ({ id, name }) => {
     farmName.value = name;
     farmId.value = id;
     // 更新默认农场标识
@@ -110,20 +133,35 @@ const handleCommand = ({id, name}) => {
     localStorage.setItem('selectedFarmPoint', selectedFarm.wkt);
     getLocationName();
     getWeatherData();
-    emit('changeGarden',{id, name});
+    emit('changeGarden', { id, name });
 };
 
 const isExpanded = ref(false);
 const toggleExpand = () => {
     isExpanded.value = !isExpanded.value;
-    emit('weatherExpanded',isExpanded.value);
+    emit('weatherExpanded', isExpanded.value);
 };
 
 const farmId = ref(null);
 const farmName = ref("");
 const farmList = ref([]);
-const hasFarm = ref(true)
+const hasFarm = ref(false)
+const activeGarden = ref('current');
 const isDefaultFarm = ref(false); // 添加默认农场标识
+const regionVal = ref('');
+const typeVal = ref('');
+const searchFarm = ref('');
+const regionOptions = ref([{
+    label: '地区1',
+    value: '1'
+}, {
+    label: '地区2',
+    value: '2'
+}]);
+const typeOptions = ref([{
+    label: '品类1',
+    value: '1'
+}]);
 
 // 根据传入的gardenId设置农场（先刷新列表再设置）
 async function setFarmByGardenId(gardenIdValue) {
@@ -133,7 +171,7 @@ async function setFarmByGardenId(gardenIdValue) {
 
     // 先刷新农场列表，确保数据是最新的
     return new Promise((resolve) => {
-        VE_API.farm.listByUserId().then(({data}) => {
+        VE_API.farm.listByUserId().then(({ data }) => {
             // const fullData = data.filter(item => item.userType === 2);
             const fullData = data;
             farmList.value = fullData || [];
@@ -213,12 +251,12 @@ function selectFarmFromList(data) {
     }
     getLocationName();
     getWeatherData();
-    emit('changeGarden',{id: farmId.value, name: farmName.value});
+    emit('changeGarden', { id: farmId.value, name: farmName.value });
 }
 
 // 获取农场列表（不处理传入的gardenId）
 function getFarmListWithoutGardenId() {
-    VE_API.farm.listByUserId().then(({data}) => {
+    VE_API.farm.listByUserId().then(({ data }) => {
         // const fullData = data.filter(item => item.userType === 2);
         const fullData = data;
         farmList.value = fullData || [];
@@ -288,15 +326,15 @@ function getLocationName() {
     const farmLocation = convertPointToArray(locationPoint);
     let formattedLocation = `${farmLocation[1]},${farmLocation[0]}`;
     const params = {
-            key: MAP_KEY,
-            location: formattedLocation,
-        };
-        VE_API.old_mini_map.location(params).then(({ result }) => {
-            // locationVal.value = result.formatted_addresses.recommend;
-            locationName.value = result?.address_component
-                ? result.address_component.city + result.address_component.district
-                : result?.address + "";
-        });
+        key: MAP_KEY,
+        location: formattedLocation,
+    };
+    VE_API.old_mini_map.location(params).then(({ result }) => {
+        // locationVal.value = result.formatted_addresses.recommend;
+        locationName.value = result?.address_component
+            ? result.address_component.city + result.address_component.district
+            : result?.address + "";
+    });
 }
 
 const myFarmInfoRef = ref(null);
@@ -318,6 +356,11 @@ function onFarmBasicInfoSaved(payload) {
     }
 }
 
+const handleGardenClick = (type) => {
+    activeGarden.value = type;
+    emit("changeGardenTab", type);
+};
+
 const handleFarmInfo = () => {
     // myFarmInfoRef.value.handleShow();
     router.push(`/farm_info?subjectId=${farmId.value}`);
@@ -340,7 +383,8 @@ function getWeatherData() {
             currentWeather.value = {
                 temp: today.tempMax || today.tempMin || 26,
                 text: today.textDay || "晴天",
-                iconDay: today.iconDay
+                iconDay: today.iconDay,
+                fxDate: today.fxDate
             };
         }
     }).catch(() => {
@@ -355,56 +399,88 @@ const currentDateText = computed(() => {
     const day = String(now.getDate()).padStart(2, '0');
     return `${month}/${day}`;
 });
+
+const currentWeekText = computed(() => {
+    if (!currentWeather.value?.fxDate) {
+        return "";
+    }
+
+    // 兼容 "YYYY-MM-DD" 格式，避免部分环境下直接 new Date() 解析异常
+    const date = new Date(currentWeather.value.fxDate.replace(/-/g, "/"));
+    if (Number.isNaN(date.getTime())) {
+        return "";
+    }
+
+    const weekMap = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+    return weekMap[date.getDay()];
+});
 </script>
 
 <style lang="scss" scoped>
 .weather-info {
     width: 100%;
     // height: 58px;
-    height: 70px;
+    height: 80px;
     border-radius: 14px;
-    background-color: #ffffff;
-    padding: 10px 12px;
+    border: 0.5px solid #ffffff;
+    background: linear-gradient(180deg, #89CBFF 0%, #2199F8 100%);
     box-sizing: border-box;
     transition: height 0.3s ease-in-out;
     overflow: hidden;
 
     &.is-garden {
-        height: 85px;
-        box-shadow: 0px 1px 5.5px 0px #00000005;
+        height: 130px;
         border-radius: 8px;
-        padding: 10px 12px;
+        box-shadow: 0px -2px 4px 0px #0000000D;
+        height: 130px;
+    }
+
+    &.no-farm {
+        height: 80px;
+
+        &.expanded {
+            height: 312px;
+        }
     }
 
     &.expanded {
-        height: 312px;
-        background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
+        height: 362px;
     }
 
-    &.bg-white{
+    &.bg-white {
         border-radius: 14px;
         background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
     }
 
+    &.farm-list {
+        height: 94px;
+    }
+
     .flex-center {
         display: flex;
         align-items: center;
     }
+
     .header {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
+
         .header-left {
+            width: 100%;
+
             .address-select {
                 .select-garden {
                     width: fit-content;
                     max-width: 170px;
                     margin-right: 8px;
                     margin-bottom: 10px;
+
                     .el-dropdown-link {
                         font-size: 15px;
                         font-weight: 500;
                         color: #000000;
+
                         span {
                             width: fit-content;
                             max-width: 95%;
@@ -424,13 +500,15 @@ const currentDateText = computed(() => {
                         }
                     }
                 }
-                .btn-wrap{
+
+                .btn-wrap {
                     position: absolute;
                     right: 10px;
                     top: 8px;
                     display: flex;
                     gap: 8px;
                 }
+
                 .add-garden {
                     font-size: 12px;
                     color: #2199f8;
@@ -440,34 +518,47 @@ const currentDateText = computed(() => {
                     display: flex;
                     align-items: center;
                 }
+
                 .gray-btn {
                     color: #919191;
                     border: 1px solid rgba(145, 145, 145, 0.5);
                 }
             }
+
             .farm-name {
                 font-size: 16px;
                 color: #1D2129;
+                background: #fff;
+                padding: 2px 0 4px 12px;
             }
+
             .temperature {
+                padding-left: 10px;
+                width: 100%;
+                box-sizing: border-box;
+                position: relative;
+                background: #fff;
+
                 .temperature-number {
-                    font-size: 40px;
+                    font-size: 38px;
                     position: relative;
-                    margin-right: 14px;
+                    margin: 0 8px;
+
                     &::after {
                         content: "°";
-                        font-size: 18px;
+                        font-size: 10px;
                         position: absolute;
                         right: -6px;
                         top: 2px;
                     }
                 }
+
                 .temperature-text {
-                    font-weight: 500;
                     .temperature-text-time {
                         font-size: 12px;
                         font-weight: 400;
                     }
+
                     .temperature-text-more {
                         font-size: 12px;
                         color: #2199f8;
@@ -475,13 +566,20 @@ const currentDateText = computed(() => {
                         font-weight: 500;
                         cursor: pointer;
                     }
+
+                    .temperature-text-date {
+                        color: #1D2129;
+                        margin-left: 4px;
+                    }
                 }
             }
         }
+
         .header-right {
             width: 84px;
             height: 73px;
         }
+
         .weather-icon {
             i {
                 font-size: 40px;
@@ -489,17 +587,133 @@ const currentDateText = computed(() => {
             }
         }
     }
+
+    .garden-tabs {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .garden-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            height: 40px;
+            width: calc(50% - 17px);
+
+            // width:100px;
+            // background: linear-gradient(180deg, #89CBFF 0%, #2199F8 100%);
+            &.left-item {
+                padding-left: 10px;
+            }
+
+            &.right-item {
+                padding-right: 10px;
+            }
+
+            &.active {
+                background: #fff;
+
+                // background: linear-gradient(360deg, #FFFFFF 30.18%, #FFFFFF 82.87%, #D3ECFF 106.69%);
+                .current-name {
+                    color: #2199F8;
+                }
+            }
+
+            .current-name {
+                font-size: 18px;
+                color: #fff;
+                font-family: "PangMenZhengDao";
+            }
+
+            .current-icon {
+                width: 16px;
+            }
+        }
+
+        .title-block {
+            width: 34px;
+            height: 40px;
+        }
+    }
+
+    .button-wrap {
+        background: #fff;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        color: #2199F8;
+        padding: 8px 10px;
+
+        .button-item {
+            border: 0.5px solid rgba(33, 153, 248, 0.5);
+            display: flex;
+            border-radius: 20px;
+            align-items: center;
+            height: 28px;
+            line-height: 28px;
+            box-sizing: border-box;
+            gap: 4px;
+            font-size: 12px;
+            flex: auto;
+            justify-content: center;
+        }
+
+        .button-pre {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    .farm-filter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 7px 8px 7px;
+        box-sizing: border-box;
+        background: #ffffff;
+
+        .filter-l {
+            ::v-deep {
+                .el-input__wrapper {
+                    border-radius: 20px;
+                }
+
+                .el-input .el-input__icon {
+                    margin-right: 3px;
+                }
+            }
+        }
+
+        .filter-r {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            ::v-deep {
+                .el-select__wrapper {
+                    border-radius: 20px;
+                    padding: 4px 6px 4px 10px;
+                }
+            }
+        }
+    }
+
     .weather-chart-container {
         width: 100%;
         height: 100%;
         overflow: hidden;
-        margin-top: 8px;
+        padding: 8px 10px 0 10px;
+        box-sizing: border-box;
+        background: #ffffff;
+
         .weather-chart-title {
             display: flex;
             justify-content: space-between;
             align-items: center;
             font-size: 12px;
             font-weight: 500;
+
             .weather-chart-title-more {
                 color: #828282;
                 cursor: pointer;
@@ -509,6 +723,7 @@ const currentDateText = computed(() => {
                 border: 1px solid rgba(130, 130, 130, 0.5);
             }
         }
+
         .weather-chart {
             margin-top: 5px;
             width: 100%;
@@ -521,20 +736,24 @@ const currentDateText = computed(() => {
 .select-garden-popper {
     max-height: calc(100vh - 200px);
     overflow-y: auto;
+
     &.el-dropdown__popper {
         .el-dropdown__list {
             max-width: 250px;
         }
-        .el-dropdown-menu__item{
+
+        .el-dropdown-menu__item {
             background-color: transparent !important;
             color: #606266 !important;
         }
+
         .selected-active-garden {
             color: #2199f8 !important;
             background-color: rgba(33, 153, 248, 0.1) !important;
             font-weight: 500;
         }
     }
+
     .dropdown-default-text {
         font-size: 11px;
         color: #2199f8;

src/views/old_mini/growth_report/index.vue

@@ -3,9 +3,23 @@
         <!-- 天气遮罩 -->
         <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 组件：天气 -->
-        <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info" @weatherExpanded="weatherExpanded"
-            @changeGarden="changeGarden" :isGarden="true"></weather-info>
-        <div class="report-content-wrap" v-if="hasReport" v-loading="loading"
+        <div class="weather-info-wrap">
+            <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info"
+                @weatherExpanded="weatherExpanded" @changeGarden="changeGarden" @changeGardenTab="changeGardenTab"  :isGarden="true">
+                </weather-info>
+                
+            <!-- 邀请关注 -->
+            <div class="invite-follow" v-if="currentFarmName && activeGardenTab === 'current'">
+                <div class="invite-content">
+                    <icon name="share" />
+                    <span>邀请关注</span>
+                </div>
+            </div>
+        </div>
+        <div class="garden-list-wrap" v-show="activeGardenTab === 'list'">
+            <garden-list></garden-list>
+        </div>
+        <div class="report-content-wrap" v-if="hasReport && activeGardenTab === 'current'" v-loading="loading"
             element-loading-background="rgba(0, 0, 0, 0.1)">
             <!-- <div class="history-risk-report-btn" @click="handleHistoryRiskReportClick">
                 <span class="risk-report-icon">
@@ -32,11 +46,13 @@
 
                             <!-- 左滑查看更多 -->
                             <div class="swipe-more-tag" v-show="currentIndex < regionsData.length - 1">
-                                左滑查看更多分区
+                                <div>更多分区</div>
+                                左滑查看
                             </div>
                             <!-- 右滑查看更多 -->
                             <div class="swipe-more-tag" v-show="currentIndex === regionsData.length - 1">
-                                右滑查看更多分区
+                                <div>更多分区</div>
+                                右滑查看
                             </div>
                         </div>
 
@@ -75,7 +91,7 @@
                                         <div v-if="card.executionLimitDays || card.executionLimitDays === 0"
                                             class="tag-name"
                                             :style="{ borderColor: card.purposeColor, color: card.purposeColor }">限时 {{
-                                            card.executionLimitDays }} 天</div>
+                                                card.executionLimitDays }} 天</div>
                                         <div class="status-title"
                                             :class="{ 'status-title-small': (card.name || '').length > 6 }">
                                             {{ card.name }}
@@ -117,11 +133,11 @@
             </swipe>
         </div>
 
-        <div v-else class="fake-report-wrap report-content-wrap">
+        <div v-else-if="activeGardenTab === 'current'" class="fake-report-wrap report-content-wrap">
             <div class="report-content">
 
                 <img class="header-img" src="@/assets/img/home/report.png" alt="" />
-                <div class="report-header">
+                <div class="report-header" :class="{ 'no-farm': !currentFarmName }">
                     <!-- <img class="header-book" src="@/assets/img/home/book.png" alt="" /> -->
                     <div class="time-tag">{{ new Date().toISOString().split('T')[0] }}</div>
                     <div class="report-title" @click="handleAddFarm">作物长势报告</div>
@@ -173,10 +189,11 @@ import weatherInfo from "@/components/weatherInfo.vue";
 import { ref, onActivated, onDeactivated, onUnmounted, computed, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { Swipe, SwipeItem, Badge } from 'vant';
+import { Swipe, SwipeItem, Badge, Icon } from 'vant';
 import tipPopup from "@/components/popup/tipPopup.vue";
 import startInteractPopup from "@/components/popup/startInteractPopup.vue";
 import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
+import gardenList from "@/components/gardenList.vue";
 
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
@@ -211,6 +228,10 @@ const handleMaskClick = () => {
 };
 
 const currentFarmName = ref('');
+const activeGardenTab = ref('current');
+const changeGardenTab = (tab) => {
+    activeGardenTab.value = tab;
+}
 // 切换农场时，更新报告数据
 const changeGarden = async ({ id, name }) => {
     if (!id) return;
@@ -433,14 +454,54 @@ onUnmounted(() => {
         z-index: 11;
     }
 
-    .weather-info {
+    .weather-info-wrap {
         width: calc(100% - 20px);
         position: absolute;
         z-index: 12;
         left: 10px;
         top: 12px;
+
+        .weather-info {
+            width: 100%;
+        }
+        
+        .invite-follow {
+            position: absolute;
+            right: -6px;
+            top: 50px;
+            
+            .invite-content {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                font-size: 14px;
+                font-family: "PangMenZhengDao";
+                color: #fff;
+                line-height: 30px;
+                padding: 0 12px;
+                border-radius: 20px 0 0 20px;
+                height: 30px;
+                cursor: pointer;
+                background: #2199F8;
+                position: relative;
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -6px;
+                    right: 0;
+                    width: 0px;
+                    height: 0px;
+                    content: " ";
+                    border-right: 3px solid transparent;
+                    border-top: 3px solid #75a8cd;
+                    border-left: 3px solid #75a8cd;
+                    border-bottom: 3px solid transparent;
+                }
+            }
+        }
     }
 
+
     .fake-report-wrap {
         width: 100%;
 
@@ -663,7 +724,11 @@ onUnmounted(() => {
 
         .report-header {
             position: relative;
-            padding-top: 112px;
+            padding-top: 160px;
+
+            &.no-farm {
+                padding-top: 102px;
+            }
 
             .header-book {
                 position: absolute;
@@ -736,17 +801,18 @@ onUnmounted(() => {
                 right: -16px;
                 box-sizing: border-box;
                 width: 36px;
-                height: 134px;
-                padding: 0px 10px 2px 0;
+                height: 86px;
+                // padding: 0px 10px 2px 0;
                 background: rgba(0, 0, 0, 0.7);
                 border-radius: 10px 0 0 10px;
                 letter-spacing: 2px;
                 color: #ffffff;
                 font-size: 12px;
                 text-align: center;
-                line-height: 20px;
+                line-height: 14px;
                 writing-mode: vertical-rl;
                 text-orientation: mixed;
+                padding-right: 5px;
             }
         }