feiniao-farm-h5/src/views/old_mini/create_farm/index.vue

<template>
    <div class="create-farm">
        <custom-header :name="paramsType === 'client' ? '新增用户' : paramsType === 'edit' ? '编辑农场': '创建农场'" :isGoBack="true" @goback="backgToHome"></custom-header>
        <!-- 地图 -->
        <div class="map-container" ref="mapContainer"></div>
        <div class="farm-content">
            <div class="top-mask"></div>
            <div class="farm-filter">
                <el-select
                    v-model="locationVal"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="搜索位置"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="handleSearchRes"
                    popper-class="location-search-popper"
                >
                    <el-option
                        v-for="(item, index) in locationOptions.list"
                        :key="index"
                        :label="item.title"
                        :value="{ value: item.point, item }"
                    >
                        <span>{{ item.title }}</span>
                        <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
                    </el-option>
                </el-select>
            </div>

            <!-- 创建 -->
            <div class="create-wrap">
                <div class="create-box">
                    <div class="box-content">
                        <div class="create-title">
                            <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
                            {{ paramsType === 'client' ? "新增用户" : paramsType === 'edit' ?"编辑农场":"创建农场" }}
                        </div>
                        <div class="create-content">
                            <div class="create-from">
                                <el-form
                                    ref="ruleFormRef"
                                    :model="ruleForm"
                                    :rules="rules"
                                    class="demo-ruleForm"
                                >
                                    <el-form-item label="农场位置" prop="address">
                                        <div class="position-wrap">
                                            <el-input
                                                placeholder="农场位置"
                                                readonly
                                                v-model="ruleForm.address"
                                                autocomplete="off"
                                            />
                                            <div class="draw-btn" @click="toSubPage">{{ hasDefaultPolygon ? '点击勾选地块' : '新增地块' }}</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="种植作物" prop="speciesItem">
                                        <div class="select-wrap">
                                            <el-select
                                                @change="changeSpecie"
                                                class="select-item"
                                                v-model="ruleForm.speciesItem"
                                                placeholder="作物类型"
                                            >
                                                <el-option
                                                    v-for="(item, index) in specieList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="{ value: item.id, ...item }"
                                                />
                                            </el-select>
                                            <el-select
                                                v-model="ruleForm.phenologyId"
                                                placeholder="物候期"
                                                class="period-select select-item"
                                            >
                                                <el-option
                                                    v-for="(item, index) in phenologyList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.id"
                                                />
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="联系人" prop="fzr">
                                        <div class="area-box">
                                            <el-input
                                                placeholder="请输入联系人姓名"
                                                v-model="ruleForm.fzr"
                                                autocomplete="off"
                                                style="width: fit-content"
                                            />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="tel">
                                        <div class="area-box">
                                            <el-input
                                                placeholder="请输入联系人电话"
                                                v-model="ruleForm.tel"
                                                autocomplete="off"
                                                style="width: fit-content"
                                            />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="农场面积" prop="mu">
                                        <div class="area-box">
                                            <el-input
                                                :placeholder="isFromEditMap ? '勾选地块获得农场面积' : '请输入亩数'"
                                                v-model="ruleForm.mu"
                                                :readonly="isFromEditMap"
                                                type="text"
                                                autocomplete="off"
                                                style="width: fit-content"
                                                @input="handleMianjiInput"
                                                @keypress="handleMianjiKeypress"
                                            />
                                            <div class="unit">亩</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="农场名称" prop="name">
                                        <el-input
                                            placeholder="请输入您的农场名称"
                                            v-model="ruleForm.name"
                                            autocomplete="off"
                                        />
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="create-btn">
                                <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">
                                    {{ paramsType === 'client' ? "添加" : paramsType === 'edit' ?"确认修改":"立即创建" }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import IndexMap from "./map/index.js";
import { useRoute, useRouter } from "vue-router";
import { mapLocation } from "./map/index.js";
import { onMounted, ref, reactive, watch, onActivated } from "vue";
import { useStore } from "vuex";
import { convertPointToArray } from "@/utils/index";
import { ElMessage } from "element-plus";
import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";

const route = useRoute();
const router = useRouter();
const store = useStore();

const indexMap = new IndexMap();
const mapContainer = ref(null);

// 标记是否从编辑地图页面确认返回
const isFromEditMap = ref(false);

// 标记是否已创建默认地块
const hasDefaultPolygon = ref(false);

/**
 * 根据中心点生成指定边长的正方形地块WKT
 * @param {Array} center - 中心点坐标 [lng, lat]
 * @param {Number} sideLength - 正方形边长(米)
 * @returns {Object} 包含WKT字符串和面积(亩)的对象
 */
function generateSquarePolygonBySideLength(center, sideLength) {
    // 确保输入是数字类型
    const lng = parseFloat(center[0]);
    const lat = parseFloat(center[1]);
    
    // 半边长(米)
    const halfSide = sideLength / 2;
    
    // 纬度方向:1度约等于111000米
    const latDelta = halfSide / 111000;
    
    // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
    const lngDelta = halfSide / (111000 * Math.cos(lat * Math.PI / 180));
    
    // 计算四个顶点(逆时针顺序)
    const topLeft = [lng - lngDelta, lat + latDelta];
    const topRight = [lng + lngDelta, lat + latDelta];
    const bottomRight = [lng + lngDelta, lat - latDelta];
    const bottomLeft = [lng - lngDelta, lat - latDelta];
    
    // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
    // 明确使用join来格式化坐标点
    const formatPoint = (point) => `${point[0]} ${point[1]}`;
    const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft]
        .map(formatPoint)
        .join(', ');
    
    // 注意：MULTIPOLYGON 和括号之间需要有一个空格
    const wkt = `MULTIPOLYGON (((${coordinates})))`;
    
    // 计算面积(亩): 边长200米 = 40,000平方米 ≈ 60亩
    const areaInSquareMeters = sideLength * sideLength;
    const areaInMu = (areaInSquareMeters / 666.67).toFixed(2);
    
    return { wkt, area: areaInMu };
}

