|
@@ -0,0 +1,522 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="select-equipment">
|
|
|
|
|
+ <div class="select-equipment__content">
|
|
|
|
|
+ <div class="page-header">
|
|
|
|
|
+ <div class="page-title">请填写您的农场设备</div>
|
|
|
|
|
+ <div class="page-subtitle">完善设备信息,让农机调度更精准</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="toolbar">
|
|
|
|
|
+ <div class="search-bar">
|
|
|
|
|
+ <el-icon class="search-icon"><Search /></el-icon>
|
|
|
|
|
+ <input
|
|
|
|
|
+ v-model="searchKeyword"
|
|
|
|
|
+ class="search-input"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ placeholder="请输入农机名称"
|
|
|
|
|
+ @keyup.enter="handleSearch"
|
|
|
|
|
+ />
|
|
|
|
|
+ <div class="search-btn" @click="handleSearch">搜索</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="add-btn" @click="handleAddMachine">+ 添加农机</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="equipment-list" v-loading="loading">
|
|
|
|
|
+ <div v-for="group in displayGroups" :key="group.name" class="equipment-card">
|
|
|
|
|
+ <div class="section-title">
|
|
|
|
|
+ <span class="title-icon"></span>
|
|
|
|
|
+ <span>{{ group.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tag-group">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="item in group.items"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ class="tag-item"
|
|
|
|
|
+ :class="{ selected: selectedIds.has(String(item.id)) }"
|
|
|
|
|
+ @click="toggleSelect(item)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="text">{{ item.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-if="!loading && !displayGroups.length" class="empty-tip">暂无匹配农机</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="custom-bottom-fixed-btns">
|
|
|
|
|
+ <div class="btns-l">
|
|
|
|
|
+ <div class="bottom-btn secondary-btn" @click="emit('prev')">上一步</div>
|
|
|
|
|
+ <div class="bottom-btn secondary-btn" :class="{ disabled: submitting }" @click="handleSkip">
|
|
|
|
|
+ 跳过
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="bottom-btn primary-btn" :class="{ disabled: submitting }" @click="handleSubmit">
|
|
|
|
|
+ {{ submitting ? "提交中..." : "提交信息" }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { computed, onMounted, reactive, ref } from "vue";
|
|
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
|
|
+
|
|
|
|
|
+const emit = defineEmits(["prev", "confirm"]);
|
|
|
|
|
+
|
|
|
|
|
+const EQUIPMENT_KEY = "ENTRY_SELECTED_EQUIPMENT";
|
|
|
|
|
+const SELECTED_LIST_KEY = "ENTRY_SELECTED_VARIETY_LIST";
|
|
|
|
|
+const CATEGORY_SESSION_KEY = "ENTRY_SELECTED_CATEGORY";
|
|
|
|
|
+const LOCATION_KEY = "ENTRY_RESIDENT_LOCATION";
|
|
|
|
|
+const EDIT_UID_KEY = "ENTRY_VARIETY_EDIT_UID";
|
|
|
|
|
+const STEP_KEY = "ENTRY_INFORMATION_STEP";
|
|
|
|
|
+
|
|
|
|
|
+const loading = ref(false);
|
|
|
|
|
+const submitting = ref(false);
|
|
|
|
|
+const searchKeyword = ref("");
|
|
|
|
|
+const appliedKeyword = ref("");
|
|
|
|
|
+const selectedIds = reactive(new Set());
|
|
|
|
|
+const equipmentGroups = ref([]);
|
|
|
|
|
+
|
|
|
|
|
+const DEFAULT_GROUPS = [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: "水肥类",
|
|
|
|
|
+ items: [
|
|
|
|
|
+ { id: 101, name: "滴灌系统" },
|
|
|
|
|
+ { id: 102, name: "喷灌设备" },
|
|
|
|
|
+ { id: 103, name: "水肥一体机" },
|
|
|
|
|
+ { id: 104, name: "水泵机组" },
|
|
|
|
|
+ { id: 105, name: "施肥机" },
|
|
|
|
|
+ { id: 106, name: "过滤设备" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: "类别一",
|
|
|
|
|
+ items: [
|
|
|
|
|
+ { id: 201, name: "拖拉机" },
|
|
|
|
|
+ { id: 202, name: "旋耕机" },
|
|
|
|
|
+ { id: 203, name: "开沟机" },
|
|
|
|
|
+ { id: 204, name: "植保机" },
|
|
|
|
|
+ { id: 205, name: "无人机" },
|
|
|
|
|
+ { id: 206, name: "运输车" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: "类别二",
|
|
|
|
|
+ items: [
|
|
|
|
|
+ { id: 301, name: "修剪机" },
|
|
|
|
|
+ { id: 302, name: "采收机" },
|
|
|
|
|
+ { id: 303, name: "割草机" },
|
|
|
|
|
+ { id: 304, name: "粉碎机" },
|
|
|
|
|
+ { id: 305, name: "发电机" },
|
|
|
|
|
+ { id: 306, name: "其他设备" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+];
|
|
|
|
|
+
|
|
|
|
|
+const displayGroups = computed(() => {
|
|
|
|
|
+ const keyword = (appliedKeyword.value || "").trim();
|
|
|
|
|
+ if (!keyword) return equipmentGroups.value;
|
|
|
|
|
+ return equipmentGroups.value
|
|
|
|
|
+ .map((group) => ({
|
|
|
|
|
+ ...group,
|
|
|
|
|
+ items: group.items.filter((item) => item.name.includes(keyword)),
|
|
|
|
|
+ }))
|
|
|
|
|
+ .filter((group) => group.items.length);
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const allEquipmentItems = computed(() =>
|
|
|
|
|
+ equipmentGroups.value.flatMap((group) => group.items)
|
|
|
|
|
+);
|
|
|
|
|
+
|
|
|
|
|
+function readJson(key) {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const raw = sessionStorage.getItem(key);
|
|
|
|
|
+ return raw ? JSON.parse(raw) : null;
|
|
|
|
|
+ } catch {
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function restoreSelection() {
|
|
|
|
|
+ const cached = readJson(EQUIPMENT_KEY);
|
|
|
|
|
+ if (!Array.isArray(cached)) return;
|
|
|
|
|
+ cached.forEach((item) => {
|
|
|
|
|
+ if (item?.id != null) selectedIds.add(String(item.id));
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function saveSelectionDraft() {
|
|
|
|
|
+ const selected = allEquipmentItems.value.filter((item) =>
|
|
|
|
|
+ selectedIds.has(String(item.id))
|
|
|
|
|
+ );
|
|
|
|
|
+ sessionStorage.setItem(EQUIPMENT_KEY, JSON.stringify(selected));
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function fetchEquipmentList() {
|
|
|
|
|
+ loading.value = true;
|
|
|
|
|
+ // 暂无农机列表接口,使用本地默认数据
|
|
|
|
|
+ equipmentGroups.value = DEFAULT_GROUPS;
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleSearch = () => {
|
|
|
|
|
+ appliedKeyword.value = searchKeyword.value;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleAddMachine = () => {
|
|
|
|
|
+ ElMessage.info("添加农机功能即将开放");
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const toggleSelect = (item) => {
|
|
|
|
|
+ const id = String(item.id);
|
|
|
|
|
+ if (selectedIds.has(id)) {
|
|
|
|
|
+ selectedIds.delete(id);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ selectedIds.add(id);
|
|
|
|
|
+ }
|
|
|
|
|
+ saveSelectionDraft();
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+function getVarietyDraftList() {
|
|
|
|
|
+ const draft = readJson(SELECTED_LIST_KEY);
|
|
|
|
|
+ if (Array.isArray(draft)) return draft;
|
|
|
|
|
+ if (Array.isArray(draft?.list)) return draft.list;
|
|
|
|
|
+ return [];
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function getPhenophaseLabel(item) {
|
|
|
|
|
+ return item.phenophase || item.phenologyName || String(item.phenologyId || "");
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function buildPlotPayload(includeEquipment = true) {
|
|
|
|
|
+ const baForm = readJson("ENTRY_BA_FORM") || {};
|
|
|
|
|
+ const varietyList = getVarietyDraftList();
|
|
|
|
|
+ const equipmentList = includeEquipment
|
|
|
|
|
+ ? allEquipmentItems.value.filter((item) => selectedIds.has(String(item.id)))
|
|
|
|
|
+ : [];
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ user_name: baForm.name,
|
|
|
|
|
+ tel: baForm.phone,
|
|
|
|
|
+ crops: varietyList.map((item) => ({
|
|
|
|
|
+ crop_type: item.categoryName,
|
|
|
|
|
+ crop_id: Number(item.categoryId),
|
|
|
|
|
+ variety_list: [Number(item.id)],
|
|
|
|
|
+ phenophase: getPhenophaseLabel(item),
|
|
|
|
|
+ start_time: item.startTime,
|
|
|
|
|
+ plant_area: Number(item.area),
|
|
|
|
|
+ point: item.location,
|
|
|
|
|
+ })),
|
|
|
|
|
+ farm_machines: equipmentList.map((item) => ({
|
|
|
|
|
+ id: item.id,
|
|
|
|
|
+ name: item.name,
|
|
|
|
|
+ })),
|
|
|
|
|
+ };
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function clearEntrySession() {
|
|
|
|
|
+ sessionStorage.removeItem(SELECTED_LIST_KEY);
|
|
|
|
|
+ sessionStorage.removeItem(CATEGORY_SESSION_KEY);
|
|
|
|
|
+ sessionStorage.removeItem("ENTRY_BA_FORM");
|
|
|
|
|
+ sessionStorage.removeItem(LOCATION_KEY);
|
|
|
|
|
+ sessionStorage.removeItem(EDIT_UID_KEY);
|
|
|
|
|
+ sessionStorage.removeItem(EQUIPMENT_KEY);
|
|
|
|
|
+ sessionStorage.removeItem(STEP_KEY);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function submitEntry(includeEquipment = true) {
|
|
|
|
|
+ if (submitting.value) return;
|
|
|
|
|
+ const varietyList = getVarietyDraftList();
|
|
|
|
|
+
|
|
|
|
|
+ if (!varietyList.length) {
|
|
|
|
|
+ ElMessage.warning("请先完善种植品种信息");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ const baForm = readJson("ENTRY_BA_FORM");
|
|
|
|
|
+ if (!baForm?.name || !baForm?.phone) {
|
|
|
|
|
+ ElMessage.warning("请先完善个人信息");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ submitting.value = true;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const params = buildPlotPayload(includeEquipment);
|
|
|
|
|
+ console.log("entry submit params", params);
|
|
|
|
|
+ // const res = await VE_API.entry.addPlotInfo(params);
|
|
|
|
|
+ // if (res.code === 200) {
|
|
|
|
|
+ // ElMessage.success(res.msg || "提交成功");
|
|
|
|
|
+ // clearEntrySession();
|
|
|
|
|
+ // emit("confirm", params);
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // ElMessage.error(res.msg || "提交失败,请稍后再试");
|
|
|
|
|
+ // }
|
|
|
|
|
+ ElMessage.success("提交成功");
|
|
|
|
|
+ clearEntrySession();
|
|
|
|
|
+ emit("confirm", params);
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error("entry submit failed", error);
|
|
|
|
|
+ ElMessage.error("提交失败");
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ submitting.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleSkip = () => {
|
|
|
|
|
+ submitEntry(false);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleSubmit = () => {
|
|
|
|
|
+ submitEntry(true);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ restoreSelection();
|
|
|
|
|
+ fetchEquipmentList();
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.select-equipment {
|
|
|
|
|
+ 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: 8px 16px 80px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page-header {
|
|
|
|
|
+ padding: 8px 4px 16px;
|
|
|
|
|
+
|
|
|
|
|
+ .page-title {
|
|
|
|
|
+ font-size: 26px;
|
|
|
|
|
+ color: #005599;
|
|
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page-subtitle {
|
|
|
|
|
+ margin-top: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: rgba(46, 46, 46, 0.4);
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .toolbar {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-bar {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ padding: 0 12px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.5);
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+
|
|
|
|
|
+ .search-icon {
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.35);
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-btn {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ padding-left: 10px;
|
|
|
|
|
+ color: #2199f8;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .add-btn {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ padding: 0 12px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background: #2199f8;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .equipment-card {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ padding: 14px 12px 16px;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+
|
|
|
|
|
+ &::before,
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 10px;
|
|
|
|
|
+ height: 10px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 2px;
|
|
|
|
|
+ background: #2199f8;
|
|
|
|
|
+ opacity: 0.85;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ background: #7ec8ff;
|
|
|
|
|
+ opacity: 0.9;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tag-group {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
+ gap: 0 8px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ .tag-item {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ background: #f3f4f6;
|
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
|
+
|
|
|
|
|
+ .text {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ vertical-align: top;
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.selected {
|
|
|
|
|
+ border: 1px solid #2199f8;
|
|
|
|
|
+ background: #e8f5ff;
|
|
|
|
|
+ color: #2199f8;
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ top: -1px;
|
|
|
|
|
+ right: -1px;
|
|
|
|
|
+ width: 18px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ background: url("@/assets/img/home/checked-bg-top.png") no-repeat bottom right / 18px 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .empty-tip {
|
|
|
|
|
+ padding: 40px 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.35);
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .custom-bottom-fixed-btns {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: baseline;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ padding: 12px 12px 0;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.4);
|
|
|
|
|
+ .btns-l {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .bottom-btn {
|
|
|
|
|
+ padding: 0 30px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ border-radius: 25px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ &.disabled {
|
|
|
|
|
+ opacity: 0.6;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .secondary-btn {
|
|
|
|
|
+ padding: 0 26px;
|
|
|
|
|
+ color: #2199f8;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border: 1px solid #2199f8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .primary-btn {
|
|
|
|
|
+ background: #2199f8;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|