feat：修改录入信息页面逻辑样式

src/views/old_mini/entry_information/components/selectVariety.vue

@@ -8,30 +8,21 @@
 
             <!-- 品类 Tab + 品种选择，照常显示 -->
             <div class="category-tabs">
-                <div
-                    v-for="(tab, index) in categoryTabs"
-                    :key="tab.id"
-                    class="category-tab"
-                    :class="{
-                        active: activeCategoryId === tab.id,
-                        first: index === 0,
-                        last: index === categoryTabs.length - 1,
-                    }"
-                    @click="activeCategoryId = tab.id"
-                >
+                <div v-for="(tab, index) in categoryTabs" :key="tab.id" class="category-tab" :class="{
+                    active: activeCategoryId === tab.id,
+                    first: index === 0,
+                    last: index === categoryTabs.length - 1,
+                }">
                     <span>{{ tab.name }}</span>
                 </div>
             </div>
 
             <div class="variety-card">
-                <el-input
-                    v-model="searchKeyword"
-                    class="search-bar"
-                    placeholder="请输入品种"
-                    @keyup.enter="handleSearch"
-                >
+                <el-input v-model="searchKeyword" class="search-bar" placeholder="请输入品种" @keyup.enter="handleSearch">
                     <template #prefix>
-                        <el-icon class="search-icon"><Search /></el-icon>
+                        <el-icon class="search-icon">
+                            <Search />
+                        </el-icon>
                     </template>
                     <template #suffix>
                         <span class="search-btn" @click="handleSearch">搜索</span>
@@ -39,39 +30,32 @@
                 </el-input>
 
                 <div class="variety-grid">
-                    <div
-                        v-for="item in visibleVarieties"
-                        :key="item.id"
-                        class="variety-item"
-                        :class="{ selected: isSelected(item.id) }"
-                        @click="toggleVariety(item)"
-                    >
+                    <div v-for="item in visibleVarieties" :key="item.id" class="variety-item"
+                        :class="{ selected: isSelected(item.id) }" @click="toggleVariety(item)">
                         {{ item.name }}
                     </div>
                 </div>
 
-                <div
-                    v-if="filteredVarieties.length > DEFAULT_VISIBLE_COUNT"
-                    class="expand-trigger"
-                    @click="gridExpanded = !gridExpanded"
-                >
+                <div v-if="filteredVarieties.length > DEFAULT_VISIBLE_COUNT" class="expand-trigger"
+                    @click="gridExpanded = !gridExpanded">
                     {{ gridExpanded ? "点击收起" : "点击展开更多" }}
                 </div>
             </div>
 
             <!-- 默认表单卡：始终在已选卡片上方 -->
-            <div class="form-card">
-                <div class="form-card__header" @click="defaultFormExpanded = !defaultFormExpanded">
-                    <span class="title-icon"></span>
-                    <span class="title-text">选择品种</span>
-                    <el-icon class="arrow-icon" :class="{ folded: !defaultFormExpanded }">
-                        <ArrowDown />
-                    </el-icon>
+            <div class="form-card form-card--default">
+                <div class="form-card__header">
+                    <img class="title-icon" src="@/assets/img/home/label-icon.png" alt="" />
+                    <el-select v-model="defaultForm.varietyId" class="variety-select" placeholder="选择品种"
+                        popper-class="variety-select-popper"
+                        @change="handleDefaultVarietyChange">
+                        <el-option v-for="item in allVarieties" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
                 </div>
 
-                <div v-show="defaultFormExpanded" class="form-card__body">
+                <div class="form-card__body form-card__body--locked" @click="tipSelectVariety">
                     <div class="form-row">
-                        <span class="form-label muted">起种时间</span>
+                        <span class="form-label muted">起种点问题</span>
                         <el-date-picker
                             v-model="defaultForm.startTime"
                             class="form-picker"
@@ -80,53 +64,43 @@
                             format="YYYY-MM-DD"
                             value-format="YYYY-MM-DD"
                             :clearable="false"
+                            style="width: 130px"
+                            readonly
                         />
                     </div>
 
                     <div class="form-row">
                         <span class="form-label">种植亩数</span>
                         <el-input