/**
 * 根据中心点和亩数生成正方形地块WKT
 * @param {Array} center - 中心点坐标 [lng, lat]
 * @param {Number} mu - 面积(亩)
 * @returns {Object} 包含WKT字符串和面积(亩)的对象
 */
function generateSquarePolygonByMu(center, mu) {
    // 确保输入是数字类型
    const lng = parseFloat(center[0]);
    const lat = parseFloat(center[1]);
    
    // 1亩 ≈ 666.67平方米
    const areaInSquareMeters = mu * 666.67;
    // 正方形边长(米)
    const sideLength = Math.sqrt(areaInSquareMeters);
    // 半边长(米)
    const halfSide = sideLength / 2;
    
    // 纬度方向:1度约等于111000米
    const latDelta = halfSide / 111000;
    
    // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
    const lngDelta = halfSide / (111000 * Math.cos(lat * Math.PI / 180));
    
    // 计算四个顶点(逆时针顺序)
    const topLeft = [lng - lngDelta, lat + latDelta];
    const topRight = [lng + lngDelta, lat + latDelta];
    const bottomRight = [lng + lngDelta, lat - latDelta];
    const bottomLeft = [lng - lngDelta, lat - latDelta];
    
    // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
    const formatPoint = (point) => `${point[0]} ${point[1]}`;
    const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft]
        .map(formatPoint)
        .join(', ');
    
    // 注意：MULTIPOLYGON 和括号之间需要有一个空格
    const wkt = `MULTIPOLYGON (((${coordinates})))`;
    
    return { wkt, area: parseFloat(mu).toFixed(2) };
}

onMounted(() => {
    // 清除上一次的地块数据，确保每次进入都是全新状态
    store.commit("home/SET_FARM_POLYGON", null);
    isFromEditMap.value = false; // 初始化时可以手动输入
    hasDefaultPolygon.value = false; // 初始化时没有默认地块
    
    centerPoint.value = store.state.home.miniUserLocationPoint;
    const arr = convertPointToArray(centerPoint.value);
    getLocationName(`${arr[1]},${arr[0]}`);
    indexMap.initMap(centerPoint.value, mapContainer.value);

    // 不再初始化时绘制默认地块，等待用户点击"新增地块"按钮
    // 清空地块和面积数据
    polygonArr.value = null;
    ruleForm.mu = '';

    getSpecieList();
});

const polygonArr = ref(null);
const paramsType = ref(null);
onActivated(() => {
    paramsType.value = route.query.type;
    
    // 如果是从 home 页面进入，重置所有数据
    if (route.query.isFromHome) {
        // 清除旧的地块数据
        store.commit("home/SET_FARM_POLYGON", null);
        isFromEditMap.value = false; // 从home进入，可以手动输入
        hasDefaultPolygon.value = false; // 重置默认地块状态
        
        centerPoint.value = store.state.home.miniUserLocationPoint;
        const arr = convertPointToArray(centerPoint.value);
        getLocationName(`${arr[1]},${arr[0]}`);
        indexMap.setMapPosition(arr);
        
        indexMap.clearLayer();
        
        // 不再自动生成默认地块，等待用户点击"新增地块"
        polygonArr.value = null;
        ruleForm.mu = '';
        
        return; // 直接返回，不执行下面的逻辑
    }
    
    indexMap.clearLayer();
    // 绘制勾画范围（从edit_map返回的情况）
    const polygonData = store.state.home.polygonData;
    if (polygonData) {
        // 检查地块数据是否有效（数组存在且不为空）
        const hasValidGeometry = polygonData.geometryArr && 
                                 Array.isArray(polygonData.geometryArr) && 
                                 polygonData.geometryArr.length > 0;
        
        if (hasValidGeometry) {
            // 用户从edit_map返回，且有有效的地块数据
            // 根据 isConfirmed 判断是否锁定输入框
            if (polygonData.isConfirmed) {
                // 用户点击了"确认"按钮，锁定输入框并显示精确面积
                isFromEditMap.value = true;
                ruleForm.mu = polygonData.mianji;
            } else {
                // 用户点击了"取消"，不锁定输入框，面积保持原样
                isFromEditMap.value = false;
                // 面积输入框保持之前的值，不更新
            }
            indexMap.setAreaGeometry(polygonData.geometryArr);
            polygonArr.value = polygonData.geometryArr;
            // 有地块数据时，标记已创建默认地块
            hasDefaultPolygon.value = true;
        } else {
            // 用户在编辑页面删除了所有地块
            // 重置所有状态
            polygonArr.value = null;
            ruleForm.mu = '';
            isFromEditMap.value = false;
            hasDefaultPolygon.value = false;
        }
    } else if (centerPoint.value && polygonArr.value) {
        // 没有新的编辑数据，保持当前地块
        // 同样需要检查数据有效性
        if (Array.isArray(polygonArr.value) && polygonArr.value.length > 0) {
            indexMap.setAreaGeometry(polygonArr.value);
            // 保持 hasDefaultPolygon 状态
        }
    }
});

// 搜索
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const locationVal = ref(null);
const locationOptions = reactive({
    list: [],
});
const loading = ref(false);
const remoteMethod = async (keyword) => {
    if (keyword) {
        locationOptions.list = [];
        loading.value = true;
        const params = {
            key: MAP_KEY,
            keyword,
            location: route.query.userLocation || "113.61702297075017,23.584863449735067",
        };
        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
            if (data && data.length) {
                data.forEach((item) => {
                    item.point = item.location.lat + "," + item.location.lng;
                    locationOptions.list.push(item);
                });
            }
        });
        VE_API.old_mini_map.search(params).then(({ data }) => {
            loading.value = false;
            data.forEach((item) => {
                item.point = item.location.lat + "," + item.location.lng;
                locationOptions.list.push(item);
            });
        });
    } else {
        locationOptions.list = [];
    }
};