-                            v-model="defaultForm.area"
+                            v-model.number="defaultForm.area"
                             class="form-input"
                             placeholder="请输入亩数"
                             type="number"
                         />
                     </div>
 
-                    <div class="form-row location-row" @click="handleSelectLocation(defaultForm)">
-                        <span class="form-label">
-                            选择种植点位{{ defaultForm.location ? "(已选)" : "" }}
-                        </span>
-                        <div v-if="defaultForm.location" class="map-thumb">
-                            <div class="map-thumb__pin-label">{{ defaultForm.location.name }}</div>
-                            <div class="map-thumb__pin"></div>
-                        </div>
-                        <span v-else class="form-placeholder">请选择点位</span>
+                    <div class="form-row location-row">
+                        <span class="form-label">选择种植点位</span>
+                        <div class="map" ref="defaultMapRef"></div>
                     </div>
                 </div>
             </div>
 
             <!-- 已选品种详情卡 -->
-            <div
-                v-for="item in selectedList"
-                :key="item.id"
-                class="form-card selected-card"
-            >
-                <div class="form-card__header" @click="toggleCardExpand(item.id)">
-                    <span class="title-icon"></span>
-                    <span class="title-text">{{ item.name }}</span>
-                    <el-icon
-                        class="arrow-icon"
-                        :class="{ folded: !item.expanded }"
-                    >
-                        <ArrowDown />
-                    </el-icon>
-                    <span class="delete-btn" @click.stop="removeVariety(item.id)">删除</span>
+            <div v-for="(item, index) in selectedList" :key="item.uid" class="form-card selected-card">
+                <div class="form-card__header">
+                    <img class="title-icon" src="@/assets/img/home/label-icon.png" alt="" />
+                    <el-select v-model="item.id" class="variety-select" placeholder="选择品种"
+                        popper-class="variety-select-popper"
+                        @change="(val) => handleSelectedVarietyChange(index, val)">
+                        <el-option v-for="opt in allVarieties" :key="opt.id" :label="opt.name" :value="opt.id" />
+                    </el-select>
+                    <span class="delete-btn" @click="removeVariety(item.uid)">删除</span>
                 </div>
 
-                <div v-show="item.expanded" class="form-card__body">
+                <div class="form-card__body">
                     <div class="form-row">
-                        <span class="form-label">起种时间</span>
+                        <span class="form-label">什么时候来一梢？</span>
                         <el-date-picker
                             v-model="item.startTime"
                             class="form-picker"
@@ -135,47 +109,212 @@
                             format="YYYY-MM-DD"
                             value-format="YYYY-MM-DD"
                             :clearable="false"
+                            style="width: 130px"
                         />
                     </div>
 
                     <div class="form-row">
                         <span class="form-label">种植亩数</span>
-                        <el-input
-                            v-model="item.area"
-                            class="form-input"
-                            placeholder="请输入亩数"
-                            type="number"
-                        />
+                        <el-input v-model="item.area" class="form-input" placeholder="请输入亩数" type="number" />
                     </div>
 
-                    <div class="form-row location-row" @click="handleSelectLocation(item)">
-                        <span class="form-label">
-                            选择种植点位{{ item.location ? "(已选)" : "" }}
-                        </span>
-                        <div v-if="item.location" class="map-thumb">
-                            <div class="map-thumb__pin-label">{{ item.location.name }}</div>
-                            <div class="map-thumb__pin"></div>
-                        </div>
-                        <span v-else class="form-placeholder">请选择点位</span>
+                    <div class="form-row location-row">
+                        <span class="form-label">选择种植点位</span>
+                        <div
+                            class="map map--clickable"
+                            :ref="(el) => setItemMapRef(item.uid, el)"
+                            @click="goSelectItemLocation(item)"
+                        ></div>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="custom-bottom-fixed-btns">
-            <div class="bottom-btn secondary-btn" @click="emit('prev')">上一步</div>
+            <div class="bottom-btn secondary-btn" @click="handlePrev">上一步</div>
             <div class="bottom-btn primary-btn" @click="handleConfirm">确定信息</div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