const handleSearchRes = (v) => {
    const parts = v.value.split(",");
    let { latitude, longitude } = transformFromGCJToWGS(parseFloat(parts[0]), parseFloat(parts[1]));
    const coordinateArray = [longitude, latitude];
    indexMap.setMapPosition(coordinateArray);
    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`;
    ruleForm.address = v.item?.title || v.item?.address;
    pointAddress.value = v.item?.province + v.item?.city + v.item?.district;
};

// 表单
const ruleFormRef = ref(null);
const ruleForm = reactive({
    address: "",
    mu: "",
    speciesItem: null,
    phenologyId: "",
    name: "",
    fzr: "",
    tel: "",
});
// 自定义验证规则：验证面积必须是大于0的数字
const validateMianji = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入农场面积'));
    } else {
        const num = parseFloat(value);
        if (isNaN(num)) {
            callback(new Error('面积必须是数字'));
        } else if (num <= 0) {
            callback(new Error('面积必须大于0'));
        } else {
            callback();
        }
    }
};

const rules = reactive({
    address: [{ required: true, message: "请选择农场位置", trigger: "blur" }],
    mu: [
        { required: true, message: "请输入农场面积", trigger: "blur" },
        { validator: validateMianji, trigger: ["blur", "change"] }
    ],
    speciesItem: [{ required: true, message: "请选择品类", trigger: "blur" }],
    phenologyId: [{ required: true, message: "请选择物候期", trigger: "blur" }],
    name: [{ required: true, message: "请输入您的农场名称", trigger: "blur" }],
    fzr: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
    tel: [
        { required: true, message: "请输入联系人电话", trigger: "blur" },
        { 
            pattern: /^1[3-9]\d{9}$/, 
            message: "请输入正确的手机号码", 
            trigger: "blur" 
        }
    ],
});

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const params = {
                ...ruleForm,
                wkt: centerPoint.value,
                speciesId: ruleForm.speciesItem?.id,
                containerId: ruleForm.speciesItem?.defaultContainerId,
                geom: polygonArr.value,
            };
            VE_API.farm.saveFarm(params).then((res) => {
                ElMessage.success("创建成功");
                // 重置表单和地块数据
                ruleFormRef.value.resetFields();
                store.commit("home/SET_FARM_POLYGON", null);
                polygonArr.value = null;
                isFromEditMap.value = false;
                // 返回首页并显示成功弹窗
                router.replace("/home?reload=true&showSuccess=true");
            });
            console.log("submit!", params);
        } else {
            console.log("error submit!");
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    // 清除地块数据
    store.commit("home/SET_FARM_POLYGON", null);
    polygonArr.value = null;
    isFromEditMap.value = false;
    hasDefaultPolygon.value = false; // 重置默认地块状态
    if(route.query.isFromHome) {
        router.replace("/home?reload=true");
        return;
    }
    router.go(-1)
};

const centerPoint = ref(null);

function toSubPage() {
    // 如果还没有默认地块，先创建默认地块
    if (!hasDefaultPolygon.value) {
        if (centerPoint.value) {
            const arr = convertPointToArray(centerPoint.value);
            const squareData = generateSquarePolygonBySideLength(arr, 200);  // 200米边长
            const geometryData = {
                geometryArr: [squareData.wkt],
                mianji: squareData.area,
            };
            
            // 绘制默认地块
            indexMap.setAreaGeometry(geometryData.geometryArr);
            
            // 保存地块数据
            polygonArr.value = geometryData.geometryArr;
            
            // 标记已创建默认地块
            hasDefaultPolygon.value = true;
            
            // 不跳转，停留在当前页面
            return;
        }
    }
    
    // 如果已有默认地块，则跳转到编辑页面
    // 保存到store中以便在编辑页面回显
    if (polygonArr.value) {
        const polygonData = {
            geometryArr: polygonArr.value,
            mianji: ruleForm.mu || '',  // 保存用户输入的面积，如果没有输入则为空
            isConfirmed: false,  // 标记：还未从编辑页面确认返回
        };
        store.commit("home/SET_FARM_POLYGON", polygonData);
    }
    
    router.push(
        `/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.address}&pointAddress=${pointAddress.value}`
    );
}

const pointAddress = ref(null);
function getLocationName(location) {
    const params = {
        key: MAP_KEY,
        location,
    };
    VE_API.old_mini_map.location(params).then(({ result }) => {
        // locationVal.value = result.formatted_addresses.recommend;
        const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
        ruleForm.address = add;
        pointAddress.value = result.address;
    });
}

watch(
    () => mapLocation.data,
    (newValue, oldValue) => {
        if (newValue) {
            let { latitude, longitude } = transformFromWGSToGCJ(newValue[1], newValue[0]);
            centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`;
            getLocationName(`${latitude},${longitude}`);
        }
    }
);

const specieList = ref([]);