-import { ArrowDown, Search } from "@element-plus/icons-vue";
+import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import SelectLocationMap from "../map/selectLocationMap.js";
 
 const emit = defineEmits(["prev", "confirm"]);
+const router = useRouter();
+const store = useStore();
 
 const DEFAULT_VISIBLE_COUNT = 8;
+const DEFAULT_POINT = "POINT(113.6142086995688 23.585836479509055)";
+const LOCATION_KEY = "ENTRY_RESIDENT_LOCATION";
+const EDIT_UID_KEY = "ENTRY_VARIETY_EDIT_UID";
+const SELECTED_LIST_KEY = "ENTRY_SELECTED_VARIETY_LIST";
+const MAP_PADDING = [6, 6, 6, 6];
+let selectedUid = 0;
+
+const defaultMapRef = ref(null);
+let defaultPreviewMap = null;
+const itemPreviewMaps = new Map();
+
+function getDefaultPoint() {
+    return (
+        localStorage.getItem("MINI_USER_LOCATION_POINT") ||
+        store.state.home.miniUserLocationPoint ||
+        DEFAULT_POINT
+    );
+}
+
+function utilWktToCoordinate(point) {
+    const match = String(point).match(/POINT\s*\(([\d.\-]+)\s+([\d.\-]+)\)/i);
+    if (!match) return null;
+    return [Number(match[1]), Number(match[2])];
+}
+
+function createPreviewMap(el, point, showPoint = false) {
+    if (!el || !point) return null;
+    const map = new SelectLocationMap();
+    map.initMap(point, el, {
+        enableClick: false,
+        padding: MAP_PADDING,
+        showPoint,
+    });
+    nextTick(() => {
+        map.kmap?.map?.updateSize?.();
+    });
+    return map;
+}
+
+function destroyPreviewMap(map) {
+    map?.clearLayer();
+}
+
+function updateItemMap(uid, point, showPoint) {
+    const map = itemPreviewMaps.get(uid);
+    if (!map?.kmap || !point) return;
+    const coordinate = utilWktToCoordinate(point);
+    if (!coordinate) return;
+    if (showPoint) {
+        map.showPoint(coordinate);
+    } else {
+        map.hidePoint();
+        map.setMapPosition(coordinate, false);
+    }
+}
+
+function setItemMapRef(uid, el) {
+    if (!el) {
+        destroyPreviewMap(itemPreviewMaps.get(uid));
+        itemPreviewMaps.delete(uid);
+        return;
+    }
+    if (itemPreviewMaps.has(uid)) {
+        nextTick(() => itemPreviewMaps.get(uid)?.kmap?.map?.updateSize?.());
+        return;
+    }
+    nextTick(() => {
+        const item = selectedList.value.find((i) => i.uid === uid);
+        const point = item?.location || getDefaultPoint();
+        const map = createPreviewMap(el, point, !!item?.location);
+        if (map) itemPreviewMaps.set(uid, map);
+    });
+}
+
+function initDefaultMap() {
+    if (!defaultMapRef.value) return;
+    if (defaultPreviewMap) {
+        nextTick(() => defaultPreviewMap.kmap?.map?.updateSize?.());
+        return;
+    }
+    defaultPreviewMap = createPreviewMap(defaultMapRef.value, getDefaultPoint(), false);
+}
+
+function syncItemLocationFromSession() {
+    const uid = sessionStorage.getItem(EDIT_UID_KEY);
+    if (!uid) return;
+    sessionStorage.removeItem(EDIT_UID_KEY);
+    try {
+        const raw = sessionStorage.getItem(LOCATION_KEY);
+        const saved = raw ? JSON.parse(raw) : null;
+        if (!saved?.point) return;
+        const item = selectedList.value.find((i) => i.uid === uid);
+        if (!item) return;
+        item.location = saved.point;
+        saveSelectedListDraft();
+        nextTick(() => updateItemMap(uid, saved.point, true));
+    } catch {
+        // ignore
+    }
+}
+
+function saveSelectedListDraft() {
+    try {
+        sessionStorage.setItem(
+            SELECTED_LIST_KEY,
+            JSON.stringify({
+                selectedUid,
+                activeCategoryId: activeCategoryId.value,
+                list: selectedList.value,
+            })
+        );
+    } catch {
+        // ignore
+    }
+}
+
+function restoreSelectedListDraft() {
+    try {
+        const raw = sessionStorage.getItem(SELECTED_LIST_KEY);
+        if (!raw) return;
+        const draft = JSON.parse(raw);
+        if (draft?.activeCategoryId != null) {
+            activeCategoryId.value = draft.activeCategoryId;
+        }
+        if (typeof draft?.selectedUid === "number") {
+            selectedUid = draft.selectedUid;
+        }
+        if (Array.isArray(draft?.list)) {
+            selectedList.value = draft.list;
+        }
+    } catch {
+        // ignore
+    }
+}
+
+const goSelectItemLocation = (item) => {
+    sessionStorage.setItem(EDIT_UID_KEY, item.uid);
+    saveSelectedListDraft();
+    router.push({
+        path: "/entry_select_location",
+        query: { mapCenter: item.location || getDefaultPoint() },
+    });
+};
+
+onMounted(() => {
+    restoreSelectedListDraft();
+    syncItemLocationFromSession();
+    nextTick(() => initDefaultMap());
+});
+
+onActivated(() => {
+    restoreSelectedListDraft();
+    syncItemLocationFromSession();
+    nextTick(() => {
+        initDefaultMap();
+        itemPreviewMaps.forEach((map) => map.kmap?.map?.updateSize?.());
+    });
+});
+
+onBeforeUnmount(() => {
+    destroyPreviewMap(defaultPreviewMap);
+    defaultPreviewMap = null;
+    itemPreviewMaps.forEach((map) => destroyPreviewMap(map));
+    itemPreviewMaps.clear();
+});
 
 const categoryTabs = ref([
     {
@@ -222,18 +361,40 @@ const activeCategoryId = ref(1);
 const searchKeyword = ref("");
 const appliedKeyword = ref("");
 const gridExpanded = ref(false);
-const defaultFormExpanded = ref(true);
 const selectedList = ref([]);
 const defaultForm = reactive({
+    varietyId: "",
+    varietyName: "",
     startTime: "",
     area: "",
-    location: null,
 });
 
+watch(
+    selectedList,
+    () => {
+        saveSelectedListDraft();
+    },
+    { deep: true }
+);
+
 const currentCategory = computed(
     () => categoryTabs.value.find((tab) => tab.id === activeCategoryId.value) || categoryTabs.value[0]
 );
 
+const allVarieties = computed(() => {
+    const list = [];
+    for (const tab of categoryTabs.value) {
+        for (const item of tab.varieties || []) {
+            list.push({
+                ...item,
+                categoryId: tab.id,
+                categoryName: tab.name,
+            });
+        }
+    }
+    return list;
+});
+
 const filteredVarieties = computed(() => {
     const list = currentCategory.value?.varieties || [];
     const kw = appliedKeyword.value.trim();
@@ -260,43 +421,97 @@ const handleSearch = () => {
 };
 
 const createSelectedItem = (variety, category) => ({
+    uid: `sel-${++selectedUid}`,
     id: variety.id,
     name: variety.name,
     categoryId: category.id,
     categoryName: category.name,
-    expanded: true,
     startTime: "",
     area: "",
-    location: null,
+    location: "",
 });
 
+const resetDefaultForm = () => {
+    defaultForm.varietyId = "";
+    defaultForm.varietyName = "";
+    defaultForm.startTime = "";
+    defaultForm.area = "";
+};
+
+const tipSelectVariety = () => {
+    ElMessage.warning("请选择品种");
+};
+
+/** 顶部「选择品种」：选中后新增下方卡片，顶部表单重置为空 */
+const handleDefaultVarietyChange = (varietyId) => {
+    if (!varietyId) return;
+    const found = allVarieties.value.find((item) => item.id === varietyId);
+    if (!found) {
+        resetDefaultForm();
+        return;
+    }
+    if (!isSelected(found.id)) {
+        selectedList.value.unshift(
+            createSelectedItem(found, {
+                id: found.categoryId,
+                name: found.categoryName,
+            })
+        );
+        saveSelectedListDraft();
+    }
+    nextTick(() => {
+        resetDefaultForm();
+    });
+};
+
+const handleSelectedVarietyChange = (index, varietyId) => {
+    const found = allVarieties.value.find((item) => item.id === varietyId);
+    const item = selectedList.value[index];
+    if (!item || !found) return;
+    item.id = found.id;
+    item.name = found.name;
+    item.categoryId = found.categoryId;
+    item.categoryName = found.categoryName;
+    saveSelectedListDraft();
+};
+
 const toggleVariety = (variety) => {
     const index = selectedList.value.findIndex((item) => item.id === variety.id);
     if (index > -1) {
         selectedList.value.splice(index, 1);
+        saveSelectedListDraft();
         return;
     }
-    selectedList.value.push(createSelectedItem(variety, currentCategory.value));
-};
-
-const removeVariety = (id) => {
-    const index = selectedList.value.findIndex((item) => item.id === id);
-    if (index > -1) selectedList.value.splice(index, 1);
+    selectedList.value.unshift(createSelectedItem(variety, currentCategory.value));
+    saveSelectedListDraft();
 };
 
-const toggleCardExpand = (id) => {
-    const item = selectedList.value.find((v) => v.id === id);
-    if (item) item.expanded = !item.expanded;
+const removeVariety = (uid) => {
+    const index = selectedList.value.findIndex((item) => item.uid === uid);
+    if (index > -1) {
+        selectedList.value.splice(index, 1);
+        saveSelectedListDraft();
+    }
 };
 
-const handleSelectLocation = (item) => {
-    // TODO: 跳转选点 / 打开地图选点
-    if (!item.location) {
-        item.location = { name: "桂味点位", lat: 0, lng: 0 };
+const handlePrev = () => {
+    const idx = categoryTabs.value.findIndex((tab) => tab.id === activeCategoryId.value);
+    if (idx > 0) {
+        activeCategoryId.value = categoryTabs.value[idx - 1].id;
+        saveSelectedListDraft();
+        return;
     }
+    emit("prev");
 };
 
 const handleConfirm = () => {
+    const idx = categoryTabs.value.findIndex((tab) => tab.id === activeCategoryId.value);
+    if (idx > -1 && idx < categoryTabs.value.length - 1) {
+        activeCategoryId.value = categoryTabs.value[idx + 1].id;
+        saveSelectedListDraft();
+        return;
+    }
+    sessionStorage.removeItem(SELECTED_LIST_KEY);
     emit("confirm", {
         defaultForm: { ...defaultForm },
         varieties: selectedList.value.map(({ id, name, categoryId, categoryName, startTime, area, location }) => ({
@@ -314,7 +529,17 @@ const handleConfirm = () => {
 
 <style lang="scss" scoped>
 .select-variety {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
     &__content {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
         padding: 20px 10px 100px;
 
         .page-header {
@@ -344,36 +569,32 @@ const handleConfirm = () => {
                 justify-content: center;
                 color: #4e5969;
                 background: #e8f3ff;
-                clip-path: polygon(
-                    0 0,
-                    calc(100% - var(--arrow)) 0,
-                    100% 50%,
-                    calc(100% - var(--arrow)) 100%,
-                    0 100%,
-                    var(--arrow) 50%
-                );
+                cursor: default;
+                pointer-events: none;
+                clip-path: polygon(0 0,
+                        calc(100% - var(--arrow)) 0,
+                        100% 50%,
+                        calc(100% - var(--arrow)) 100%,
+                        0 100%,
+                        var(--arrow) 50%);
                 margin-left: -8px;
 
                 &.first {
                     margin-left: 0;
-                    clip-path: polygon(
-                        0 0,
-                        calc(100% - var(--arrow)) 0,
-                        100% 50%,
-                        calc(100% - var(--arrow)) 100%,
-                        0 100%
-                    );
+                    clip-path: polygon(0 0,
+                            calc(100% - var(--arrow)) 0,
+                            100% 50%,
+                            calc(100% - var(--arrow)) 100%,
+                            0 100%);
                 }
 
                 &.last {
-                    clip-path: polygon(
-                        0 0,
-                        calc(100% - var(--arrow)) 0,
-                        100% 50%,
-                        calc(100% - var(--arrow)) 100%,
-                        0 100%,
-                        var(--arrow) 50%
-                    );
+                    clip-path: polygon(0 0,
+                            calc(100% - var(--arrow)) 0,
+                            100% 50%,
+                            calc(100% - var(--arrow)) 100%,
+                            0 100%,
+                            var(--arrow) 50%);
                 }
 
                 &.active {
@@ -454,106 +675,103 @@ const handleConfirm = () => {
         .form-card {
             margin-bottom: 10px;
             background: #fff;
-            border-radius: 12px;
-            padding: 0 14px;
-            overflow: hidden;
+            border-radius: 10px;
+            padding: 12px;
 
             &__header {
                 display: flex;
                 align-items: center;
-                height: 48px;
-                border-bottom: 1px solid #f0f0f0;
+                border-bottom: .2px solid rgba(0, 0, 0, 0.2);
+                padding-bottom: 10px;
 
                 .title-icon {
-                    position: relative;
-                    width: 14px;
-                    height: 14px;
-                    flex-shrink: 0;
-                    margin-right: 8px;
-
-                    &::before,
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        width: 10px;
-                        height: 10px;
-                        border-radius: 50%;
-                    }
+                    width: 15px;
+                    object-fit: contain;
+                    margin-right: 5px;
+                }
 
-                    &::before {
-                        left: 0;
-                        top: 2px;
-                        background: #2199f8;
-                        opacity: 0.85;
-                    }
+                .variety-select {
+                    flex: 0 0 auto;
+                    width: auto !important;
+                    max-width: calc(100% - 50px);
 
-                    &::after {
-                        right: 0;
-                        top: 0;
-                        background: #7ec8ff;
-                        opacity: 0.9;
+                    :deep(.el-select__wrapper) {
+                        box-shadow: none;
+                        padding: 0;
+                        display: inline-flex;
+                        width: auto !important;
                     }
-                }
 
-                .title-text {
-                    font-size: 15px;
-                    color: #4e5969;
-                    font-weight: 500;
-                }
+                    :deep(.el-select__selection) {
+                        display: inline-flex;
+                        width: auto;
+                        flex: 0 0 auto;
+                    }
 
-                .arrow-icon {
-                    margin-left: 4px;
-                    font-size: 14px;
-                    color: #c0c4cc;
-                    transition: transform 0.2s;
+                    :deep(.el-select__placeholder) {
+                        position: static;
+                        font-size: 16px;
+                        color: #000;
+                        transform: none;
+                    }
 
-                    &.folded {
-                        transform: rotate(-90deg);
+                    :deep(.el-select__caret) {
+                        color: #000;
+                        font-size: 16px;
                     }
                 }
 
                 .delete-btn {
+                    flex-shrink: 0;
                     margin-left: auto;
+                    padding-left: 12px;
                     font-size: 14px;
                     color: #f53f3f;
                     line-height: 20px;
+                    white-space: nowrap;
                 }
             }
 
-            &__body {
-                padding: 8px 0 12px;
-            }
+            &--default {
+                .form-card__header {
+                    .variety-select {
 
-            &.selected-card {
-                .form-card__header .title-text {
-                    color: #1a1a1a;
+                        :deep(.el-select__selected-item),
+                        :deep(.el-select__placeholder) {
+                            color: rgba(34, 34, 34, 0.3);
+                        }
+
+                        :deep(.el-select__caret) {
+                            color: rgba(34, 34, 34, 0.3);
+                        }
+                    }
+                }
+
+                .form-card__body--locked {
+                    cursor: pointer;
+
+                    .form-row {
+                        pointer-events: none;
+                    }
                 }
             }
 
             .form-row {
                 display: flex;
                 align-items: center;
-                min-height: 52px;
-                padding: 10px 0;
+                justify-content: space-between;
+                gap: 12px;
+                margin-top: 10px;
 
                 .form-label {
-                    flex-shrink: 0;
-                    font-size: 15px;
-                    color: #1a1a1a;
-                    line-height: 22px;
+                    font-size: 14px;
+                    color: #1D2129;
 
                     &.muted {
-                        color: rgba(0, 0, 0, 0.35);
+                        color: rgba(29, 33, 41, 0.2);
                     }
                 }
 
-                .form-placeholder {
-                    flex: 1;
-                    text-align: right;
-                    font-size: 14px;
-                    color: rgba(0, 0, 0, 0.25);
-                }
-
                 .form-input {
                     flex: 1;
                     min-width: 0;
@@ -576,82 +794,19 @@ const handleConfirm = () => {
                     }
                 }
 
-                .form-picker {
-                    flex: 1;
-                    min-width: 0;
-                    width: auto;
-
-                    :deep(.el-input) {
-                        width: 100%;
-                    }
-
-                    :deep(.el-input__wrapper) {
-                        box-shadow: none;
-                        background: transparent;
-                        padding: 0;
-                        justify-content: flex-end;
-                    }
-
-                    :deep(.el-input__prefix),
-                    :deep(.el-input__suffix) {
-                        display: none;
-                    }
-
-                    :deep(.el-input__inner) {
-                        text-align: right;
-                        font-size: 14px;
-                        color: #1a1a1a;
-
-                        &::placeholder {
-                            color: rgba(0, 0, 0, 0.25);
-                        }
-                    }
-                }
-
-                &.location-row {
-                    .map-thumb {
-                        position: relative;
-                        width: 72px;
-                        height: 48px;
-                        margin-left: auto;
-                        border-radius: 6px;
-                        overflow: hidden;
-                        background:
-                            linear-gradient(135deg, rgba(80, 140, 100, 0.35), transparent 50%),
-                            linear-gradient(180deg, #c8d4c0 0%, #a8b898 45%, #8fa07a 100%);
-                        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
-
-                        &__pin-label {
-                            position: absolute;
-                            left: 50%;
-                            top: 4px;
-                            transform: translateX(-50%);
-                            max-width: 90%;
-                            padding: 1px 5px;
-                            background: rgba(0, 0, 0, 0.75);
-                            border-radius: 2px;
-                            color: #fff;
-                            font-size: 9px;
-                            line-height: 14px;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            z-index: 1;
-                        }
-
-                        &__pin {
-                            position: absolute;
-                            left: 50%;
-                            top: 55%;
-                            width: 10px;
-                            height: 10px;
-                            margin-left: -5px;
-                            background: #2199f8;
-                            border: 2px solid #fff;
-                            border-radius: 50% 50% 50% 0;
-                            transform: rotate(-45deg);
-                            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-                        }
+                .map {
+                    width: 98px;
+                    height: 60px;
+                    flex-shrink: 0;
+                    margin-left: auto;
+                    border-radius: 8px;
+                    overflow: hidden;
+                    background: linear-gradient(135deg, #e8eef3 0%, #d4dde6 100%);
+                    pointer-events: none;
+
+                    &--clickable {
+                        pointer-events: auto;
+                        cursor: pointer;
                     }
                 }
             }
@@ -659,15 +814,22 @@ const handleConfirm = () => {
     }
 
     .custom-bottom-fixed-btns {
-        gap: 12px;
-        background: transparent;
-        box-shadow: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 10px 12px 0 12px;
+        height: 80px;
+        background: #fff;
+        box-sizing: border-box;
+        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.4);
 
         .bottom-btn {
-            flex: 1;
-            padding: 12px 0;
-            font-size: 16px;
+            padding: 0 30px;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
             border-radius: 25px;
+            text-align: center;
         }
 
         .secondary-btn {
@@ -683,3 +845,10 @@ const handleConfirm = () => {
     }
 }
 </style>
+
+<style lang="scss">
+.variety-select-popper {
+    width: auto !important;
+    min-width: 100px !important;
+}
+</style>