function getSpecieList() {
    VE_API.farm.fetchSpecieList().then(({ data }) => {
        specieList.value = data;
    });
}

function changeSpecie(v) {
    getPhenology(v.defaultContainerId);
}

const phenologyList = ref([]);
function getPhenology(containerId) {
    VE_API.farm.fetchPhenologyList({ containerId }).then(({ data }) => {
        phenologyList.value = data;
    });
}

function backgToHome() {
    ruleFormRef.value?.resetFields();
    if(route.query.isFromHome) {
        router.replace("/home?reload=true");
        return;
    }
    router.go(-1)
}

// 处理面积按键输入 - 只允许数字和小数点
function handleMianjiKeypress(event) {
    // 如果是从编辑地图返回的，不允许手动修改
    if (isFromEditMap.value) {
        event.preventDefault();
        return;
    }
    
    const charCode = event.which ? event.which : event.keyCode;
    const char = String.fromCharCode(charCode);
    
    // 允许数字 (0-9) 和小数点 (.)
    if (!/^[0-9.]$/.test(char)) {
        event.preventDefault();
        return;
    }
    
    // 如果已经有小数点，不允许再输入小数点
    const currentValue = ruleForm.mu || '';
    if (char === '.' && currentValue.includes('.')) {
        event.preventDefault();
        return;
    }
    
    // 不允许以小数点开头
    if (char === '.' && !currentValue) {
        event.preventDefault();
        return;
    }
}

// 处理面积输入
let mianjiInputTimer = null;
function handleMianjiInput(value) {
    // 如果是从编辑地图返回的，不允许手动修改
    if (isFromEditMap.value) {
        return;
    }
    
    // 过滤非法字符，只保留数字和小数点
    let filteredValue = value.replace(/[^\d.]/g, '');
    
    // 确保只有一个小数点
    const parts = filteredValue.split('.');
    if (parts.length > 2) {
        filteredValue = parts[0] + '.' + parts.slice(1).join('');
    }
    
    // 限制小数点后最多2位
    if (parts.length === 2 && parts[1].length > 2) {
        filteredValue = parts[0] + '.' + parts[1].substring(0, 2);
    }
    
    // 更新输入框的值（如果被过滤了）
    if (filteredValue !== value) {
        ruleForm.mu = filteredValue;
        return;
    }
    
    // 清除之前的定时器
    if (mianjiInputTimer) {
        clearTimeout(mianjiInputTimer);
    }
    
    // 防抖处理，用户停止输入500ms后再更新地块
    mianjiInputTimer = setTimeout(() => {
        const mu = parseFloat(filteredValue);
        
        // 验证输入的有效性
        if (!mu || isNaN(mu) || mu <= 0) {
            return;
        }
        
        // 根据亩数重新生成地块
        if (centerPoint.value) {
            const arr = convertPointToArray(centerPoint.value);
            const squareData = generateSquarePolygonByMu(arr, mu);
            
            const geometryData = {
                geometryArr: [squareData.wkt],
                mianji: squareData.area,
            };
            
            // 清除旧地块
            indexMap.clearLayer();
            // 绘制新地块
            indexMap.setAreaGeometry(geometryData.geometryArr);
            
            // 更新状态
            polygonArr.value = geometryData.geometryArr;
            // 标记已创建默认地块
            hasDefaultPolygon.value = true;
        }
    }, 500);
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-form-item--default{
        margin-bottom: 20px;
    }
}
.create-farm {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .map-container {
        width: 100%;
        height: calc(100% - 240px);
    }
    .farm-content {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        pointer-events: none;
        z-index: 2;
        .top-mask {
            height: 100px;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
        }
    }
    .farm-filter {
        pointer-events: all;
        margin: 12px;
        position: relative;
        z-index: 10;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        &::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 9px;
            width: 14px;
            height: 14px;
            background: url("@/assets/img/home/search.png") no-repeat center center / 100% 100%;
        }

        ::v-deep {
            .el-select__wrapper {
                background: none;
                box-shadow: none;
                padding-left: 34px;
                font-size: 12px;
                .el-select__selected-item,
                .el-select__placeholder,
                .el-select__input {
                    color: rgba(255, 255, 255, 0.6);
                    &.is-transparent {
                        color: #ccc;
                        font-size: 12px;
                    }
                }
            }
            .el-select {
                transition: all 0.3s;
                .el-input.is-focus .el-input__wrapper {
                    box-shadow: none !important;
                }
            }
            .el-input {
                .el-input__wrapper {
                    background: none;
                    box-shadow: none;
                    padding-left: 18px;
                    font-size: 11px;
                    .el-input__inner {
                        color: rgba(255, 255, 255, 0.6);
                    }
                    &.is-focus {
                        .el-input__inner {
                            color: #ccc;
                            font-size: 11px;
                        }
                    }
                }
            }
        }
    }

    .create-wrap {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, transparent 0%, #f5f7fb 20%);
    }

    .create-box {
        pointer-events: all;
        margin: 0 12px 10px 12px;
        width: calc(100% - 24px);
        background: #e0f1fe;
        border-radius: 14px;
        .box-content {
            position: relative;
            &::after {
                position: absolute;
                right: 10px;
                top: 2px;
                content: "";
                width: 79px;
                height: 72px;
                background: url("@/assets/img/home/creat-bg.png") no-repeat center / 100% 100%;
            }
        }
        .create-title {
            display: flex;
            align-items: center;
            padding: 12px 6px 12px 12px;
            color: #0089f5;
            font-size: 18px;
            font-weight: bold;
            .title-icon {
                width: 18px;
                padding-right: 10px;
            }
        }
        .create-content {
            background: #fff;
            border-radius: 14px;
            padding: 12px;
            position: relative;
            z-index: 2;

            .create-from {
                .select-wrap {
                    display: flex;
                    // width: 86%;
                    ::v-deep {
                        .el-input__wrapper {
                            background: none;
                            box-shadow: none;
                        }
                        .el-input__inner {
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.5);
                        }
                        .el-select__wrapper {
                            background: none;
                            box-shadow: none;
                            gap: 2px;
                            padding: 4px 2px;
                            justify-content: center;
                        }
                        .el-select__selection {
                            flex: none;
                            width: fit-content;
                        }
                        .el-select__placeholder {
                            color: #000;
                            position: static;
                            transform: none;
                            width: fit-content;
                        }
                    }
                    // .select-item {
                    //     width: fit-content;
                    // }
                    .period-select {
                        margin-left: 6px;
                    }
                    .select-item {
                        min-width: 76px;
                    }
                }
                ::v-deep {
                    .el-form-item__label {
                        color: #000;
                    }
                    .el-form-item__error {
                        top: 117%;
                    }
                    .el-form-item {
                        position: relative;
                        &::after {
                            content: "";
                            position: absolute;
                            left: 60px;
                            bottom: -5px;
                            width: calc(100% - 60px);
                            height: 1px;
                            background: rgba(0, 0, 0, 0.08);
                        }
                    }
                    .el-input__wrapper {
                        box-shadow: none;
                        padding: 1px 6px;
                        // border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                    }
                }
                .area-box {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    .unit {
                        padding-right: 10px;
                    }
                }
                .position-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .draw-btn {
                        flex: none;
                        padding: 0 12px;
                        height: 30px;
                        line-height: 30px;
                        box-sizing: border-box;
                        color: #2199f8;
                        border: 1px solid #2199f8;
                        background: rgba(33, 153, 248, 0.1);
                        border-radius: 20px;
                        font-size: 12px;
                    }
                }
            }
            .create-btn {
                display: flex;
                align-items: center;
                width: 100%;
                padding-top: 10px;
                .btn-item {
                    flex: 1;
                    text-align: center;
                    padding: 0 11px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 34px;
                    font-size: 16px;
                    box-sizing: border-box;
                    &.sencond-btn {
                        border: 1px solid rgba(153, 153, 153, 0.5);
                        color: #666666;
                    }
                    &.primary-btn {
                        background: linear-gradient(180deg, #76c3ff, #2199f8);
                        color: #fff;
                    }
                }
                .btn-item + .btn-item {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.location-search-popper {
    .el-select-dropdown__list {
        max-width: 96vw;
        overflow-x: auto;
    }
    .sub-title {
        padding-left: 6px;
        font-size: 12px;
        color: #ccc;
    }
}
</style>